/* GoldenKey — responsive layer (SH.1.1) · loaded on every page after the theme CSS
   1. small phones (≤ 400px): nothing may push the page wider than the screen
   2. tablets: comfortable columns
   3. big screens (≥ 1700px / ≥ 2200px): the site scales up instead of floating as a small island in the middle
   Only additive rules — existing styles are untouched. */

/* ---------------------------------------------------------------- 0. never a horizontal scrollbar */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg, iframe, table { max-width: 100%; }
img, video { height: auto; }
pre, code { overflow-wrap: anywhere; }
.az-scroll, .gkz-docs-wrap, .gk-za-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------------------------------------------------------------- 1. small phones */
@media (max-width: 400px) {
  .gk-gsearch { flex: 1 1 100%; min-width: 0; height: 36px; }
  .gk-gsearch input { font-size: .85rem; }
  .gk-gsearch > button { width: 26px; height: 26px; flex: none; }
  .gk-header-bar, .gk-topbar-in, .gk-nav-in, .gk-ai-bar { flex-wrap: wrap; min-width: 0; }
  .hm-hero-bg, .gkz-hero-bg { right: 0; width: 100%; opacity: .25; }
  .nf-center, .nf-wrap, .lg-wrap { grid-template-columns: 1fr; }
  h1 { font-size: clamp(1.6rem, 8vw, 2.1rem) !important; line-height: 1.15; overflow-wrap: anywhere; }
  .gk-fab { right: 10px; bottom: 10px; gap: 8px; }
  .gk-fab-btn { width: 44px; height: 44px; }
  .gk-share-sheet { left: 8px; right: 8px; }
}
@media (max-width: 640px) {
  .gkz-pkgs, .hm-tiles, .hm-services, .nf-cards, .gkz-why, .gkz-steps { grid-template-columns: 1fr !important; }
  .gkz-acts-rows .gkz-act { grid-template-columns: auto minmax(0, 1fr); }
  .gkz-act code { font-size: .72rem; }
  .ga-tools .ga-tool span { font-size: .8rem; }
  .gk-ai-welcome-card { width: calc(100vw - 24px); max-height: 88vh; overflow: auto; }
}

/* ---------------------------------------------------------------- 2. tablets */
@media (min-width: 641px) and (max-width: 1024px) {
  .hm-tiles, .hm-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- 3. big screens: scale the whole page up */
@media (min-width: 1700px) {
  :root, .hm, .is-zone, body { --wrap: 1400px; --z-wrap: 1360px; --c-wrap: 1480px; }
  html { font-size: 17px; }
  .lg-wrap, .nf-wrap { max-width: 1480px; }
  .hh-in { max-width: 1480px; }
  .ga-wrap, .ga-home, .ga-chat { max-width: 1320px; }
}
@media (min-width: 2200px) {
  :root, .hm, .is-zone, body { --wrap: 1640px; --z-wrap: 1600px; --c-wrap: 1720px; }
  html { font-size: 18.5px; }
  .lg-wrap, .nf-wrap { max-width: 1720px; }
  .hh-in { max-width: 1720px; }
  .ga-wrap, .ga-home, .ga-chat { max-width: 1520px; }
  .ga-msg { max-width: min(900px, 92%); }
}
@media (min-width: 3000px) {
  :root, .hm, .is-zone, body { --wrap: 2000px; --z-wrap: 1960px; --c-wrap: 2080px; }
  .hh-in { max-width: 2080px; }
  html { font-size: 21px; }
}

/* ---------------------------------------------------------------- 4. touch + motion */
@media (hover: none) and (pointer: coarse) {
  a, button, .gkz-btn, .ga-tool, .ga-ib { min-height: 42px; }
  .gkz-act { padding-top: 10px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-hero-bg img, .gkz-hero-bg img { animation: none !important; }
}