/* Componente webinar-inscripcion (webinar, v2 #61). Solo tokens de style.css.
 * La banda, los anillos y el título son de `seccion`; los datos, chips de
 * shell. Aquí la disposición y la tarjeta destacada del formulario: blanca,
 * con la sombra más alta y una franja verde arriba.
 * Estrecho: los chips en fila (bajan de línea si no caben) y la tarjeta debajo.
 * Ancho: los chips en columna a la izquierda y la tarjeta a la derecha.
 * Dentro del contenido de una página (bloque `acanda/webinar-inscripcion`,
 * #90) se ve igual: la tipografía de lectura de `.pf-bloques` no entra en los
 * bloques ACANDA (#101). */

.pf-webinar-inscripcion__interior {
    display: grid;
    gap: var(--pf-space-md) var(--pf-space-xl);
}

.pf-webinar-inscripcion__datos {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--pf-space-2xs);
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-webinar-inscripcion__datos > li {
    display: flex;
    max-width: 100%;
    margin: 0;
}

/* La fecha completa es larga para un chip: si no cabe (360px con el
 * espaciado de texto de 1.4.12), baja de línea dentro del chip. */
.pf-webinar-inscripcion__datos .pf-chip {
    white-space: normal;
}

.pf-webinar-inscripcion__tarjeta {
    position: relative;
    min-width: 0;
    padding: clamp(var(--pf-space-md), 4vw, var(--pf-space-xl)) clamp(var(--pf-space-md), 3vw, var(--pf-space-lg));
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-xl);
    box-shadow: var(--pf-shadow-xl);
}

.pf-webinar-inscripcion__tarjeta::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    height: 4px;
    background-color: var(--pf-color-brand);
    border-radius: var(--pf-radius-xl) var(--pf-radius-xl) 0 0;
}

/* El salto desde la cabecera deja algo de aire sobre el título. */
.pf-webinar-inscripcion {
    scroll-margin-top: var(--pf-space-sm);
}

@media (min-width: 1025px) {
    .pf-webinar-inscripcion__interior {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        align-items: start;
    }

    .pf-webinar-inscripcion__datos {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pf-space-xs);
    }
}