/* =================================================================
   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); }

  .catalog__grid { grid-template-columns: repeat(2, 1fr); }
  /* uneven-row modifiers collapse to the normal 2-col grid on tablet */
  .catalog__grid--4, .catalog__grid--c2, .catalog__grid--c1 { grid-template-columns: repeat(2, 1fr); }
  .catalog__grid--c2 > .cat,
  .catalog__grid--c2 > .cat:nth-last-child(1),
  .catalog__grid--c2 > .cat:nth-last-child(2),
  .catalog__grid--c1 > .cat,
  .catalog__grid--c1 > .cat:nth-last-child(1) { grid-column: auto; }

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

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

  /* catalog: product detail stacks */
  .product__grid { grid-template-columns: 1fr; gap: 32px; }
  .product__aside { position: static; }

  .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 */

  /* catalog dropdown → expanded inline list inside the mobile panel */
  .nav-dd { display: flex; flex-direction: column; align-items: stretch; }
  .nav-dd__caret { display: none; }
  .nav-dd__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; background: transparent;
    padding: 0; margin-inline-start: 10px;
  }
  .nav-dd__menu a { color: var(--ink) !important; font-size: 16px; font-weight: 500; padding: 10px 16px; border-radius: 10px; }
}

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

  /* header */
  .brand__logo { width: 133px; height: 92px; }    /* Bata Materials logo ~1.46:1 — enlarged */

  /* 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(38px, 11vw, 56px); 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(11px, 3.1vw, 13px);   /* enlarged for readability (still fits one line) */
    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: 12.5px; max-width: none; }

  /* about — centered on mobile */
  .about .display { text-align: center; }
  .about .display::after { margin-inline: auto; }
  .display__line--sub { display: none; }   /* phones: this heading line moves under the photo → .about__hist-m */
  .about__grid { gap: 15px; }                 /* tighter stacking on phones (line→text ~15% closer) */
  .about__media { margin-block-end: 21px; }   /* keep the photo separated from the history heading… */
  .about__hist-m { display: block; text-align: center; font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 2px; }   /* …but the heading sits close to the text below */
  .about__hist-m::after { content: ""; display: block; width: 48px; height: 3px; border-radius: 2px; background: var(--accent); margin: 11px auto 0; }   /* red underline under the history heading */
  .about__media { aspect-ratio: 4 / 3; max-width: 86%; margin-inline: auto; width: 100%; }   /* centred, mobile */
  .about__text { text-align: center; }
  .about__text p { max-width: none; }
  .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; }
  .catalog__grid { grid-template-columns: 1fr; }
  .catalog .display { text-align: center; }
  .catalog .display::after { margin-inline: auto; }
  .values__grid { grid-template-columns: 1fr; }

  /* homepage catalog → horizontal carousel with arrows (category pages stay stacked) */
  .catalog .catalog__grid {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;   /* only horizontal scroll; vertical swipes scroll the page */
    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;
    scroll-behavior: smooth;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .catalog .catalog__grid::-webkit-scrollbar { display: none; }
  .catalog .catalog__grid > .cat { flex: 0 0 85%; scroll-snap-align: center; }
  .catcar__nav { display: flex; justify-content: center; gap: 16px; margin-block-start: 24px; }

  /* catalog: galleries keep 2 columns on phones; lightbox arrows tighter */
  .gallery, .gallery--wide { grid-template-columns: repeat(2, 1fr); }
  .subhero { min-height: 56vh; }

  /* "What we do" stacks to 1 column: drop the vertical divider, keep horizontals */
  .expertise .value:nth-child(odd) { border-inline-end: 0; }
  .expertise .value { border-block-start: 1px solid var(--line); }
  .expertise .value:first-child { border-block-start: 0; }

  /* contact: form under text (already stacked via tablet rule) */
  .contact__form-wrap { order: 2; }
  /* hide the phone/email/address list on phones (kept in the footer) */
  .contact__list { display: none; }

  /* 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: 44px; }
  .btn--block { padding-inline-start: 20px; }
  .phone-chip { display: none; }   /* very small: drop phone chip, keep CTA */
}