/* ==========================================================================
   Responsive — breakpoints tested at 320/375/390/430/768/1024/1280/1440/1920
   ========================================================================== */

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --- Tablet & below: switch to mobile nav --- */
@media (max-width: 960px) {
  .main-nav, .header-actions .lang-switch, .header-actions .button { display: none; }
  .header-actions .nav-toggle { display: block; }
  .header-actions { margin-left: auto; }

  .hero__inner, .page-hero__inner, .split, .contact-split, .article { grid-template-columns: 1fr; }
  .article__body { max-width: none; }
  .toc { display: none; }
  .hero__media, .page-hero__media { order: -1; }
  .hero__badge { left: 0; }
  /* On mobile, two hero CTAs stack vertically. Reserve enough space below the
     animated group so the section's clipping edge can never cut the second CTA. */
  .hero__inner, .page-hero__inner { row-gap: 1.5rem; }
  .hero__content .button-group, .page-hero__content .button-group { animation-name: hero-copy-fade; }

  .grid-3, .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .compare { grid-template-columns: 1fr; }
  .sticky-cta { display: block; }
  body.has-sticky-cta { padding-bottom: 74px; }
}

@keyframes hero-copy-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-auto { grid-template-columns: 1fr; }
  .problem-slider {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.15rem;
    padding: 0.25rem 0.15rem 1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .problem-slider::-webkit-scrollbar { display: none; }
  .problem-slider .card--problem {
    flex: 0 0 min(84vw, 350px);
    min-height: 220px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .problem-slider__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.25rem;
  }
  .problem-slider__control {
    width: 2.45rem;
    height: 2.45rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-graphite);
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: var(--shadow-soft);
    transition: transform var(--dur-fast) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .problem-slider__control:hover, .problem-slider__control:focus-visible { color: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); }
  .problem-slider__control:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }
  .problem-slider__count { min-width: 3.6rem; text-align: center; font-family: var(--font-heading); font-size: 0.8rem; font-weight: var(--fw-bold); color: var(--color-steel); }
  .mechanic-slider {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.15rem;
    padding: 0.25rem 0.15rem 1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mechanic-slider::-webkit-scrollbar { display: none; }
  .mechanic-slider .mechanic-card:not(.cat-card) {
    flex: 0 0 min(84vw, 350px);
    min-height: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .mechanic-slider__controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.25rem;
  }
  .mechanic-slider__control {
    width: 2.45rem;
    height: 2.45rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-graphite);
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: var(--shadow-soft);
    transition: transform var(--dur-fast) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .mechanic-slider__control:hover, .mechanic-slider__control:focus-visible { color: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); }
  .mechanic-slider__control:disabled { opacity: 0.38; cursor: not-allowed; transform: none; }
  .mechanic-slider__count { min-width: 3.6rem; text-align: center; font-family: var(--font-heading); font-size: 0.8rem; font-weight: var(--fw-bold); color: var(--color-steel); }
  .gateway__choices { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .button-group .button { width: 100%; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .value-props { grid-template-columns: 1fr; }
  .dropdown__grid { grid-template-columns: 1fr; }
  h1 { letter-spacing: -0.01em; }
}

@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .brand__text { font-size: 1.05rem; }
}

/* --- Large screens --- */
@media (min-width: 1440px) {
  .section { padding-block: clamp(4rem, 3rem + 3vw, 7rem); }
}

/* --- Reduced motion (§62) --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .cat-card:hover .cat-card__media img { transform: none; }
}

/* --- Print --- */
@media print {
  .site-header, .site-footer, .sticky-cta, .breadcrumbs { display: none; }
  body { background: #fff; color: #000; }
}