/* ceeme-paginahero.css — DE HERO VAN EEN GEWONE PAGINA.
   ================================================================================================
   De vorm van lib/paginahero.js. Ink-band met violet licht, tekst links, beeld rechts.

   ── Waarom donker, en waarom dat de site en het menu op elkaar aansluit ──────────────────────
   Njusja: "het menu is veel spectaculairder dan de website zelf." Dat kwam doordat het menu een
   ink-vlak met violet licht is en elke pagina op crème begon met een kop en een alinea. Je sluit
   het menu en de site zakt in.

   Nu begint elke pagina met dezelfde taal als het menu — ink, violet als licht, amber als accent —
   en klapt hij daarna open naar crème voor het lezen. Het contrast is het punt: het donkere deel is
   waar je aankomt, het lichte deel is waar je leest.

   ── De regel die hier telt ───────────────────────────────────────────────────────────────────
   Zonder CSS staat de tekst er in de goede volgorde: bovenkopje, H1, definitiezin, twee knoppen, en
   dan het beeld. Zonder JavaScript verandert er niets. Het beeld draagt een lege alt en is dus voor
   een schermlezer en voor een crawler niet aanwezig — het is meubilair, en de tekst ernaast is de
   inhoud. */

.ph {
  background: var(--ce-ink, #17170F);
  color: var(--ce-creme, #F6F2E9);
  position: relative; overflow: hidden;
  /* Het violette licht, dezelfde twee lampen als in het menupaneel — zwak, en nooit als vlak. */
  background-image:
    radial-gradient(58% 78% at 6% 8%, rgba(107, 63, 212, .30), rgba(107, 63, 212, 0) 62%),
    radial-gradient(52% 70% at 96% 96%, rgba(107, 63, 212, .20), rgba(107, 63, 212, 0) 66%);
}

.ph-band {
  max-width: 1180px; margin: 0 auto;
  /* Bovenaan extra ruimte: de kop ligt IN deze band, absoluut, en de H1 mag er niet onder.
     Zie .ceeme-kop in ceeme-omhulsel.css. */
  padding: clamp(104px, 11vw, 152px) max(18px, 3vw) clamp(52px, 7vw, 96px);
  display: grid; gap: clamp(28px, 4vw, 56px); align-items: center;
}
/* Eén kolom. Het beeld dat hier stond is eruit — zie paginahero() in lib/paginahero.js. */
/* De tekstkolom. `min-width: 0` is wat een rasterkind nodig heeft om een lange H1 te laten
   afbreken in plaats van het raster op te rekken; en het is de regel waardoor deze klasse in
   scripts/test-klassen.mjs telt als gestileerd — een wikkel zonder één regel is daar een fout. */
.ph-tekst { min-width: 0 }

.ph-boven {
  margin: 0 0 18px;
  font: 700 11px/1 "Space Mono", ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ce-amber, #C6892B);
}

.ph h1 {
  margin: 0 0 20px;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: clamp(30px, 4.4vw, 54px); font-weight: 800;
  letter-spacing: -.025em; line-height: 1.06;
  max-width: 22ch;
}

/* De definitiezin. Blijft de eerste alinea van de pagina, want dat is wat een RAG-systeem als
   antwoord meeneemt als het vroeg afknipt. */
.ph-def {
  margin: 0 0 30px; max-width: 52ch;
  font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.62;
  color: rgba(246, 242, 233, .74);
}

.ph-knoppen { margin: 0; display: flex; flex-wrap: wrap; gap: 12px }
.ph-btn, .ph-btn2 {
  display: inline-flex; align-items: center;
  text-decoration: none; font-size: 14.5px; font-weight: 700;
  padding: 13px 24px; border-radius: 999px;
  transition: box-shadow 260ms ease, transform 260ms ease, background-color 200ms ease;
}
.ph-btn { background: var(--ce-violet, #6B3FD4); color: var(--ce-creme, #F6F2E9) }
.ph-btn:hover { box-shadow: 0 0 0 6px rgba(107, 63, 212, .22); transform: translateY(-1px) }
.ph-btn2 {
  color: var(--ce-creme, #F6F2E9);
  border: 1px solid rgba(246, 242, 233, .28); font-weight: 600;
}
.ph-btn2:hover { background: rgba(246, 242, 233, .08) }
.ph-btn:focus-visible, .ph-btn2:focus-visible {
  outline: 2px solid var(--ce-creme, #F6F2E9); outline-offset: 3px;
}

/* De romp begint waar de band eindigt. De "in het kort"-lijst hoort op crème: dat is het meest
   citeerbare blok van de pagina en het moet niet met een beeld concurreren. */
.ph + .hw-kort-h, .ph + .hw { margin-top: clamp(40px, 5vw, 72px) }

@media (prefers-reduced-motion: reduce) {
  .ph-btn, .ph-btn2 { transition: none }
}

/* ── De byline: auteur, datum, leesduur ──────────────────────────────────────────────────────
   Taak A8. Ze staat ná de definitiezin en vóór de knoppen, want de definitiezin is de zin die
   geciteerd wordt en die hoort niets boven zich te hebben.

   Zonder CSS blijft het één alinea met een link en een <time> erin — leesbaar, in de goede
   volgorde, en dus voor een crawler compleet. Dat is de regel van scripts/test-zonderjs.mjs, en ze
   geldt ook voor wat er alleen maar mooi hoort te staan. */
.ph-meta {
  margin: -14px 0 26px; max-width: 52ch;
  font: 500 13px/1.7 "Space Mono", ui-monospace, monospace;
  color: rgba(246, 242, 233, .58);
}
.ph-meta i { font-style: normal; margin: 0 9px; color: rgba(246, 242, 233, .3) }
.ph-meta a { color: rgba(246, 242, 233, .86); text-decoration: none;
  border-bottom: 1px solid rgba(198, 137, 43, .5); padding-bottom: 2px }
.ph-meta a:hover { color: #F6F2E9; border-bottom-color: #C6892B }
.ph-meta a:focus-visible { outline: 2px solid #F6F2E9; outline-offset: 3px }