/* SLSC v2 — Responsive layer
   Single source of truth for breakpoint behaviour across all pages.
   Breakpoints: 1080 (tablet-L), 900 (nav→burger), 768 (tablet-P/stack), 560 (phone). */

/* ---- Mobile nav elements: hidden on desktop by default ---- */
.slsc-nav__burger { display: none; }
.slsc-nav__mobile { display: none; }

/* ---- Logo must never be crushed by the flex row ---- */
.slsc-nav__logo { flex-shrink: 0; }
.slsc-nav__logo img { width: auto; height: 82px; flex-shrink: 0; }

/* ============================================================
   ≤ 1080px — tablet landscape
   4-col → 2-col, asymmetric heads begin to loosen
   ============================================================ */
@media (max-width: 980px) {
  :root { --gutter: 44px; }

  /* 4-up stat/number grids → 2-up */
  .slsc-impact__grid,
  .slsc-sub-stats__grid,
  .slsc-fam__stats,
  .ewaa-hero__strip { grid-template-columns: repeat(2, 1fr); }
  .slsc-sub-stats__item:nth-child(4n) { border-inline-end: 1px solid var(--rule); }
  .slsc-sub-stats__item:nth-child(2n) { border-inline-end: 0; }

  /* footer 4-col → 2-col */
  .slsc-footer__top { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
  .slsc-footer__brand { grid-column: 1 / -1; }

  /* 3-up card grids → 2-up */
  .slsc-svcdet__grid,
  .ewaa-cats__grid { grid-template-columns: repeat(2, 1fr); }

  /* projects feature row → 2-up */
  .slsc-prj__grid { grid-template-columns: 1fr 1fr; }
  .slsc-prj-card--feat { grid-column: 1 / -1; }
  .slsc-prj-card--feat .slsc-prj-card__photo { aspect-ratio: 16/7; }
}

/* ============================================================
   ≤ 1100px — collapse dense header into burger menu
   (full nav needs ~1061px of intrinsic width; below that it
   overflowed horizontally, so we switch to the drawer earlier)
   ============================================================ */
@media (max-width: 1100px) {
  .slsc-nav__menu,
  .slsc-nav__cta { display: none; }

  /* keep header (with the close button) above the drawer */
  .slsc-nav { z-index: 95; }

  .slsc-nav__main { padding-block: 14px; }
  .slsc-nav__logo img { height: 60px; }

  .slsc-nav__burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    flex-shrink: 0;
  }
  .slsc-nav__burger span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--ink);
    margin-inline: auto;
    transition: transform .25s ease, opacity .2s ease;
  }
  .slsc-nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .slsc-nav__burger.is-open span:nth-child(2) { opacity: 0; }
  .slsc-nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* drawer */
  .slsc-nav__mobile { display: block; }
  .slsc-nav__mobile.is-open { position: fixed; inset: 0; z-index: 80; }
  .slsc-nav__mobile-overlay {
    position: absolute; inset: 0;
    background: rgba(12,17,22,0.5);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
  }
  .slsc-nav__mobile.is-open .slsc-nav__mobile-overlay { opacity: 1; pointer-events: auto; }

  .slsc-nav__mobile-panel {
    position: absolute;
    top: 0; inset-inline: 0;
    background: #fff;
    box-shadow: 0 24px 48px -24px rgba(12,17,22,0.4);
    padding: 132px 32px 36px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-105%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    max-height: 100vh;
    overflow-y: auto;
  }
  .slsc-nav__mobile.is-open .slsc-nav__mobile-panel { transform: translateY(0); }

  .slsc-nav__mobile-link {
    font-size: 20px;
    font-weight: 600;
    color: var(--ink);
    padding: 16px 4px;
    border-bottom: 1px solid var(--rule);
  }
  .slsc-nav__mobile-link.is-active { color: var(--red); }

  .slsc-nav__mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 28px;
  }
  .slsc-nav__mobile-actions .slsc-nav__login,
  .slsc-nav__mobile-actions .btn { width: 100%; justify-content: center; }

  .slsc-nav__mobile-phone {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink);
  }
}

/* ============================================================
   ≤ 768px — tablet portrait / large phone: stack everything
   ============================================================ */
@media (max-width: 768px) {
  :root { --section-y: 72px; }

  /* Global vertical rhythm — tame the big desktop section padding */
  .slsc-intro, .slsc-svc, .slsc-impact, .slsc-cov, .slsc-pillars, .slsc-prj,
  .slsc-who, .slsc-mv, .slsc-values, .slsc-flows, .slsc-svcpage, .slsc-svcdet,
  .slsc-prjpage, .slsc-contact, .slsc-fam, .slsc-fam__list, .slsc-sub-overview,
  .slsc-sub-stats, .slsc-why, .slsc-benefits, .slsc-compliance,
  .ewaa-about, .ewaa-capacity, .ewaa-cats, .ewaa-svcs, .ewaa-gallery, .ewaa-search,
  .slsc-partners { padding-block: 72px; }
  .slsc-cta { padding-block: 56px; }

  /* Hero */
  .slsc-hero { min-height: 0; }
  .slsc-hero__inner { grid-template-columns: 1fr; gap: 40px; padding-block: 80px; }
  .slsc-hero__actions .btn { flex: 1 1 auto; }

  /* Every asymmetric / multi-col content grid → single column */
  .slsc-intro__head, .slsc-intro__pillars,
  .slsc-svc__head, .slsc-svc__grid,
  .slsc-pillars__grid,
  .slsc-mv__grid, .slsc-flows__grid,
  .slsc-who__inner, .slsc-values__inner,
  .slsc-svcdet__head, .slsc-svcdet__grid,
  .slsc-prjlong, .slsc-contact__inner,
  .slsc-phero__inner,
  .slsc-fam__intro, .slsc-sub-overview__inner,
  .slsc-why__head, .slsc-why__grid,
  .slsc-compliance__head,
  .ewaa-hero__inner, .ewaa-about__inner, .ewaa-capacity__head,
  .ewaa-cats__grid, .ewaa-svcs__grid, .ewaa-gallery__grid, .ewaa-search__inner,
  .slsc-cta__inner {
    grid-template-columns: 1fr !important;
    gap: 40px;
  }

  /* Service cards: restore side borders lost when grid becomes 1-col */
  .slsc-svc__grid { border-inline-start: 1px solid var(--rule-2); }
  .slsc-svc__card { min-height: 0; padding: 40px 28px 44px; }

  /* Reverse-stack the prjlong so imagery leads consistently */
  .slsc-prjlong__stats { grid-template-columns: repeat(2, auto); }

  /* projects home grid to single column */
  .slsc-prj__grid { grid-template-columns: 1fr; }
  .slsc-prj-card--feat .slsc-prj-card__photo { aspect-ratio: 4/3; }

  /* CTA band left-aligns its actions */
  .slsc-cta__actions { justify-content: flex-start; }

  /* Complex fixed row layouts → stacked */
  .slsc-svc-row { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .ewaa-table__row { grid-template-columns: 1fr; gap: 10px; padding: 22px 24px; }
  .slsc-benefit { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .slsc-value { grid-template-columns: 44px 1fr; gap: 20px; }

  /* Impact/stat numbers stay 2-up but tighter */
  .slsc-impact__cell { padding: 32px 22px; }
  .slsc-impact__cell-num { font-size: 44px; }

  /* Footer bottom stacks */
  .slsc-footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================
   ≤ 560px — phone
   ============================================================ */
@media (max-width: 640px) {
  :root { --gutter: 20px; }

  .slsc-nav__mobile-panel { padding-inline: 20px; }

  /* Everything genuinely single column */
  .slsc-impact__grid,
  .slsc-sub-stats__grid,
  .slsc-fam__stats,
  .ewaa-hero__strip,
  .slsc-footer__top,
  .slsc-svcdet__grid,
  .ewaa-cats__grid,
  .slsc-mv__grid,
  .slsc-flows__grid,
  .slsc-why__grid,
  .slsc-form__grid,
  .slsc-prjlong__stats { grid-template-columns: 1fr; }

  .slsc-footer__brand { grid-column: auto; }

  /* Reset stat cell borders for single column */
  .slsc-sub-stats__item { border-inline-end: 0 !important; }

  /* Hero actions stack full-width */
  .slsc-hero__actions { flex-direction: column; align-items: stretch; }
  .slsc-hero__actions .btn { width: 100%; }

  /* Top utility bar: tighten */
  .slsc-nav__top-inner { gap: 12px; font-size: 11px; }

  /* Ewaa search box stacks its input + button */
  .ewaa-search__box { grid-template-columns: 1fr; }

  /* Location-map overlay already handled at 640 in pages.css */
}