/* Evenementpagina (/evenement/:id): foto, oordeel, verwachting, acties.
   De weekendlijst staat in evenementen.css. */

.oordeel.k-grijs,
.nu.k-grijs { background: var(--chip); color: var(--text); }

.ev-terug { margin: 0 0 0.75rem; font-size: 0.85rem; }

/* Promotiebeeld van de organisator. In de praktijk is elke foto die
   Ticketmaster levert 16:9, en lib/ticketmaster.js kiest die verhouding ook
   expres. Maar als er eens geen liggende variant is, valt de keuze terug op
   wat er wél is, en dan mag de pagina niet van vorm veranderen: het vak houdt
   zijn 16:9 en de foto wordt gevuld bijgesneden.

   De width- en height-attributen in de HTML staan er daarnaast zodat de
   browser de ruimte alvast vrijhoudt en de pagina niet verspringt. */
.ev-foto { margin: 0 0 0.9rem; border-radius: var(--radius); overflow: hidden; background: var(--chip); }
.ev-foto img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ev-titel { font-family: var(--kop); font-size: 1.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.035em; margin: 0 0 0.35rem; text-shadow: var(--tekstschaduw); }
.ev-onder { display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; margin: 0 0 1.25rem; font-size: 0.85rem; color: var(--text-muted); }
/* Losse delen naast elkaar; de ruimte scheidt ze, geen middenpunt. */
.ev-onder-deel { position: relative; }

/* Het blok voor de dag zelf staat bóven het kaartjesadvies: wie er al is,
   heeft niets meer aan de vraag of hij moet gaan. */
.nu {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.75rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.nu-label { font-size: 0.75rem; font-weight: 500; opacity: 0.7; }
.nu-kop { font-family: var(--kop); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; text-shadow: var(--tekstschaduw); }
.nu-sub { font-size: 0.85rem; opacity: 0.9; }
.nu.k-groen { background: var(--groen-bg); color: var(--groen-text); }
.nu.k-geel { background: var(--geel-bg); color: var(--geel-text); }
.nu.k-oranje { background: var(--oranje-bg); color: var(--oranje-text); }
.nu.k-rood { background: var(--rood-bg); color: var(--rood-text); }

.waarschuwingen {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0.9rem 0.7rem 2rem;
  border-radius: var(--radius);
  background: var(--geel-bg);
  color: var(--geel-text);
  font-size: 0.85rem;
  line-height: 1.45;
}
.waarschuwingen li { margin: 0.15rem 0; }

.tijdlijn-bij { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--text-muted); text-align: center; }

/* De cijfers zijn een verwachting, geen meting. De kop erboven zegt dat, en
   het label rechts zegt hoe hard je die verwachting mag nemen. */
.verwachting { margin-top: 1.25rem; }
.verwachting-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin-bottom: 0.6rem;
}
.verwachting-wat { display: flex; flex-direction: column; margin: 0; }
.verwachting-label { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }
.verwachting-wanneer { font-size: 0.92rem; font-weight: 600; text-shadow: var(--tekstschaduw); }
.zekerheid {
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.zekerheid.z-groen { background: var(--groen-bg); color: var(--groen-text); }
.zekerheid.z-geel { background: var(--geel-bg); color: var(--geel-text); }
.zekerheid.z-oranje { background: var(--oranje-bg); color: var(--oranje-text); }

/* Vier vakjes in drie kolommen laat er één alleen achter op een tweede rij.
   Twee bij twee valt netjes uit, ook op een smalle telefoon. */
.kansen-vier { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.verwachting-bij { margin: 0.7rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-muted); }

.ev-noot { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

.ev-acties { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.knop {
  flex: 1 1 10rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}
.knop-zacht { background: var(--chip); color: var(--text); font-weight: 500; }

/* Het oordeel op deze pagina in de vorm van de knoppen eronder: krappere
   marges, dezelfde ronding, en de tekst compacter. Op de voorpagina blijft het
   oordeel het grote heldenblok, dus dit is bewust alleen hier.

   Niet klikbaar gemaakt, en dat is een keuze. Een knop hoort te zeggen wat hij
   doet, en dit zegt wat wij denken. "Ik zou wachten" als opschrift van een
   knop die kaartjes koopt spreekt zichzelf tegen. De echte actie staat er
   direct onder, met bestemming en al. */
.ev-pagina .oordeel {
  padding: 0.9rem 1.1rem 1rem;
  border-radius: var(--radius-klein);
  box-shadow: none;
}
.ev-pagina .oordeel-plaats { font-size: 0.78rem; }
.ev-pagina .oordeel-kop { font-size: clamp(1.4rem, 6.5vw, 1.8rem); margin: 0.15rem 0 0.35rem; }
.ev-pagina .oordeel-sub { font-size: 0.88rem; line-height: 1.45; text-wrap: balance; }

/* Uitgaande knop: het domein onder de tekst en een wereldbol ernaast. Twee
   signalen voor hetzelfde, en dat is hier terecht: het pictogram valt op bij
   scannen, de domeinnaam antwoordt op "waar kom ik dan uit". */
.knop-uit { display: flex; align-items: center; justify-content: center; gap: 0.55rem; text-align: left; }
.knop-tekst { display: flex; flex-direction: column; line-height: 1.2; }
.knop-tekst small { font-weight: 400; font-size: 0.72rem; opacity: 0.75; }
.knop-bol { flex-shrink: 0; width: 1.1rem; height: 1.1rem; opacity: 0.85; }

/* Eén actie op de pagina, dus die mag de volle breedte hebben in plaats van
   naast een tweede knop te staan. */
.ev-acties .knop { flex: 1 1 100%; }

/* Voor wie de pagina laat voorlezen: het pictogram is voor het oog, deze tekst
   voor het oor. Zichtbaar weghalen mag, uit de voorleesvolgorde niet. */
.vzw {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ev-opdehoogte { margin-top: 2rem; font-size: 0.9rem; line-height: 1.55; }
.ev-opdehoogte h2 { font-family: var(--kop); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.4rem; }