/* ==========================================================================
   VITAL ACTIVE — Responsive Rules
   Breakpoints: 1200 (laptop), 1024 (tablet-l), 768 (tablet), 560 (phone)
   ========================================================================== */

/* -------------------- Laptop / small desktop (≤1200px) -------------------- */
@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
  .footer-col.footer-products { display: none; }
  .banner-strip-inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .banner-facts { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------- Tablet landscape (≤1024px) -------------------- */
@media (max-width: 1024px) {
  .main-nav .nav-list { display: none; }
  .nav-toggle { display: flex; }
  .header-actions .lang-switch { display: none; }

  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-xl); }
  .process-grid::before { display: none; }

  .split { grid-template-columns: 1fr; gap: var(--space-xl); }
  .split-media { order: 1 !important; max-width: 480px; margin-inline: auto; width: 100%; }
  .split-body { order: 2 !important; }
  .split-media-frame { display: none; }

  .quality-teaser { grid-template-columns: 1fr; }
  .cert-stack { order: -1; }

  .stat-row { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }

  .form-grid { grid-template-columns: 1fr; }
}

/* -------------------- Tablet portrait (≤768px) -------------------- */
@media (max-width: 768px) {
  :root {
    --space-2xl: 4rem;
    --space-3xl: 5.5rem;
  }

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

  .feature-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .footer-brand { grid-column: 1 / -1; }

  .process-grid { grid-template-columns: 1fr 1fr; }

  .banner-facts { grid-template-columns: 1fr; }

  .mine-feature { min-height: 520px; }
  .mine-feature-content { max-width: 100%; }

  .cta-band { flex-direction: column; align-items: flex-start; }
  .cta-band-right { width: 100%; justify-content: space-between; }

  .cookie-banner { left: var(--space-sm); right: var(--space-sm); bottom: var(--space-sm); max-width: none; }

  .page-hero { min-height: 46vh; }

  .quality-teaser { text-align: left; }
  .cert-stack { min-height: 300px; }
}

/* -------------------- Phone (≤560px) -------------------- */
@media (max-width: 560px) {
  :root {
    --container-pad: 1.1rem;
    --space-2xl: 3.25rem;
  }

  .hero { min-height: 92vh; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.75rem); max-width: 100%; }
  .hero-lead { max-width: 100%; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-scroll { display: none; }

  .brand img { height: 28px; }
  .brand-name { font-size: 1.05rem; }
  .brand-sub { font-size: 0.5rem; }

  /* The mobile nav drawer already has a prominent dealer CTA, so we hide
     this header button entirely on small phones rather than leaving an
     empty bordered pill once its label is removed. */
  .header-actions .btn-dealer { display: none; }

  .section-head h2, .split-body h2 { font-size: var(--fs-display-sm); }

  .process-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .stat-item .stat-num { font-size: 1.9rem; }

  .product-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-sm); }
  .product-card-body { padding: var(--space-sm); }

  .filter-bar { gap: 0.4rem; }
  .filter-btn { padding: 0.55em 1em; font-size: 0.78rem; }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }

  .cert-stack { min-height: 240px; }
  .cert-stack img { width: 72%; }
  .cert-seal { width: 82px; height: 82px; }

  .form-grid { gap: var(--space-sm); }

  .mobile-nav-list a { font-size: 1.6rem; }

  .back-to-top { width: 46px; height: 46px; }

  .page-hero h1 { font-size: var(--fs-display-sm); }

  .gallery {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "thumbs";
  }
  .gallery-main { grid-area: main; }
  .gallery-thumbs {
    grid-area: thumbs;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .gallery-thumbs button { flex: 0 0 64px; width: 64px; }
}

/* -------------------- Print -------------------- */
@media print {
  .site-header, .site-footer, .back-to-top, .cookie-banner, .mobile-nav, .loading-screen {
    display: none !important;
  }
}