/* ============================================================
   SANABEL — responsive.css  (mobile-first overrides)
   ============================================================ */

/* ─── Tablet & below ─── */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__cta{display:none}
  .nav__burger{display:flex}

  .story__grid{grid-template-columns:1fr}
  .story__visual{aspect-ratio:3/4;order:-1}   /* 1/1 letterboxed the portrait reel badly */

  .why__grid{grid-template-columns:1fr;gap:1.5rem}

  .contact__grid{grid-template-columns:1fr}
  .contact__info{padding-top:2rem}

  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}

  .btl__head{grid-template-columns:1fr;gap:1rem;align-items:start}
}

/* ─── Services horizontal reel on tablet/phone: wider panels ─── */
@media (max-width:767px){
  .service-card{flex-basis:86vw;height:clamp(400px,60vh,520px)}
}

/* ─── Mobile ─── */
@media (max-width:640px){
  section{padding-block:2.5rem}
  main > section:first-child:not(.hero){padding-top:7rem}

  .hero{padding-top:6rem}
  /* 13vw, not 18vw: Alexandria runs wider than Playfair did, and at 18vw
     "40 Years of" broke as "40 Years / of". Measured max for one line at
     375px is 14vw; 13vw leaves margin down to 320px phones. */
  .hero__title{font-size:clamp(2.4rem,13vw,5rem)}
  .hero__cta{gap:1.2rem}

  .story__stats{gap:1.5rem}

  .value__headline{font-size:clamp(1.8rem,9vw,3rem)}

  .lightbox__nav{width:44px;height:44px;font-size:1.5rem}

  .service-card__num{font-size:5rem;top:1rem}
  .service-card__list{grid-template-columns:1fr}

  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .footer__bar{flex-direction:column;text-align:left}

  .contact__s{font-size:35vh}
}

/* ─── Disable smooth-scroll heavy effects on small screens handled in JS ─── */
@media (max-width:640px){
  .section-number{font-size:45vw}
  .value__ghost{font-size:45vw}
}

@media (max-width:900px){
  .stats__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  .work__grid{grid-template-columns:1fr}
}

/* Five chips wrap to two rows on a phone, and a sticky bar then eats ~110px of
   a 667px viewport. Scroll them instead. overflow-x on the sticky element
   itself is fine -- only an ANCESTOR scroll container breaks position:sticky. */
@media (max-width:640px){
  .events__filters{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    overscroll-behavior-x:contain;
  }
  .events__filters::-webkit-scrollbar{display:none}
  .events__chip{flex:none}
}

@media (max-width:1024px){ .service-subgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:780px){ .services__grid{grid-template-columns:1fr} }
@media (max-width:560px){ .service-subgrid{grid-template-columns:1fr} }

/* .nav__links and .nav__cta are both hidden below 1024px, so the in-bar
   switcher goes with them — the overlay copy is the one phones get. */
@media (max-width:1023px){ .nav__lang:not(.nav__lang--mobile){display:none} }
@media (min-width:1024px){ .nav__lang--mobile{display:none} }