/* ARRAY.GO — Responsive layer (split out of styles.css, matching Kroma Living's file layout).
   Note: <arraygo-map>'s internal two-column layout switches to one column below
   900px via its own matchMedia listener (arraygo-map.js), not CSS here. */

@media (max-width: 640px) {
  /* bigger, pre-zoomed map: fixed taller box instead of the desktop
     aspect-ratio box, filled edge-to-edge (see preserveAspectRatio=slice
     in arraygo-map.js); setZoomable(true) is wired up in script.js. */
  .map-frame .arraygo-map-host {
    aspect-ratio: auto;
    height: 68vh;
    min-height: 380px;
    border-radius: 16px;
  }
  /* match the map card's own box exactly (not the taller .map-frame-wrap,
     which also includes the legend list stacked below it on mobile) so the
     dark overlay only covers the map itself */
  .map-pinch-hint {
    display: flex;
    inset: auto;
    top: 0;
    left: 0;
    right: 0;
    height: 68vh;
    min-height: 380px;
    border-radius: 16px;
    overflow: hidden;
  }

  /* the hover/focus 3D flip (see .team-card in styles.css) is a desktop-
     only affordance. On mobile the "focus" half of that selector fires
     just from tapping/dragging to scroll the card into place — there's no
     real hover to pair it with — so the card can get stuck mid-flip while
     the carousel keeps moving it, producing a skewed, half-rotated card.
     Neutralize the flip here and show the role as plain text instead. */
  .team-card:hover .team-card-inner,
  .team-card:focus-within .team-card-inner { transform: none; }
  .team-role { display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-500); }

  /* hamburger nav: pill shrinks to logo + toggle, links drop into a panel */
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: max(220px, 70vw);
    padding: 10px;
    border-radius: 20px;
    background: rgba(0, 0, 0, .92);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .14);
  }
  .nav-links.nav-open { display: flex; }
  .nav-links .nav-link { padding: 12px 14px; }
  .nav-links .lang-toggle { align-self: flex-start; margin: 6px 0 2px 14px; }

  /* hero: bigger rotating claim, tighter spacing between elements */
  .hero-cycle { height: 24vh; min-height: 170px; }
  .hero-claim { font-size: clamp(64px, 16vw, 110px); }
  .hero-logo { width: min(420px, 78vw); }
  .hero-tagline { margin-top: 14px; white-space: normal; }
  .hero-cta { margin-top: 22px; }

  /* less dead air between the map legend and the contact section */
  .section-exp { padding-bottom: 48px; }
  .section-contact { padding-top: 56px; }
}

@media (max-width: 820px) {
  .attrs-grid { grid-template-columns: 1fr !important; }
  .exp-stats, .vals-grid, .contact-grid, .audiences { grid-template-columns: 1fr !important; }
  .footer-legal { justify-content: flex-start !important; }
  .vals-grid > div { padding: 22px 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--hairline); }
}
/* .hscroll-track-team / .hscroll-track-tech column counts at tablet/mobile
   widths are handled in carousel.css alongside the rest of the carousel. */