/**
 * Webinar LP 2026 — Type 1
 * Section-specific layout. All primitives consumed from landing-2026-v5.css.
 */

/* ── Material Symbols base (scoped to this template) ─────────────────── */

.lp26-page--webinar-type-1 .material-symbols-outlined {
    font-family: 'Material Symbols Outlined', sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    user-select: none;
    -webkit-user-select: none;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Hero: 2-column with sticky form on the left ─────────────────────── */

.lp26-webinar-t1-hero {
    padding: 0;
}

/* Figma 2196:18757 — only the FORM column sits on `Colors/RG Olive/2`
   (#f8faf8), a soft olive-tinted off-white. The right rail stays on the
   page's default white background. The form-card itself is a slightly
   translucent white so it lifts off the olive tint behind it. */
.lp26-webinar-t1-hero__form-col {
    background: var(--rg-olive-2);
}

.lp26-webinar-t1-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Kill the global `.lp26-container` horizontal padding (Spacing/8 on
       each side) on this hero only — the form column has its own olive-2
       background that needs to extend all the way to the container edge,
       and the form-sticky already provides its own internal gutter. The
       container's padding is restored on the right rail below so the
       hero copy keeps its Spacing/8 gutter from the container edge. */
    padding-left: 0;
    padding-right: 0;
    /* No align-items here — form col must stretch to row height so its
       sticky child has a tall enough containing block to actually stick
       while the right rail scrolls. Stretching matches the form-col's
       bottom edge to the content-col's bottom edge, which is what makes
       the sticky form's bottom anchor to the bottom of the right rail's
       last content when the user finishes scrolling the hero. */
}

.lp26-webinar-t1-hero__form-sticky {
    position: sticky;
    /* Sticky pin = page header bottom (`top: 32px` + 56px header height).
       The form-sticky's `padding-top: var(--rg-space-9)` (64px) then
       drops the form-card 64px below the header bottom — the SAME gap
       the form-card has above it in the un-stuck initial state, so the
       padding above the form is preserved consistently as you scroll. */
    top: calc(var(--rg-space-6) + 56px);
    /* Vertical paddings match the content-col's `var(--rg-space-9)` so
       that initially the form-card top aligns with the right rail's
       first content (pill), and at the end of the hero the form-card
       bottom aligns with the right rail's last content. The 48px left
       and right padding (Figma 2196:18757) gives the form-card matching
       gutters inside the form column. */
    padding: var(--rg-space-9) var(--rg-space-8);
}

.lp26-webinar-t1-hero__form-card {
    border: 1px solid var(--rg-olive-5);
    border-radius: var(--rg-radius-2);
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: var(--rg-shadow-form);
    padding: var(--rg-space-6);
}

.lp26-webinar-t1-hero__content-col {
    /* No padding and no flex gap — each section's own
       `padding: var(--rg-space-9) 0` provides 64px above AND 64px below
       so consecutive sections have 128px between content blocks
       (matching the Figma rhythm: a Spacing/9 below one section + a
       Spacing/9 above the next). */
    /* Right rail keeps the container's Spacing/8 gutter on both sides
       (we zeroed it on `.lp26-webinar-t1-hero__inner` so the form column's
       olive bg can reach the container edge). */
    padding: 0 var(--rg-space-8);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Treat all four right-rail blocks (intro, sessions, walkaway, whofor)
   as peer "sections" with uniform `--rg-space-9` padding top AND bottom.
   To do that without restructuring the DOM, we flatten the __top wrapper
   via `display: contents` so its children (intro + sessions) become
   direct flex children of content-col alongside walkaway + whofor. */
.lp26-webinar-t1-hero__top {
    display: contents;
}

.lp26-webinar-t1-hero__intro,
.lp26-webinar-t1-sessions,
.lp26-webinar-t1-walkaway,
.lp26-webinar-t1-whofor {
    padding-top: var(--rg-space-9);
    padding-bottom: var(--rg-space-9);
}

/* ── Hero intro: pill + heading + subtitle ───────────────────────────── */

.lp26-webinar-t1-hero__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rg-space-6);
}

.lp26-webinar-t1-hero__pill {
    display: inline-flex;
    align-items: center;
    background: var(--rg-accent-9);
    color: var(--rg-accent-contrast);
    padding: var(--rg-space-1) var(--rg-space-4);
    border-radius: var(--rg-radius-full);
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-b1);
    font-weight: 500;
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
}

.lp26-webinar-t1-hero__title {
    margin: 0;
    color: var(--rg-accent-12);
    font-family: var(--rg-font-heading);
    font-size: var(--rg-fs-display);
    font-weight: 400;
    line-height: var(--rg-lh-display);
    letter-spacing: var(--rg-ls-display);
}

.lp26-webinar-t1-hero__title em,
.lp26-webinar-t1-hero__title i {
    font-style: italic;
    color: var(--rg-accent-9);
    font-weight: 400;
}

.lp26-webinar-t1-hero__subtitle,
.lp26-webinar-t1-hero__subtitle p {
    margin: 0;
    color: var(--rg-neutral-11);
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-b1);
    font-weight: 400;
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
}

/* ── Live sessions block ─────────────────────────────────────────────── */

.lp26-webinar-t1-sessions {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-5);
}

.lp26-webinar-t1-sessions__label {
    margin: 0;
    color: var(--rg-neutral-11);
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-b1);
    font-weight: 500;
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
    text-transform: uppercase;
}

.lp26-webinar-t1-sessions__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-4);
}

.lp26-webinar-t1-sessions__row {
    display: flex;
    align-items: center;
    gap: var(--rg-space-2);
}

.lp26-webinar-t1-sessions__icon {
    color: var(--rg-accent-9);
    font-size: 24px;
    line-height: 1;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.lp26-webinar-t1-sessions__value {
    color: var(--rg-accent-9);
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-h5);
    font-weight: 600;
    line-height: var(--rg-lh-h5);
}

/* ── Countdown ───────────────────────────────────────────────────────── */

.lp26-webinar-t1-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rg-space-1);
    height: 88px;
}

.lp26-webinar-t1-countdown__cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--rg-space-4);
    padding: var(--rg-space-4);
    background: var(--rg-neutral-1);
    border: 1px solid var(--rg-neutral-3);
    text-align: center;
}

.lp26-webinar-t1-countdown__value {
    color: var(--rg-accent-11);
    font-family: var(--rg-font-heading);
    font-size: var(--rg-fs-h4);
    font-weight: 600;
    line-height: var(--rg-lh-h4);
}

.lp26-webinar-t1-countdown__label {
    color: var(--rg-neutral-11);
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-sm);
    font-weight: 400;
    line-height: 16px;
    letter-spacing: -0.2px;
    text-transform: uppercase;
}

/* ── Walk-away list ──────────────────────────────────────────────────── */

.lp26-webinar-t1-walkaway {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-6);
    /* padding-top covered by the shared section rule above. */
}

.lp26-webinar-t1-walkaway__title {
    margin: 0;
    color: var(--rg-accent-12);
    font-family: var(--rg-font-heading);
    font-size: var(--rg-fs-h3-lg);
    font-weight: 600;
    line-height: var(--rg-lh-h3-lg);
}

.lp26-webinar-t1-walkaway__title em,
.lp26-webinar-t1-walkaway__title i {
    font-style: italic;
    color: var(--rg-accent-9);
}

.lp26-webinar-t1-walkaway__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-5);
}

.lp26-webinar-t1-walkaway__item {
    display: flex;
    align-items: flex-start;
    gap: var(--rg-space-2);
}

.lp26-webinar-t1-walkaway__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}

img.lp26-webinar-t1-walkaway__icon-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}

.lp26-webinar-t1-walkaway__text {
    flex: 1 1 auto;
    color: var(--rg-neutral-12);
    font-family: var(--rg-font-body);
    font-size: var(--rg-fs-b1);
    font-weight: 500;
    line-height: var(--rg-lh-b1);
    letter-spacing: var(--rg-ls-body);
}

/* ── Who-for cards ───────────────────────────────────────────────────── */

.lp26-webinar-t1-whofor {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-6);
    /* padding-top covered by the shared section rule above. */
}

.lp26-webinar-t1-whofor__title {
    margin: 0;
    color: var(--rg-accent-12);
    font-family: var(--rg-font-heading);
    font-size: var(--rg-fs-h3-lg);
    font-weight: 600;
    line-height: var(--rg-lh-h3-lg);
}

.lp26-webinar-t1-whofor__title em,
.lp26-webinar-t1-whofor__title i {
    font-style: italic;
    color: var(--rg-accent-9);
}

.lp26-webinar-t1-whofor__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-2);
}

.lp26-webinar-t1-whofor__card {
    /* Desktop layout: horizontal card — 84×84 image on the left, title
       vertically centered on the right. Card padding is 16 top/bottom,
       24 left/right (Figma 2459:9285) for a total 116px card height
       (16 + 84 + 16). */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--rg-space-5);
    padding: var(--rg-space-4) var(--rg-space-5);
    background: var(--rg-olive-1);
    border: 1px solid var(--rg-olive-5);
}

.lp26-webinar-t1-whofor__img-wrap {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

img.lp26-webinar-t1-whofor__img {
    width: 84px;
    height: 84px;
    object-fit: contain;
    display: block;
}

.lp26-webinar-t1-whofor__card-title,
.lp26-webinar-t1-whofor__card-title p {
    margin: 0;
    color: var(--rg-accent-12);
    font-family: var(--rg-font-heading);
    font-size: var(--rg-fs-h4);
    font-weight: 600;
    line-height: var(--rg-lh-h4);
}

.lp26-webinar-t1-whofor__card-title em,
.lp26-webinar-t1-whofor__card-title i {
    font-style: italic;
    color: var(--rg-accent-9);
}

/* ── Mobile: collapse to single column, form unsticks ────────────────── */

@media (max-width: 900px) {

    /* Container side padding: lp26-container defaults to space-5 (24px) on
       mobile; Figma webinar mobile sits at 16px (358 inside 390). Override
       just for this template's hero inner. */
    .lp26-page--webinar-type-1 .lp26-container {
        padding-left: var(--rg-space-4);
        padding-right: var(--rg-space-4);
    }

    /* On mobile we flatten the grid into a single column. The Figma flow
       is: hero copy → sessions → form → walk-away → who-for. To keep the
       desktop DOM/grid wiring untouched we use `display: contents` on
       content-col so its children (__top, walkaway, whofor) become flex
       items of inner alongside form-col, then reorder via `order`. */
    .lp26-webinar-t1-hero__inner {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: var(--rg-space-9) var(--rg-space-4) 0;
    }

    .lp26-webinar-t1-hero__content-col {
        display: contents;
    }

    .lp26-webinar-t1-hero__top    { order: 1; }
    .lp26-webinar-t1-hero__form-col { order: 2; }
    .lp26-webinar-t1-walkaway     { order: 3; }
    .lp26-webinar-t1-whofor       { order: 4; }

    /* Re-establish __top as a real flex container on mobile (desktop now
       flattens it via `display: contents`). Mobile keeps intro + sessions
       grouped above the form, separated by Figma's 48px gap. The intro/
       sessions desktop padding-top is also reset here — on mobile the
       gap between them is 48 (the inner flex `gap`), not 64. */
    .lp26-webinar-t1-hero__top {
        display: flex;
        flex-direction: column;
        gap: var(--rg-space-8);
    }
    .lp26-webinar-t1-hero__intro,
    .lp26-webinar-t1-sessions {
        padding-top: 0;
    }

    /* Form: unstick + use padding to set the 48px gap to the sessions
       block above and the 64px gap to the walk-away block below. */
    .lp26-webinar-t1-hero__form-sticky {
        position: static;
        padding: var(--rg-space-8) 0 var(--rg-space-9) 0;
    }
    .lp26-webinar-t1-hero__form-card {
        padding: var(--rg-space-5);
    }

    /* Hero title: Figma `Heading/Mobile/H1/Regular` — Playfair 36/38.
       The shared `--rg-fs-mobile-display` token is 32/34 (used for
       display copy on other templates) so we inline the 36/38 here. */
    .lp26-webinar-t1-hero__title {
        font-size: 36px;
        line-height: 38px;
        letter-spacing: 0;
    }

    /* Walk-Away + Who-For columns: Figma applies 64px padding top AND
       bottom to each column; we previously only had top. */
    .lp26-webinar-t1-walkaway,
    .lp26-webinar-t1-whofor {
        padding: var(--rg-space-9) 0;
    }

    .lp26-webinar-t1-walkaway__title,
    .lp26-webinar-t1-whofor__title {
        font-size: var(--rg-fs-mobile-h3);
        line-height: var(--rg-lh-mobile-h3);
    }

    /* Walk-Away item text: Figma `Body/B1/Regular` (weight 400). The
       desktop default is 500 so we override for mobile only. */
    .lp26-webinar-t1-walkaway__text {
        font-weight: 400;
    }

    /* Who-For card: mobile stays VERTICAL (image stacked above title)
       per Figma 2460:16051 — desktop went horizontal (84×84 left, title
       right) but mobile keeps the 80×80 illustration on top with 32px
       gap and 32px padding around. */
    .lp26-webinar-t1-whofor__card {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rg-space-6);
        padding: var(--rg-space-6);
    }
    .lp26-webinar-t1-whofor__img-wrap,
    img.lp26-webinar-t1-whofor__img {
        width: 80px;
        height: 80px;
    }

    /* Countdown: unfix the desktop 88px height so the cell can grow if
       a label wraps, but keep the visual minimum. */
    .lp26-webinar-t1-countdown {
        height: auto;
    }
    .lp26-webinar-t1-countdown__cell {
        min-height: 88px;
    }
}