/* ---------------------------------------------------------------------------
   auri-responsive.css

   De auriaudio.nl-pagina's zijn opgebouwd met inline styles (desktop-first).
   Deze stylesheet legt daar de mobiele/tablet-varianten overheen. Omdat inline
   styles zwaarder wegen dan een gewone regel is `!important` hier nodig; dat is
   bewust en geldt alleen binnen de media queries hieronder.

   LET OP bij het aanpassen: support.js (het .dc.html-framework) zet de inline
   styles opnieuw in de DOM in de genormaliseerde browser-notatie, dus met een
   spatie na elke dubbele punt en komma, met nul voor de punt (0.95fr) en met
   een afsluitende puntkomma. De [style*="..."]-selectors hieronder gebruiken
   die notatie. De variant zonder spaties staat er als tweede bij, zodat de
   pagina's ook los van support.js correct blijven.

   Breakpoints:
     <= 1024px  tablet  - 4-koloms -> 2, hero-kolommen -> 1, minder padding
     <=  860px  nav     - navigatiebalk breekt naar 2 regels
     <=  760px  mobiel  - alles 1 kolom, kleinere koppen en binnenmarges
   --------------------------------------------------------------------------- */

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  /* Buitenmarge van alle paginacontainers */
  div[style*="max-width: 1200px"],
  div[style*="max-width: 1000px"],
  div[style*="max-width:1200px"],
  div[style*="max-width:1000px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* Twee-koloms hero's / spec-blokken stapelen */
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1.05fr .95fr"],
  [style*="grid-template-columns:1.1fr .9fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* 4 kaarten naast elkaar wordt 2 */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Meelopende productgalerij niet vastzetten zodra alles onder elkaar staat */
  [style*="position: sticky"][style*="top: 100px"],
  [style*="position:sticky"][style*="top:100px"] {
    position: static !important;
  }

  /* Grote binnenmarges van panelen/CTA-blokken */
  [style*="padding: 56px;"],
  [style*="padding:56px;"] { padding: 34px !important; }
  [style*="padding: 48px;"],
  [style*="padding:48px;"] { padding: 30px !important; }
  [style*="padding: 40px 48px;"],
  [style*="padding:40px 48px;"] { padding: 30px !important; }

  h1 { font-size: 40px !important; line-height: 1.08 !important; }
  h1[style*="white-space: nowrap"],
  h2[style*="white-space: nowrap"],
  h1[style*="white-space:nowrap"],
  h2[style*="white-space:nowrap"] { white-space: normal !important; }
}

/* ---------- kerncijfers in de hero ---------- */
/* De drie blokken krijgen dezelfde breedte en breken zelf af op de beschikbare
   ruimte. Eerder stonden er harde <br>'s in de tekst, afgestemd op de brede
   desktopkolom; in een smallere kolom kwam de natuurlijke afbreking daar
   bovenop en werd het rafelig. */
.hero-stat { flex: 1 1 0; min-width: 0; }

/* ---------- navigatiebalk ---------- */
/* Op desktop bestaan de hamburger en zijn schakelaar niet. */
.nav-toggle,
.nav-burger { display: none; }

/* Het menu klapt in zodra logo + Auracast-pill + links + knoppen niet meer op
   één regel passen; met de pill erbij is dat rond 1150px in plaats van 860px. */
@media (max-width: 1150px) {
  .nav-bar {
    flex-wrap: wrap !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  /* Compactere pill zodat logo + pill + hamburger op een telefoon passen */
  .nav-pill {
    font-size: 11px !important;
    padding: 7px 11px !important;
    gap: 6px !important;
  }
  .nav-brand { gap: 10px !important; }

  /* De checkbox stuurt het menu aan maar is onzichtbaar. Niet met display:none
     of visibility:hidden verbergen: dan is hij niet meer met het toetsenbord
     te bereiken. */
  .nav-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* De drie streepjes. Ruime marge eromheen zodat het aantikbare vlak 44px is
     (vuistregel voor touch) zonder dat de balk hoger wordt. */
  .nav-burger {
    display: flex;
    order: 2;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    margin: -8px -10px -8px 0;
    cursor: pointer;
  }
  .nav-burger span {
    display: block;
    height: 2px;
    background: #0b2a4a;
    border-radius: 2px;
    transition: transform .2s ease, opacity .15s ease;
  }
  .nav-toggle:focus-visible ~ .nav-burger {
    outline: 2px solid #1c8fd6;
    outline-offset: -2px;
    border-radius: 8px;
  }

  /* Open: de streepjes worden een kruis */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Dicht: alleen logo en hamburger in beeld */
  .nav-links,
  .nav-cta { display: none !important; }

  /* Open: menu-items en knoppen als lijst onder de balk */
  .nav-toggle:checked ~ .nav-links,
  .nav-toggle:checked ~ .nav-cta {
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
    gap: 0 !important;
  }
  .nav-toggle:checked ~ .nav-links { order: 3; margin-top: 14px; border-top: 1px solid #e7e0d3; }
  .nav-toggle:checked ~ .nav-cta { order: 4; }

  .nav-toggle:checked ~ .nav-links a,
  .nav-toggle:checked ~ .nav-cta a.navlink {
    padding: 15px 2px;
    font-size: 16px !important;
    border-bottom: 1px solid #efe9dd;
  }
  /* De "Auri kopen"-knop houdt zijn pilvorm, over de volle breedte */
  .nav-toggle:checked ~ .nav-cta a:not(.navlink) {
    margin-top: 16px;
    padding: 15px 22px !important;
    text-align: center;
  }
}

/* ---------- powered-by-balk onder de hero ---------- */
/* Het logo en de sectorenlijst passen samen niet meer op één regel onder ca.
   1100px; dan gaat het logo erboven staan en breekt de lijst af. */
@media (max-width: 1100px) {
  .trust-bar {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px !important;
  }
  .trust-bar .powered-by { height: 92px !important; margin: -13px 0 !important; }
  .trust-bar .trust-divider { display: none !important; }

  .trust-strip {
    flex: 1 0 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 18px !important;
    text-align: center;
  }
}

/* ---------- mobiel ---------- */
@media (max-width: 760px) {
  .trust-bar .powered-by { height: 82px !important; margin: -11px 0 !important; }
  .trust-strip { font-size: 13px !important; }

  div[style*="max-width: 1200px"],
  div[style*="max-width: 1000px"],
  div[style*="max-width:1200px"],
  div[style*="max-width:1000px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Alle kaartenrasters onder elkaar */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* ... behalve de kleurvarianten-thumbnails, die blijven naast elkaar */
  [style*="gap: 14px"][style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="gap:14px"][style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Gerelateerde producten: smallere afbeeldingskolom */
  [style*="grid-template-columns: 150px 1fr"],
  [style*="grid-template-columns:150px 1fr"] {
    grid-template-columns: 104px 1fr !important;
  }

  /* Knoppenrijen mogen afbreken */
  [style*="display: flex"][style*="gap: 14px"],
  [style*="display:flex"][style*="gap:14px"] { flex-wrap: wrap !important; }

  /* Kerncijfers in de hero twee-aan-twee, scheidingslijntjes weg */
  .hero-stats { flex-wrap: wrap !important; gap: 18px 26px !important; }
  .hero-stat { flex: 1 1 42% !important; }
  .hero-stats > div[style*="width: 1px"],
  .hero-stats > div[style*="width:1px"] { display: none !important; }

  [style*="padding: 56px;"],
  [style*="padding:56px;"] { padding: 26px !important; }
  [style*="padding: 48px;"],
  [style*="padding:48px;"] { padding: 24px !important; }
  [style*="padding: 40px 48px;"],
  [style*="padding:40px 48px;"] { padding: 24px !important; }
  [style*="padding: 34px 36px;"],
  [style*="padding:34px 36px;"] { padding: 22px !important; }
  [style*="padding: 30px;"],
  [style*="padding:30px;"] { padding: 22px !important; }

  h1 { font-size: 32px !important; line-height: 1.1 !important; }
  h2 { font-size: 26px !important; line-height: 1.15 !important; }

  /* Grote losse cijfers (tellers en kerncijfers) */
  [style*="font: 700 64px"],
  [style*="font:700 64px"] { font-size: 44px !important; }
  [style*="font: 700 30px / 1 Inter"],
  [style*="font:700 30px/1 'Inter'"] { font-size: 26px !important; }

  /* Inleidende paragrafen iets compacter */
  p[style*="font: 400 20px"],
  p[style*="font: 400 19px"],
  p[style*="font:400 20px"],
  p[style*="font:400 19px"] { font-size: 17px !important; }

  /* Footer links uitlijnen in plaats van uit elkaar trekken */
  .site-footer { justify-content: flex-start !important; }
}

/* ---------- kleine telefoons ---------- */
@media (max-width: 640px) {
  /* De vier tellers passen hier niet meer naast elkaar (lange labels als
     "uitvaartondernemingen" lopen dan buiten de kaart) */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  [style*="padding: 32px 24px;"],
  [style*="padding:32px 24px;"] { padding: 22px 20px !important; }
  [style*="font: 700 64px"],
  [style*="font:700 64px"] { font-size: 40px !important; }
}