/* Jezz Media - mobiele verfijning (2026-07-19)
   Doelgericht laatst geladen, zodat deze regels de bestaande cascade winnen zonder
   dat er in zes onderling conflicterende stylesheets geknipt hoeft te worden.
   Uitsluitend mobiel/touch; desktop blijft ongewijzigd. */

/* ---------------------------------------------------------------
   1. Touch targets - minimaal ~44x44 px (WCAG 2.2 AA, 2.5.8)
   Het uiterlijk blijft gelijk; alleen het aanraakgebied groeit.
   --------------------------------------------------------------- */
@media (pointer:coarse) {
  /* Carrouselbolletjes zijn visueel 9px; vergroot het trefvlak via een pseudo-element. */
  .crm-screen-nav button { position: relative; }
  .crm-screen-nav button::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 50%;
  }

  .pp-gallery-arrows button { min-width: 44px; min-height: 44px; }

  /* Footerlinks stonden op ~21-26px hoog: de meest gebruikte links van de site. */
  .site-footer-v3 .footer-grid a,
  .site-footer .footer-grid a {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 3px 0;
  }

  .pp-gallery .pp-filter { min-height: 44px; }
  .pmr__tool,
  .pmr__nav,
  .pmr__close { min-width: 44px; min-height: 44px; }
  .crm-lightbox-close { width: 44px; height: 44px; }
  .dash-button { min-height: 44px; }
}

/* ---------------------------------------------------------------
   2. Leesbaarheid - geen tekst onder ~12px, bodytekst terug naar 15px
   --------------------------------------------------------------- */
@media (max-width:700px) {
  /* Labels in het cirkeldiagram stonden op hun clamp-minimum van 8px en 7px. */
  .home-circle-copy { font-size: clamp(13px, 3.4vw, 15px); }
  .home-circle-copy small { font-size: clamp(11.5px, 3vw, 13px); }

  /* Dit is lopende tekst, geen label. */
  .crm-command-copy > .section-copy,
  .crm-command-scene p { font-size: 15px; line-height: 1.6; }

  /* Interactieve elementen mogen niet onder 12px zakken. */
  .pp-gallery .pp-filter,
  .pp-gallery-footer .btn { font-size: 12px; }
  .pmr__pageinfo { font-size: 12px; }

  /* Zeer ruime letterspatiëring kost op smalle schermen te veel breedte. */
  .footer-jezz-tagline { letter-spacing: .14em; }
  .pp-gallery-kicker,
  .pp-eyebrow { letter-spacing: .12em; }
}

/* ---------------------------------------------------------------
   3. Koppen die buiten beeld liepen op 320-430px
   De clamp-minima waren ingesteld op 42-60px, breder dan het scherm.
   --------------------------------------------------------------- */
@media (max-width:520px) {
  .pp-hero h1 { font-size: clamp(32px, 9vw, 54px); }
  .crm-case-showcase .pp-hero h1 { font-size: clamp(30px, 8.5vw, 48px); }
  .finale-content h2 { font-size: clamp(34px, 10vw, 60px); }
  .page-title { font-size: clamp(29px, 8.6vw, 42px); }
  .case-scene h3 { font-size: clamp(27px, 8vw, 42px); }
  .section-title { font-size: clamp(26px, 7.6vw, 40px); }
}

/* Lange Nederlandse samenstellingen (Woonnetwerk, Groeisystemen, Kraamzorg)
   mogen afbreken in plaats van de pagina op te rekken. */
@media (max-width:700px) {
  h1, h2, h3, .page-title, .section-title, .pp-hero h1, .finale-content h2 {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* ---------------------------------------------------------------
   4. Consistente horizontale marge
   .feature-band (42px) en .solution-card (32px) werden nooit teruggebracht,
   waardoor er op 320px maar ~208px inhoud overbleef.
   --------------------------------------------------------------- */
@media (max-width:700px) {
  .feature-band { padding-left: 18px; padding-right: 18px; }
  .solution-card { padding-left: 18px; padding-right: 18px; }
}
@media (max-width:380px) {
  .feature-band, .solution-card { padding-left: 14px; padding-right: 14px; }
}

/* ---------------------------------------------------------------
   5. De vaste conversiedok bedekte permanent de onderkant van elke pagina,
   inclusief de footerlinks. Reserveer die ruimte.
   --------------------------------------------------------------- */
@media (max-width:700px) {
  body:has(.wow-conversion-dock) .site-footer-v3,
  body:has(.wow-conversion-dock) .site-footer { padding-bottom: 96px; }
}

/* ---------------------------------------------------------------
   6. Mobiel menu - scrim en scrollvergrendeling
   --------------------------------------------------------------- */
body.menu-open { overflow: hidden; }
@media (max-width:1040px) {
  /* z-index 96: boven de vaste conversiedok (95), onder de header (100). */
  body.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 96;
    background: rgba(5, 11, 19, .55);
    backdrop-filter: blur(2px);
  }
}

/* ---------------------------------------------------------------
   7. Cirkelnodes reageerden alleen op :hover. Op pagina's die story-pages.css
   laden zonder wow-home.css ontbrak de tap-fallback volledig.
   --------------------------------------------------------------- */
body.growth-circle-page .home-circle-node.is-active .home-circle-copy,
body.growth-circle-page .home-circle-node.is-active .home-circle-dot {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------
   8. Sticky scroll-stages stonden op top:0 en verdwenen onder de vaste header.
   --------------------------------------------------------------- */
@media (max-width:700px) {
  .page-story-stage,
  .crm-command-stage,
  .story-stage,
  .pp-featured-stage { top: 72px; height: calc(100svh - 72px); }
}

/* Respecteer reduced motion ook hier. */
@media (prefers-reduced-motion:reduce) {
  body.menu-open::before { backdrop-filter: none; }
}

/* ---------------------------------------------------------------
   9. Decoratieve, oneindig lopende achtergrondanimaties op mobiel stilzetten.
   Ze kosten batterij en veroorzaken jank, en op de homepage houden ze de
   Largest Contentful Paint kunstmatig laat (de browser blijft nieuwe frames
   registreren). De scroll-indicator blijft bewust wel bewegen.
   --------------------------------------------------------------- */
@media (max-width:700px) {
  body::after,                                    /* beam-gloed */
  .magazine-card,                                 /* zwevende magazinekaart */
  .mini-panel,                                    /* zwevend paneeltje */
  .wow-ribbon-track,                              /* marquee */
  .wow-home .v3-hero:before,                      /* wow-breathe / hero-new-breathe */
  .wow-home.home-new-hero .v3-hero:before,
  .wow-home .hero-actions .btn-primary:after {    /* wow-shine */
    animation: none !important;
  }
}