/* ═══════════════════════════════════════════════════════════════════════════
   NAVALO — DESKTOP HOME restructure (owner mockup, Aug 2026).

   Adds the sections the mockup introduces — "Choose your crew" image cards,
   "Explore our collection" category tiles, the without/with intro block, the
   two-button hero and CTA rows, and the closing info banner — on top of the
   existing .dk-* desktop home sheet (css/skins/yachting/desktop-home.css,
   which this file NEVER edits: another agent works in that tree).

   ── SCOPE, and why it is doubled ────────────────────────────────────────────
   1) Every rule sits under `.nvhome`, a class emitted by exactly one function:
      nvHomeHTML() in js/modules/yh-appv2.js, which deskHomeHTML() only calls
      when !IS_WW. Stitcha Workwear renders `.dkhome` WITHOUT `.nvhome`, so it
      cannot match a single selector here. This matters because the workwear
      deployment loads the SAME yachting skin (js/niche-maps.js maps
      workwear → yachting), so a `[data-skin=yachting]` scope would NOT have
      separated the brands.
   2) Every rule sits inside @media (min-width:561px), so a real phone (≤560,
      where App V2 renders its own .mvh-* home) never sees these styles even if
      the desktop markup were somehow shown narrow.

   Tokens (--hdr/--ink/--sub/--line/--blue/--serif/--maxw) are inherited from
   the .dkhome block in desktop-home.css — do not redeclare them here.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width:561px){

  /* ── shared section furniture (kicker / heading / lede) ────────────────── */
  .nvhome .nvh-sec{ padding:56px 0; }
  .nvhome .nvh-head{ max-width:640px; margin:0 0 30px; }
  .nvhome .nvh-kick{ display:block; font-size:12px; font-weight:800; letter-spacing:.16em;
    text-transform:uppercase; color:var(--blue); margin:0 0 .8rem; }
  /* !important beats the #yha2Root h1,h2,h3,p{margin:0} reset (ID specificity)
     in (mobile|desktop)-appv2.css — the same trick .dk-prem-tx h2 already uses. */
  .nvhome .nvh-head h2{ font-family:var(--serif); font-size:38px; line-height:1.1; font-weight:800;
    letter-spacing:-.02em; color:var(--ink); margin:0 0 .9rem !important; }
  .nvhome .nvh-head p{ font-size:16px; line-height:1.55; color:var(--sub); margin:0 !important; }

  /* ── hero: two buttons side by side (the base sheet stacks them) ───────── */
  .nvhome .nvh-hero-actions{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:.8rem; }
  /* the base sheet pins the hero lede to one line; the new copy is a full
     sentence pair and must wrap */
  .nvhome .dk-hero p{ white-space:normal; max-width:560px; }
  /* ── hero headline (owner 5 Aug 2026) ───────────────────────────────────
     "Premium sailing apparel." must sit on ONE line, with "Built for crews."
     on the second — the <br> already asks for that break, but the box was too
     narrow for the type and the first sentence wrapped anyway, giving three
     lines instead of two.
     MEASURED, not guessed: the sentence renders at ~11.8x the font size
     (615px at 52px), so 62px needs ~733px of box. The shared .dk-hero-tx is
     620px, hence the wrap. Widened here for Navalo only — Workwear's hero
     copy is shorter and its box is untouched.
     Widening alone is not enough: below ~860px the box is VIEWPORT-limited, so
     no max-width saves a 62px line. The size is therefore derived from the same
     measurement rather than hand-stepped per breakpoint — /12.2 rather than the
     measured /11.8 leaves headroom, since the ratio drifts slightly with the
     serif's own metrics. Above ~864px the min() clamps at the design's 62px and
     this expression does nothing at all.
     Specificity note: .dkhome.nvhome beats the shared .dkhome .dk-hero h1 steps
     in desktop-home.css without needing !important or a load-order assumption. */
  .nvhome .dk-hero-tx{ max-width:780px; }
  .dkhome.nvhome .dk-hero h1{ font-size:min(62px, calc((100vw - 108px) / 12.2)); }
  /* see-through / ghost button on dark (hero + final CTA band) */
  .nvhome .nvh-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
  .nvhome .nvh-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; box-shadow:none; }

  /* ── choose your crew ──────────────────────────────────────────────────── */
  /* Owner 5 Aug 2026: one row of six, not a 3x2 grid. There are exactly six
     Navalo niches (NICHES in yh-appv2.js), so the row is full by construction —
     but six across a 1360px content box is ~210px per tile, which is genuinely
     slim for a 3:4 portrait crop. That is the owner's call, made knowingly; the
     step-downs below keep it from becoming unreadable on narrower desktops. */
  .nvhome .nvh-crewrow{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
  .nvhome .nvh-crew{ position:relative; display:block; width:100%; padding:0; border:none; background:#16243d;
    border-radius:18px; overflow:hidden; text-align:left; aspect-ratio:3/4; color:#fff; }
  .nvhome .nvh-crew-img{ position:absolute; inset:0; display:block; }
  .nvhome .nvh-crew-img img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
  .nvhome .nvh-crew:hover .nvh-crew-img img{ transform:scale(1.05); }
  /* Legibility scrim — the tile art is a photo, so the title needs its own
     gradient rather than relying on whatever happens to be behind it.
     WHY IT WAS STRENGTHENED (owner report, 6 Aug 2026: white text unreadable on
     "Sailing Club" and "Superyacht Crew"). Old stops: .88 → .45 at 34% →
     transparent at 66%. TWO causes, one per tile, which is why only a change
     to the scrim itself fixes both:
       - GEOMETRY (Sailing Club). The scrim is a fixed fraction of the tile but
         the text block is not — it is bottom-anchored and grows upward. When
         the description wraps to a third line the title climbs past the 34%
         stop into the near-transparent zone. This is WIDTH-DEPENDENT: at 215px
         tiles every description fits in two lines and nothing looks wrong, so
         it does not reproduce at every viewport. Editing the two descriptions
         would have hidden it rather than removed it — the copy is
         owner-editable, so any future edit re-breaks it at some width.
       - BRIGHTNESS (Superyacht Crew). Two lines, sitting correctly inside the
         scrim, but the art behind it is bright sky and .45 was not enough.
     So the ramp is both darker AND taller — still fully clear at the top,
     where the photo is the point. Measured at the top edge of the text block:
     alpha .53 → .71. text-shadow below is the second line of defence for a
     pale photo that defeats even this. */
  .nvhome .nvh-crew::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top,rgba(5,10,20,.92) 0%,rgba(5,10,20,.74) 26%,rgba(5,10,20,.40) 52%,rgba(5,10,20,.12) 72%,rgba(5,10,20,0) 88%); }
  /* At 6-across the tile is ~210px, and reserving 70px on the right for the
     arrow left the copy a 118px column — four-line wraps on every card. The
     arrow moves to the TOP corner instead, which hands the text the full width
     and costs nothing: it was always decorative, the whole tile is the link. */
  .nvhome .nvh-crew-tx{ position:absolute; left:16px; right:16px; bottom:16px; z-index:2; display:block; }
  .nvhome .nvh-crew-tx b{ display:block; font-family:var(--serif); font-size:18.5px; font-weight:800;
    letter-spacing:-.01em; color:#fff; text-shadow:0 1px 3px rgba(5,10,20,.55); }
  /* .82 not .8: the description is the FIRST thing to disappear over a pale
     photo — it is the smallest type and the least opaque, so it was doing the
     scrim's job with the least help. */
  .nvhome .nvh-crew-tx i{ display:block; font-style:normal; font-size:12.5px; line-height:1.42;
    color:rgba(255,255,255,.82); margin-top:.3rem; text-shadow:0 1px 3px rgba(5,10,20,.5); }
  .nvhome .nvh-crew-go{ position:absolute; right:14px; top:14px; z-index:2; width:34px; height:34px;
    border-radius:50%; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5); color:#fff;
    display:flex; align-items:center; justify-content:center; transition:background .18s ease, color .18s ease; }
  .nvhome .nvh-crew:hover .nvh-crew-go{ background:#fff; color:var(--hdr); border-color:#fff; }

  /* ── explore our collection ────────────────────────────────────────────── */
  /* auto-fit rather than a fixed column count: the category list is authored in
     the Products tab and its length is not knowable here, so the row fills when
     there are few and wraps cleanly when there are many. */
  /* ── Explore our collection (owner mockup, 5 Aug 2026) ──────────────────
     The mockup puts the heading block in a LEFT COLUMN beside the tiles rather
     than stacked above them. The markup already has .nvh-head and .nvh-catrow
     as siblings inside .dk-wrap, so this is a grid on the wrap — no JS change,
     and the section keeps working if the grid is ever removed.
     Tiles are tall narrow portraits with the name laid over the image. */
  .nvhome .nvh-explore .dk-wrap{ display:grid; grid-template-columns:minmax(210px,.75fr) 3fr;
    gap:40px; align-items:center; }
  .nvhome .nvh-explore .nvh-head{ margin:0; }
  /* THE COUNT IS DYNAMIC — it is however many categories the owner has tagged,
     which is not knowable here. So the row SCROLLS rather than squeezing: a
     fixed-basis flex track keeps every tile at a readable width and lets the
     overflow scroll, where `repeat(auto-fit,1fr)` would crush 12 categories
     into unreadable slivers. Fewer tiles than fit simply left-align. */
  /* The rail wraps the scroller so the chevrons have a positioning context.
     min-width:0 is load-bearing: this sits in the `3fr` grid column, and
     without it the flex track's content width would push the column wider
     than its share instead of scrolling — the row would overflow the SECTION
     rather than itself, and no amount of chevron wiring would help. */
  .nvhome .nvh-catrail{ position:relative; min-width:0; }
  .nvhome .nvh-catrow{ display:flex; gap:14px; overflow-x:auto; padding-bottom:4px;
    scroll-snap-type:x proximity; scrollbar-width:thin; scroll-behavior:smooth; }
  /* Chevrons and edge fades appear ONLY when the row actually overflows —
     .scrollable is set by nvhCatRail() from the measured track, never assumed.
     With the categories tagged today the row fits and none of this shows. */
  .nvhome .nvh-catnav{ display:none; position:absolute; top:50%; z-index:3;
    width:38px; height:38px; margin-top:-19px; border-radius:50%; cursor:pointer;
    align-items:center; justify-content:center; color:var(--hdr,#0b1b33);
    background:#fff; border:1px solid rgba(11,27,51,.12);
    box-shadow:0 4px 14px rgba(5,10,20,.14);
    transition:opacity .18s ease, background .18s ease, box-shadow .18s ease; }
  .nvhome .nvh-catrail.scrollable .nvh-catnav{ display:flex; }
  .nvhome .nvh-catnav.prev{ left:-19px; }
  .nvhome .nvh-catnav.next{ right:-19px; }
  .nvhome .nvh-catnav:hover{ background:#f4f7fa; box-shadow:0 6px 18px rgba(5,10,20,.2); }
  /* Faded, not removed: a chevron that vanishes at the end shifts the layout
     and makes the row twitch on every arrival. pointer-events:none stops the
     dead button swallowing a click meant for the tile behind it. */
  .nvhome .nvh-catnav[disabled]{ opacity:.28; pointer-events:none; box-shadow:none; }
  /* Edge fade, tied to the same class. --fl/--fr collapse to 0 at each end so
     the fade only ever hides content there IS more of. */
  .nvhome .nvh-catrail.scrollable .nvh-catrow{ --fl:34px; --fr:34px;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);
            mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%); }
  .nvhome .nvh-catrail.at-start .nvh-catrow{ --fl:0px; }
  .nvhome .nvh-catrail.at-end .nvh-catrow{ --fr:0px; }
  @media (prefers-reduced-motion:reduce){ .nvhome .nvh-catrow{ scroll-behavior:auto; } }
  /* Sized so SIX tiles — the mockup's own count — fit the track without
     scrolling at desktop widths, and a seventh starts the scroll rather than
     shrinking the six. Measured: the track is ~1010px at 1440, so six tiles
     plus five 14px gaps must stay under that. */
  /* --nvh-cat-w is set by nvhCatRail() ONLY when the row overflows, to the
     width that leaves exactly a third of the next tile showing. Unset (the
     normal case) the clamp below is used unchanged. */
  .nvhome .nvh-catrow > *{ flex:0 0 var(--nvh-cat-w, clamp(126px,10.5vw,154px)); scroll-snap-align:start; }
  .nvhome .nvh-cat{ position:relative; display:block; border-radius:14px; overflow:hidden;
    background:#e6eaef; aspect-ratio:5/9; text-decoration:none; color:#fff; }
  .nvhome .nvh-cat-img{ position:absolute; inset:0; display:block; }
  .nvhome .nvh-cat-img img{ width:100%; height:100%; object-fit:cover; transition:transform .55s ease; }
  .nvhome .nvh-cat:hover .nvh-cat-img img{ transform:scale(1.05); }
  .nvhome .nvh-cat::after{ content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to top,rgba(5,10,20,.85) 0%,rgba(5,10,20,.28) 40%,rgba(5,10,20,0) 70%); }
  .nvhome .nvh-cat-tx{ position:absolute; left:14px; right:12px; bottom:14px; z-index:2;
    display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
  .nvhome .nvh-cat-tx b{ font-size:14.5px; font-weight:700; letter-spacing:-.01em; color:#fff; }
  /* The mockup shows the category name alone. The arrow stays in the markup as
     a hover affordance rather than being deleted — at rest it is invisible, so
     the tile matches the mockup, and it still signals the tile is a link. */
  .nvhome .nvh-cat-tx svg{ flex-shrink:0; opacity:0; transition:transform .18s ease, opacity .18s ease; }
  .nvhome .nvh-cat:hover .nvh-cat-tx svg{ opacity:1; transform:translateX(3px); }

  /* ── without / with (intro block left, the existing .dk-vs grid right) ─── */
  .nvhome .nvh-vs{ display:grid; grid-template-columns:minmax(240px,.72fr) 2fr; gap:46px; align-items:center; }
  .nvhome .nvh-vs-intro h2{ font-family:var(--serif); font-size:36px; line-height:1.08; font-weight:800;
    letter-spacing:-.02em; color:var(--ink); margin:0 0 1rem !important; }
  .nvhome .nvh-vs-intro p{ font-size:15.5px; line-height:1.6; color:var(--sub); margin:0 !important; }

  /* ── final CTA: the existing button plus the ghost explore link ────────── */
  .nvhome .nvh-cta-actions{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }

  /* ── closing info banner ───────────────────────────────────────────────── */
  /* sits directly under the navy CTA band — the hairline is what keeps the two
     from reading as one over-tall block */
  /* Owner 5 Aug 2026: the CTA banner and this features banner should read as ONE
     section. Two changes, and both are needed — the rule alone left a visible
     seam because the colours differed by a hair.
       · no border-top: that WAS the line;
       · background var(--hdr), the same token .dk-cta uses, rather than a
         hand-matched #0a1428. Matching by token means they cannot drift apart
         the next time the palette moves.
     The only distinction left is the CTA's photo fading in from the right,
     which is exactly what the owner asked to keep. */
  .nvhome .nvh-info{ background:var(--hdr); color:#fff; padding:34px 0 40px; }
  /* .dk-cta ships margin-top:36px, which is correct ABOVE the pair and wrong
     between them — it would reintroduce a gap in the new blended colour. */
  .nvhome .nvh-info{ margin-top:0; }
  .nvhome .nvh-info-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:26px; }
  .nvhome .nvh-info-i{ display:block; }
  .nvhome .nvh-info-ic{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border-radius:11px; background:rgba(255,255,255,.09); color:#8fb4ff; margin-bottom:.85rem; }
  .nvhome .nvh-info-i b{ display:block; font-size:12px; font-weight:800; letter-spacing:.13em;
    text-transform:uppercase; color:#fff; }
  .nvhome .nvh-info-i p{ font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.66); margin:.45rem 0 0 !important; }
}

/* ── narrow desktop / tablet (still ≥561px) ──────────────────────────────── */
@media (min-width:561px) and (max-width:1080px){
  .nvhome .nvh-sec{ padding:44px 0; }
  .nvhome .nvh-head h2{ font-size:32px; }
  .nvhome .nvh-crewrow{ grid-template-columns:repeat(3,1fr); }
  .nvhome .nvh-catrow{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
  .nvhome .nvh-vs{ grid-template-columns:1fr; gap:28px; align-items:start; }
  .nvhome .nvh-vs-intro h2{ font-size:30px; }
  .nvhome .nvh-info-row{ grid-template-columns:repeat(2,1fr); gap:22px; }
}
@media (min-width:561px) and (max-width:680px){
  .nvhome .nvh-crewrow{ grid-template-columns:1fr; }
  .nvhome .nvh-catrow{ grid-template-columns:repeat(2,1fr); }
  .nvhome .nvh-info-row{ grid-template-columns:1fr; }
  .nvhome .nvh-head h2{ font-size:27px; }
}