/* ==========================================================================
   Paginagebonden CSS: yms-studiegids.html
   In de statische site staat dit in een <style>-blok in de pagina zelf, dus het
   geldt daar ALLEEN op die pagina. In WordPress is de pagina inhoud en geen
   bestand, dus deze regels horen in het thema, en dan moeten ze ook alleen op
   die pagina geladen worden. Zetten we ze in een gedeeld bestand, dan lekken ze
   naar andere pagina's: .contact-meta bestaat ook op yms-opleiding en is daar
   in het origineel juist NIET opgemaakt.
   ========================================================================== */

/* ---- Studiegids (uit yms-studiegids.html) ------------------------------ */
    /* Programmapagina — alleen deze pagina. Gebruikt de tokens van het designsysteem. */
    .pg-hero { border-bottom: 1px solid var(--cardDivider); padding-bottom: clamp(24px, 4vw, 40px); }
    .pg-hero__rule { width: 64px; height: 1px; background: var(--accent); border: 0; margin: 22px 0 0; }

    .pg-meta { list-style: none; margin: 26px 0 0; padding: 0;
      display: grid; gap: 18px clamp(24px, 5vw, 56px);
      grid-template-columns: repeat(auto-fit, minmax(120px, max-content)); }
    .pg-meta__label { display: block; font-family: var(--sans); font-size: 11px;
      letter-spacing: 0.16em; text-transform: uppercase; color: var(--cap); margin-bottom: 4px; }
    .pg-meta__value { display: block; font-family: var(--serif); font-size: 21px;
      line-height: 1.25; color: var(--fg); }

    .pg-period { display: flex; align-items: baseline; gap: 14px;
      margin: clamp(40px, 6vw, 64px) 0 22px; }
    .pg-period::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--cardDivider); }
    .pg-period__title { font-family: var(--serif); font-size: clamp(22px, 3vw, 27px);
      color: var(--fg); white-space: nowrap; }
    .pg-period__sub { font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
      text-transform: uppercase; color: var(--cap); white-space: nowrap; }

    .pg-list { list-style: none; margin: 0; padding: 0; }
    .pg-avond { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 0 clamp(16px, 3vw, 28px);
      padding: 22px 0; border-top: 1px solid var(--cardDivider); }
    .pg-avond:first-child { border-top: 0; }
    .pg-avond__num { font-family: var(--serif); font-size: 34px; line-height: 1;
      color: var(--accent); font-variant-numeric: lining-nums; }
    .pg-avond__date { margin: 0 0 10px; font-family: var(--sans); font-size: 12px;
      letter-spacing: 0.14em; text-transform: uppercase; color: var(--cap); }
    .pg-topics { list-style: none; margin: 0; padding: 0; }
    .pg-topics li { position: relative; margin: 0 0 10px; padding-left: 18px;
      color: var(--muted); font-size: 16.5px; line-height: 1.7; }
    .pg-topics li:last-child { margin-bottom: 0; }
    .pg-topics li::before { content: ""; position: absolute; left: 0; top: 0.72em;
      width: 6px; height: 1px; background: var(--accent); }
    .pg-topics em { color: var(--fg); font-style: italic; }
    .pg-avond__note { margin: 12px 0 0; padding-left: 18px; font-size: 14.5px;
      line-height: 1.6; color: var(--cap); font-style: italic; }

    .pg-break { display: grid; grid-template-columns: 62px minmax(0, 1fr);
      gap: 0 clamp(16px, 3vw, 28px); padding: 22px 0; border-top: 1px solid var(--cardDivider); }
    .pg-break__mark { font-family: var(--serif); font-size: 26px; line-height: 1.3; color: var(--cap); }
    .pg-break p { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.7; }
    .pg-break strong { color: var(--fg); }


    @media (max-width: 560px) {
      .pg-avond, .pg-break { grid-template-columns: 44px minmax(0, 1fr); }
      .pg-avond__num { font-size: 26px; }
    }

/* ------------------------------------------------------------------
   Wat WordPress anders doet dan de statische pagina, sinds de inhoud
   bewerkbaar werd. Elke regel hier heeft een aanwijsbare aanleiding.
   ------------------------------------------------------------------ */

/* De twee strepen waren <hr>-elementen zonder blok. Als core/separator
   brengen ze de rand en de marges van dat blok mee; die horen hier niet,
   want de opmaak staat al in .pg-hero__rule en .yms-card__hr hierboven. */
hr.wp-block-separator.pg-hero__rule,
hr.wp-block-separator.yms-card__hr {
  border: 0;
  opacity: 1;
  max-width: none;
}
hr.wp-block-separator.pg-hero__rule { width: 64px; height: 1px; background: var(--accent); margin: 22px 0 0; }
hr.wp-block-separator.yms-card__hr { border-top: 1px solid var(--cardDivider); margin: 20px 0; }

/* De periodetitel en de ondertitel waren losse spans. Een span met een klasse
   overleeft de blokeditor niet, dus ze zijn nu een kop en een alinea. Die
   brengen marges mee die een span niet heeft, en .pg-period is een flexrij:
   met die marges springt de lijn eronder omlaag. */
.pg-period h3.pg-period__title,
.pg-period p.pg-period__sub {
  margin: 0;
}

/* Hetzelfde voor het scheidingsteken tussen de blokken avonden. */
.pg-break p.pg-break__mark {
  margin: 0;
}