/* ============================================================
   Optreden- en jaarpagina's (gemaakt door tools/maak_paginas.py)
   ============================================================ */
.ar-body{background:var(--blue-950)}

.ar-optreden,.ar-jaarkop{position:relative;padding:clamp(6.5rem,13vh,9rem) 0 clamp(1.4rem,4vh,2.4rem);overflow:hidden}
.ar-optreden h1,.ar-jaarkop h1{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2rem,5.5vw,4rem);line-height:1;margin:.4rem 0 .6rem;
}
.ar-optreden .kicker a{color:inherit}
.ar-optreden .kicker a:hover{color:var(--yellow)}
.ar-wanneer{margin:0 0 1.4rem;color:rgba(255,255,255,.6);font-size:.9rem}

.ar-beeld{
  display:block;width:100%;max-width:56rem;height:auto;border-radius:var(--r-md);
  box-shadow:0 24px 60px rgba(3,5,28,.5),inset 0 0 0 1px rgba(255,255,255,.08);
}
.ar-verslag{max-width:62ch;margin:1.6rem 0 0}
.ar-verslag p{color:rgba(255,255,255,.8);line-height:1.75;white-space:pre-line}
.ar-knoppen{margin:1.8rem 0 0}

.ar-stappen{display:flex;flex-wrap:wrap;gap:.7rem;margin:2.4rem 0 0}
.ar-stap{
  display:flex;align-items:baseline;gap:.5rem;max-width:22rem;
  padding:.7rem 1rem;border-radius:14px;color:#fff;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  transition:background .2s var(--ease),transform .2s var(--ease);
}
.ar-stap:hover{background:rgba(255,224,27,.16);transform:translateY(-2px)}
.ar-stap span{color:var(--yellow);font-weight:700}
.ar-stap b{font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-stap.rechts{margin-left:auto;text-align:right}

/* het jaar */
.ar-buren{display:flex;gap:.5rem;margin:1.4rem 0 0}
.ar-vlak{padding:0 0 clamp(3rem,8vh,5rem)}
.ar-lijst{display:grid;gap:.8rem}
.ar-kaart{
  display:grid;grid-template-columns:180px minmax(0,1fr);gap:1.2rem;align-items:start;
  padding:.8rem;border-radius:18px;background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.ar-kaartbeeld{display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--blue-850)}
.ar-kaartbeeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.ar-kaartbeeld:hover img{transform:scale(1.05)}
.ar-datum{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.ar-kaart h2{font-family:var(--font-display);text-transform:uppercase;font-size:1.2rem;margin:.25rem 0 .45rem;line-height:1.12}
.ar-kaart h2 a{color:#fff}
.ar-kaart h2 a:hover{color:var(--yellow)}
.ar-kaart p{margin:0;font-size:.9rem;color:rgba(255,255,255,.72);line-height:1.6}
.ar-mini{margin-top:.5rem !important;font-size:.82rem !important}
.ar-mini a{color:var(--yellow);font-weight:700}

@media (max-width:640px){
  .ar-kaart{grid-template-columns:96px minmax(0,1fr);gap:.8rem}
  .ar-stap.rechts{margin-left:0}
  .ar-stap{max-width:100%}
}

/* ---------- de kleurenbarcode van een jaar ----------
   Elke streep is de gemiddelde kleur van één foto uit dat jaar. */
.jr-barcode{
  height:clamp(46px,7vh,74px);border-radius:10px;margin:.2rem 0 1.2rem;
  box-shadow:0 10px 30px rgba(3,5,28,.45),inset 0 0 0 1px rgba(255,255,255,.12);
}

/* ---------- een optreden in zijn eigen kleur ----------
   De kleur komt van de omslagfoto. Alleen als sfeer: tekst blijft wit en geel,
   zodat het leesbaar blijft wat de foto ook voor kleur heeft. */
.ar-optreden.kleurt::before{
  content:"";position:absolute;inset:0 0 auto;height:52vh;pointer-events:none;
  background:radial-gradient(60% 70% at 22% 0%,color-mix(in srgb,var(--eigen) 55%,transparent),transparent 70%);
  opacity:.5;
}
.ar-optreden.kleurt > .shell{position:relative}
.ar-optreden.kleurt .ar-beeld{box-shadow:0 24px 60px color-mix(in srgb,var(--eigen) 40%,rgba(3,5,28,.5)),
  inset 0 0 0 1px rgba(255,255,255,.1)}
.ar-optreden.kleurt .kicker::before{background:var(--eigen)}
.ar-optreden.kleurt .ar-verslag{border-left:3px solid var(--eigen);padding-left:1.1rem}
@supports not (color: color-mix(in srgb, red, blue)){
  .ar-optreden.kleurt::before{background:radial-gradient(60% 70% at 22% 0%,var(--eigen),transparent 70%);opacity:.28}
}