/* Componente webinar-ponentes (webinar, v2 #61, tarjetas verticales #116).
 * Solo tokens de style.css. La banda y el título son de `seccion`.
 * Cada persona, una tarjeta blanca con borde y sombra suave (nodo del ERP):
 * arriba el retrato a todo el ancho en un marco 2:3 (el de las fotos reales,
 * 682×1024, que así salen enteras) y debajo el nombre y la descripción
 * completa. Como el equipo de bonsaibi.com; el de Nosotros sigue en círculo.
 * Rejilla alineada con el título de la sección y columnas según el ancho del
 * marco (no el de la ventana) y cuántos son: una por fila en estrecho; dos,
 * tres o cuatro en fila si caben con un ancho cómodo; cuatro que no caben,
 * dos y dos (nunca tres y una). Tarjetas de 19rem como mucho (22rem en un
 * marco estrecho, una debajo de otra), así que nunca se estiran a todo el
 * contenedor.
 * Sin foto: las iniciales en verde sobre los anillos, que se abren al asomar
 * (ilustracion animada; con movimiento reducido, quietos), en el mismo marco. */

.pf-webinar-ponentes__marco {
    container-type: inline-size;
}

.pf-webinar-ponentes__lista {
    display: grid;
    grid-template-columns: minmax(0, 22rem);
    gap: var(--pf-space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Dos en fila: dos tarjetas de 15rem y el hueco. Una sola, ya de 19rem. */
@container (min-width: 32rem) {
    .pf-webinar-ponentes__lista {
        grid-template-columns: repeat(2, minmax(0, 19rem));
    }

    .pf-webinar-ponentes__lista--1 {
        grid-template-columns: minmax(0, 19rem);
    }
}

/* Tres en fila: tres tarjetas de 16rem y los huecos. */
@container (min-width: 52rem) {
    .pf-webinar-ponentes__lista--3 {
        grid-template-columns: repeat(3, minmax(0, 19rem));
    }
}

/* Cuatro en fila: cuatro tarjetas de 15rem y los huecos; si no, dos y dos. */
@container (min-width: 66rem) {
    .pf-webinar-ponentes__lista--4 {
        grid-template-columns: repeat(4, minmax(0, 19rem));
    }
}

.pf-webinar-ponentes__ponente {
    display: flex;
    min-width: 0;
}

/* Todas las de una fila, igual de altas (la rejilla las estira). */
.pf-webinar-ponentes__tarjeta {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    overflow: clip;
    background-color: var(--pf-color-surface);
    border: 1px solid var(--pf-color-border);
    border-radius: var(--pf-radius-card);
    box-shadow: var(--pf-shadow-md);
}

/* El marco: mismo alto con foto y sin ella. */
.pf-webinar-ponentes__retrato {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    overflow: clip;
    background-color: var(--pf-color-bg-inset);
}

.pf-webinar-ponentes__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Las caras suelen estar en el tercio de arriba. */
    object-position: center 30%;
}

/* Sin foto: nodo verde suave con las iniciales y los anillos detrás. */
.pf-webinar-ponentes__iniciales {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    font-size: var(--pf-text-2xl);
    font-weight: var(--pf-weight-black);
    color: var(--pf-color-brand-strong);
    background-color: var(--pf-color-brand-soft);
    border: 4px solid var(--pf-color-surface);
    border-radius: var(--pf-radius-round);
    box-shadow: var(--pf-shadow-md);
}

.pf-webinar-ponentes__anillos {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    /* El segundo anillo (r 136 de 640) queda a ~1rem del nodo. */
    width: 22rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.pf-webinar-ponentes__texto {
    flex: 1;
    padding: var(--pf-space-md);
}

.pf-webinar-ponentes__nombre {
    margin: 0 0 var(--pf-space-2xs);
    font-size: var(--pf-text-lg);
    line-height: var(--pf-leading-snug);
}

.pf-webinar-ponentes__contexto {
    margin: 0;
    line-height: var(--pf-leading-normal);
    color: var(--pf-color-text-soft);
}