/* ==========================================================================
   Heritage Tunes — Homepage  [heritage_home]
   Class: Heritage_Home_Page (includes/class-home-page.php)
   Built 2026-08-13 from layout-v6-tile-refinements.html

   Bump Heritage_Home_Page::ASSETS_VERSION on every edit to this file, and
   flush the GoDaddy CDN after deploying. A stale ?ver= is worse than no
   deploy — it looks like the change failed.

   Scoping note: all tokens live on .ht-home, not :root. The mock declared
   them globally, which would leak clamp values into every other page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fold — core fills the first viewport
   --------------------------------------------------------------------------
   The chain is body > .wp-site-blocks > [header, .ht-home, footer], verified
   against the live homepage source. No header-height math: the core simply
   takes the remaining space.

   !important on the margin reset is a genuine theme boundary — Nook's
   `:where(.wp-site-blocks) > *` sets margin-block-start and would open a gap
   between the header and the gradient. The `no-top-spacing` utility class
   does the same job on block-built pages; this is its equivalent for a
   shortcode-owned page. (2026-08-13)
   -------------------------------------------------------------------------- */

body.heritage-home-page .wp-site-blocks {
    min-height: 100vh; /* fallback for older Safari */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

body.heritage-home-page .wp-site-blocks > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

body.heritage-home-page.admin-bar .wp-site-blocks {
    min-height: calc(100vh - 32px);
    min-height: calc(100dvh - 32px);
}

/* --------------------------------------------------------------------------
   2. Core container + tokens
   -------------------------------------------------------------------------- */

.ht-home {
    /* Ink */
    --ht-ink: #e9f0f1;
    --ht-dim: #9fc3c9;
    --ht-faint: #5f7d83;
    --ht-amber: #c99548;
    --ht-teal-link: #5da3ac;
    --ht-rule: rgba(233, 240, 241, 0.14);

    /* Surfaces */
    --ht-cardfill: #10242c;
    --ht-cardline: #1e444d;

    /* Tile fill. The mock's value, slightly cooler than the site's action
       #1C728E. Change here only — every tile reads this one token. */
    --ht-tile: #2c6579;
    --ht-tile-dark: var(--ht-cardfill);

    /* Vertical rhythm — these are the retuning knobs. Floors let short
       viewports compress before they scroll. */
    --ht-core-pad: clamp(20px, 4vh, 44px);
    --ht-hero-gap: clamp(14px, 2.6vh, 30px);
    --ht-h1: clamp(28px, 4.6vh, 42px);
    --ht-tile-h: clamp(58px, 8.2vh, 76px);
    --ht-row-h: clamp(46px, 6.4vh, 58px);
    --ht-sect-gap: clamp(14px, 2.6vh, 24px);

    /* Shared footer budget — exactly two line-heights, plus the padding and
       the hairline itself.
       2026-08-14: was a flat 37px, which silently clipped the second line.
       WordPress sets box-sizing: border-box globally, so 37px was the whole
       box — 27px of usable space for 34px of text. Composed from its parts
       now so it can't drift out of step with the type.
       2026-08-14 (later): widened again from two lines to three. Collection
       titles are written long for SEO ("Easy Fiddle Tunes for Beginners",
       not "Beginner Tunes"), so a one-line More row ellipsised the second
       pick away. Three lines lets Collection run More over two lines plus
       its "All collections" row, and lets Feature run More over three. Both
       budgets are the same number, which is what keeps the hairlines
       level. */
    --ht-cfoot-line: 17px;   /* 11.5px × 1.5 line-height, rounded up */
    --ht-cfoot-pad: 9px;
    --ht-cfoot-lines: 3;
    --ht-cfoot-h: calc((var(--ht-cfoot-line) * var(--ht-cfoot-lines)) + var(--ht-cfoot-pad) + 1px);

    flex: 1 1 auto;
    box-sizing: border-box;
    padding: var(--ht-core-pad) 36px calc(var(--ht-core-pad) + 8px);
    background: radial-gradient(ellipse 85% 65% at 50% 24%, #1d4e5c 0%, #103038 46%, #061318 100%);
    color: var(--ht-ink);
}

.ht-home__page {
    max-width: 1060px;
    margin: 0 auto;
}

/* Backstop for wpautop's phantom paragraphs. The structural rule (no inline
   element directly after a closing block tag) is what actually prevents
   these; this catches anything that slips through a later edit. */
.ht-home p:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   3. Hero
   -------------------------------------------------------------------------- */

.ht-home-hero {
    text-align: center;
    padding-bottom: var(--ht-hero-gap);
}

.ht-home-hero__title {
    font-family: var(--wp--preset--font-family--vast-shadow);
    font-weight: 400;
    font-size: var(--ht-h1);
    line-height: 1.15;
    color: var(--ht-ink);
    margin: 0 0 clamp(6px, 1.2vh, 12px);
}

.ht-home-hero__sub {
    font-size: clamp(13px, 1.9vh, 15px);
    color: var(--ht-dim);
    margin: 0 0 clamp(12px, 2.2vh, 22px);
    line-height: 1.5;
}

.ht-home-search {
    display: flex;
    align-items: stretch;
    max-width: 520px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 26px;
    overflow: hidden; /* clips the amber end-cap to the pill radius */
}

.ht-home-search__input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: clamp(10px, 1.6vh, 13px) 20px;
    font-size: 14px;
    font-family: inherit;
    /* !important required: Nook's `body .wp-site-blocks input:not(...)` rule
       stacks enough :not() specificity to beat any single class and sets
       color to white — invisible on a white pill. Same theme boundary the
       old hero hit. (2026-08-13) */
    color: #333333 !important;
    caret-color: #333333;
    background: transparent !important;
}

.ht-home-search__input::placeholder {
    color: #888888;
}

/* !important on background/padding: Nook's
   `.wp-site-blocks button[type="submit"]:not(.wp-element-button)` stacks
   (0,3,1) and sets its own background and 12px 30px padding. This button
   must stay type="submit" — it submits the form — so the type="button"
   escape used elsewhere isn't available here. (2026-08-13) */
/* The SVG paints with currentColor, so the colour declaration is the icon.
   !important for the same reason as the background: the theme's
   button[type="submit"]:not(.wp-element-button) rule sets white at (0,3,1)
   and this button has to stay type="submit". (2026-08-14) */
.ht-home-search__btn {
    background: var(--ht-amber) !important;
    color: #2c1c08 !important;
    border: none;
    border-radius: 0;
    width: 64px;
    min-width: 0;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s ease;
}

.ht-home-search__btn:hover {
    background: #b5843c !important;
}

/* --------------------------------------------------------------------------
   4. Filter tile row
   -------------------------------------------------------------------------- */

.ht-tiles {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 8px;
    padding-top: var(--ht-sect-gap);
}

.ht-tile {
    height: var(--ht-tile-h);
    background: var(--ht-tile);
    border: none;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #ffffff;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.ht-tile:hover,
.ht-tile:focus-visible {
    filter: brightness(1.12); /* works across both fills */
    text-decoration: none;
    color: #ffffff;
}

.ht-tile--dark {
    background: var(--ht-tile-dark);
}

.ht-tile img {
    width: clamp(22px, 3.4vh, 26px);
    height: clamp(22px, 3.4vh, 26px);
    object-fit: contain;
    flex-shrink: 0;
}

.ht-tile__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   5. Mosaic grid
   -------------------------------------------------------------------------- */

.ht-mosaic {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: var(--ht-row-h);
    gap: 14px;
    padding-top: var(--ht-sect-gap);
}

/* Back to span 4 — 2026-08-15. Briefly 5, which was one change too many:
   widening the footer to three lines had already bought the room the More
   lines needed, so the extra row only added slack that space-between
   stretched into a gap, and pushed the account bar below the fold. If height
   is ever genuinely short again, the lever is --ht-row-h, not another row. */
.ht-card {
    grid-column: span 2;
    grid-row: span 4;
    background: var(--ht-cardfill);
    border: 0.5px solid var(--ht-cardline);
    border-radius: 12px;
    padding: 16px 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.ht-card__body {
    min-width: 0;
}

.ht-kick {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--ht-dim);
    margin-bottom: 9px;
}

.ht-kick--amber { color: var(--ht-amber); }
.ht-kick--teal  { color: var(--ht-teal-link); }

.ht-card__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 5px;
}

.ht-card__title a {
    color: #ffffff;
    text-decoration: none;
}

.ht-card__title a:hover {
    color: var(--ht-amber); /* matches the tune-card title hover */
    text-decoration: none;
}

.ht-card__meta {
    font-size: 12px;
    color: var(--ht-dim);
    margin-bottom: 10px;
    line-height: 1.4;
}

.ht-card__dek {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ht-dim);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ht-card__cta a {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ht-teal-link);
    text-decoration: none;
}

.ht-card__cta a:hover {
    color: var(--ht-ink);
    text-decoration: none;
}

/* Spotlight stat rows */
.ht-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 12.5px;
    color: var(--ht-dim);
}

.ht-stat svg {
    flex-shrink: 0;
    opacity: 0.75;
}

/* Card footers — fixed budget, not copy discipline.
   Both footers share --ht-cfoot-h so the hairlines stay level whatever the
   picks are. Overflow is hidden deliberately: a long title is cut, never
   allowed to push the rule down. */
.ht-cfoot {
    box-sizing: border-box;
    border-top: 1px solid var(--ht-rule);
    padding-top: var(--ht-cfoot-pad);
    height: var(--ht-cfoot-h);
    overflow: hidden;
    font-size: 11.5px;
    line-height: var(--ht-cfoot-line);
    color: var(--ht-faint);
}

/* Collection card: up to two lines, leaving the third for "All
   collections". Was nowrap + ellipsis, which cut the second pick off
   mid-word. (2026-08-14) */
.ht-cfoot__l1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Feature card only — no "all" link below, so the More line gets all three
   lines of the shared budget (§2.5). */
.ht-cfoot__l1--wrap3 {
    -webkit-line-clamp: 3;
}

.ht-cfoot a {
    color: var(--ht-dim);
    text-decoration: none;
}

.ht-cfoot a:hover {
    color: var(--ht-ink);
    text-decoration: none;
}

.ht-cfoot__l2 {
    display: block;
    margin-top: 2px;
}

.ht-cfoot__l2 a {
    color: var(--ht-teal-link);
    font-weight: 600;
}

/* Admin-only pick diagnostics. Rendered by pick_warning() / missing_notice()
   and gated on edit_posts in PHP — visitors never receive this markup. Muted
   amber rather than an error red: an unresolved pick is a typo to fix, not a
   fault. (2026-08-14) */
.ht-card--warn {
    border-style: dashed;
    border-color: rgba(201, 149, 72, 0.45);
}

.ht-card--warn .ht-kick {
    color: var(--ht-amber);
}

.ht-card--warn code {
    font-size: 11.5px;
    color: var(--ht-amber);
    word-break: break-all;
}

.ht-card__warnline {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ht-amber);
}

/* --------------------------------------------------------------------------
   6. Events cell — bare, no card fill
   -------------------------------------------------------------------------- */

.ht-events {
    grid-column: span 2;
    grid-row: span 5;
    padding: 2px 2px 0 6px;
    min-width: 0;
}

.ht-ev {
    padding: clamp(5px, 1vh, 8px) 0;
    border-bottom: 1px solid var(--ht-rule);
}

.ht-ev:last-of-type {
    border-bottom: none;
}

.ht-ev__date {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--ht-amber);
    margin-bottom: 2px;
}

.ht-ev__name {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--ht-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ht-ev__loc {
    color: var(--ht-faint);
}

.ht-events__more {
    padding-top: 8px;
}

.ht-events__more a {
    font-size: 12px;
    font-weight: 700;
    color: var(--ht-amber);
    text-decoration: none;
}

.ht-events__more a:hover {
    color: var(--ht-ink);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   7. Loop strip
   -------------------------------------------------------------------------- */

.ht-loop {
    grid-column: span 6;
    grid-row: span 1;
    min-width: 0;
}

.ht-loop__bar {
    height: 100%;
    background: linear-gradient(130deg, #c99548, #a9762f);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(201, 149, 72, 0.13);
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    color: #2c1c08;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.ht-loop__bar:hover {
    filter: brightness(1.06);
    color: #2c1c08;
    text-decoration: none;
}

.ht-loop__lead {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ht-loop__lead svg {
    flex-shrink: 0;
}

.ht-loop__text {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
}

.ht-loop__cta {
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Account line
   -------------------------------------------------------------------------- */

/* padding-top separates the text from its own hairline — without it the rule
   sits directly on the cap heights and the row reads as crammed against the
   loop strip above. The row is 58px at most and the content ~19px, so the
   padding costs nothing. (2026-08-14) */
.ht-account {
    grid-column: span 8;
    grid-row: span 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 6px 0;
    border-top: 1px solid var(--ht-rule);
}

.ht-account__text {
    font-size: 13.5px;
    color: var(--ht-dim);
    line-height: 1.4;
}

/* Separator breathing room.
   2026-08-14: first attempt used word-spacing on the row, which was the same
   mistake as letter-spacing by another route — it spaced every word, so
   multi-word list names loosened along with the gaps between items.
   2026-08-15: the middots carry their own margin instead, so only the joins
   widen and the names keep normal tracking. */
.ht-account__sep {
    margin: 0 5px;
    color: var(--ht-faint);
}

.ht-account__text strong {
    color: var(--ht-ink);
    font-weight: 600;
}

.ht-account__cta {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ht-amber);
    text-decoration: none;
    white-space: nowrap;
}

.ht-account__cta:hover {
    color: var(--ht-ink);
    text-decoration: none;
}

/* Personal list links, injected by home.js after the account fetch */
.ht-account__lists a {
    color: var(--ht-dim);
    text-decoration: none;
}

.ht-account__lists a:hover {
    color: var(--ht-ink);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   9. Mobile (<= 760px)
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
    .ht-home {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* Tile row becomes a swipe strip with a right-edge fade as the
       scroll affordance. */
    .ht-tiles {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        mask-image: linear-gradient(90deg, #000 92%, transparent);
        -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent);
    }

    .ht-tiles::-webkit-scrollbar {
        display: none;
    }

    .ht-tile {
        min-width: 84px;
        flex-shrink: 0;
    }

    .ht-mosaic {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
    }

    /* !important: the desktop spans are on the same single-class selectors,
       so they'd otherwise win on source order within this block. */
    .ht-card,
    .ht-events,
    .ht-loop,
    .ht-account {
        grid-column: span 2 !important;
        grid-row: auto !important;
    }

    /* Order per requirements §1.4. Desktop DOM order is untouched. */
    .ht-card--spotlight  { order: 1; }
    .ht-loop             { order: 2; }
    .ht-card--collection { order: 3; }
    .ht-card--feature    { order: 4; }
    .ht-events           { order: 5; }
    .ht-account          { order: 6; }

    /* height: auto is load-bearing. The desktop rule sets height: 100%, which
       resolves against the fixed grid row. On mobile grid-auto-rows is auto,
       so there is no definite height to be 100% of — the bar's wrapped
       content then spills outside the track it was measured into and lands on
       top of the card below. (2026-08-15) */
    .ht-loop__bar {
        height: auto;
        padding: 14px 18px;
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .ht-account {
        padding: 14px 6px;
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* --------------------------------------------------------------------------
   10. Quality floor
   -------------------------------------------------------------------------- */

.ht-home a:focus-visible,
.ht-home button:focus-visible,
.ht-home input:focus-visible {
    outline: 2px solid var(--ht-amber);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ht-home * {
        transition: none !important;
    }
}