/* ============================================================
   RESPONSIVE — Mobile-first breakpoint overrides.
   Base styles in all other files target mobile.
   Each block here progressively enhances for larger viewports.

   Breakpoints:
     640px  — large phone
     768px  — tablet portrait
     1024px — tablet landscape / small laptop
     1280px — desktop
     1536px — large desktop

   Section layout grid (from build guide):
   ┌─────────────┬────────────────┬──────────────┬─────────────────────────┐
   │ Section     │ Mobile         │ Tablet       │ Desktop                 │
   ├─────────────┼────────────────┼──────────────┼─────────────────────────┤
   │ Header      │ Hamburger      │ Horiz. nav   │ Full nav                │
   │ Hero        │ Single col     │ Single col   │ Asymmetric 55/45 split  │
   │ Philosophy  │ Stacked, 2×1   │ 2-col, 2×2   │ 2-col, 2×2              │
   │ Day Here    │ Horiz. scroll  │ Horiz. scroll│ Horiz. scroll (always)  │
   │ Staff       │ 1 col          │ 2 cols       │ Masonry asymmetric      │
   │ Portfolio   │ 1 col          │ 2 cols       │ 3 cols                  │
   │ Location    │ Stacked        │ Stacked      │ 2-col side by side      │
   └─────────────┴────────────────┴──────────────┴─────────────────────────┘
   ============================================================ */

/* ----------------------------------------------------------
   640px — Large phone
   ---------------------------------------------------------- */
@media (min-width: 640px) {

  /* Hero: slightly larger image cap on larger phones */
  .hero__image-wrap { max-width: 460px; }

}

/* ----------------------------------------------------------
   768px — Tablet portrait
   ---------------------------------------------------------- */
@media (min-width: 768px) {

  /* Header: show nav + lang switcher, hide hamburger + overlay */
  .site-header__nav  { display: flex; justify-content: flex-start; }
  .site-header__lang { display: flex; }
  .site-header__hamburger { display: none; }
  .nav-overlay { display: none; }

  /* Manifesto: disable marquee, show as normal static text */
  .manifesto__scroll  { overflow: visible; }
  .manifesto__track   { display: block; width: auto; animation: none; }
  .manifesto__quote   { white-space: normal; padding-right: 0; }

  /* Hide the duplicate paragraph — only needed for the mobile marquee loop */
  .manifesto__quote + .manifesto__quote { display: none; }

  /* Philosophy: activate 2-column split */
  .philosophy__layout {
    grid-template-columns: 1fr 1fr;
  }

  /* Vertical divider between heading column and body column */
  .philosophy__left {
    border-right: 1px solid var(--line);
    padding-right: var(--space-7); /* 64px */
  }

  /* Staff: switch header to horizontal row */
  .staff__header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .staff__subtitle { text-align: right; }

  /* Staff grid: 2 columns on tablet */
  .staff__grid { grid-template-columns: 1fr 1fr; }

  /* Portfolio: 2 columns on tablet */
  .portfolio__grid { grid-template-columns: 1fr 1fr; }

  /* Footer: 2-column grid at tablet */
  .footer__grid { grid-template-columns: 1fr 1fr; }

}

/* ----------------------------------------------------------
   1024px — Tablet landscape / small laptop
   ---------------------------------------------------------- */
@media (min-width: 1024px) {

  /* Header: also show the CTA button */
  .site-header__cta { display: inline-flex; }

  /* Widen nav gap for more breathing room */
  .site-header__nav ul { gap: var(--space-6); }

}

/* ----------------------------------------------------------
   1280px — Desktop
   ---------------------------------------------------------- */
@media (min-width: 1280px) {

  /* Hero: activate the 55/45 editorial split */
  .hero__layout {
    grid-template-columns: 55fr 45fr;
    gap: var(--space-6); /* 48px between columns */
  }

  /* Image no longer centered — fills its grid column */
  .hero__image-wrap {
    max-width: none;
    margin-inline: 0;
  }

  /* Staff: 4 equal columns, rows are fully independent (no cross-row overflow) */
  .staff__grid {
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
  }

  /* Reset any lingering nth-child overrides */
  .staff__grid > :nth-child(n) {
    grid-column: auto;
    margin-top: 0;
  }

  /* Portfolio: 3 columns on desktop */
  .portfolio__grid { grid-template-columns: repeat(3, 1fr); }

  /* Location: side-by-side at desktop */
  .location__layout {
    flex-direction: row;
    align-items: start;
  }

  .location__map    { flex: 1; }
  .location__cards  { flex: 0 0 340px; }

  /* Footer: 4-column editorial grid at desktop */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

}

/* ----------------------------------------------------------
   1536px — Large desktop
   ---------------------------------------------------------- */
@media (min-width: 1536px) {

}