/* ==========================================================================
   IMPEL FASHION — RESPONSIVE OVERRIDES
   Most fluid sizing (type, section padding) is handled by clamp() in
   tokens.css/style.css directly — this file only holds changes that are
   structural, not just size: column-count swaps, nav collapse to a
   hamburger menu, hero layout shifts, grid re-stacking.
   Breakpoints: 1024px (small desktop/tablet landscape), 768px (tablet),
   540px (large phone).
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* <= 1024px — tablets                                                    */
/* ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer__top .footer__col--contact { grid-column: 1 / -1; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------- */
/* <= 900px — nav collapses to hamburger + off-canvas panel                */
/* ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav__menu {
    position: fixed;
    inset: var(--nav-height-scrolled) 0 0 0;
    height: calc(100svh - var(--nav-height-scrolled));
    background: var(--color-bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-2);
    padding: var(--space-5) var(--container-padding-x);
    transform: translateX(100%);
    transition: transform var(--dur-base) var(--ease-out);
    overflow-y: auto;
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__link { font-size: var(--fs-lead); width: 100%; padding-block: var(--space-1); border-bottom: 1px solid var(--color-border); }
  .nav__menu .btn { margin-top: var(--space-3); width: 100%; }
  .nav__toggle { display: flex; }

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

/* ---------------------------------------------------------------------- */
/* <= 768px — general tablet/phone layout re-stack                        */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }

  .footer__top { grid-template-columns: 1fr; gap: var(--space-5); padding-block: var(--space-8); }

  /* HERO on mobile — full-bleed photo with the copy sitting ON the image
     (a photo block with the text below it left the section looking empty).
     object-position is nudged toward the right where the models stand in
     these shots, so the subject stays in frame on a narrow portrait screen. */
  .hero {
    /* hero sits below the light header band (margin-top: var(--nav-height)
       from style.css), so subtract it to keep the section ~one screen tall */
    min-height: calc(92svh - var(--nav-height));
    display: flex;
    align-items: flex-end;
  }
  .hero__slides { position: absolute; inset: 0; }
  .hero__slide img {
    object-fit: cover;
    object-position: 68% center;
  }
  /* Ken Burns would push the subject further out of frame on a narrow crop */
  .hero__slide.is-active img { transform: none; }
  /* Dark at the very top (white nav stays readable) and a strong bottom
     gradient so the headline/eyebrow read cleanly over any photo. */
  .hero__scrim {
    background: linear-gradient(180deg,
      rgba(11,28,44,0.55) 0%,
      rgba(11,28,44,0.15) 18%,
      rgba(11,28,44,0.45) 52%,
      rgba(11,28,44,0.88) 100%);
  }
  .hero__content {
    /* hero already starts below the header band, so only a little breathing
       room is needed above the bottom-anchored content. */
    padding-top: 36px;
    padding-bottom: 56px;
  }
  .hero__text { max-width: 100%; }
  .hero.is-text-right .hero__text { margin-inline-start: 0; }
  .hero__subtitle { max-width: 100%; }
  .hero__ctas .btn { flex: 1 1 auto; }

  /* "How It Works" / "From Inquiry to Shipment" timeline — stack vertically
     on tablet/mobile instead of horizontal-scrolling (steps were getting cut
     off with no clear scroll affordance). Number sits left, steps run down
     with a vertical connector line. */
  .timeline__track {
    flex-direction: column;
    overflow-x: visible;
    gap: var(--space-5);
    padding-bottom: 0;
  }
  .timeline__track::before {
    left: 26px; right: auto; top: 26px; bottom: 26px;
    width: 1px; height: auto;
  }
  .timeline__step {
    width: 100%;
    padding-top: 0;
    padding-left: 72px;
    min-height: 52px;
  }

  .section { padding-block: var(--space-8); }

  .footer__bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* ---------------------------------------------------------------------- */
/* <= 540px — small phones                                                */
/* ---------------------------------------------------------------------- */
@media (max-width: 540px) {
  .container { padding-inline: var(--space-3); }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__controls { top: calc(var(--nav-height-scrolled) + var(--space-2)); }
  .trustbar__inner { flex-direction: column; align-items: flex-start; }
  .trustbar__certs img { height: 22px; }
  .card__body { padding: var(--space-3); }
}

/* ---------------------------------------------------------------------- */
/* Reduce simultaneous animated elements on mobile — perf & battery,      */
/* per 07_UI_UX.md §11 "animations reduced but still elegant"             */
/* ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .trustbar__route-strip { opacity: 0.18; }
}