/* Weekendlijst: de filterrij en de evenementkaarten op /weekend.
   De drie dagkaarten staan in weerwidget.css, de evenementpagina in
   evenement.css. Leunt op de tokens en kleurklassen uit buienkans.css. */

.weekend-kop { font-family: var(--kop); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.035em; margin: 0.25rem 0 0.25rem; text-shadow: var(--tekstschaduw); }
.weekend-sub { margin: 0 0 1.25rem; color: var(--text-muted); font-size: 0.95rem; }

.daggroep {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1.6rem 0 0.6rem;
  font-family: var(--kop);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: capitalize;
}
.daggroep span {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text-muted);
  text-transform: none;
}

/* Filterrij. Links, geen knoppen: de keuze staat in de URL, dus dit werkt
   zonder JavaScript en de terugknop maakt het ongedaan. Het aantal staat in
   het chipje zelf, want een filter zonder aantal is gokken. */
.filters { display: grid; gap: 0.5rem; margin-bottom: 1.1rem; }
.filterrij { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32rem;
  padding: 0.34rem 0.7rem;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
}
.chip span { font-size: 0.72rem; color: var(--text-muted); }
.chip-aan { background: var(--navy); color: #fff; }
.chip-aan span { color: rgba(255, 255, 255, 0.7); }

/* De schakelaar is bewust anders van vorm dan de chips: die kiezen één uit
   vijf, deze zet één ding aan of uit. Dezelfde vorm zou suggereren dat het
   dezelfde soort keuze is. */
.filterknop { margin: 0; }
.filterknop a {
  display: inline-block;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  color: var(--accent);
}
.filterknop-aan a { font-weight: 600; }

.evenementen { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.ev { border-radius: var(--radius-klein); background: var(--card); overflow: hidden; }

/* Beeld voorop. Op een telefoon staat de foto boven de tekst, want dat is de
   volle breedte die een promobeeld verdient; vanaf 26rem schuift hij naar
   links en wordt het een liggende regel. */
.ev a {
  display: grid;
  gap: 0;
  color: inherit;
  text-decoration: none;
}
.ev a:hover .ev-naam { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ev a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Geen gekleurde rand langs de kaart: het vlakje op de foto zegt het oordeel
   al, en twee keer dezelfde kleur naast elkaar maakt de rij onrustig zonder
   iets toe te voegen. */

/* Twee lagen: het weerbeeld van die dag onder, de foto erover. Het vlak
   bepaalt zijn hoogte uit de verhouding 16:9, dus er verspringt niets als de
   foto later binnenkomt. */
.ev-beeld { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--chip); }
.ev-beeld-weer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  color: var(--border-strong);
}
.ev-beeld img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ev-tekst { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; padding: 0.7rem 0.85rem 0.8rem; }
.ev-wanneer { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.ev-naam { font-family: var(--kop); font-size: 1.02rem; font-weight: 600; line-height: 1.22; letter-spacing: -0.02em; text-shadow: var(--tekstschaduw); }
.ev-plek { font-size: 0.78rem; color: var(--text-muted); }
.ev-twijfel { font-style: normal; padding: 0 0.34rem; border-radius: 4px; background: var(--chip); font-size: 0.68rem; color: var(--text-muted); }

/* Het advies is de conclusie van de kaart, dus het krijgt een eigen vulling in
   de kleur van het oordeel. Eén zo'n gekleurd vlak per kaart is iets anders dan
   het pastelgordijn dat er vanmorgen overal lag: dit vlak betekent iets.

   Als knop vormgegeven: afgeronde hoeken, een vulling, en binnen de marge van
   de kaart in plaats van tot de randen doorlopend. Hij zit in de kaartlink, dus
   een tik erop doet hetzelfde als een tik op de kaart: naar het evenement.
   Geen eigen <button>, want er valt niets anders te doen dan doorklikken, en
   een knop die iets anders belooft dan hij doet is erger dan geen knop. */
.ev-advies {
  display: block;
  margin: 0.7rem 0 0;
  padding: 0.6rem 0.85rem 0.65rem;
  border-radius: var(--radius-klein);
  background: var(--adviesvlak, var(--chip));
  text-align: center;
  /* Moet de regel over twee regels, dan verdeelt de browser de woorden gelijk
     in plaats van er één achterblijver op regel twee te zetten. Zonder dit
     staat er op een smalle telefoon "droog, 6" en daaronder "uur lang". */
  text-wrap: balance;
}
.ev a:hover .ev-advies { filter: brightness(0.97); }
/* Raad en grond staan op één regel, gecentreerd: samen vormen ze één uitspraak
   ("koop dat kaartje, want het blijft droog"), en die hoort niet over twee
   regels uiteen te vallen. Ze blijven inline, dus op een smal toestel wikkelt
   de regel netjes en blijft gecentreerd staan. */
.ev-advies-kop {
  display: inline;
  font-family: var(--kop);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.35;
  color: var(--adviestekst, var(--text));
  text-shadow: var(--tekstschaduw);
}
/* Binnen het gekleurde vlak erft alles de adviestekstkleur op halve sterkte.
   Het grijs van --text-muted is gemaakt voor een witte kaart en zakt weg op
   een pastelvlak. */
.ev-advies-grond {
  display: inline;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--adviestekst, var(--text));
  opacity: 0.78;
}

/* Tijdbalkje over de duur van het evenement: klok links, staafjes in het
   midden, geschatte eindtijd rechts. Eén staafje per uur, hoogte naar de
   millimeters, en dezelfde kleurenschaal als de radar op de voorpagina.

   Droge uren houden een zichtbare voet van 12%: een rij lage stompjes leest als
   "vlak, dus droog", waar losse streepjes op een lege regel lijken. Zelfde
   truc als in de tijdlijn op de voorpagina. */
.ev-balk {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.ev-balk-klok {
  flex-shrink: 0;
  font-size: 0.68rem;
  line-height: 1;
  padding-bottom: 0.1rem;
  color: var(--adviestekst, var(--text));
  opacity: 0.7;
}
.ev-balk-staven {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  flex: 1;
  min-width: 0;
  height: 1.1rem;
  /* Geen grondlijn onder de staafjes: de rij stompjes van de droge uren vormt
     zelf al een leesbare basislijn. */
}
.staafje {
  flex: 1;
  min-width: 2px;
  border-radius: 1px 1px 0 0;
  background: color-mix(in oklch, var(--adviestekst, currentColor) 35%, transparent);
}
.staafje.k-groen { background: var(--groen); }
.staafje.k-geel { background: var(--geel); }
.staafje.k-oranje { background: var(--oranje); }
.staafje.k-rood { background: var(--rood); }
.staafje.leeg { background: color-mix(in oklch, var(--adviestekst, currentColor) 30%, transparent); }

/* Alleen bij meer dan zes dagen vooruit: dan is de verwachting werkelijk niet
   meer dan een richting, en hoort dat erbij te staan. */
.ev-advies-voorbehoud {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.05rem 0.45rem;
  background: color-mix(in oklch, var(--adviestekst, currentColor) 14%, transparent);
  border-radius: 999px;
  font-size: 0.68rem;
  color: var(--adviestekst, var(--text));
  opacity: 0.85;
}

.ev.k-groen { --adviesvlak: var(--groen-bg); --adviestekst: var(--groen-text); }
.ev.k-geel { --adviesvlak: var(--geel-bg); --adviestekst: var(--geel-text); }
.ev.k-oranje { --adviesvlak: var(--oranje-bg); --adviestekst: var(--oranje-text); }
.ev.k-rood { --adviesvlak: var(--rood-bg); --adviestekst: var(--rood-text); }
.ev.k-grijs { --adviesvlak: var(--chip); --adviestekst: var(--text); }

/* Heel smalle telefoon: drie kolommen met een metarij van negen cijfers vallen
   onder 22rem niet meer uit. Dan de metarij weg; naam, pictogram en
   millimeters zijn waar je voor komt.

   Hier stond ook nog een driekoloms-raster voor `.ev a`, een restant van de
   tekstregel-indeling van voor de beeldkaarten. Dat gaf op een smalle telefoon
   een foto van 2,8rem breed, en het stond nog in evenement.css terwijl het
   over de weekendlijst gaat. Beide rechtgezet. */
@media (max-width: 22rem) {
  .dagkaart-meta { display: none; }
  .dagkaart-icoon { font-size: 1.5rem; }
}

@media (min-width: 26rem) {
  .ev a { grid-template-columns: 10.5rem 1fr; align-items: stretch; }
  /* Naast de tekst rekt het beeld mee met de hoogte van de regel in plaats van
     zijn eigen verhouding te houden, anders staat er een witte strook naast. */
  .ev-beeld { aspect-ratio: auto; min-height: 6.6rem; }
  .ev-beeld-weer { font-size: 2.2rem; }
  .ev-tekst { justify-content: center; }
}

.leeg, .weekend-uitleg { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }
.weekend-uitleg { margin-top: 1.75rem; }