/* ==========================================================================
   Paginagebonden CSS: yms-opleiding
   ONTWERPWIJZIGINGEN op verzoek van Yvonne. Geen nabouw meer: de statische
   site heeft dit niet.

   06-10-2026  De prijskaart stond de hele pagina rechts naast de tekst en
               schoof mee (sticky); op mobiel zelfs bovenaan, vóór de inhoud.
   08-10-2026  Haar reactie op de eerste versie (mail van 08-10):
               - de prijskaart "onder de tekst", dus na de laatste sectie
                 (Vragen die misschien nog bij je leven), niet tussen de tekst;
               - het YMS-beeld niet meer naast de kop maar erboven, als banner;
               - de tekst over de volle breedte: "Mensen moeten veel te veel
                 scrollen, deze opleiding mag breed staan." Bewust haar keuze;
                 lange regels lezen zwaarder, de breedte blijft wel binnen de
                 .container van de site;
               - het portret zonder lijst (zie .yms-portret hieronder).
   ========================================================================== */

/* ---- Kop: een brede, lage banner boven de tekst ------------------------- */
/* Het brede YMS-beeld (1200x630, het vroegere deelbeeld van de webinarpagina:
   het vierkant met zachte zijkanten). Laag uitgesneden zodat de paginatitel op
   een laptop nog op het eerste scherm staat; de letters "Your Magical Soul"
   staan in het midden van het beeld en blijven heel. Het vierkant van 460px
   dat hier eerst stond duwde de titel onder de vouw. */
.yms-hero {
  grid-template-columns: minmax(0, 1fr);
}
.yms-hero__beeld {
  order: -1;
  max-width: none;
  margin-bottom: clamp(16px, 3vw, 32px);
}
.yms-hero__beeld .yms-banner img {
  width: 100%;
  height: clamp(220px, 26vw, 360px);
  object-fit: cover;
  object-position: center 45%;
}
/* In de editor zet WordPress style="height:auto" op de afbeelding zelf. Een
   inline stijl wint van elke stylesheet behalve !important, dus toonde de
   editor de hele foto (1072x564) terwijl de site een strook van 360px laat
   zien. Alleen hier, alleen in de editor: zo ziet Yvonne wat een bezoeker ziet. */
.editor-styles-wrapper .yms-hero__beeld .yms-banner img {
  height: clamp(220px, 26vw, 360px) !important;
}

/* ---- Tekst over de volle breedte van de container ----------------------- */
.yms-layout {
  display: block;
}
/* Drie lagen hielden de tekst smal: .prose (720px, en margin:auto, waardoor de
   kop als rasteritem krimpt en in het midden gaat staan), en elke alinea en
   elk lijstitem op 66ch (styles.css:676). Hier alle drie los. */
.yms-main,
.yms-hero .prose,
.yms-main .prose {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.yms-hero .prose p,
.yms-main .prose p,
.yms-main .prose li {
  max-width: none;
}
/* De video NIET mee de breedte in: op 1072px werd hij zo hoog dat de pagina
   juist langer werd, het omgekeerde van wat ze vroeg. */
.yms-main .video-embed {
  max-width: 720px;
}

/* ---- Prijskaart: onder de tekst, in de stroom, niet sticky -------------- */
.yms-aside {
  position: static;
  order: 0;
  max-width: 460px;
  margin: clamp(32px, 5vw, 56px) 0 0;
}

/* ---- Portret zonder lijst, net als op de homepage ----------------------- */
/* Geen lijst en GEEN vervaagde rand (Yvonne, 08-10): de foto zoals hij is.
   De marge-onder moet specifieker dan figure.wp-block-image { margin:0 } in
   wp-adapter.css, anders plakt het onderschrift aan de foto. */
.yms-portret,
.yms-main figure.wp-block-image.yms-portret img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.yms-main figure.wp-block-image.yms-portret {
  margin-bottom: 20px;
}