/* =================================================================== WEBINAR PLAYER section css =================================================================== */
.webinar-player {
    position: relative;
    padding-block: 0 var(--sectionGap);

    &::before {
        position: absolute;
        inset: 0 0 auto;
        height: 160px;
        background: var(--blue-50);
        content: "";
    }

    & .container { position: relative; }

    & .webinar-player__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        align-items: start;
        gap: var(--sp50);
    }

    & .webinar-player__frame {
        position: relative;
        aspect-ratio: 16 / 9;
        background: var(--surface-1);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-sm);
        overflow: hidden;

        & img, & iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
    }

    /* Play button over the poster — the replay card's play icon, centred and
       larger. The link covers the whole poster and opens the recording in a
       new tab. */
    & .webinar-player__play {
        position: absolute; inset: 0;
        display: grid; place-items: center;

        & span {
            display: grid; place-items: center;
            width: 84px; height: 84px;
            background: var(--white);
            border-radius: var(--r-full);
            color: var(--primary);
            box-shadow: 0 0 0 10px rgba(255, 255, 255, .25), var(--shadow-sm);
            transition: var(--transition);
        }
        & svg { width: 28px; height: 28px; margin-left: 4px; }
        &:hover span, &:focus-visible span { background: var(--primary); color: var(--white); }
    }

    & .webinar-player__bar {
        display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
        gap: var(--sp10) var(--sp20);
        margin-top: var(--sp20);
        padding: var(--sp20) var(--sp25);
        background: var(--blue-50);
        border-radius: var(--r-md);
    }

    & .webinar-player__bar-text { font-size: var(--f15); font-weight: 600; color: var(--ink); }

    & .webinar-player__summary { margin-top: var(--sp50); max-width: var(--container-xs); }

    & .webinar-player__heading { margin-bottom: var(--sp15); font-size: var(--f28); }

    & .webinar-player__text { font-size: var(--f18); }

    & .webinar-player__aside { position: sticky; top: 160px; }

    & .webinar-player__card {
        display: flex; flex-direction: column;
        gap: var(--sp20);
        padding: var(--sp30);
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-sm);

        & .btn { width: 100%; }
    }

    & .webinar-player__card-title { font-size: var(--f20); letter-spacing: -.01em; }

    & .webinar-player__facts {
        display: grid;

        & div {
            display: flex; justify-content: space-between;
            gap: var(--sp15);
            padding-block: var(--sp12);
            border-bottom: 1px solid var(--line);
        }
        & dt { font-size: var(--f14); color: var(--muted); }
        & dd { font-size: var(--f14); font-weight: 600; text-align: right; color: var(--ink); }
    }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 1199.98px) {
    .webinar-player {
        & .webinar-player__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp40); }
    }
}

@media (max-width: 991.98px) {
    .webinar-player {
        & .webinar-player__grid { grid-template-columns: 1fr; }
        & .webinar-player__aside { position: static; max-width: 520px; }
    }
}

@media (max-width: 575.98px) {
    .webinar-player {
        &::before { height: 80px; }
        & .webinar-player__frame { border-radius: var(--r-md); }
        & .webinar-player__play span { width: 64px; height: 64px; }
        & .webinar-player__play svg { width: 22px; height: 22px; }
        & .webinar-player__bar { padding: var(--sp15) var(--sp20); }
    }
}