/*
 * home-v2.css -- styles for templates/home-v2.php only.
 *
 * Deliberately a separate stylesheet rather than an appended block in
 * theme.css: this is a one-off marketing page, nothing else uses these rules,
 * and llb_theme_assets() enqueues this file only when that template is active
 * so no other page pays for it.
 *
 * Everything is namespaced .hv2-* and reuses the design tokens already declared
 * at the top of theme.css (--ll-accent, --ll-ink, --ll-muted, --ll-line,
 * --ll-card, --ll-radius-*) rather than introducing a parallel
 * palette. The one literal colour, #11263a for the dark band, is already used
 * elsewhere in theme.css.
 */

.hv2 {
    --hv2-navy: #11263a;
    --hv2-teal: #2f7f7a;
    --hv2-rust: var(--ll-accent);
    --hv2-inset: clamp(1rem, 4vw, 3.5rem);
    font-family: var(--ll-ui-font);
}

/* The theme's .main caps width at 1240px; this page runs full-bleed so the
   badge strip and dark band can span the viewport, with each section's own
   .hv2-inner restoring the content width. Mirrors how .main--tutor opts out. */
.llb-home-v2-page .main--home-v2 {
    max-width: none;
    padding: 0;
}

.hv2-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding-left: var(--hv2-inset);
    padding-right: var(--hv2-inset);
}

/* ---------- Hero ---------- */

.hv2-hero {
    background: #fff;
    border-bottom: 1px solid var(--ll-line);
    overflow: hidden;
}

.hv2-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    /* Cumulatively 42px tighter top and bottom than the original
       clamp(2.5rem,6vw,5rem): 24px, then a further 18px. */
    padding-top: clamp(.25rem, 3.2vw, 2.375rem);
    padding-bottom: clamp(.25rem, 3.2vw, 2.375rem);
}

/* Hero at 75%, Case of the Day rail at 25%.
   The two hero columns are 5fr and 7fr, so a 4fr third column keeps their ratio untouched and
   lands the split exactly: 12 of 16 is 75%, 4 of 16 is 25%. Expressing it as a third track rather
   than wrapping the hero in an outer 75/25 grid means the copy and the montage keep their own
   relationship and there is no extra element to keep in sync. */
.hv2-hero__inner--with-case {
    /* Two columns, not three: the copy and the montage STACK in the left 75% and the case rail
       takes the right 25% across both rows.
       Side by side, the copy and the montage are each short, and the card is tall -- so the row
       took the card's height and left a large dead area under the CTAs and around the montage.
       Stacking the left column spends that height on content instead.
       The rail is a percentage track so it resolves against the container: the number in the
       design is the number on the screen. fr would divide what is left AFTER the gaps and come
       out short. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 29%);
    /* The rail was 25%, which measured 262px against the 1048px content box and wrapped the
       case's hook onto four short lines -- making the card read as heavier than it is. 29%
       is 304px, ~42px wider, which is what that hook needed. The hero gives up the same 42px
       and is now ~71% rather than 75%; the copy column is 730px of an 8-word headline, so it
       had it to spare and the two-column composition is unchanged. */
    align-items: start;

    /* Row gap only. The column gap stays at the hero's clamp -- it is the distance between the
       marketing column and the case rail, and nothing asked for that to change.
       The rows here are the copy and the article montage, and 56px between the CTAs and the
       montage read as a break rather than a relationship: the montage is what "Start learning"
       leads to, so it belongs closer to the buttons than a section boundary. */
    row-gap: clamp(1rem, 2.1vw, 1.875rem);
}

.hv2-hero__inner--with-case > .hv2-hero__copy {
    grid-column: 1;
    grid-row: 1;
}

.hv2-hero__inner--with-case > .hv2-hero__media {
    grid-column: 1;
    grid-row: 2;
}

/* Typography for the stacked hero. Scoped to --with-case so the existing two-column homepage
   is untouched until this arrangement is chosen; making it global is deleting three selectors. */

.hv2-hero__inner--with-case .hv2-hero__title {
    /* One line, larger. The base size is capped at 3.4rem because it is sized against the
       explicit <br> in the markup, two halves on two lines. With the break suppressed the whole
       string has to fit the 75% column, so the cap rises and the vw term with it. */
    font-size: clamp(2rem, 5.2vw, 4rem);
}

.hv2-hero__inner--with-case .hv2-hero__title br {
    /* The break is in the template, which is shared with the layout this does not change.
       Suppressing it here keeps the markup identical for both. */
    display: none;
}

.hv2-hero__inner--with-case .hv2-hero__lede {
    /* Full width of the column, and 20% larger: every term of the base clamp scaled by 1.2
       (1rem -> 1.2rem, 1.15vw -> 1.38vw, 1.15rem -> 1.38rem) so it grows the same way at every
       viewport rather than only at the cap. */
    max-width: none;
    font-size: clamp(1.2rem, 1.38vw, 1.38rem);
}

.hv2-hero__inner--with-case > .hv2-hero__case {
    /* Spanning both rows so the card sits against the full height of the stack rather than
       against the headline alone. */
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: flex-start;
}

.hv2-hero__case {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hv2-eyebrow {
    margin: 0 0 1.1rem;
    color: var(--hv2-rust);
    font: 800 .8rem/1.1 var(--ll-ui-font);
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hv2-hero__title {
    margin: 0 0 1.2rem;
    color: var(--hv2-navy);
    font-family: var(--ll-serif);
    /* Sized so each half sits on its own line against the explicit <br>,
       rather than wrapping to three. */
    font-size: clamp(2rem, 4.2vw, 3.4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
}

.hv2-hero__lede {
    margin: 0 0 2rem;
    max-width: 34ch;
    color: var(--ll-muted);
    font-size: clamp(1rem, 1.15vw, 1.15rem);
    line-height: 1.6;
}

.hv2-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
}

.hv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.15rem;
    padding: 0 1.7rem;
    border: 2px solid transparent;
    border-radius: var(--ll-radius-sm);
    font: 700 1rem/1 var(--ll-button-font);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.hv2-btn--primary {
    background: var(--hv2-rust);
    border-color: var(--hv2-rust);
    color: #fff;
}

.hv2-btn--primary:hover,
.hv2-btn--primary:focus-visible {
    background: var(--ll-accent-dark);
    border-color: var(--ll-accent-dark);
    color: #fff;
}

.hv2-btn--secondary {
    background: transparent;
    border-color: var(--hv2-rust);
    color: var(--hv2-rust);
}

.hv2-btn--secondary:hover,
.hv2-btn--secondary:focus-visible {
    background: var(--hv2-rust);
    color: #fff;
}

/* Real product screenshot, supplied at 2x (1800x1070) and shown at 900px wide.
   The intrinsic width/height on the <img> reserves the space before it loads,
   so the hero doesn't shift.

   Corner rounding is applied here rather than baked into the image so the
   corners stay genuinely transparent against the section background. */
.hv2-montage {
    display: block;
    width: min(900px, 100%);
    height: auto;
    margin-left: auto;
    border: 1px solid rgba(22, 32, 42, .1);
    border-radius: var(--ll-radius-lg);
}

/* ---------- Badge strip ---------- */

.hv2-badges {
    background: #fffdfa;
    border-bottom: 1px solid var(--ll-line);
}

.hv2-badges__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding-top: clamp(.85rem, 1.5vw, 1.15rem);
    padding-bottom: clamp(.85rem, 1.5vw, 1.15rem);
    list-style: none;
}

.hv2-badge {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    /* Tighter than the original clamp(.9rem,2vw,1.75rem): buys back ~25px of
       text width per column, which the nowrap heading below needs. */
    padding: 0 clamp(.7rem, 1.3vw, 1.1rem);
    border-left: 1px solid var(--ll-line);
}

.hv2-badge:first-child {
    border-left: 0;
    padding-left: 0;
}

.hv2-badge__icon {
    flex: 0 0 auto;
    color: var(--hv2-navy);
}

.hv2-badge__icon svg {
    display: block;
    width: 2.05rem;
    height: 2.05rem;
}

.hv2-badge__title {
    margin: 0 0 .25rem;
    color: var(--hv2-navy);
    font: 700 1.02rem/1.25 var(--ll-header-font);
    /* Keeps the longest of the four ("Your space, your work") on one line so
       the headings stay aligned across the row. Released on narrow screens
       below, where the column is too tight to guarantee it fits. */
    white-space: nowrap;
}

.hv2-badge__text p {
    margin: 0;
    color: var(--ll-muted);
    font-size: .92rem;
    line-height: 1.45;
}

/* ---------- Feature cards ---------- */

/* Flat, like the hero -- a gradient here would reintroduce the same banding
   against the flat screenshot above it. Kept a shade warmer than the hero so
   the sections still read as separate. */
.hv2-features {
    background: #f7f2e9;
}

.hv2-features__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3.5vw, 2.75rem);
    /* 18px tighter top and bottom than the original clamp(2.5rem,5vw,3.75rem). */
    padding-top: clamp(1.375rem, 4vw, 2.625rem);
    padding-bottom: clamp(1.375rem, 4vw, 2.625rem);
}

.hv2-feature {
    display: flex;
    flex-direction: column;
}

.hv2-feature__art {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    margin-bottom: 1.4rem;
    border: 1px solid var(--ll-line);
    border-radius: var(--ll-radius-md);
    background: var(--ll-card);
    overflow: hidden;
}

.hv2-feature__art svg {
    width: 78%;
    height: auto;
}

.hv2-feature__title {
    margin: 0 0 .5rem;
    color: var(--hv2-navy);
    font-family: var(--ll-serif);
    font-size: clamp(1.5rem, 2vw, 1.8rem);
    font-weight: 700;
    line-height: 1.15;
}

/* Short rust rule under each feature heading, as in the design. */
.hv2-feature__title::after {
    content: "";
    display: block;
    width: 2.4rem;
    height: 3px;
    margin-top: .7rem;
    border-radius: 2px;
    background: var(--hv2-rust);
}

.hv2-feature__body {
    margin: .85rem 0 1.15rem;
    color: var(--ll-muted);
    font-size: .97rem;
    line-height: 1.6;
}

.hv2-feature__link {
    margin-top: auto;
    align-self: flex-start;
    color: var(--hv2-rust);
    font: 700 .95rem/1 var(--ll-button-font);
    text-decoration: none;
}

.hv2-feature__link:hover,
.hv2-feature__link:focus-visible {
    color: var(--ll-accent-dark);
    text-decoration: underline;
    text-underline-offset: .22em;
}

/* ---------- Dark band ---------- */

.hv2-band {
    background: var(--hv2-navy);
    color: #fff;
}

.hv2-band__inner {
    display: grid;
    /* Slightly wider first column so the two-line heading isn't forced to wrap. */
    grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
    gap: clamp(1.5rem, 3.4vw, 3rem);
    align-items: center;
    /* 18px tighter top and bottom than the original clamp(2.25rem,4.5vw,3.25rem). */
    padding-top: clamp(1.1rem, 3vw, 2.15rem);
    padding-bottom: clamp(1.1rem, 3vw, 2.15rem);
}

.hv2-band__title {
    margin: 0;
    font-family: var(--ll-serif);
    /* Sized to hold the two explicit <br> lines without wrapping to three. */
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
}

.hv2-band__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hv2-band__item {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
}

.hv2-band__icon {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .92);
}

.hv2-band__icon svg {
    display: block;
    width: 1.85rem;
    height: 1.85rem;
}

.hv2-band__text {
    display: grid;
    gap: .18rem;
}

.hv2-band__text strong {
    font: 700 1rem/1.2 var(--ll-header-font);
}

.hv2-band__text em {
    color: rgba(255, 255, 255, .72);
    font: 400 .85rem/1.35 var(--ll-ui-font);
    font-style: normal;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
    .hv2-hero__inner,
    .hv2-hero__inner--with-case {
        /* One column below the breakpoint. The rail becomes the last block on the page rather
           than a squeezed third of it, which is the only sensible reading of a 25% column on a
           phone. */
        grid-template-columns: 1fr;
    }

    .hv2-hero__inner--with-case > .hv2-hero__copy,
    .hv2-hero__inner--with-case > .hv2-hero__media,
    .hv2-hero__inner--with-case > .hv2-hero__case {
        /* The placements have to be released as well, not just the track list. Resetting
           grid-template-columns alone left `grid-column: 2` on the rail, so the browser created
           an IMPLICIT second column to honour it and the copy collapsed to 158px with the
           headline on four lines -- a one-column layout in the track list and a two-column one
           in practice. */
        grid-column: auto;
        grid-row: auto;
    }

    .hv2-hero__inner--with-case .hv2-hero__title {
        /* Back to the wrapping size below the breakpoint: a single line is a desktop idea, and
           at this width the string cannot be one without becoming unreadably small. */
        font-size: clamp(2rem, 4.2vw, 3.4rem);
    }

    .hv2-hero__inner--with-case .hv2-hero__title br {
        display: inline;
    }

    .hv2-hero__lede {
        max-width: 60ch;
    }

    .hv2-montage {
        margin-left: 0;
    }

    .hv2-band__inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    .hv2-badges__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem 0;
    }

    /* With two per row it's the 3rd item that starts a row, not the 1st. */
    .hv2-badge:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }

    /* Tablet/mobile: one feature per row, the group centred, with a smaller
       illustration on the left and the text beside it. Laid out with grid
       areas rather than a wrapper element, so the markup stays identical to
       the desktop column layout. */
    .hv2-features__grid {
        grid-template-columns: 1fr;
        max-width: 34rem;
        gap: 2rem;
    }

    .hv2-feature {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "art title"
            "art body"
            "art link";
        column-gap: 1.15rem;
        align-items: start;
    }

    /* Card framing dropped here so the artwork reads as an icon, not a panel. */
    .hv2-feature__art {
        grid-area: art;
        width: 4.75rem;
        aspect-ratio: 4 / 3;
        margin-bottom: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    .hv2-feature__art svg {
        width: 100%;
    }

    .hv2-feature__title {
        grid-area: title;
    }

    .hv2-feature__body {
        grid-area: body;
        margin-top: .7rem;
    }

    .hv2-feature__link {
        grid-area: link;
        margin-top: 0;
    }

    .hv2-band__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.4rem;
    }
}

@media (max-width: 560px) {
    .hv2-badges__list,
    .hv2-band__list {
        grid-template-columns: 1fr;
    }

    .hv2-badge {
        border-left: 0;
        padding-left: 0;
    }

    /* Single column on a narrow phone can't guarantee the longest heading
       fits, so let it wrap rather than overflow the viewport. */
    .hv2-badge__title {
        white-space: normal;
    }

    .hv2-hero__actions .hv2-btn {
        flex: 1 1 100%;
    }

    /* Narrow phones: shrink the illustration further so the text column keeps
       a usable measure beside it. */
    .hv2-feature {
        column-gap: .9rem;
    }

    .hv2-feature__art {
        width: 3.6rem;
    }
}

/* The rail's own label. Matches .hv2-eyebrow's treatment without inheriting its bottom margin,
   which is sized for a headline underneath rather than a card. */
.hv2-hero__case-eyebrow {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .6rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--llb-accent, #9a5b2a);
}

/* Sized off the label rather than fixed, so it tracks the eyebrow at every breakpoint instead
   of drifting out of proportion at one of them. */
.hv2-hero__case-mark {
    flex: none;
    width: 1.5em;
    height: 1.5em;
}