/* =================================================================== LIVE HERO section css =================================================================== */
.live-hero {
    position: relative;
    padding-block: var(--sp80) var(--sp100);
    background: var(--blue-50);
    border-bottom: 1px solid var(--line);
    overflow: hidden;

    & .live-hero__ring {
        position: absolute;
        border: 1px solid var(--blue-100);
        border-radius: var(--r-full);
        pointer-events: none;
    }
    & .live-hero__ring--1 { top: -220px; right: -160px; width: 620px; height: 620px; }
    & .live-hero__ring--2 { bottom: -260px; left: -200px; width: 520px; height: 520px; }

    & .container { position: relative; z-index: 1; }

    & .live-hero__grid {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: center;
        gap: var(--sp80);

        /* registration card switched off in Theme Settings */
        &.live-hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
    }

    & .live-hero__crumbs {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: var(--sp8);
        margin-bottom: var(--sp30);
        font-size: var(--f14);
        color: var(--muted);

        & li { display: flex; align-items: center; gap: var(--sp8); }
        & li + li::before { content: "/"; opacity: .5; }
        & a { color: var(--ink); transition: var(--transition); }
        & a:hover { color: var(--primary); }
    }

    & .live-hero__pill { margin-bottom: var(--sp25); }

    & .live-hero__title { max-width: 640px; }

    & .live-hero__sub {
        margin-top: var(--sp20);
        font-size: var(--f20);
        font-weight: 600;
        color: var(--ink);
    }

    & .live-hero__lead { max-width: 600px; margin-top: var(--sp15); font-size: var(--f16); }

    & .live-hero__meta {
        display: grid;
        grid-template-columns: repeat(4, auto);
        justify-content: start;
        gap: var(--sp15) var(--sp40);
        margin-top: var(--sp40);
        padding-block: var(--sp25);
        border-top: 1px solid var(--line);
        border-bottom: 1px solid var(--line);

        & dt {
            font-size: var(--f13);
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: var(--muted);
        }
        & dd { font-size: var(--f16); font-weight: 600; color: var(--ink); }
    }

    & .live-hero__actions { margin-top: var(--sp40); }

    & .live-hero__note {
        margin-top: var(--sp20);
        font-size: var(--f13);
        font-style: italic;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--muted);
    }

    & .live-hero__card { border: 1px solid var(--line); }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 1199.98px) {
    .live-hero {
        & .live-hero__grid { gap: var(--sp50); }
        & .live-hero__meta { grid-template-columns: repeat(2, auto); }
    }
}

@media (max-width: 991.98px) {
    .live-hero {
        & .live-hero__grid { grid-template-columns: 1fr; }
        & .live-hero__card-wrap { max-width: 560px; }
    }
}

@media (max-width: 575.98px) {
    .live-hero {
        & .live-hero__meta { grid-template-columns: 1fr 1fr; gap: var(--sp15) var(--sp20); }
    }
}