/* ============================================================
   DUNEDIN SPORTS HORSES — Mobile / Responsive Overrides
   Tablet ≤ 900px  |  Mobile ≤ 600px
   ============================================================ */

/* ── NAVIGATION ── */
@media (max-width: 900px) {
  nav { padding: 0 24px !important; }
  .nav-links { gap: 18px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links li { flex-shrink: 0; }
  .nav-cta { padding: 7px 14px !important; font-size: 11px !important; }
}
@media (max-width: 768px) {
  .nav-cta { padding: 6px 11px !important; font-size: 10px !important; letter-spacing: .06em !important; }
}
@media (max-width: 600px) {
  nav { padding: 0 16px !important; height: 58px !important; }
  .nav-links { display: none !important; }
}

/* ── PAGE HERO (inner pages) ── */
@media (max-width: 900px) {
  /* Pull hero up to cover the cream spacer div (padding-top:70px) so navy starts
     immediately below the nav. Compensate with padding-top = nav(70px) + 20px gap.
     NOTE: only applies to services.html which has the cream spacer. Pages with a
     page-switcher are corrected below. */
  .page-hero { margin-top: -70px !important; padding: 90px 32px 44px !important; }
  .page-switcher { padding: 0 24px !important; }
  .page-nav { padding: 0 !important; overflow-x: auto; }
  .page-nav ul, ul.page-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .page-body { padding: 48px 32px !important; }
}
@media (max-width: 600px) {
  /* At ≤600px nav shrinks to 58px — adjust padding-top accordingly (58px + 24px gap). */
  .page-hero { padding: 82px 16px 36px !important; }
  .page-body { padding: 36px 16px !important; }
}

/* ── PAGE HERO: pages with .page-switcher (about / team / hayley / philosophy) ──
   Root cause of Issue 1: the global margin-top:-70px above was designed for services.html
   which wraps .page-hero in a <div style="padding-top:70px"> cream spacer. On these four
   pages the page-switcher (position:sticky;top:70px;height:48px) acts as the nav spacer
   instead — no cream spacer exists. Restoring margin-top:70px keeps the hero correctly
   positioned below the tab bar and prevents the h1 from sliding behind it on mobile.
   Selectors cover both DOM patterns:
     philosophy.html  → .page-switcher + .page-hero        (direct siblings)
     about/team/hayley → .page-switcher ~ .page-section .page-hero (hero inside .page-section) */
@media (max-width: 900px) {
  /* philosophy.html: .page-switcher already has margin-top:70px in its inline CSS,
     so the page-hero (direct sibling) needs margin-top:0 — no extra offset. */
  .page-switcher + .page-hero {
    margin-top: 0 !important;
    padding: 28px 24px 36px !important;
  }
  /* about / team / hayley: .page-switcher has no margin-top, so hero needs 70px
     to sit below the sticky tab bar rather than behind it. */
  .page-switcher ~ .page-section .page-hero {
    margin-top: 70px !important;
    padding: 28px 24px 36px !important;
  }
}
@media (max-width: 768px) {
  /* Tighten hero-to-content gap on all inner pages at mobile */
  .page-body { padding-top: 28px !important; }

  /* philosophy.html has margin-top:70px on .page-switcher (it was the nav-height
     spacer when nav was position:fixed). With nav now position:static on mobile,
     that margin creates a visible gap. Zero it out. */
  .page-switcher { margin-top: 0 !important; }

  /* ── MOBILE NAV SCROLL-AWAY + TAB STRIP FIX ──
     Nav becomes static so it scrolls away naturally. Tab strip then sticks at
     top:0 and becomes the only sticky element at the top of the viewport.
     Without this, the tab strip parks at top:70px with a ~70px empty gap above
     it once the fixed nav is offscreen. */
  nav { position: static !important; }
  .page-switcher { top: 0 !important; }

  /* With a static nav, .page-hero no longer needs to clear it.
     The ≤900px block above sets margin-top:-70px (for services.html cream-spacer
     pages) and 70px (for tab-strip pages). On mobile the tab strip itself acts as
     the spacer, so reset both selectors to 0. */
  .page-switcher + .page-hero,
  .page-switcher ~ .page-section .page-hero {
    margin-top: 0 !important;
  }

  /* services.html / horses.html / what-we-do.html: .page-hero has a cream spacer
     div above it (padding-top:70px). With nav static, the ≤900px margin-top:-70px
     on .page-hero still applies — that's correct and keeps those pages tight.
     No change needed there. */
}
@media (max-width: 600px) {
  .page-switcher + .page-hero,
  .page-switcher ~ .page-section .page-hero {
    padding: 20px 16px 28px !important;
  }
}

/* ── HOMEPAGE HERO ── */
@media (min-width: 769px) {
  /* Fill full viewport height on desktop so the next section is only revealed on scroll. */
  .hero { min-height: 100vh; }
}
@media (max-width: 900px) {
  .hero { min-height: 560px !important; }
  .hero-content { padding: 100px 28px 48px !important; max-width: 100% !important; }
  .hero-stats-strip { flex-direction: column !important; }
  .hero-stat { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; padding: 24px !important; }
  .hero-stat:last-child { border-bottom: none !important; }
}
@media (max-width: 600px) {
  .hero { min-height: 500px !important; background-position: center center !important; }
  .hero-content { padding: 80px 24px 40px !important; }
  h1.hero-h1 { font-size: 34px !important; line-height: 1.1 !important; }
  .about-h2 { font-size: 30px !important; }
}

/* ── ABOUT SPLIT (homepage) ── */
@media (max-width: 900px) {
  .about { grid-template-columns: 1fr !important; }
  .about-photo { min-height: 320px !important; order: -1; }
  .about-txt { padding: 80px 32px !important; }
}
@media (max-width: 600px) {
  .about-txt { padding: 80px 16px !important; }
}

/* ── WHAT WE DO ── */
@media (max-width: 900px) {
  .whatwedo { padding: 64px 32px !important; }
  .wwd-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .whatwedo { padding: 48px 16px !important; }
  .wwd-grid { grid-template-columns: 1fr !important; }
}

/* ── SERVICES (homepage section) ── */
@media (max-width: 900px) {
  .services { padding: 64px 32px !important; }
  .svc-hd { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .wwd-header { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .svc-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .services { padding: 48px 16px !important; }
  .svc-grid { grid-template-columns: 1fr !important; }
}

/* ── PATHWAY ── */
@media (max-width: 900px) {
  .pathway { padding: 64px 32px !important; grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 600px) {
  .pathway { padding: 48px 16px !important; }
}

/* ── PRESS (philosophy.html) ── */
@media (max-width: 900px) {
  .press { padding: 64px 32px !important; }
  .press-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .press { padding: 48px 16px !important; }
  .press-grid { grid-template-columns: 1fr !important; }
}

/* ── HORSES TEASER ── */
@media (max-width: 900px) {
  .horses-teaser { padding: 64px 32px !important; }
  .horses-teaser-grid { grid-template-columns: 1fr !important; }
  .horses-teaser-grid > div:not(:first-child) { min-height: 180px !important; }
}
@media (max-width: 600px) {
  .horses-teaser { padding: 48px 16px !important; }
}

/* ── SPONSORS ── */
@media (max-width: 1024px) {
  .sponsors { padding: 64px 32px !important; }
  .sponsors-top { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .sponsors-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 768px) {
  .sponsors { padding: 48px 16px !important; }
  .sponsors-grid { grid-template-columns: 1fr !important; }
}

/* ── CTA / CONTACT SECTION ── */
@media (max-width: 900px) {
  .cta { padding: 64px 32px !important; grid-template-columns: 1fr !important; gap: 48px !important; overflow: visible !important; }
}
@media (max-width: 768px) {
  /* Gap 1: intro text → form card. Reduces 92px stack (body-margin+grid-gap+card-padding-top) to ~36px. */
  .cta { gap: 20px !important; }
  .cta-left .body { margin-bottom: 0 !important; }
  .cta-card { padding-top: 16px !important; }
  /* Gap 2: card subtitle → first field. Zeros browser <p> default margin-top; caps margin-bottom at 16px. */
  .cta-card-body { margin-top: 0 !important; margin-bottom: 16px !important; }
}
@media (max-width: 600px) {
  .cta { padding: 48px 16px !important; }
}

/* ── SOCIAL BAR ── */
@media (max-width: 900px) {
  .social-bar { padding: 20px 24px !important; flex-wrap: wrap !important; gap: 20px !important; }
  .sb-right { flex-wrap: wrap !important; gap: 12px !important; }
  .sb-links { flex-wrap: wrap !important; gap: 8px !important; }
}
@media (max-width: 600px) {
  .social-bar { padding: 20px 16px !important; flex-direction: column !important; align-items: flex-start !important; }
}

/* ── FOOTER ── */
@media (max-width: 900px) {
  footer { padding: 48px 32px 28px !important; }
  .page-footer { padding: 48px 32px 28px !important; }
  .foot-top { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 600px) {
  footer { padding: 40px 16px 24px !important; }
  .page-footer { padding: 40px 16px 24px !important; }
  .foot-top { grid-template-columns: 1fr !important; gap: 24px !important; }
  .foot-bot { flex-direction: column !important; gap: 10px !important; align-items: flex-start !important; }
}

/* ── INNER PAGE: SHARED LAYOUT CLASSES ── */
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr !important; gap: 40px !important; }
  .three-col { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .sidebar-layout { grid-template-columns: 1fr !important; gap: 40px !important; }
}
@media (max-width: 600px) {
  .two-col, .three-col, .sidebar-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ── TEAM PAGE ── */
@media (max-width: 900px) {
  .team-profile { grid-template-columns: 1fr !important; gap: 28px !important; }
  .team-photo { max-width: 240px; }
  .connect-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 768px) {
  /* Issue 4: full-width cards — remove the 240px cap that was leaving ~35% right margin */
  .team-photo { max-width: 100% !important; }
  /* Tighten internal top padding inside each card (48px desktop → 16px mobile) */
  .team-profile { padding-top: 16px !important; }
}

/* ── HAYLEY PAGE ── */
@media (max-width: 900px) {
  .hayley-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ts-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}

/* ── SERVICES PAGE ── */
@media (max-width: 900px) {
  .svc-options { grid-template-columns: 1fr !important; gap: 16px !important; }
  .svc-fac-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .svc-fac-grid { grid-template-columns: 1fr !important; }
}

/* ── PHILOSOPHY PAGE (about.html MVV section — pre-existing) ── */
@media (max-width: 900px) {
  .mvv-mission { padding: 56px 32px !important; grid-template-columns: 1fr !important; gap: 32px !important; }
  .mvv-vision { padding: 40px 32px !important; grid-template-columns: 1fr !important; gap: 24px !important; }
  .mvv-vals { padding: 40px 32px 56px !important; }
  .mvv-vals-hd { grid-template-columns: 1fr !important; gap: 16px !important; }
  .mvv-grid { grid-template-columns: 1fr !important; }
  .mvv-inner-grid { grid-template-columns: 1fr !important; }
  .reviews-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .mvv-mission { padding: 40px 16px !important; }
  .mvv-vision { padding: 32px 16px !important; }
  .mvv-vals { padding: 32px 16px 48px !important; }
  .reviews-grid { grid-template-columns: 1fr !important; }
}

/* ── ABOUT PAGE (inner) ── */
@media (max-width: 768px) {
  /* Issue 2: pre-footer 3-card cross-link strip (inline-styled, class added to HTML) */
  .about-fwd-strip {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 32px 20px !important;
  }
  .about-fwd-strip > a { border-left: 1px solid var(--border) !important; }
  .about-fwd-strip > a + a { border-top: none !important; }

  /* Issue 3: THE JOURNEY timeline — stack year + description into single column */
  .ts-item { grid-template-columns: 1fr !important; gap: 6px !important; }
  .ts-item:not(:last-child)::after { display: none !important; }
}
@media (max-width: 600px) {
  .about-fwd-strip { padding: 24px 16px !important; }
}

/* ── PHILOSOPHY PAGE (philosophy.html — new sections, Issues 4a–4f) ── */
@media (max-width: 768px) {
  /* 4a: "Four principles. The way we work." — two-column mission intro */
  .mission-section {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 48px 24px !important;
  }
  /* 4b: Values header (headline | intro copy) + 2×2 principles grid */
  .values-section { padding: 48px 24px !important; }
  .values-header {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    margin-bottom: 32px !important;
    padding-bottom: 24px !important;
  }
  .values-grid { grid-template-columns: 1fr !important; }
  /* 4c: "IN THE PRESS" — 4-up grid of press cards */
  .press-bar { padding: 36px 24px !important; }
  .press-items { grid-template-columns: 1fr !important; }
  /* 4d: "What our clients say." reviews header (headline | VIEW ALL ON GOOGLE button) */
  .reviews-section { padding: 48px 24px !important; }
  .reviews-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }
  /* also collapse 3-up review cards to 1 col at this breakpoint */
  .reviews-grid { grid-template-columns: 1fr !important; }
  /* 4e: Google reviews strip (5.0 stat | info | note + LEAVE A REVIEW) */
  .reviews-google {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
  /* 4f: "If this resonates, let's talk." final CTA (headline+copy | 3 sub-cards) */
  .cta-section {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 48px 24px !important;
  }
}
@media (max-width: 600px) {
  .mission-section { padding: 36px 16px !important; }
  .values-section { padding: 36px 16px !important; }
  .press-bar { padding: 28px 16px !important; }
  .reviews-section { padding: 36px 16px !important; }
  .cta-section { padding: 36px 16px !important; }
}

/* ── HORSES PAGE ── */
@media (max-width: 900px) {
  .horses-grid, .arch-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .horses-grid { grid-template-columns: 1fr !important; }
}

/* ── WHAT WE DO PAGE ── */
@media (max-width: 900px) {
  .wwd-opener { padding: 100px 32px 64px !important; }
  .wwd-section { padding: 48px 32px !important; }
  .svc-section { padding: 48px 32px !important; }
  .wwd-section-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .svc-section-inner { grid-template-columns: 1fr !important; gap: 24px !important; }
  .wwd-enquire { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
  .wwd-enquire-btns { flex-wrap: wrap !important; }
  .svc-cta-strip { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .source-strip { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .fwd-strip { padding: 40px 32px !important; grid-template-columns: 1fr !important; gap: 0 !important; }
  .fwd-card + .fwd-card { border-left: 1px solid var(--border) !important; border-top: none !important; }
}
@media (max-width: 600px) {
  .wwd-opener { padding: 88px 16px 52px !important; }
  .wwd-section { padding: 36px 16px !important; }
  .svc-section { padding: 36px 16px !important; }
  .fwd-strip { padding: 32px 16px !important; }
}

/* ── GENERAL: images & overflow ── */
@media (max-width: 900px) {
  img { max-width: 100%; height: auto; }
  .cta-card { padding: 28px 24px !important; }
}
@media (max-width: 600px) {
  .cta-card { padding: 24px 16px !important; }
  .cta-input, .cta-select { font-size: 16px !important; } /* prevent iOS zoom */
}

/* ── MOBILE HAMBURGER NAV ── */
.mob-ham{display:none}
.mob-overlay{display:none}
@media(max-width:768px){
  .nav-links{display:none}
  .mob-ham{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    background:none;border:none;cursor:pointer;padding:4px;
  }
  .mob-ham span{display:block;width:28px;height:2px;background:#B8935A}
  .mob-overlay{
    position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
    background:#0A1628;
    flex-direction:column;align-items:center;justify-content:center;
  }
  .mob-overlay.open{display:flex}
  .mob-close{
    position:absolute;top:24px;right:28px;z-index:9999;
    background:none;border:none;cursor:pointer;
    font-size:32px;color:#B8935A;line-height:1;
  }
  .mob-nav{
    display:flex!important;flex-direction:column;align-items:center;gap:32px;
    /* Override nav element styles that bleed into .mob-nav (also a <nav>) */
    position:static!important;height:auto!important;background:none!important;
    backdrop-filter:none!important;box-shadow:none!important;
    padding:0!important;justify-content:flex-start!important;
    top:auto!important;left:auto!important;right:auto!important;z-index:auto!important;
  }
  .mob-nav a{
    font-family:'Cormorant Garamond',serif;font-size:28px;font-weight:400;
    color:#fff;text-decoration:none;
  }
  body.mob-open > nav{display:none!important}
  /* what-we-do.html: Three steps section */
  .three-steps-grid{grid-template-columns:1fr!important;gap:28px!important}
  /* Horses page: stacking grids */
  .string-grid{grid-template-columns:1fr!important;gap:20px!important}
  .sale-grid{grid-template-columns:1fr!important;gap:20px!important}
  /* Horses page: Nelson 2-col text/photo */
  .nelson-grid{grid-template-columns:1fr!important;gap:32px!important}
  /* Horses page: pre-footer 3-card strip */
  .fwd-cta{grid-template-columns:1fr!important;gap:0!important;padding:32px 20px!important}
  .fwd-cta > a{border-left:1px solid var(--border)!important}
  .fwd-cta > a + a{border-top:none!important}
  /* Horses page: flex intro headers */
  .arch-hd{flex-direction:column!important;align-items:flex-start!important;gap:20px!important}
  .sh{flex-direction:column!important;align-items:flex-start!important;gap:20px!important}
}