/* ============================================================
 * The Getaway Club — Mobile Responsive Shim
 * Loaded AFTER all page-specific CSS so it overrides safely.
 * Targets: <600px (phones), <380px (small phones / SE-1)
 * ============================================================ */
@import url('https://api.fontshare.com/v2/css?f[]=clash-grotesk@300,400,500,600,700&display=swap');

/* ============================================================
 * SINGLE TYPEFACE — Clash Grotesk across the entire website.
 * Overrides every other family (Playfair, Bodoni, Caveat,
 * Big Shoulders, Inter, Georgia). Loaded last so it wins.
 * ============================================================ */
html body, html body *, html body *::before, html body *::after{
  font-family:'Clash Grotesk','Inter',system-ui,-apple-system,sans-serif !important;
}

/* ============================================================
 * Logo wordmark — brand lockup colour combination:
 * serif font, "The" + "club" in the contrast colour, "getaway"
 * green italic. Navy text on the light nav, cream on the dark
 * footer; "getaway" stays green on both.
 * ============================================================ */
html body .logo-text{font-family:'Playfair Display',Georgia,serif !important;color:var(--navy) !important;font-weight:700 !important;font-style:normal !important;letter-spacing:-.3px}
html body .logo-text em{font-family:'Playfair Display',Georgia,serif !important;color:var(--green) !important;font-weight:700 !important;font-style:italic !important}
html body .footer .logo-text,html body .footer .brand-block .logo-text,
html body .site-foot .logo-text{color:#FFFEF5 !important}
html body .footer .logo-text em,html body .footer .brand-block .logo-text em,
html body .site-foot .logo-text em{color:var(--green) !important}

/* ============================================================
 * Site-wide HEADLINE scale: 65% of original (-35% per spec)
 * Headlines only — body, lede, sub-copy, stats untouched.
 * Prefixed with html body to outrank inline !important rules.
 * ============================================================ */
/* Hero headlines */
html body .hero h1                                    {font-size:clamp(19.5px,2.93vw,33.8px) !important;line-height:1.08}
/* Section + page titles */
html body .sec-title                                  {font-size:clamp(18.2px,2.47vw,29.9px) !important;line-height:1.15}
html body .page-title                                 {font-size:clamp(26px,3.9vw,46.8px)   !important;line-height:1.1}
html body .section-title                              {font-size:clamp(20.8px,2.6vw,28.6px) !important;line-height:1.1}
/* Itinerary + Edition detail headlines */
html body .itin-head-main h1                          {font-size:clamp(23.4px,3.38vw,42px)  !important;line-height:1.06}
html body .edition-title                              {font-size:clamp(22.1px,2.73vw,33.8px) !important;line-height:1.06}
/* Retreat / segment + modal + CTA headlines */
html body .retreat-hero-body h3                       {font-size:clamp(15.6px,1.82vw,23.4px) !important}
html body .itin-modal-body h3                         {font-size:23.4px                      !important}
html body .cta-strip h3                               {font-size:clamp(23.4px,3.25vw,39px)  !important}
html body .intro h2                                   {font-size:clamp(18.2px,2.6vw,31.2px) !important}
/* Card titles */
html body .itin-card h4                               {font-size:12px                        !important}
html body .intro-tag h4                               {font-size:13px                        !important}
html body .day-content h4                             {font-size:13px                        !important}
html body .retreat-content[data-content="luxe"] .retreat-hero-body h3{font-size:clamp(18.2px,1.95vw,27.3px) !important}
html body .retreat-content[data-content="luxe"] .itin-card h4{font-size:13.65px !important}
/* Generic heading tags — fallback for anywhere a raw h1/h2/h3 is used */
html body h1                                          {font-size:clamp(20.8px,2.6vw,31.2px) !important;line-height:1.15}
html body h2                                          {font-size:clamp(16.9px,1.95vw,24.7px) !important;line-height:1.2}
html body h3                                          {font-size:13px                        !important;line-height:1.3}

/* ============================================================
 * Site-wide SPACING reduction: section padding, intro padding,
 * grid gaps, and large vertical margins shrunk ~35% so the
 * smaller headlines don't float in oceans of whitespace.
 * ============================================================ */
html body .section                                    {padding:75px 0 !important}
html body .section-tight                              {padding:50px 0 !important}
html body .intro                                      {padding:60px 0 !important}
html body .ig-section                                 {padding:50px 0 !important}
html body .destinations                               {padding-top:75px !important;padding-bottom:75px !important}
/* Itinerary detail page */
html body .days-section                               {padding:55px 0 !important}
html body .incl-section                               {padding:55px 0 !important}
html body .takeaways                                  {padding:50px 0 !important}
html body .cta-strip                                  {padding:75px 0 !important}
html body .itin-head                                  {padding-bottom:40px !important}
html body .itin-hero-img                              {margin-bottom:30px !important}
html body .itin-marquee                               {padding:22px 0 !important}
/* Trips page hero + grid */
html body .page-hero                                  {padding:90px 0 38px !important}
html body .trips-grid                                 {gap:75px !important;margin:30px 0 16px !important}
html body .trips-section                              {padding-bottom:50px !important}
/* Section-header centred block (eyebrow / title / sub) */
html body .sec-head-center                            {margin:0 auto 38px !important}
html body .section-sub                                {margin-bottom:30px !important}
/* Hero pieces */
html body .hero                                       {padding-bottom:140px !important}
html body .hero h1                                    {margin-bottom:14px !important}
html body .hero p                                     {margin-bottom:24px !important}
/* Retreat hero (Five flavours tabs) */
html body .retreat-hero-body                          {padding:32px !important}
html body .retreat-hero-body h3                       {margin-bottom:10px !important}
html body .retreat-hero-body p                        {margin-bottom:16px !important}
html body .retreat-tags                               {margin-bottom:18px !important}
/* Footer top padding */
html body .footer                                     {padding-top:50px !important}
html body .site-foot                                  {padding-top:50px !important}
/* Tighter mobile spacing on phones */
@media(max-width:600px){
  html body .section                                  {padding:48px 0 !important}
  html body .section-tight                            {padding:34px 0 !important}
  html body .intro                                    {padding:40px 0 !important}
  html body .ig-section                               {padding:34px 0 !important}
  html body .days-section                             {padding:36px 0 !important}
  html body .incl-section                             {padding:36px 0 !important}
  html body .takeaways                                {padding:34px 0 !important}
  html body .cta-strip                                {padding:48px 0 !important}
  html body .trips-grid                               {gap:48px !important}
  html body .hero                                     {padding-bottom:60px !important}
}

/* ===== Touch targets >= 44px (Apple/Google guideline) ===== */
@media(max-width:980px){
  .menu-toggle{padding:12px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  .nav-cta{padding:12px 18px;min-height:42px;display:inline-flex;align-items:center;justify-content:center}
}

/* ===== Nav shrink on small screens ===== */
@media(max-width:600px){
  .nav-inner{padding:12px 16px;gap:8px}
  .logo-stamp{height:36px}
  .logo-text{font-size:17px}
}
@media(max-width:380px){
  .logo-stamp{height:32px}
  .logo-text{font-size:15px;letter-spacing:-.3px}
  .nav-cta{padding:10px 14px;font-size:11px;letter-spacing:.3px}
}

/* ===== Hero viewport: dynamic units for iOS Safari URL bar ===== */
.hero{min-height:100svh}
@media(max-width:600px){
  .hero{min-height:auto !important;padding-top:100px !important;padding-bottom:60px !important}
  .hero-actions{flex-direction:column;width:100%}
  .hero-actions .btn-primary,
  .hero-actions .btn-outline{width:100%;justify-content:center;padding:16px 24px}
}
@media(max-width:380px){
  .hero h1{font-size:clamp(26px,7vw,32px) !important;line-height:1.1}
  .hero p{font-size:13.5px !important}
  .hero-eyebrow{font-size:10px;padding:6px 12px;letter-spacing:1px}
}

/* ===== Hero stats (index) — 1-col on very small ===== */
@media(max-width:380px){
  .hero-stats{grid-template-columns:1fr !important;margin:24px 16px 0}
  .stat{border-right:none !important;border-bottom:1px solid var(--line) !important;padding:18px 20px}
  .stat:last-child{border-bottom:none !important}
  .stat-num{font-size:24px}
}

/* ===== Section padding shrink ===== */
@media(max-width:600px){
  .section{padding:70px 0}
  .section-tight{padding:50px 0}
  .intro{padding:60px 0}
  .ig-section{padding:50px 0}
}
@media(max-width:380px){
  .section{padding:54px 0}
  .container{padding:0 16px}
}

/* ===== Section headings shrink ===== */
@media(max-width:600px){
  .sec-title{font-size:clamp(22px,6vw,30px) !important}
  .sec-sub{font-size:13.5px}
  .sec-head-center{margin-bottom:40px}
}

/* ===== Trips grid: prevent overflow ===== */
@media(max-width:600px){
  .trip-card{padding:22px 18px;border-radius:18px}
  .trip-card h3{font-size:22px !important;line-height:1.2}
  .trip-card-head{gap:6px}
  .trip-status{margin-left:0;font-size:10px}
  .trip-meta{grid-template-columns:1fr !important;gap:8px 12px;font-size:12.5px}
  .trip-price-num{font-size:24px !important}
  .trip-price-num small{font-size:10.5px}
  .trip-foot{flex-direction:column !important;align-items:stretch !important;gap:14px}
  .trip-reserve{width:100%;text-align:center;padding:14px 18px;min-height:46px}
  .trip-highlights{padding:12px 14px;font-size:12.5px}
}
@media(max-width:380px){
  .trip-card{padding:18px 14px}
  .trip-chip{padding:5px 9px;font-size:10px}
  .trip-spots{padding:5px 9px;font-size:10px}
}

/* ===== Itinerary detail page ===== */
@media(max-width:600px){
  .itin-side .price{font-size:26px !important}
  .day-row{padding:14px 14px !important}
  .day-num{width:40px;height:40px;font-size:14px}
  .itin-pill{top:14px !important;left:14px !important;font-size:10px;padding:4px 10px}
}

/* ===== Contact page ===== */
@media(max-width:600px){
  .whatsapp-hero{padding:60px 20px !important;border-radius:18px}
  .wa-big-btn{padding:16px 24px !important;font-size:13px;width:100%;justify-content:center}
  .sec-card{padding:28px 22px !important}
  .foot-strip{padding:48px 20px !important}
  .foot-strip .info{gap:10px}
  .faq-q{padding:16px 18px;font-size:14px}
}

/* ===== Bookings page — fix chip overflow ===== */
@media(max-width:600px){
  .chip,.retreat-pick label{white-space:normal !important;word-break:break-word;line-height:1.4}
  .booking-form{padding:28px 20px !important}
  .form-row{grid-template-columns:1fr !important}
}
@media(max-width:380px){
  .retreat-pick{grid-template-columns:1fr !important}
}

/* ===== Destinations — taller, no horizontal overflow ===== */
@media(max-width:600px){
  .dest-photo{aspect-ratio:4/3 !important}
  .dest-row{gap:18px !important;margin-bottom:50px}
  .highlights{grid-template-columns:1fr !important;gap:10px}
  .filter-bar{top:57px !important}
}

/* ===== About — founder stamp positioning ===== */
@media(max-width:600px){
  .founder-feature-stamp,.portrait-stamp{width:90px !important;height:90px !important;bottom:-20px !important;right:-10px !important}
  .note-body{font-size:18px !important}
  .note-opener{font-size:20px !important}
}

/* ===== Footer — universal ===== */
@media(max-width:600px){
  .site-foot{padding:50px 0 30px}
  .foot-grid{grid-template-columns:1fr !important;gap:30px}
  .foot-tagline{font-size:11px;letter-spacing:1.5px}
}

/* ===== Forms — touch-friendly inputs ===== */
@media(max-width:600px){
  input,select,textarea{font-size:16px !important;padding:14px 16px;min-height:48px}
  textarea{min-height:100px}
  button[type="submit"]{min-height:50px;font-size:14px}
}

/* ===== Sticky offsets — match actual nav height ===== */
@media(max-width:600px){
  .filter-bar,.itin-side,.sidebar,.gameplan-sticky{top:60px !important}
}

/* ===== Prevent horizontal scroll on body for all pages ===== */
html,body{max-width:100vw;overflow-x:hidden}

/* ===== Modal close buttons touch target ===== */
@media(max-width:600px){
  .modal-close,.itin-modal-close{
    min-width:44px;min-height:44px;
    display:flex;align-items:center;justify-content:center;
    font-size:24px
  }
}

/* ===== IG grid: 2-col on very small ===== */
@media(max-width:560px){
  .ig-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px}
}

/* ===== CTA strip — single column mobile ===== */
@media(max-width:600px){
  .cta-strip{padding:60px 20px !important;text-align:center}
  .cta-strip h2{font-size:clamp(24px,7vw,32px) !important}
  .cta-strip .actions{flex-direction:column;width:100%}
  .cta-strip .actions a{width:100%;justify-content:center}
}

/* ===== Decorative blobs/circles — hide on small ===== */
@media(max-width:600px){
  .hero::before,.foot-strip::before,.foot-strip::after,
  .whatsapp-hero::before,.whatsapp-hero::after,
  .world-section::before{display:none !important}
}

/* ===== Itinerary page mobile fixes ===== */
@media(max-width:860px){
  .itin-head{
    display:block !important;
  }
  .itin-side{
    position:static !important;
    top:auto !important;
    margin-top:32px;
    width:100%;
  }
  .itin-head-main{
    width:100%;
  }
}
@media(max-width:600px){
  .itin-head{
    padding:0 0 32px !important;
  }
  .itin-side{
    padding:24px 20px !important;
  }
  .itin-side .price{
    font-size:28px !important;
  }
}