/* ==========================================================================
   Seasons Find - responsive pass
   Loaded last. Fixes overflow, cramping and touch-target sizing across the
   full width range. Breakpoints chosen from real device widths, not guesses.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global overflow guards
   -------------------------------------------------------------------------- */
html,body{max-width:100%;overflow-x:clip}
img,svg,video,table,pre{max-width:100%}
/* long words / URLs must never push a container wide */
h1,h2,h3,h4,p,li,td,th,summary,.lede{overflow-wrap:break-word}

/* Wide elements scroll inside themselves rather than the page */
.table-wrap{-webkit-overflow-scrolling:touch}

/* --------------------------------------------------------------------------
   >= 1400px  - keep lines readable on very wide screens
   -------------------------------------------------------------------------- */
@media(min-width:1400px){
  :root{--container:1280px}
  .container-narrow{width:min(100% - 2.5rem,820px)}
}

/* --------------------------------------------------------------------------
   1081 - 1280px  - nav is present but tight
   -------------------------------------------------------------------------- */
@media(max-width:1280px) and (min-width:1081px){
  .nav__link{padding:.6rem .62rem;font-size:.855rem}
  .header__cta .btn--gold{padding:.85rem 1.2rem;font-size:.85rem}
  .dropdown{width:min(560px,calc(100vw - 3rem))}
}

/* --------------------------------------------------------------------------
   <= 1080px  - burger takes over
   -------------------------------------------------------------------------- */
@media(max-width:1080px){
  .header__inner{gap:var(--sp-4)}
  .brand__name{font-size:1.05rem}
  .brand__sub{letter-spacing:.24em}
  .hero__inner{padding-block:clamp(3rem,8vw,5rem)}
  .herorail{margin-top:var(--sp-5)}
}

/* --------------------------------------------------------------------------
   <= 860px  - tablet portrait
   -------------------------------------------------------------------------- */
@media(max-width:860px){
  .section{padding-block:clamp(3rem,7vw,4.5rem)}
  .split{gap:var(--sp-6)}
  .split--reverse .split__media{order:0}      /* never invert on a single column */
  .split__badge{position:static;margin-top:-1px;border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:none}
  .steps::before{display:none}                 /* connector is meaningless stacked */
  .step{text-align:left}
  .ctaband__inner{grid-template-columns:1fr}
  .ctaband__actions{justify-self:stretch;min-width:0}
  .tool{grid-template-columns:1fr}
  .tool__result{min-height:0}
  .scrolly__sticky{position:static}
}

/* --------------------------------------------------------------------------
   <= 640px  - phones
   -------------------------------------------------------------------------- */
@media(max-width:640px){
  :root{--header-h:68px}

  .container,.container-narrow{width:min(100% - 2rem,100%)}

  /* Type: tighten the top of the scale so headlines do not dominate */
  h1{font-size:clamp(2rem,8.5vw,2.6rem);letter-spacing:-.03em}
  h2{font-size:clamp(1.6rem,6.5vw,2.1rem)}
  h3{font-size:1.18rem}
  .lede{font-size:1rem}

  .hero__inner{padding-block:3rem 2.5rem}
  .hero__lede{font-size:1rem}
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
  .hero__points{gap:.6rem 1.25rem}
  .hero__points li{font-size:.83rem}

  .herorail__inner{border-radius:var(--radius)}
  .herorail__item{padding:var(--sp-4)}

  .phero__inner{padding-block:2.25rem}
  .phero p{font-size:1rem}

  .btn{padding:.95rem 1.4rem}
  .btn--lg{padding:1.05rem 1.5rem;font-size:.95rem}
  .btn-row{gap:.6rem}
  .btn-row .btn{flex:1 1 100%}

  .card__body{padding:var(--sp-4) var(--sp-4) var(--sp-5)}
  .icard{padding:var(--sp-5) var(--sp-4)}
  .formcard{padding:1.25rem}
  .callout{padding:var(--sp-4)}

  .gallery{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .filters{gap:.4rem}
  .filter{padding:.5rem .85rem;font-size:.8rem}

  .stats{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
  .stat{padding:var(--sp-4) .25rem}
  .stat__n{font-size:2.1rem}
  .stat__l{font-size:.78rem}

  .faq summary{padding:1rem 1.1rem;font-size:.94rem;gap:.75rem}
  .faq__a{padding:0 1.1rem 1.1rem}

  .footer__bar{flex-direction:column;align-items:flex-start;gap:.75rem}
  .footer__legal{gap:var(--sp-4)}

  /* lightbox controls must not sit under the thumb bar */
  .lightbox__prev{left:.5rem}
  .lightbox__next{right:.5rem}
  .lightbox__btn{width:44px;height:44px}
  .lightbox__close{top:.75rem;right:.75rem}

  /* tool controls */
  .optset label{padding:.55rem .85rem;font-size:.82rem}
  .result__n{font-size:2.4rem}
}

/* --------------------------------------------------------------------------
   <= 380px  - small phones
   -------------------------------------------------------------------------- */
@media(max-width:380px){
  .container,.container-narrow{width:min(100% - 1.5rem,100%)}
  h1{font-size:1.85rem}
  .brand__name{font-size:.95rem}
  .brand__sub{font-size:.52rem;letter-spacing:.2em}
  .brand__mark{width:36px;height:36px}
  .gallery{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .callbar a{font-size:.84rem;padding:.75rem}
}

/* --------------------------------------------------------------------------
   Touch devices - bigger targets, no hover-dependent affordances
   -------------------------------------------------------------------------- */
@media(hover:none){
  .nav__link,.dropdown__link,.chips a,.footer a{min-height:44px;display:flex;align-items:center}
  .card__link{min-height:44px}
  /* hover-only reveals must be visible by default on touch */
  .gallery__cap{opacity:1;transform:none}
  .gallery__item::after{opacity:.85}
  .card__media::after{opacity:1}
  .tilt__glare{display:none}
}

/* --------------------------------------------------------------------------
   Landscape phones - the hero must not eat the whole screen
   -------------------------------------------------------------------------- */
@media(max-height:520px) and (orientation:landscape){
  .hero__inner{padding-block:2rem}
  h1{font-size:1.9rem}
  .hero__lede{font-size:.95rem;margin-bottom:1.25rem}
  .loader__mark{width:54px;height:54px}
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print{
  .topbar,.header,.drawer,.callbar,.wafloat,.progress,.loader,
  .ctaband,.lightbox,.marquee{display:none !important}
  body{padding-bottom:0;color:#000;background:#fff}
  .reveal,.stagger>*{opacity:1 !important;transform:none !important}
  .section{padding-block:1.5rem}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}