/**
 * De stappen -- geometrie en gedrag, nooit typografie.
 *
 * Twee standen met dezelfde markup:
 *
 *   ONDER ELKAAR (standaard): elke stap een vlak, het nummer links ernaast; op
 *   een telefoon staat het nummer erboven. Dit is ook wat de editor toont en
 *   wat er staat zonder JavaScript.
 *
 *   NAAST ELKAAR (`mymmo-werkstappen--naast`, gezet door mymmo-stappen.js op een
 *   computer): smalle panelen in een rij die blijft kleven terwijl je scrolt;
 *   het open paneel neemt de rest van de breedte. De panelen zijn altijd even
 *   hoog; een stap die niet past, krimpt (--mk-schaal) -- zie mymmo-stappen.js.
 *
 * Het nummer krijgt zijn maat en lettertype van het thema (klassen van
 * WordPress zelf), en enkel een kleur als de redacteur er een koos uit het
 * palet. Geen transform, contain of container-type op een stap of de rij: een
 * venster van Mymmo Forms in een stap zou daar anders in gevangen zitten.
 */

.mymmo-werkstappen {
  /* De opvulling van een stap: een van de drie van de huisstijl. */
  --mk-pad: var(--mymmo-ruimte-normaal);
  /* Hoe breed een dicht paneel is in de stand naast elkaar. */
  --mk-dicht: clamp(56px, 6vw, 88px);
}

.mymmo-werkstappen.mymmo-werkstappen--pad-krap { --mk-pad: var(--mymmo-ruimte-krap); }
.mymmo-werkstappen.mymmo-werkstappen--pad-ruim { --mk-pad: var(--mymmo-ruimte-ruim); }

@media (max-width: 781px) {
  .mymmo-werkstappen.mymmo-werkstappen--pad-krap { --mk-pad: var(--mymmo-ruimte-krap-telefoon); }
  .mymmo-werkstappen.mymmo-werkstappen--pad-normaal { --mk-pad: var(--mymmo-ruimte-normaal-telefoon); }
  .mymmo-werkstappen.mymmo-werkstappen--pad-ruim { --mk-pad: var(--mymmo-ruimte-ruim-telefoon); }
}

/* ── Onder elkaar ─────────────────────────────────────────────────────────── */

.mymmo-werkstappen .mymmo-werkstappen-rij {
  display: flex;
  flex-direction: column;
  gap: var(--mymmo-ruimte-krap);
}

.mymmo-werkstappen .mymmo-werkstap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--mk-pad);
  align-items: start;
  margin: 0;
  padding: var(--mk-pad);
  border-radius: var(--mymmo-afronding-l);
  background-color: var(--mk-stap-bg, var(--mk-stappen-bg, var(--mymmo-kleur-vlak)));
}

/* Zonder eigen kleur is het nummer de tekstkleur, zacht: het is versiering en
   mag niet harder roepen dan de kop ernaast. */
.mymmo-werkstappen .mymmo-werkstap-nummer {
  display: block;
  color: var(--mk-nummer-kleur, currentColor);
  opacity: 0.4;
}

.mymmo-werkstappen.mymmo-werkstappen--nummer-kleur .mymmo-werkstap-nummer {
  opacity: 1;
}

.mymmo-werkstap .mymmo-werkstap-inhoud > :first-child { margin-top: 0; }
.mymmo-werkstap .mymmo-werkstap-inhoud > :last-child { margin-bottom: 0; }

/* Beeld en video in een vlak: de kleine afronding van de huisstijl. */
.mymmo-werkstap .wp-block-video video,
.mymmo-werkstap .wp-block-image img {
  border-radius: var(--mymmo-afronding-m);
}

/* Een telefoon: het nummer BOVEN de stap. Ernaast kost het een kolom die de
   tekst op een smal scherm niet kan missen. */
@media (max-width: 639.98px) {
  .mymmo-werkstappen .mymmo-werkstap {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── De illustratie: een vorm achter de inhoud ───────────────────────────────

   Zelfde opzet als .mymmo-kaart-sier in mymmo-cards.css (lees daar waarom het
   een vlak met een achtergrond is en geen <img>): een vierkant vlak via een
   procentuele opvulling, de tekening erin met `contain`. Breedte en
   horizontale plaats komen als factor binnen (--mk-sier-b, --mk-sier-x), zodat
   de stand naast elkaar ze tegen de breedte van een OPEN paneel kan rekenen.
   De transform staat op de vorm zelf, die geen inhoud bevat: een venster van
   Mymmo Forms in de stap zit er dus niet in gevangen. */

.mymmo-werkstappen .mymmo-werkstap--sier {
  position: relative;
  overflow: hidden;
}

.mymmo-werkstap--sier .mymmo-werkstap-sier {
  display: block;
  box-sizing: content-box;
  position: absolute;
  z-index: 0;
  left: calc(100% * var(--mk-sier-x, 0.5));
  top: var(--mk-sier-y, 50%);
  width: calc(100% * var(--mk-sier-b, 0.7));
  height: 0;
  padding-top: calc(100% * var(--mk-sier-b, 0.7));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate(-50%, -50%) rotate(var(--mk-sier-draai, 0deg));
  opacity: var(--mk-sier-dekking, 1);
  pointer-events: none;
  user-select: none;
}

/* Nummer en inhoud liggen erboven. */
.mymmo-werkstap--sier .mymmo-werkstap-nummer,
.mymmo-werkstap--sier .mymmo-werkstap-inhoud {
  position: relative;
  z-index: 1;
}

/* Een telefoon: eigen maat en plaats, als de redacteur ze instelde. De stap
   heeft daar een heel andere vorm: wat op een computer een hoek vult, ligt op
   375px over de halve tekst. */
@media (max-width: 639.98px) {
  .mymmo-werkstap--sier-m .mymmo-werkstap-sier {
    left: calc(100% * var(--mk-sier-x-m, var(--mk-sier-x, 0.5)));
    top: var(--mk-sier-y-m, var(--mk-sier-y, 50%));
    width: calc(100% * var(--mk-sier-b-m, var(--mk-sier-b, 0.7)));
    padding-top: calc(100% * var(--mk-sier-b-m, var(--mk-sier-b, 0.7)));
    transform: translate(-50%, -50%) rotate(var(--mk-sier-draai-m, var(--mk-sier-draai, 0deg)));
    opacity: var(--mk-sier-dekking-m, var(--mk-sier-dekking, 1));
  }
}

/* ── Vinkjes: een kern-lijst met de stijl "Vinkjes (in een stap)" ──────────── */

.mymmo-werkstap .is-style-mymmo-vinkjes {
  list-style: none;
  padding-left: 0;
}

.mymmo-werkstap .is-style-mymmo-vinkjes > li {
  position: relative;
  padding-left: 1.75em;
}

/* Het vinkje: twee randen van een gedraaid rechthoekje, in de kleur van het
   nummer -- zo heeft de reeks één accentkleur. */
.mymmo-werkstap .is-style-mymmo-vinkjes > li::before {
  content: "";
  position: absolute;
  left: 0.4em;
  top: 0.25em;
  width: 0.4em;
  height: 0.75em;
  border-right: var(--mymmo-rand) solid var(--mk-nummer-kleur, currentColor);
  border-bottom: var(--mymmo-rand) solid var(--mk-nummer-kleur, currentColor);
  transform: rotate(45deg);
}

/* ── Naast elkaar (enkel met de klasse van het script, enkel op een computer) ─ */

@media (min-width: 782px) {
  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstappen-baan {
    height: var(--mk-baan);
  }

  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstappen-rij {
    position: sticky;
    top: var(--mk-boven);
    height: var(--mk-paneel);
    flex-direction: row;
  }

  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--mk-dicht);
    min-width: 0;
    padding-inline: 0;
    overflow: hidden;
    cursor: pointer;
    transition: flex-grow 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap.is-open {
    flex-grow: 1;
    cursor: auto;
  }

  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap:focus-visible {
    outline: var(--mymmo-focus);
    outline-offset: var(--mymmo-focus-afstand);
  }

  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap-nummer {
    align-self: center;
  }

  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap.is-open .mymmo-werkstap-nummer {
    align-self: flex-start;
    padding-inline: var(--mk-pad);
  }

  /* De inhoud heeft ALTIJD de breedte van een open paneel (--mk-open, gemeten
     door het script). Zo loopt de tekst niet opnieuw in terwijl het paneel
     openschuift, en kan het script vooraf meten of elke stap past.

     Past ze niet in de hoogte, dan krimpt het script ze met --mk-schaal: zo
     zijn de panelen altijd even hoog, zonder schuifbalk. `zoom` en geen
     `transform: scale()`: een transform maakt van de inhoud het
     referentiekader voor `position: fixed`, en dan zit een venster van Mymmo
     Forms erin gevangen. De breedte wordt door dezelfde schaal gedeeld, zodat
     de gekrompen inhoud het paneel nog altijd vult. */
  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap-inhoud {
    flex: 0 0 auto;
    align-self: flex-start;
    box-sizing: border-box;
    zoom: var(--mk-schaal, 1);
    width: calc(var(--mk-open) / var(--mk-schaal, 1));
    padding-inline: var(--mk-pad);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }

  /* De illustratie: gerekend tegen de breedte van een OPEN paneel, zodat ze
     niet meegroeit terwijl het paneel openschuift. In een dicht paneel is ze
     weg, net als de inhoud: in een strook van 80px is ze enkel een vlek. */
  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap-sier {
    left: calc(var(--mk-open) * var(--mk-sier-x, 0.5));
    width: calc(var(--mk-open) * var(--mk-sier-b, 0.7));
    padding-top: calc(var(--mk-open) * var(--mk-sier-b, 0.7));
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap.is-open .mymmo-werkstap-sier {
    opacity: var(--mk-sier-dekking, 1);
    transition: opacity 0.35s ease 0.3s;
  }

  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap.is-open .mymmo-werkstap-inhoud {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease 0.3s, visibility 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap,
  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap-inhoud,
  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap.is-open .mymmo-werkstap-inhoud,
  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap-sier,
  .mymmo-werkstappen.mymmo-werkstappen--naast .mymmo-werkstap.is-open .mymmo-werkstap-sier {
    transition: none;
  }
}