/* ═════════════════════════════════════════════════════════════
   responsive.css — shared mobile/tablet layer for all pages
   Loaded last so it wins ordering ties against page-level CSS.
   !important is used only where it must beat an inline style.
   ═════════════════════════════════════════════════════════════ */

/* ── 0. Global overflow + media guards (all widths) ─────────── */
html { -webkit-text-size-adjust: 100%; }

img, svg, video, canvas, iframe {
  max-width: 100%;
}
img, video { height: auto; }

/* body-only overflow-x:hidden does not stop the page scrolling —
   the root element needs it too. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Long unbroken strings (emails, URLs) must not force width */
p, li, h1, h2, h3, h4, a, span, td, th, blockquote { overflow-wrap: break-word; }


/* ═══════════════════════════════════════════════════════════
   1. MOBILE NAV — burger + overlay
   ═══════════════════════════════════════════════════════════ */
.nav-burger {
  display: none;
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -10px -10px -10px 0;   /* 44px tap target, no layout shift */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger-box {
  position: absolute;
  inset: 0;
  display: block;
}
.nav-burger-box span {
  position: absolute;
  left: 50%;
  width: 22px;
  height: 1.5px;
  margin-left: -11px;
  background: var(--text, #111);
  border-radius: 2px;
  transition: transform .34s cubic-bezier(.4, .01, .2, 1), opacity .2s;
}
.nav-burger-box span:nth-child(1) { top: 18px; }
.nav-burger-box span:nth-child(2) { top: 25px; }

.nav-burger.is-open .nav-burger-box span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-burger.is-open .nav-burger-box span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* Overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 32px 40px;
  background: var(--bg, #FAFAF7);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); }
.mobile-menu[hidden] { display: none; }

.mobile-menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-menu-list li {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
  transition-delay: calc(60ms * var(--i, 0) + 80ms);
  border-bottom: 1px solid var(--border, #E0DDD7);
}
.mobile-menu-list li:last-child { border-bottom: none; }
.mobile-menu.is-open .mobile-menu-list li { opacity: 1; transform: translateY(0); }

.mobile-menu-list a {
  display: block;
  padding: 18px 2px;
  font-family: var(--font-d, Georgia, serif);
  font-size: clamp(1.6rem, 8vw, 2.3rem);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-transform: none;
  color: var(--text, #111);
  text-decoration: none;
}
.mobile-menu-list a[aria-current="page"],
.mobile-menu-list a:active { color: var(--accent, #B5885A); }

.mobile-menu-foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border, #E0DDD7);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-b, system-ui, sans-serif);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--text-muted, #787570);
}
.mobile-menu-foot a { color: var(--accent, #B5885A); text-decoration: none; }

/* Lock the page behind the overlay */
html.menu-open { overflow: hidden; }

@media (max-width: 800px) {
  .nav-burger { display: block; }
  .nav-links  { display: none !important; }
}
@media (min-width: 801px) {
  .mobile-menu { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mobile-menu-list li, .nav-burger-box span { transition: none !important; }
}


/* ═══════════════════════════════════════════════════════════
   1b. ABOUT PANEL
   The About view is an overlay with `position:absolute; inset:0`
   inside the hero. Two consequences worth spelling out:

   a) It's positioned against the hero's *padding box*, so it does
      NOT inherit the hero's 40px side gutter — on any viewport
      narrower than its 1080px max-width the content ran flush to
      both screen edges. That's every tablet size.
   b) Being absolute, it can't make the hero taller. When its
      content is taller than the hero (any short viewport, i.e.
      every phone in landscape) the surplus was silently cut off
      by the hero's overflow:hidden.

   (a) is fixed at all widths; (b) needs the panel back in normal
   flow, which is what the query below does.
   ═══════════════════════════════════════════════════════════ */

/* (a) — give the overlay the gutter it can't inherit */
.hero-about-overlay {
  padding-left: 40px;
  padding-right: 40px;
}

/* Photo column shrinks with the viewport instead of staying at 380px */
@media (max-width: 1100px) {
  .hero-about-overlay > div {
    grid-template-columns: 1fr minmax(200px, 340px) !important;
    gap: 48px !important;
  }
}

/* (b) — below 900px, or on any short viewport (landscape phones),
   drop the overlay into normal flow so the hero grows to fit it
   and nothing can be clipped. */
@media (max-width: 900px), (max-height: 620px) {
  /* overflow only — keep the hero's designed full-viewport height.
     Once the panel is back in flow the hero grows past min-height
     on its own, so forcing min-height:auto would just flatten the
     hero on tablets for no benefit. */
  #hero { overflow: visible !important; }

  .hero-about-overlay {
    position: static !important;
    display: none;
    /* back in flow it sits inside #hero, so it inherits the hero's
       gutter — the 40px above would double up */
    padding: 0 !important;
    transform: none !important;
  }
  .hero-about-overlay.show { display: flex; }
  #heroHomePanel.hide { display: none; }

  /* Single column, and the photo reads better centred once below the text */
  .hero-about-overlay > div {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    align-items: start !important;
  }
  .about-photo-wrap {
    max-width: 280px !important;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* Landscape phones: the hero still reserves 100vh, which wastes the
   little height there is. Tighten the vertical rhythm. */
@media (max-height: 620px) and (orientation: landscape) {
  .hero-about-overlay > div {
    grid-template-columns: 1fr minmax(180px, 260px) !important;
    gap: 32px !important;
  }
  .about-photo-wrap { max-width: 220px !important; }
}


/* ═══════════════════════════════════════════════════════════
   2. TABLET  (≤ 900px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Wide multi-column inline grids step down before collapsing */
  [style*="repeat(5,1fr)"],
  [style*="repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════
   3. PHONE / SMALL TABLET  (≤ 760px)
   Collapse every inline-styled grid. Inline styles can only be
   beaten with !important, hence the attribute selectors.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 760px) {

  /* --- two-column inline grids → single column --- */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns: 1fr 380px"],
  [style*="grid-template-columns: 1fr 420px"],
  [style*="grid-template-columns: 220px 1fr"],
  [style*="grid-template-columns: 180px 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* --- 3/4/5-up inline grids → two columns --- */
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"],
  [style*="repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Inline column spans must not survive the collapse — a `span 2` on a
     one-column grid invents an implicit `auto` column and wrecks the row.
     `1 / -1` spans the explicit columns without creating new ones. */
  [style*="grid-column:span"],
  [style*="grid-column: span"] {
    grid-column: 1 / -1 !important;
    max-width: none !important;
  }

  /* Inline gaps of 40px+ are too generous once stacked */
  [style*="gap:56px"], [style*="gap: 56px"],
  [style*="gap:64px"], [style*="gap: 64px"],
  [style*="gap:80px"], [style*="gap: 80px"] { gap: 32px !important; }

  /* --- full-bleed bands: page padding is 20px here, not 40px --- */
  [style*="margin-left:-40px"],
  [style*="margin-left: -40px"] {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="padding:56px"], [style*="padding: 56px"] {
    padding: 36px 20px !important;
  }

  /* --- card padding trim --- */
  [style*="padding:28px 32px"], [style*="padding: 28px 32px"],
  [style*="padding:28px 24px"], [style*="padding: 28px 24px"],
  [style*="padding:28px 22px"], [style*="padding: 28px 22px"] {
    padding: 22px 18px !important;
  }

  /* --- class-based grids the page CSS didn't cover --- */
  .proto-layout { grid-template-columns: 1fr !important; }

  /* Carousel controls stay inside the frame */
  .wf-nav { flex-wrap: wrap; gap: 12px; }
  .wf-carousel, .wf-track-wrap { max-width: 100%; }
  .wf-btn { min-width: 40px; min-height: 40px; }

  /* --- shared page furniture --- */
  #nav { padding: 14px 20px !important; }

  .meta-item { min-width: 50% !important; }

  /* Hero heights: let the hero grow with its content */
  #hero, .cs-hero { min-height: auto; }

  /* Text column first, photo second */
  .about-grid { grid-template-columns: 1fr !important; }

  /* Buttons wrap instead of overflowing */
  .hero-actions,
  .cs-hero-actions { flex-wrap: wrap; gap: 12px; }

  /* Comfortable tap targets */
  .btn, .about-btn-fill, .about-btn-outline,
  .nav-logo, .contact-email, .social-list a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Tables scroll rather than blow out the layout */
  table { display: block; width: 100%; overflow-x: auto; }
}


/* ═══════════════════════════════════════════════════════════
   4. NARROW PHONE  (≤ 560px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 560px) {

  /* Multi-up grids stay 2-up — short stats and metrics read fine that way */
  [style*="repeat(3,1fr)"], [style*="repeat(3, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* …but grids of *cards* (bordered/rounded panels holding prose) go
     full width — two 160px columns of wrapped body copy is unreadable. */
  [style*="repeat(3,1fr)"]:has(> [style*="border-radius"]),
  [style*="repeat(3, 1fr)"]:has(> [style*="border-radius"]),
  [style*="repeat(4,1fr)"]:has(> [style*="border-radius"]),
  [style*="repeat(4, 1fr)"]:has(> [style*="border-radius"]),
  [style*="repeat(5,1fr)"]:has(> [style*="border-radius"]),
  [style*="repeat(5, 1fr)"]:has(> [style*="border-radius"]),
  [style*="grid-template-columns:1fr 1fr"]:has(> [style*="border-radius"]),
  [style*="grid-template-columns: 1fr 1fr"]:has(> [style*="border-radius"]) {
    grid-template-columns: 1fr !important;
  }

  /* Grid children must be allowed to shrink below their content width */
  [style*="grid-template-columns"] > * { min-width: 0; }

  [style*="padding:24px"], [style*="padding: 24px"],
  [style*="padding:24px 20px"], [style*="padding: 24px 20px"],
  [style*="padding:22px 26px"], [style*="padding: 22px 26px"] {
    padding: 18px 16px !important;
  }

  #nav { padding: 12px 18px !important; }
  .nav-logo { font-size: .82rem !important; letter-spacing: .05em !important; }

  /* Fluid display type */
  .hero-h1        { font-size: clamp(2rem, 11vw, 2.6rem) !important; }
  .cs-hero h1     { font-size: clamp(1.9rem, 10vw, 2.5rem) !important; }
  .contact-h      { font-size: clamp(1.9rem, 10vw, 2.5rem) !important; }
  .hero-cycling   { font-size: clamp(1.5rem, 8vw, 2.1rem) !important; }

  .hero-sub, .cs-hero-sub { font-size: .94rem !important; }

  /* Stat rows: 2-up instead of a cramped 4-up */
  .hero-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px 18px !important; }

  .meta-item { min-width: 100% !important; border-right: none !important; }

  /* Section padding */
  section, .wrap, .cs-body { padding-left: 18px !important; padding-right: 18px !important; }

  /* Full-bleed bands follow the tighter padding */
  [style*="margin-left:-40px"], [style*="margin-left: -40px"] {
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Long email addresses shrink to fit */
  .contact-email { font-size: clamp(.95rem, 4.6vw, 1.4rem) !important; word-break: break-all; }

  .footer-bar { flex-direction: column; align-items: flex-start; gap: 6px; }
}


/* ═══════════════════════════════════════════════════════════
   5. Landscape phones — reclaim vertical space
   ═══════════════════════════════════════════════════════════ */
@media (max-height: 480px) and (orientation: landscape) {
  #hero { min-height: auto !important; padding-top: 88px !important; padding-bottom: 48px !important; }
  .mobile-menu { justify-content: flex-start; padding-top: 76px; }
  .mobile-menu-list a { padding: 11px 2px; font-size: 1.3rem; }
  .mobile-menu-foot { margin-top: 22px; }
}