/* 98-seizoen.css — feestdagen en gelegenheden (inc/tb-seizoen.php).
 *
 * Geen eigen kleuren per feestdag, anders dan op bakprijzen.nl: de tokens winnen. De gelegenheid herken je aan het
 * motief (een lijnicoon in --tb-accent-line) en aan de naam, niet aan een rood voor kerst en een paars voor
 * Halloween. Geen getint vlak: de voorpagina heeft er al één (de bakkersoproep).
 */

/* ── De balk onder de kop ─────────────────────────────────────────── */
.tb-seizoen-balk{
  background:var(--tb-surface);
  border-bottom:1px solid var(--tb-line);
}
.tb-seizoen-balk a{
  display:flex;align-items:center;justify-content:center;gap:10px;
  max-width:var(--tb-container);margin-inline:auto;padding:9px 24px;box-sizing:border-box;
  font-size:14px;line-height:1.4;color:var(--tb-body);text-decoration:none;
}
.tb-seizoen-balk a > span{min-width:0;}
.tb-seizoen-balk b{color:var(--tb-ink);font-weight:700;}
.tb-seizoen-balk a:hover > span{text-decoration:underline;text-underline-offset:3px;}
.tb-seizoen-balk .tb-motief{flex:none;color:var(--tb-accent-line);}
.tb-seizoen-pijl{flex:none;color:var(--tb-action);}
@media (max-width:767px){
  .tb-seizoen-balk a{justify-content:flex-start;padding:8px 16px;font-size:13.5px;}
  .tb-seizoen-balk-zin{display:none;}
}

/* ── Wanneer: motief, datum, aftellen ─────────────────────────────── */
.tb-seizoen-wanneer{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 10px;
  font-size:14px;font-weight:600;color:var(--tb-muted);
}
.tb-seizoen-wanneer .tb-motief{color:var(--tb-accent-line);}

.tb-seizoen-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:20px;}
.tb-seizoen-knoppen > span{font-size:13.5px;color:var(--tb-soft);}

/* ── De voorpagina ────────────────────────────────────────────────── */
.tb-seizoen-home-tekst{
  display:flex;flex-direction:column;justify-content:center;min-width:0;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--tb-line);border-radius:var(--tb-r-card);background:var(--tb-surface);
}
.tb-seizoen-home-tekst > p:not(.tb-seizoen-wanneer){margin:0;font-size:15.5px;line-height:1.6;color:var(--tb-body);}
.tb-home .tb-seizoen-home h2{margin:0 0 8px;}
.tb-seizoen-home-tekst .tb-seizoen-knoppen{margin-top:18px;}

/* Tekst plus drie kaarten: vier vakken op de volle breedte. Bij drie of twee kolommen gaat de tekst over de hele
   breedte, en bij twee kolommen valt de derde kaart weg: een rij met een gat belooft meer dan er is. */
@media (max-width:1199px){
  .tb-seizoen-home-raster > .tb-seizoen-home-tekst{grid-column:1 / -1;}
}
@media (min-width:600px) and (max-width:899px){
  .tb-seizoen-home-raster > .tb-card:nth-child(4){display:none;}
}
/* Op een telefoon staan kaarten onder elkaar: drie waren samen ruim 1.500 px vóór "Waar is het voor?". Eén is genoeg
   om te laten zien dat er iets is; de knop wijst naar de rest. */
@media (max-width:599px){
  .tb-seizoen-home-raster > .tb-card:nth-child(n+3){display:none;}
}

/* Zonder kaarten: één band, tekst links en knoppen rechts. */
.tb-seizoen-home-los .tb-seizoen-home-tekst{
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:center;
}
.tb-seizoen-home-los .tb-seizoen-home-tekst > *{grid-column:1;}
.tb-seizoen-home-los .tb-seizoen-knoppen{grid-column:2;grid-row:1 / span 3;margin-top:0;}
@media (max-width:767px){
  .tb-seizoen-home-los .tb-seizoen-home-tekst{display:flex;}
  .tb-seizoen-home-los .tb-seizoen-knoppen{margin-top:18px;}
}

/* ── /gelegenheid/ ────────────────────────────────────────────────── */
.tb-gelegenheid .tb-redactie-kop{padding-top:clamp(28px,4vw,48px);}
.tb-gelegenheid-kop > p:not(.tb-seizoen-wanneer){max-width:62ch;}
.tb-gelegenheid-blok{margin-top:clamp(36px,4.6vw,56px);}
.tb-gelegenheid .tb-gelegenheid-blok h2{
  font-family:var(--tb-serif);font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.2;
  color:var(--tb-ink);margin:0 0 16px;
}
.tb-gelegenheid .tb-meer-kop h2{margin:0;}
.tb-gelegenheid .tb-open-ingang-tekst > p.tb-gelegenheid-voorbeeld{font-style:italic;color:var(--tb-muted);}

.tb-gelegenheid-soorten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.tb-gelegenheid-soorten a{
  display:inline-flex;align-items:center;gap:8px;min-height:var(--tb-h-ctrl-sm);padding:0 16px;box-sizing:border-box;
  border:1px solid var(--tb-border);border-radius:var(--tb-r-pill);background:var(--tb-surface);
  color:var(--tb-ink);font-size:14.5px;font-weight:600;text-decoration:none;
}
.tb-gelegenheid-soorten a:hover{border-color:var(--tb-accent-line);}
.tb-gelegenheid-soorten span{font-weight:400;color:var(--tb-muted);}

.tb-gelegenheid-kalender{
  list-style:none;margin:clamp(20px,3vw,32px) 0 0;padding:0;
  display:grid;gap:var(--tb-gutter);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.tb-gelegenheid-blok .tb-gelegenheid-kalender{margin-top:0;}
.tb-gelegenheid-kalender a{
  display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:center;height:100%;
  padding:18px 20px;box-sizing:border-box;
  border:1px solid var(--tb-line);border-radius:var(--tb-r-card);background:var(--tb-surface);
  color:var(--tb-body);text-decoration:none;transition:transform .18s ease, box-shadow .18s ease;
}
.tb-gelegenheid-kalender a:hover{transform:translateY(-2px);box-shadow:var(--tb-lift);}
.tb-gelegenheid-kalender .tb-motief{grid-row:1;color:var(--tb-accent-line);}
.tb-gelegenheid-kalender a > span{grid-column:2;}
.tb-gelegenheid-naam{grid-row:1;font-family:var(--tb-serif);font-size:19px;font-weight:600;color:var(--tb-ink);}
.tb-gelegenheid-datum{font-size:14px;font-weight:600;color:var(--tb-muted);}
.tb-gelegenheid-zin{margin-top:6px;font-size:14.5px;line-height:1.5;}
.tb-gelegenheid-aantal{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--tb-accent-text);}

.tb-gelegenheid-bakker{
  padding-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--tb-line);
}
.tb-gelegenheid-bakker p{margin:0 0 18px;max-width:62ch;font-size:15.5px;line-height:1.6;color:var(--tb-body);}

@media (max-width:899px){
  .tb-gelegenheid .tb-open-ingang{grid-template-columns:minmax(0,1fr);}
}