/* ── Home (hybrid) — V2.1 hero + current homepage sections ─────────────────── */

/* Header + nav are now rendered by the theme-wide header.php (Hila 2026-06-09
   — unified across the site). This file owns only the hero grid + section
   styles below; the previous hh-masthead / hh-nav rules were dropped along
   with the duplicated markup in page-home-hybrid.php. */

#page-home-hybrid {
    --hh-red:       var(--red, #DE1C22);
    --hh-red-dark:  var(--red-dark, #B20108);
    --hh-ink:       var(--ink, #1D0506);
    --hh-paper:     var(--paper, #FBFBF9);
    --hh-cream:     var(--cream, #FBF7F3);
    --hh-gm:        #737373;
    --hh-g-1:       #5C5C5C;
    --hh-g-2:       #A8A8A8;
    --hh-g-3:       #DFDFDF;
    --hh-g-4:       #EDEDED;
    --hh-serif:     'Playfair Display', Georgia, serif;
    --hh-body:      'EB Garamond', Georgia, serif;
    --hh-sans:      'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;

    background: #fff;
    color: var(--hh-ink);
    font-family: var(--hh-sans);
}

#page-home-hybrid .hh-wrap {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 38px;
}
@media (max-width: 640px) {
    #page-home-hybrid .hh-wrap { padding: 0 20px; }
}

/* ── HERO ────────────────────────────────────────────────────────────────────
   3-column asymmetric grid. All three columns top-align so the lead image,
   the left-rail image, and the right-rail first title sit on the same baseline. */
#page-home-hybrid .hh-hero { padding: 48px 0 64px; }
#page-home-hybrid .hh-hero-grid {
    display: grid;
    grid-template-columns: 280px 1.6fr 280px;
    gap: 44px;
    align-items: start;
}
@media (max-width: 1100px) {
    #page-home-hybrid .hh-hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    /* Mobile/tablet stacking order (Hila 2026-06-09): center lead story first,
       then the left rail (which carries the two image stories), then the right
       text-only rail. Without this the DOM order (left rail → lead → right
       rail) puts a smaller story above the hero on phones. */
    #page-home-hybrid .hh-lead   { order: 1; }
    #page-home-hybrid .hh-rail-l { order: 2; }
    #page-home-hybrid .hh-rail-r { order: 3; }
}

/* Rails — no top border (the "line above 'In Those Days'" Hila removed). */
#page-home-hybrid .hh-rail {
    display: flex;
    flex-direction: column;
    gap: 28px;
    height: 100%;
}
/* Right rail: distribute items so the column bottom lines up with the hero
   image bottom on the left (Hila 2026-06-07 — left rail with 2 image cards
   ended noticeably lower than the right rail with 4 text-only cards). */
#page-home-hybrid .hh-rail-r {
    justify-content: space-between;
    gap: 20px;
}
#page-home-hybrid .hh-rail-item {
    display: block;
    color: inherit;
    text-decoration: none;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--hh-g-3);
}
#page-home-hybrid .hh-rail-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

#page-home-hybrid .hh-rail-img {
    aspect-ratio: 4/3;
    overflow: hidden;
    margin-bottom: 12px;
    background: var(--hh-cream);
    /* Subtle rounding per Hila (2026-06-04) — matches the corner radius used
       on category pages and editorial blocks elsewhere on the site. */
    border-radius: 8px;
}
#page-home-hybrid .hh-rail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
#page-home-hybrid .hh-rail-item:hover .hh-rail-img img { transform: scale(1.03); }

#page-home-hybrid .hh-rail-t {
    font-family: var(--hh-serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--hh-ink);
    margin-bottom: 8px;
    transition: color .15s;
}
#page-home-hybrid .hh-rail-item:hover .hh-rail-t { color: var(--hh-red); }

/* Sub text: black + non-italic per Hila (was grey italic in V2.1). */
#page-home-hybrid .hh-rail-d {
    font-family: var(--hh-body);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--hh-ink);
    margin-bottom: 10px;
}

/* Author — no "By" prefix, no divider line above. */
#page-home-hybrid .hh-rail-by {
    font-size: 12px;
    color: var(--hh-ink);
    font-weight: 600;
    letter-spacing: .02em;
}

/* Lead — top-aligned image so all three columns line up evenly. No divider
   between deck and byline (Hila — "Remove the lines between the sub text
   and author name on the middle story"). */
#page-home-hybrid .hh-lead { min-width: 0; }
#page-home-hybrid .hh-lead-img {
    margin: 0 0 22px;
    aspect-ratio: 16/10;
    overflow: hidden;
    background: var(--hh-cream);
    /* Subtle rounding per Hila (2026-06-04) — matches category pages. */
    border-radius: 10px;
}
#page-home-hybrid .hh-lead-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
#page-home-hybrid .hh-lead-img:hover img { transform: scale(1.02); }

/* Lead eyebrow: "Editor's Pick" tag above the headline (Hila 2026-06-07). */
#page-home-hybrid .hh-lead-eyebrow {
    display: block;
    text-align: center;
    font-family: var(--hh-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hh-red);
    margin: 0 0 12px;
}

#page-home-hybrid .hh-lead-h {
    font-family: var(--hh-serif);
    font-size: clamp(34px, 4.2vw, 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--hh-ink);
    margin: 0 0 18px;
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}
#page-home-hybrid .hh-lead-h a { color: inherit; text-decoration: none; }
#page-home-hybrid .hh-lead-h a:hover { color: var(--hh-red); }

/* Lead sub text: black, non-italic (V2.1 had grey italic). */
#page-home-hybrid .hh-lead-d {
    font-family: var(--hh-body);
    font-size: 19px;
    line-height: 1.5;
    color: var(--hh-ink);
    max-width: 640px;
    margin: 0 auto 16px;
    text-align: center;
    text-wrap: pretty;
}
/* No "By" prefix, no top border on the byline. */
#page-home-hybrid .hh-lead-by {
    text-align: center;
    font-size: 13px;
    color: var(--hh-ink);
    font-weight: 600;
    letter-spacing: .02em;
}