/* ═══════════════════════════════════════════════════════════════
   Orange Studios — responsive-fix.css  (v1.3.0)
   Mobile repair layer. Loaded AFTER theme.css.
   PURPOSE: page templates contain inline style="" grids that
   normal media queries cannot override. Attribute selectors +
   !important below win against inline styles (CSS spec: an
   !important declaration in a stylesheet beats a normal inline
   declaration). NO colours are changed — existing vars only.
═══════════════════════════════════════════════════════════════ */

/* ── Global safety guards (all viewports) ─────────────────── */
img, video, iframe { max-width: 100%; }
img { height: auto; }
h1, h2, h3, .hero-h1 { overflow-wrap: break-word; }

/* ═══ TABLET & MOBILE ═══════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1) Collapse every hard-coded inline 2-column grid to 1 column.
        Covers the exact strings used in page-about.php (×4),
        page-session.php, page-sessions.php, page-contact.php.   */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* 2) Inline side-paddings of 48–64px are too wide on phones. */
  [style*="padding:96px 48px"], [style*="padding: 96px 48px"],
  [style*="padding:80px 48px"], [style*="padding: 80px 48px"],
  [style*="padding:64px 48px"], [style*="padding: 64px 48px"] {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  /* 3) Specification tables (About page) — allow horizontal
        scroll instead of squeezing / overflowing the viewport. */
  table { display: block; width: 100%; overflow-x: auto;
          -webkit-overflow-scrolling: touch; }
  table td, table th { min-width: 140px; }

  /* 4) Forms: full-width fields, 16px font stops iOS auto-zoom. */
  input[type="text"], input[type="email"], input[type="tel"],
  select, textarea {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }
  .gform_wrapper .gfield { width: 100% !important; }

  /* 5) Bring hero trust stats BACK on mobile as a compact row
        (theme.css hides them — but 4.9★ / 500+ / 12yrs is the
        strongest trust signal a first-time visitor sees).       */
  .hero-stats {
    display: flex !important;
    gap: 20px !important;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .hero-stats > div { transform: none !important; }

  /* 6) Long serif display headings need tighter clamp on phones */
  h1 { font-size: clamp(32px, 9vw, 42px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(26px, 7.5vw, 34px) !important; }

  /* 7) Breadcrumbs can collide with fixed nav on short pages   */
  .breadcrumb { padding-top: calc(var(--nav-h) + 16px) !important; }

  /* 8) Google Maps / video embeds keep a sane mobile height    */
  iframe[src*="google.com/maps"] { height: 300px !important; }
}

/* ═══ SMALL PHONES ══════════════════════════════════════════ */
@media (max-width: 480px) {
  [style*="display:grid"], [style*="display: grid"] {
    gap: 24px !important;
  }
  .hero-stats { gap: 16px !important; }
  .hero-stats strong, .hero-stats b { font-size: 20px !important; }
  h1 { font-size: clamp(30px, 10vw, 36px) !important; }
  /* Stack the two-button CTA rows */
  [style*="display:flex"][style*="gap:16px"] a,
  .hero-cta a, .cta-band a { width: auto; }
}

/* ═══ STICKY MOBILE BOOKING BAR ═════════════════════════════
   A shop should never let a visitor leave without a door handle.
   Two thumb-reach actions, always visible on phones.
   Uses existing palette vars only.                              */
.os-sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 998;
  background: var(--wh);
  border-top: 1px solid var(--cr);
  box-shadow: 0 -4px 20px rgba(44,40,37,.10);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
}
.os-sticky-cta a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  border-radius: var(--radius);
}
.os-sticky-cta .os-cta-book {
  background: var(--tc);
  color: var(--wh);
}
.os-sticky-cta .os-cta-wa {
  background: var(--iv2);
  color: var(--ch);
  border: 1px solid var(--cr);
}
@media (max-width: 768px) {
  .os-sticky-cta { display: flex; }
  body { padding-bottom: 76px; }        /* keep footer readable */
  /* keep bar out of the way when the enquiry form is focused */
  body.os-form-focus .os-sticky-cta { transform: translateY(110%); transition: transform .25s var(--ease); }
}