/* Speaker grid (webinar-landing/speakers.php). */

.rd-wl-speakers {
    padding-block: var(--rd-spacing-xx-lg);
    background: linear-gradient(90deg, var(--rd-wl-accent-soft), var(--rd-wl-accent-border));
}

.rd-wl-speaker-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--rd-spacing-lg);
    padding: 0;
    margin: 0;
    list-style: none;
}

.rd-wl-speaker {
    min-width: 0;
}

.rd-wl-speaker-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--rd-wl-radius-card);
    background: var(--rd-green-200);
}

/* Photo backdrops rotate through four accent colours. */
.rd-wl-speaker:nth-child(4n + 2) .rd-wl-speaker-photo {
    background: var(--rd-chip-accent-geteilt);
}

.rd-wl-speaker:nth-child(4n + 3) .rd-wl-speaker-photo {
    background: var(--rd-accent-1-100);
}

.rd-wl-speaker:nth-child(4n + 4) .rd-wl-speaker-photo {
    background: var(--rd-blue-200);
}

.rd-wl-speaker img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

/* Figma: black fade over the lower 40% of the photo, name and role 24px from the edges */
.rd-wl-speaker-photo > div {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: end;
    flex-direction: column;
    padding: var(--rd-spacing-x-big);
    background: linear-gradient(transparent 60%, var(--rd-wl-darkest));
    color: var(--rd-font-light);
    line-height: 1.32;
    letter-spacing: 0.01em; /* Figma 1% — percentage letter-spacing is not supported everywhere yet */
}

.rd-wl .rd-wl-speaker h3 {
    font-size: var(--rd-fontsize-6);
    font-weight: var(--rd-fontweights-open-sans-0);
    letter-spacing: 0.01em; /* Figma 1% — percentage letter-spacing is not supported everywhere yet */
    margin: 0 0 var(--rd-spacing-x-sm);
}

.rd-wl-speaker p {
    margin: 0;
}

.rd-wl-speaker-text {
    padding: var(--rd-spacing-md) var(--rd-spacing-x-sm) 0;
    font-size: var(--rd-fontsize-4);
    line-height: 1.6;
}

.rd-wl-speaker-text p + p {
    margin-top: var(--rd-spacing-x-sm);
}

.rd-wl-speaker .rd-wl-speaker-talk {
    font-weight: var(--rd-fontweights-open-sans-1);
    color: var(--rd-wl-dark);
}

@media (max-width: 1100px) {
    .rd-wl-speaker-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--rd-spacing-x-big);
    }
}

@media (max-width: 760px) {
    .rd-wl-speakers {
        padding-block: var(--rd-spacing-lg);
        overflow: hidden;
    }

    /* Figma mobile: the row runs to the screen's right edge and the next card peeks in by ~32px,
       so it reads as a slider. The negative margin undoes the section's right padding. */
    .rd-wl-speaker-list {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: var(--rd-spacing-x-big);
        margin-inline-end: calc(-1 * var(--rd-spacing-md));
        padding-bottom: var(--rd-spacing-sm);
        padding-inline-end: var(--rd-spacing-md);
        scrollbar-width: none;
    }

    /* Capped at Figma's mobile card size: on a wide phone or a small tablet the row shows more
       cards instead of one card taller than the screen. */
    .rd-wl-speaker {
        flex: 0 0 min(calc(100% - 40px), 320px);
        scroll-snap-align: start;
    }

    .rd-wl-speaker-photo {
        aspect-ratio: 1 / 1.08;
    }

    .rd-wl .rd-wl-speaker h3 {
        font-size: var(--rd-fontsize-6);
    }

    .rd-wl-speaker p {
        font-size: var(--rd-fontsize-5);
    }
}