/* ===================================================================
   Sallaum Terminal — responsive layer (v1.8.0)
   Loaded LAST, after mobile.css. Fixes layout on laptops, tablets and
   phones for every Sallaum block. Images always get an explicit height
   (never aspect-ratio alone) so they cannot collapse to 0px on mobile
   Safari / in-app browsers.
   Breakpoints: 1280 laptop · 1024 tablet landscape · 860 tablet · 600 phone · 400 small phone
   =================================================================== */

/* ---- Global guards ---------------------------------------------- */
main, .site-main { overflow-x: clip; }
.section .container, .section--tight .container { min-width: 0; }
.grid > *, .svc > *, .wavemakers > *, .split > *, .sl-split > *, .about-band > *, .mv-grid > * { min-width: 0; }
img { height: auto; }
.photo__img, .split-tile__img, .esg-fullshot__img { height: 100%; }

/* ---- Header: mobile menu button pinned to the right ------------- */
@media (max-width: 860px) {
  .site-header__inner { justify-content: space-between; }
  .site-header .nav-toggle { margin-left: auto; margin-right: -8px; }
}

/* ---- Image + copy blocks (Media & copy, Copy + Image) ----------- */
.section .wavemakers {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.section .wavemakers__media {
  position: relative; display: block; width: 100%;
  height: clamp(360px, 44vw, 620px);
  aspect-ratio: auto;
}
.section .wavemakers__media .photo { position: absolute; inset: 0; height: 100%; width: 100%; }
.section .wavemakers__media .photo__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.section .wavemakers__copy { overflow-wrap: break-word; }
.section .wavemakers__title { font-size: clamp(30px, 3.4vw, 54px); max-width: 100%; }

/* ---- Two-column story (inline grid) ----------------------------- */
.sl-two-col-story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) !important; gap: clamp(32px, 5vw, 64px) !important; }
.sl-two-col-story__media .photo { height: clamp(320px, 36vw, 440px) !important; }

/* ---- Service rows ------------------------------------------------ */
.svc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 5vw, 64px); }
.svc__media { height: clamp(300px, 34vw, 440px); }
.svc-chip { white-space: nowrap; }

/* ---- Banners with inline fixed heights --------------------------- */
.sl-image-banner, .sl-video-banner { max-height: 100svh; }

/* ================= LAPTOP ≤1280 ================================== */
@media (max-width: 1280px) {
  .section .wavemakers { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ================= TABLET LANDSCAPE ≤1024 ======================== */
@media (max-width: 1024px) {
  .section .wavemakers { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .section .wavemakers__media { order: -1; height: clamp(300px, 52vw, 460px); }
  .section .wavemakers__text { max-width: 60ch; margin: 18px 0 28px; }
  .sl-block--media-copy .container { padding-left: 24px; padding-right: 24px; }

  .sl-two-col-story__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 32px !important; }
  .sl-two-col-story__media { order: -1; }
  .sl-two-col-story__media .photo { height: clamp(280px, 52vw, 440px) !important; }

  .svc, .svc--flip { grid-template-columns: minmax(0, 1fr) !important; gap: 28px; }
  .svc--flip .svc__media, .svc .svc__media { order: -1; }
  .svc__media { height: clamp(280px, 52vw, 420px); }

  .sl-split, .split { gap: 48px; }
  .sl-split__body, .split__body { margin-top: 60px; }
}

/* ================= TABLET ≤860 =================================== */
@media (max-width: 860px) {
  .sl-split, .split { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .sl-split__body, .split__body { margin-top: 0; }
  .sl-txr__col { max-width: none !important; }
  .values-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .esg-kn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mv-grid { grid-template-columns: minmax(0, 1fr); }
  .culture-banner { height: auto; min-height: 420px; }
  .culture-banner__inner { min-height: 420px; padding: 48px 0; gap: 28px; }
  .sl-image-banner, .sl-video-banner { height: auto !important; min-height: 440px; }
  .sl-image-banner > .container { min-height: 440px; padding-top: 72px; padding-bottom: 72px; }
  .sl-video-banner > div[style*="z-index:2"] { position: relative !important; min-height: 440px; padding: 72px 0; }
  .split-tile { height: clamp(260px, 48vw, 390px); }
}

/* ================= PHONE ≤600 ==================================== */
@media (max-width: 600px) {
  .container, .sl-block--media-copy .container { padding-left: 20px !important; padding-right: 20px !important; }
  .section { padding: 56px 0; }
  .section--tight { padding: 48px 0; }

  .section .wavemakers { gap: 24px; }
  .section .wavemakers__media { height: clamp(220px, 64vw, 320px); border-radius: var(--sl-r-sm); }
  .section .wavemakers__title { font-size: clamp(28px, 8vw, 36px); letter-spacing: -.5px; line-height: 1.08; }
  .section .wavemakers__text { font-size: 16px; line-height: 1.6; margin: 14px 0 24px; }

  .sl-two-col-story__media .photo { height: clamp(220px, 64vw, 320px) !important; }
  .svc__media { height: clamp(220px, 64vw, 300px); }
  .svc__chips { gap: 8px; }

  .values-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .esg-kn__grid { gap: 12px; }
  .esg-kn__card { padding: 22px 18px; min-height: 0; }
  .esg-kn__head { font-size: 26px; margin-bottom: 24px; }
  .esg-kn__num { font-size: 38px; margin: 18px 0 8px; }
  .metrics-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric { padding: 28px 12px; }
  .metric__v { font-size: clamp(24px, 7vw, 32px); }

  .split-tile { height: 240px; }
  .split-tile__label { font-size: 30px; }

  .culture-banner, .culture-banner__inner { min-height: 360px; }
  .culture-banner__title { font-size: clamp(28px, 8vw, 36px); }
  .sl-image-banner, .sl-video-banner, .sl-image-banner > .container, .sl-video-banner > div[style*="z-index:2"] { min-height: 380px; }
  .sl-image-banner__title, .sl-video-banner h2 { font-size: clamp(28px, 8.5vw, 38px) !important; letter-spacing: -.5px !important; }
  .sl-image-banner__subtitle, .sl-video-banner p { font-size: 16px !important; }
  .sl-image-banner__actions .sl-btn, .sl-video-banner .sl-btn { flex: 1 1 auto; justify-content: center; }

  .sl-split__title, .split__title { font-size: clamp(30px, 9vw, 40px); }
  .sl-text-rows__row { padding-top: 32px !important; padding-bottom: 32px !important; }
  .sl-text-rows__row:first-child { padding-top: 0 !important; }
  .sl-text-rows__row:last-child { padding-bottom: 0 !important; }

  .wavemakers__copy .sl-btn, .sl-txr__cta .sl-btn, .sl-split__cta .sl-btn { min-height: 48px; }
}

/* ================= SMALL PHONE ≤400 ============================== */
@media (max-width: 400px) {
  .container, .sl-block--media-copy .container { padding-left: 16px !important; padding-right: 16px !important; }
  .esg-kn__grid { grid-template-columns: minmax(0, 1fr); }
  .metrics-bar { grid-template-columns: minmax(0, 1fr); }
}