/* TTC — Mobile responsive overlay for legacy pages.
   Loaded AFTER each page's inline <style>. Stacks all multi-column layouts,
   tightens padding, scales typography down, fixes overlapping absolute layouts,
   and gives mobile visitors a usable nav. */

/* ──────────────────────────────────────────────────────────────────
   Tablet & smaller (≤960px)
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {

  /* NAV: tighten + drop the desktop link list, keep CTA + location */
  nav {
    padding: 0 18px !important;
    height: 60px !important;
  }
  .nav-logo img { height: 36px !important; }
  .nav-location { font-size: 9.5px !important; letter-spacing: 0.16em !important; }
  .nav-links {
    display: none !important;
  }
  .nav-links.mobile-show {
    display: flex !important;
    position: fixed;
    top: 60px; left: 0; right: 0;
    background: rgba(11,31,58,0.98);
    flex-direction: column;
    padding: 18px 22px;
    gap: 14px;
    border-bottom: 1px solid var(--border, rgba(196,151,58,0.25));
  }
  .nav-toggle {
    display: inline-flex !important;
    background: none;
    border: 1px solid var(--gold, #C4973A);
    color: var(--gold, #C4973A);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    padding: 8px 14px;
    cursor: pointer;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Mobile (≤768px) — STACK ALL THE THINGS
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* HERO — was a 2-col grid; stack to single column */
  .hero {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .hero-left {
    padding: 96px 22px 48px !important;
  }
  .hero-right {
    min-height: 50vh !important;
    position: relative !important;
  }
  .hero-img, .hero-img-overlay { position: absolute !important; }
  .hero h1 {
    font-size: clamp(36px, 11vw, 56px) !important;
    margin-bottom: 20px !important;
  }
  .hero-logo img { height: 90px !important; }
  .hero-logo-text { font-size: 18px !important; }
  .hero-logo-sub { font-size: 11px !important; }
  .hero-quote {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin-bottom: 30px !important;
    padding-left: 14px !important;
    max-width: 100% !important;
  }
  .hero-actions { flex-direction: column !important; align-items: stretch !important; }
  .hero-actions a { text-align: center !important; }
  .hero-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-top: 36px !important;
  }
  .hero-stats > div { padding: 14px !important; }

  /* Section padding (broad cleanup) */
  section {
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .events, .experience, .courts, .concierge, .membership, .featured,
  .lineage-head, .lineage-grid, .timeline-intro, .timeline-rail,
  .split-grid, .partner-list, .venue-grid, .flagship,
  .pickleball-grid, .features-grid, .tennis-grid, .utr-nums, .facilities-grid, .newporter-grid,
  .event-types-intro, .event-types-grid, .venues-grid, .clients-logos,
  .process-intro, .process-steps, .versatility-grid, .inquiry, .form-row,
  .team-grid, .philosophy-grid, .service-menu-grid,
  .cards-grid, .terms-grid, .exp-intro, .exp-grid, .mem-grid, .courts-nums,
  .events-grid, .footer-top {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Big section headlines — bring them down so they don't break 2 words/line */
  .section-title, h2.section-title, h2 {
    font-size: clamp(30px, 8vw, 48px) !important;
    line-height: 1.05 !important;
  }
  .section-eyebrow {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
  }
  h3 { font-size: clamp(20px, 5.5vw, 30px) !important; }
  p { font-size: 14.5px !important; line-height: 1.6 !important; }

  /* Specifically the events section "100+ Events a Year" headline + CTA */
  .events-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  .events-header h2 {
    font-size: clamp(36px, 10vw, 56px) !important;
  }
  .events-header a, .events-header .btn-outline, .events-header .btn-navy,
  .events-header .btn-gold {
    align-self: stretch !important;
    text-align: center !important;
  }

  /* Numbered intro tiles (01 / 02 etc.) — make sure label + body don't overlap */
  .exp-card, .event-card, .mem-card, .court-card, .venue-card, .step-card,
  .partner-card, .client-card, .feature-card, .terms-card {
    padding: 20px !important;
  }
  .exp-num, .step-num, .court-stat-num {
    font-size: clamp(40px, 12vw, 64px) !important;
  }

  /* "More Than a Club" type sections — kill any floats / absolute overlaps */
  .exp-intro, .timeline-intro, .process-intro, .event-types-intro {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    align-items: start !important;
  }
  .exp-intro > *, .timeline-intro > *, .process-intro > *, .event-types-intro > * {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Buttons */
  .btn-primary, .btn-outline, .btn-gold, .btn-navy {
    padding: 14px 22px !important;
    font-size: 11px !important;
    text-align: center !important;
    display: inline-block !important;
  }

  /* Cards / images */
  img { max-width: 100% !important; height: auto !important; }

  /* Footer cleanup — was 4-column, now stack */
  footer { padding: 40px 22px 24px !important; }
  .footer-top {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .footer-tagline {
    font-size: 14px !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }
  .footer-col-title {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
  }
  .footer-links a, .footer-address {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
    padding: 20px 0 0 !important;
  }
  .footer-copy { font-size: 11px !important; }

  /* Forms (events page inquiry form) */
  .form-row { grid-template-columns: 1fr !important; gap: 14px !important; }
  input, select, textarea { font-size: 16px !important; }  /* prevents iOS zoom */

  /* Tables anywhere */
  table { font-size: 13px !important; }
}

/* ──────────────────────────────────────────────────────────────────
   Small mobile (≤480px) — extra tightening
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-left { padding: 80px 18px 36px !important; }
  section { padding-left: 18px !important; padding-right: 18px !important; }
  .hero h1 { font-size: clamp(34px, 12vw, 48px) !important; }
  .section-title, h2 { font-size: clamp(26px, 9vw, 40px) !important; }
  .hero-stats { grid-template-columns: 1fr !important; }
  .hero-actions a { font-size: 11px !important; }
}