/**
 * Velonix Labs — Homepage only
 * Enqueued ONLY on front-page.php (see inc/enqueue.php). Nothing in this
 * file should be referenced by any other template — if a future page
 * needs something similar, promote it into components.css instead of
 * duplicating it here (this is exactly what happened with .hero-grid,
 * .hero-visual, .hero-photo, .quality-grid, .why-grid and friends: they
 * were reused on the About page and the Product Detail page without
 * being promoted first, which silently broke both pages' layout and
 * icon sizing since this file was never loaded there. Fixed by moving
 * those rules to components.css — see the note there.)
 *
 * .hero-actions and .hero-stats: flex-wrap added (verified this was
 * genuinely missing before — reproduced the overflow at mobile widths
 * with the ORIGINAL hero image restored, proving it wasn't related to
 * the later image swap). .btn keeps its own white-space:nowrap (a
 * button's own label shouldn't break mid-word), but the row containing
 * multiple buttons/stats needs to be allowed to wrap them onto new
 * lines instead of forcing horizontal overflow.
 */

.hero-actions{display:flex; flex-wrap:wrap; gap:16px; margin-bottom:48px;}
.hero-stats{display:flex; flex-wrap:wrap; gap:24px 0; padding-top:32px;}
.stat{flex:1 1 140px; padding-right:20px;}
.stat-num{font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:600;}
.stat-label{font-size:12px; color:var(--ink-faint); margin-top:5px; line-height:1.4;}

@media (max-width:600px){
  .hero-stats{flex-direction:column; gap:20px;}
  .stat{padding-right:0;}
}

/* ===== Homepage hero — mobile-specific composition =====
   .hero-grid/.hero-visual/.hero-photo (components.css) are SHARED with
   single-product.php's .product-hero-grid — none of their base rules
   are touched here. Everything below is scoped under
   .homepage-hero-grid (added alongside .hero-grid in front-page.php,
   this page only), using grid-template-areas layered on top of the
   shared grid's existing column/gap rules, not replacing them.

   Three separate, explicit states, not one rule cascading down:
   desktop reproduces today's exact layout (copy+actions+stats stacked
   left, image right), tablet reproduces today's exact stacked-column
   order (copy, actions, stats, then image last) — neither changed —
   and only mobile (≤767px) gets the new composition and is a genuine
   redesign, not a smaller version of the same stack: image moves
   directly under the intro copy instead of trailing after the actions
   and stats, gets a shallow landscape crop instead of the tall
   portrait desktop uses, the three trust stats become a compact
   3-across card row instead of large stacked blocks, and the two CTAs
   stack full-width rather than sitting side by side. */
.homepage-hero-grid{
  grid-template-areas:
    "copy visual"
    "actions visual"
    "stats visual";
}
.homepage-hero-grid .hero-copy{ grid-area:copy; }
.homepage-hero-grid .hero-actions{ grid-area:actions; margin-bottom:0; }
.homepage-hero-grid .hero-stats{ grid-area:stats; }
.homepage-hero-grid .hero-visual{ grid-area:visual; }

@media (min-width:768px) and (max-width:1023px){
  /* Tablet composition — revised per explicit request. Previously,
     tablet was governed by the same max-width:1023px breakpoint as
     mobile, so it inherited mobile's own single-column stacked
     composition (copy, actions, stats, then the image last, full
     column width) just with the image separately shrunk via a
     percentage max-width — confirmed by reading the actual rule
     before changing it, not assumed: that block genuinely produced
     "the mobile layout, stretched wider" rather than a real
     intermediate breakpoint. Mobile itself is unaffected by this
     change — it has always had its own separate, more specific
     max-width:767px block further down, which already fully overrides
     whatever's here; narrowing THIS block to the 768–1023px range only
     is what makes this a tablet-only change.

     Composition: desktop's own two-column layout (text left, image
     right, same grid-area names desktop uses), not a stack — reusing
     desktop's actual pattern rather than reinventing one. Only the
     column ratio and gap differ from desktop's 1.05fr:0.95fr / 72px:
     1.2fr:0.8fr gives the text column relatively more room and the
     image column less, and a tighter 40px gap suits the narrower
     viewport — together this is what keeps the image "appropriately
     scaled" rather than a straight scaled-down copy of desktop's
     near-even split. */
  .homepage-hero-grid{
    grid-template-columns:1.2fr 0.8fr;
    grid-template-areas:
      "copy visual"
      "actions visual"
      "stats visual";
    gap:40px;
  }

  /* Sized by the column ratio above — the same way desktop's own
     image is sized by ITS column ratio, not by a percentage max-width
     layered on top (that percentage-of-a-full-width-stacked-column
     approach was specific to the old single-column composition this
     replaces, and doesn't apply once the image has its own narrower
     grid column to begin with). No width/max-width override needed:
     letting .hero-visual fill its own already-narrower tablet column
     via grid's normal behaviour is what makes this read as "desktop
     composition, scaled down", not "a resized mobile card". */
  .homepage-hero-grid .hero-visual{
    width:auto;
    max-width:none;
    margin:0;
  }
}

@media (max-width:767px){
  .homepage-hero{ padding:32px 0 24px; }

  .homepage-hero-grid{
    grid-template-areas:
      "copy"
      "visual"
      "actions"
      "stats";
    gap:20px;
  }

  /* Full composition kept, not cropped: the source photo is ~4:5
     (1122×1402 ≈ 0.80, essentially identical to the shared
     .hero-visual aspect-ratio:4/5 default in components.css — not
     overridden here, so object-fit:cover has nothing to crop since
     container ratio ≈ image ratio already). "Smaller on mobile"
     instead comes from rendering the whole card at reduced width, not
     from cropping the photo — a 16:9 crop was tried first and
     rejected: it cut off part of the bottle/packaging composition,
     which read as a banner image rather than the product photograph
     it's meant to be. Centred rather than left/right-aligned so it
     reads as a deliberately smaller, framed object within the column,
     not content pinned to one edge. */
  .homepage-hero-grid .hero-visual{ max-width:68%; margin:0 auto; }

  /* Two full-width stacked buttons read as more deliberately "primary"
     on a phone than two squeezed side by side, and avoids the wrap
     ever looking accidental. */
  .homepage-hero-grid .hero-actions{ flex-direction:column; }
  .homepage-hero-grid .hero-actions .btn{ width:100%; }

  /* Compact 3-across card row replaces the previous large stacked
     blocks — reuses the same surface/border/radius language as
     .trust-chip elsewhere rather than inventing a new card style. */
  .homepage-hero-grid .hero-stats{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    padding-top:0; flex-wrap:unset;
  }
  .homepage-hero-grid .stat{
    flex:none; padding-right:0;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
    padding:10px 8px; text-align:center;
  }
  .homepage-hero-grid .stat-num{ font-size:13px; }
  .homepage-hero-grid .stat-label{ font-size:9.5px; margin-top:3px; line-height:1.35; }
}

.products-foot{display:flex; justify-content:center; margin-top:32px;}

.timeline{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.timeline-line{position:absolute; top:19px; left:19px; right:19px; height:1px; background:var(--line); z-index:0;}
.timeline-step{position:relative; z-index:1;}
.timeline-node{width:38px; height:38px; border-radius:50%; background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--accent); margin-bottom:20px;}
.timeline-step h3{font-size:15px; font-weight:600; margin-bottom:9px;}
.timeline-step p{font-size:13px; color:var(--ink-soft); line-height:1.65; max-width:220px;}

/* Previously had zero mobile handling at all — 4 equal columns at a
   375px viewport gives each step roughly 55px, forcing headings like
   "Dispatch" to wrap into single characters and causing genuine
   horizontal overflow (confirmed: 140px at 375px before this fix).
   A single stacked column is the actual fix here, not a smaller
   version of the same 4-column squeeze — the horizontal connecting
   line is dropped rather than converted to vertical (it was purely
   decorative connective tissue between circles that no longer sit in
   a row; the numbered circles and generous gap between steps already
   carry that "sequence" feeling on their own). */
@media (max-width:767px){
  .timeline{grid-template-columns:1fr; gap:32px;}
  .timeline-line{display:none;}
  .timeline-step p{max-width:none;}
}