/* ============================================================
   The Ghat Experiences — responsive base layer
   Loaded AFTER main.css so these rules win.
   Targets: WCAG 2.2 Reflow (1.4.10) · Target Size (2.5.8) ·
   Apple HIG / Material 44–48px touch targets · iOS input zoom.
   Verified at 320 / 360 / 768 / 1024 / 1200 px.
   ============================================================ */

/* ---------- 1. overflow safety ---------- */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, picture, table { max-width: 100%; }
/* long words / URLs must never push the page wide */
h1, h2, h3, p, li, td, th, summary, .lede { overflow-wrap: break-word; }

/* ---------- 2. notch / safe areas ---------- */
.wrap {
  padding-left: max(clamp(1.1rem, 4vw, 2rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.1rem, 4vw, 2rem), env(safe-area-inset-right));
}
.wa-fab { bottom: max(1.2rem, env(safe-area-inset-bottom)); right: max(1.2rem, env(safe-area-inset-right)); }

/* ---------- 3. touch targets (coarse pointers + small screens) ---------- */
@media (pointer: coarse), (max-width: 1120px) {
  .foot-col a,
  .cta-alt a,
  .pitch-cta,
  .foot-all,
  .xgo,
  .ccta { min-height: 44px; display: inline-flex; align-items: center; }
  .foot-col ul { gap: .15rem; }
  .foot-contact li { min-height: 44px; }
  .faq summary { min-height: 52px; padding-block: 1rem; }
  .sub a { min-height: 48px; }
  .rel-card, .xcard { min-height: 44px; }
}
/* header CTA is small on every device — give it a real target */
.head-plan, .btn { min-height: 44px; }
.nav-toggle { min-width: 44px; min-height: 44px; }

/* ---------- 4. forms: no iOS zoom, comfortable targets ---------- */
.frow input, .frow textarea, .frow select {
  font-size: max(16px, 1rem);
  min-height: 48px;
}
.frow textarea { min-height: 96px; }
.enquiry button[type="submit"] { min-height: 52px; }

/* ---------- 5. fluid type floor ---------- */
body { font-size: clamp(1rem, .96rem + .2vw, 1.05rem); }
.lede { font-size: clamp(1.05rem, 1rem + .6vw, 1.3rem); }

/* ---------- 6. tables scroll, never overflow ---------- */
.tbl-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
@media (max-width: 620px) {
  table.opts { min-width: 540px; font-size: .92rem; }
  .opts thead th, .opts tbody th, .opts tbody td { padding: .75rem .8rem; }
}
/* The rate is the last column, so on a phone it is the part that starts
   off-screen — the hint names it rather than saying "more". Held to the widths
   where the table genuinely does overflow, so it never invites a scroll that
   cannot happen. */
@media (max-width: 580px) {
  .tbl-wrap::after {
    content: 'Swipe for rates →'; display: block; padding: .5rem .9rem;
    font-size: .78rem; color: var(--ink-soft); border-top: 1px solid var(--line);
  }
}

/* ---------- 7. small-screen rhythm ---------- */
@media (max-width: 620px) {
  .band { padding-block: clamp(2.6rem, 9vw, 3.6rem); }
  .sec-head { margin-bottom: 1.8rem; }
  h1 { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  h2 { font-size: clamp(1.6rem, 6.6vw, 2.1rem); }
  .btn-row { gap: .65rem; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .chips { gap: .45rem; }
  .chips li { font-size: .82rem; padding: .45em .8em; }
  .trust-strip { padding: .85rem 1rem; gap: .55rem; }
  .moments li { flex-direction: column; gap: .5rem; padding: 1.2rem 1.15rem; }
  .mnum { font-size: 1.5rem; }
  .split-main, .split-side { padding: 1.4rem 1.25rem; }
  .enquiry { padding: 1.4rem 1.15rem; }
  .cta-panel { padding-block: clamp(2.8rem, 10vw, 3.6rem); }
  .vcard, .steps li, .founder, .ccard { padding: 1.4rem 1.25rem; }
  .prose { font-size: 1.05rem; }
  .foot-main { padding-top: 2.4rem; }
  .day-grid li { padding-left: 1.4rem; }
}
@media (max-width: 380px) {
  .xtop { gap: .35rem; }
  .xno, .xtag { font-size: .72rem; padding: .28em .7em; }
  .xt { font-size: 1.28rem !important; }
}

/* ---------- 8. hover-only safety: show hover affordances on touch ---------- */
@media (hover: none) {
  .xcard .xgo, .rel-card .rel-t, .pitch-cta, .foot-all { opacity: 1; }
  .xbg-pic .xbg, .rel-img-pic .rel-img { transform: none !important; }
}

/* ---------- 9. landscape phones ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .home-hero { min-height: 108vh; }
  .page-hero { min-height: 100vh; }
  .nav { inset-top: 60px; }
}

/* ---------- 10. reduced motion (belt and braces) ---------- */
@media (prefers-reduced-motion: reduce) {
  .xbg, .rel-img, .hero-art { transition: none !important; transform: none !important; }
}