/* =================================================================
   Bata Group — responsive
   Desktop 1440+ · Laptop 1024–1439 · Tablet 768–1023 · Mobile ≤767
   ================================================================= */

/* ---------- Laptop (1024–1439) ---------- */
@media (max-width: 1439px) {
  :root { --container: 1140px; }
}

/* ---------- Tablet (768–1023) ---------- */
@media (max-width: 1023px) {
  :root { --section-y: clamp(64px, 9vw, 96px); }

  .about__grid { grid-template-columns: 1fr; gap: 36px; }
  .about__media { max-width: none; height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .about__text p { max-width: none; }

  .cards { grid-template-columns: repeat(2, 1fr); }

  .values__grid { grid-template-columns: repeat(2, 1fr); }

  .contact__grid { grid-template-columns: 1fr; gap: 36px; }

  .timeline__grid { grid-template-columns: 1fr; }
  .timeline__art { display: none; }   /* decorative — desktop only */

  .hero__footer { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* nav → full-screen overlay + slide-in side panel (like jz-web-5.vercel.app) */
  .nav-toggle { display: inline-flex; }
  body.nav-open { overflow: hidden; }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .5s cubic-bezier(.4,0,.2,1);
  }
  .site-nav.is-open { opacity: 1; pointer-events: auto; }
  .site-nav::before {                       /* blurred backdrop — click closes (JS) */
    content: "";
    position: absolute; inset: 0;
    background: rgba(8, 14, 24, .4);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .site-nav__panel {                        /* sliding panel on the burger side (auto-flips per dir) */
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: min(82vw, 320px);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: calc(var(--header-h) + 18px) 20px 28px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(8, 14, 24, .32);
    transform: translateX(-100%);
    transition: transform .5s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  [dir="ltr"] .site-nav__panel { transform: translateX(100%); }   /* slides in from the right in LTR */
  .site-nav.is-open .site-nav__panel { transform: translateX(0); }
  .site-nav a,
  .site-header.is-solid.is-light .site-nav a {
    color: var(--ink);
    font-size: 18px;
    font-weight: 500;
    padding: 12px 16px;
    border-radius: 12px;
    text-align: start;
  }
  .site-nav a::after { display: none; }
  .site-nav a.is-active { background: rgba(14, 42, 71, .08); color: var(--navy); }   /* active pill */
  .nav-toggle.is-open span { background: var(--ink); }   /* dark burger/X over the light panel */
}

/* ---------- Mobile (≤767) ---------- */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --section-y: clamp(64px, 14vw, 80px);  /* secciones padding 64–80px */
    --header-h: 70px;
  }

  /* header */
  .brand__logo { width: 81px; height: 43px; }    /* HAARETZ FORCE wordmark (tight-cropped) on mobile */
  .brand__icon { width: 36px; height: 40px; }
  .site-footer .brand__logo { width: 123px; height: 66px; }
  .site-footer .brand__icon { width: 51px; height: 56px; }

  /* hero — text centered, CTA pinned to the bottom (on mobile) */
  .hero { min-height: 100vh; min-height: 100svh; padding-block: 96px 34px; }
  .hero__content { align-items: center; text-align: center; position: relative; }
  .hero__title { font-size: clamp(43px, 12.5vw, 68px); line-height: 1.1; white-space: normal; word-break: normal; overflow-wrap: break-word; text-wrap: balance; text-align: center; max-width: calc(100vw - 2 * var(--gutter)); margin-inline: auto; }
  [dir="ltr"] .hero__title { text-align: center; }   /* English wordmark centered on mobile too */
  .hero__lead { font-size: 16px; margin-inline: auto; text-wrap: balance; }   /* even two-line split, centered */
  .hero .eyebrow {             /* pinned to the top; title + lead stay centered */
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    margin: 0 auto;
    flex-direction: column;    /* red dash centered above the tagline */
    gap: 8px;
    text-align: center;
    white-space: nowrap;       /* keep the whole tagline on a single line… */
    font-size: clamp(7.5px, 2.3vw, 11px);   /* …shrunk to fit narrow phones (longer EN text) */
    letter-spacing: .08em;
  }
  .hero .btn--pill {           /* out of flow so the text above stays vertically centered */
    position: absolute;
    inset-block-end: 9vh;
    inset-inline: 0;
    margin: 0 auto;
    width: fit-content;
  }
  .hero__footer { justify-content: center; text-align: center; }
  .hero__caption { font-size: 13.5px; max-width: none; }

  /* about — centered on mobile */
  .about .display { text-align: center; }
  .about .display::after { margin-inline: auto; }
  .about__media { aspect-ratio: 4 / 3; }
  .about__text { text-align: center; }
  .about__text p { max-width: none; }
  .svc-item { text-align: start; }   /* feature list stays edge-aligned, not centered: RTL → right, LTR → left */
  .stats { grid-template-columns: repeat(2, 1fr); gap: 22px 18px; justify-items: center; }
  .stats__item { align-items: center; text-align: center; }

  /* timeline → single column, line tucked to the side */
  .tl::before { inset-inline-start: 21px; }
  .tl__item { grid-template-columns: 44px 1fr; gap: 16px; }
  .tl__node { width: 44px; height: 44px; font-size: 14px; }

  /* services → horizontal swipe slider; values → one column */
  .cards {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;    /* overflow-x:auto silently makes overflow-y compute to auto too — pin it off so the slider can't scroll/rubber-band vertically */
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;   /* only claim horizontal swipes; vertical scroll passes to the page */
    overscroll-behavior-x: contain;   /* don't let horizontal momentum bleed into page/back-gesture */
  }
  .cards::-webkit-scrollbar { display: none; }
  .card { flex: 0 0 84%; scroll-snap-align: center; }
  .values__grid { grid-template-columns: 1fr; }

  /* contact: form under text (already stacked via tablet rule) */
  .contact__form-wrap { order: 2; }

  /* footer */
  .site-footer__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .site-footer__contacts { flex-direction: column; gap: 8px; }
}

/* ---------- small phones ---------- */
@media (max-width: 380px) {
  .hero__title { font-size: 53px; }
  .btn--block { padding-inline-start: 20px; }
  .phone-chip { display: none; }   /* very small: drop phone chip, keep CTA */
}

/* =================================================================
   Koach HaAretz — responsive rules for the added sections
   ================================================================= */

/* ---------- Tablet (≤1023) ---------- */
@media (max-width: 1023px) {
  .metrics__grid { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
  .checks { grid-template-columns: repeat(2, 1fr); }
  .about--flip .about__media { order: -1; }   /* image on top when stacked */
  .about--flip .about__text  { order: 0; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .site-footer__col--about { grid-column: 1 / -1; }

  /* phone moves from the header bar into the burger menu */
  .site-header .phone-chip { display: none; }
  .site-nav .site-nav__phone { display: flex; }
}

/* ---------- Mobile (≤767) ---------- */
@media (max-width: 767px) {
  .svc-list { grid-template-columns: 1fr; }
  .checks { grid-template-columns: 1fr; }
  .metrics__grid { grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
  .metric__num { font-size: clamp(38px, 13vw, 56px); }
  /* chips: 4 per row → 3 rows; compact, dot hidden. long EN labels wrap inside the
     pill (white-space:normal) and min-width:0 keeps columns equal so nothing overflows */
  .tags { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .tag { padding: 6px 4px; font-size: clamp(9.5px, 3vw, 11.5px); gap: 0; min-height: 44px;
         min-width: 0; white-space: normal; line-height: 1.15; overflow-wrap: anywhere; }
  .tag::before { display: none; }
  /* 10 chips → last row has 2 orphans; place them in the middle columns (2 & 3) so
     the incomplete row is centered under the full rows above */
  .tags .tag:nth-child(9)  { grid-column: 2; }
  .tags .tag:nth-child(10) { grid-column: 3; }
  /* footer in two columns on mobile (nav | contacts); logo+description spans full width.
     flex (not grid) — grid-column:1/-1 on the about col was glitching the nav column render. */
  .site-footer__cols { display: flex; flex-wrap: wrap; gap: 30px 18px; }
  .site-footer__col { flex: 1 1 calc(50% - 9px); }
  .site-footer__col--about { flex-basis: 100%; }
  .site-footer__ct a { overflow-wrap: anywhere; }

  /* contact details (phone/email/address) — hidden on mobile (they remain in the footer) */
  .contact__list { display: none; }

  /* blocks 2 (trio) & 6 (values) → horizontal swipe slider, like the first site's .cards:
     only horizontal pans react to touch; vertical page scroll passes straight through */
  .trio, .values5 {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;            /* overflow-x:auto silently makes overflow-y compute to auto too — pin it off */
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;           /* claim only horizontal swipes; vertical scroll goes to the page */
    overscroll-behavior-x: contain; /* don't let horizontal momentum bleed into page/back-gesture */
  }
  .trio::-webkit-scrollbar,
  .values5::-webkit-scrollbar { display: none; }
  .trio .card,
  .values5 .value {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: center;
  }

  /* countries list — centered on mobile */
  .origins { text-align: center; }
  .origins__label { text-align: center; }
  .origins__items { justify-content: center; }
}