/* =========================================================
   APTIKA — RESPONSIVE RULES
   Desktop-first source in style.css; breakpoints below
   adapt layout intentionally rather than just shrinking it.

   Note on the redesign's hover micro-interactions (card lift/zoom,
   chip and flow-step hover, magnetic buttons): those are gated at
   their definition in style.css / main.js with
   `(hover: hover) and (pointer: fine)` / an isCoarsePointer check
   rather than a viewport width here, so a touch laptop at desktop
   width is still excluded correctly. What's left to handle per
   breakpoint below is pure layout/rhythm — sizing the new seam
   blends and hero type down so they read as intentional, not just
   the desktop design shrunk.
   ========================================================= */

/* ---- 1280px : slightly tighter editorial grid ---- */
@media (max-width: 1280px){
  /* 4 real columns (logo/tag, Explore, Brand, Connect) — 3 tracks here
     was pushing the 4th into its own misaligned implicit row. */
  .footer__top{ grid-template-columns: 1.2fr 1fr 1fr 1fr; }
}

/* ---- 1024px : tablet — collapse nav, stack asym grids less aggressively ---- */
@media (max-width: 1024px){
  .navbar__links{ display: none; }
  .navbar__burger{ display: flex; }

  .grid-split{ grid-template-columns: 1fr; gap: 40px; }
  .grid-split.reverse{ direction: ltr; }
  /* desktop's rtl trick (un-set just above) puts the heading first
     visually without reordering the DOM; once stacked to one column
     that trick is gone, so force heading-first here too, matching the
     other (non-reversed) grid-split blocks on the same page. */
  .grid-split.reverse > h2{ order: -1; }
  .align-right-desktop{ text-align: left; }
  .grid-asym, .grid-asym.reverse{ grid-template-columns: 1fr; gap: 32px; }

  /* sticky only makes sense pinned in its own column beside the
     scrolling steps — once the grid stacks to one column, pinning it
     would mean it's only ever visible for the first step and every
     later step's photo change happens off-screen. Swap to one photo
     per step instead, inline with its own caption. */
  .seed-journey__visual{ display: none; }
  .seed-journey__step-media{ display: block; }

  .footer__top{ grid-template-columns: 1fr 1fr; gap: 32px; }

  /* not just single-column grid: with a fixed-height pinned panel (JS sets
     inset:0) and align-items:center, an auto grid row can size far smaller
     than the aspect-ratio'd .media it holds, so the image bleeds upward
     into the text row above it. display:block sidesteps that entirely —
     same fix already used at the 768px tier below. */
  .season__panel{ display: block; }
  .season__panel > * + *{ margin-top: 24px; }

  .flow__step{ grid-template-columns: 60px 1fr; }
}

/* ---- 768px : mobile-first behaviors kick in ---- */
@media (max-width: 768px){
  :root{ --gutter: 20px; }

  .navbar{ padding: 20px var(--gutter); }
  .navbar.is-scrolled{ padding: 14px var(--gutter); }
  .navbar__logo{ height: 48px; }

  .hero{ padding-bottom: 56px; }
  .hero__scroll{ display: none; }
  .hero__actions{ flex-direction: column; align-items: flex-start; gap: 18px; }

  .footer__top{ grid-template-columns: 1fr; gap: 28px; padding-bottom: 40px; }
  .footer__bottom{ flex-direction: column; align-items: flex-start; }

  .chip-row{ gap: 8px; }

  /* same scroll-triggered horizontal track as desktop (JS pins + drives
     it via vertical scroll) — the panel just restacks to one column */
  .process-track{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .process-panel{ grid-template-columns: 1fr; height: 100svh; padding: 100px var(--gutter) 40px; gap: 20px; }

  .season{ min-height: auto; padding: 80px 0 140px; }
  .season__track{ left: var(--gutter); right: var(--gutter); bottom: 24px; flex-wrap: wrap; gap: 10px; }
  .season__panel{ display: block; }
  .season__panel + .season__panel{ margin-top: 56px; }

  .chapter__num{ font-size: 14px; }

  /* the seam blend reads best as a generous editorial gesture on wide
     sections; at mobile widths section-pad itself has already
     compressed, so keep the blend proportionate rather than letting it
     dominate a short section. */
  .bg-white::before, .bg-honey::before, .bg-linden::before,
  .bg-persimmon::before, .bg-ink::before{ height: clamp(32px, 10vw, 64px); }

  /* card lift/zoom is hover-gated everywhere already; on touch it
     simply never triggers, so the resting shadow (--shadow-sm) is
     the only state mobile ever sees — kept exactly as authored. */
}

/* ---- 480/390/375/360 : small phones ---- */
@media (max-width: 480px){
  .display-1{ font-size: clamp(40px, 12vw, 56px); }
  .hero__title{ font-size: clamp(44px, 13vw, 64px); letter-spacing: -.01em; }
  .display-2{ letter-spacing: -.01em; }
  .footer__logo{ height: 26px; }
  .mobile-menu__item{ font-size: clamp(30px, 12vw, 42px); }
}

/* ---- custom cursor: desktop, fine-pointer only ---- */
@media (max-width: 1024px), (pointer: coarse){
  .cursor{ display: none !important; }
  html{ cursor: auto; }
}

/* ---- avoid any horizontal scroll leaks ---- */
html, body{ max-width: 100%; }