/* ==================================================================
   watwijdoen-mobiel.css  -  alleen de breekpunten van /onze-zorg/.
   Hoort bij page-onze-zorg.php en laadt ná watwijdoen.css, zodat de regels
   hier winnen. De basis- en desktopweergave staat in watwijdoen.css; aan dit
   bestand sleutelen raakt de desktopweergave niet.

   Bron: dezelfde export, het <style>-blok uit <helmet>. Daar staan twee
   media queries; die zijn hieronder letterlijk overgenomen en verantwoord.
   Wat het ontwerp verder mobiel doet, doet het met clamp() in de inline
   styles (zijmarge 44 -> 24px, sectiehoogte en typografie schalen mee). Die
   clamps staan in het sjabloon en worden hier niet overschreven.

   De derde media query van het ontwerp (de eigen sticky actiebalk vanaf 899px)
   is NIET overgenomen: het thema levert die balk al site-breed
   (.erika-stickybar in functions.php, met body{padding-bottom:58px} in
   home.css vanaf 900px). Twee balken over elkaar is precies wat de README van
   de export afraadt.
   ================================================================== */

/* ---------- 704px: van twee kolommen naar één ---------- */
/* De pijlerblokken zijn een grid met
   repeat(auto-fit, minmax(min(100%,300px), 1fr)); die stapelt vanzelf zodra er
   geen twee kolommen van 300px meer passen. Wat níet vanzelf gaat, staat
   hieronder.

   LET OP DE GRENS. Het ontwerp zet deze twee regels op 880px, maar het raster
   stapelt pas net onder 710px (nagemeten op staging: bij 710 staan de kolommen
   nog naast elkaar, bij 700 niet meer). Tussen 710 en 880 stonden de kolommen
   dus naast elkaar terwijl de middenlijn al verborgen was en de foto bij
   Begeleiden al was omgedraaid. Wie ingezoomd browst, zit precies in die zone;
   zo is het gemeld. 704px ligt tussen de twee gemeten waarden in.
   Verander de kolombreedte (300px) of de gap, meet dit dan opnieuw. */
@media (max-width: 704px) {
  /* 1. de doorlopende lijn op 50% en de drie bolletjes erop horen bij de
        tweekolomsopmaak en slaan nergens meer op zodra alles onder elkaar
        staat: er is dan geen middenas meer om ze op te zetten */
  .wwd [data-pad-lijn],
  .wwd [data-pad-stip] { display: none; }

  /* 2. bij Begeleiden staat de foto op desktop links en de tekst rechts. Op
        mobiel schuift de foto onder de links, zodat alle drie de blokken
        dezelfde volgorde krijgen: kop, tekst, links, foto. */
  .wwd [data-foto-links]   { order: 2 !important; }
  .wwd [data-tekst-rechts] { order: 1 !important; }
}

/* ---------- 560px: raakvlakken op een telefoon ---------- */
/* Het publiek is vaak ouder. Twee pillen naast elkaar breken hier over drie
   regels; onder elkaar en over de volle breedte leest en raakt dat beter.
   width:100% op de knoppen alleen is niet genoeg: de rij staat in een kolom met
   align-items:center en krimpt dan mee met haar inhoud. */
@media (max-width: 560px) {
  .wwd .wwd-btns { flex-direction: column; align-items: stretch; gap: 12px !important; width: 100%; }
  .wwd .wwd-btns > a { width: 100%; }
}