/* Country Star Meeting — overgenomen uit countrystarmeeting.html van de website.
   Alleen wat de pagina in WordPress nodig heeft: de donkere kop met de band, de kop boven de
   lijst, het blokje met de uitzendtijden en de link terug. De band zelf (de plek van de kaart
   erover) staat in episodes.css, gedeeld met de andere shows.
   De vervaagde achtergrond achter de band komt uit een eigen variabele, zodat het adres van het
   beeld in de pagina staat en niet hier. */
.csm-donker { background: #241610 linear-gradient(180deg, #3a2417 0%, #1d110a 100%);
  border-bottom: 3px solid #c9a227; }

/* De naam van de show staat in de afbeelding zelf, dus de kop hoeft niet nog een keer in beeld.
   Hij blijft wel in de pagina staan: Google en voorleessoftware lezen een afbeelding niet. */
.csm-titel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.csm-band { position: relative; overflow: hidden; background: #1a120c; }
.csm-band .band-binnen { max-width: 1400px; }
/* De waas achter de band is dezelfde foto, vervaagd. `background: inherit` pakt de achtergrond
   van de band zelf over — die staat in Elementor ingesteld op de banner. Zo verandert de waas
   vanzelf mee zodra iemand een andere banner kiest, zonder dat het adres hier in de css staat. */
.csm-band::before { content: ""; position: absolute; top: -40px; right: -40px; bottom: -40px; left: -40px;
  background: inherit; background-size: cover; background-position: center;
  filter: blur(30px) brightness(.45); z-index: 0; }
.csm-band > * { position: relative; z-index: 1; }

.csm-lijstkop { max-width: 52rem; margin: 2.8rem auto 1.6rem; text-align: center; }
.csm-lijstkop h2 { font-size: 1.6rem; margin: 0 0 .5rem; }
.csm-lijstkop p { color: #6a665e; line-height: 1.65; margin: 0; }

/* 🔴 Altijd met .e-con erbij: `wanneer` is de klasse die in Elementor op de container met de
   uitzendtijden staat, en die naam is te gewoon om alleen te laten staan. Het nieuwsblok noemt
   zijn datum ook `wanneer`, en zodra beide bladen op één pagina staan — het blok Uitzendingen
   laadt dit blad mee — kreeg die datum de lichte balk van hieronder. (Gemeten 21-10-2026 op de
   Extra Elvis-voorpagina: de datum werd 544x54 met achtergrond #f7f5f0.) `.e-con` heeft alleen
   een Elementor-container, nooit een span in onze eigen html. */
.e-con.wanneer { max-width: 34rem; margin: 2.6rem auto 0; padding: 1.1rem 1.3rem; background: #f7f5f0;
  border-left: 4px solid #ff5500; border-radius: 0 8px 8px 0; }
/* Iets specifieker dan `body[class] h2` uit jimreeves-sites, anders wordt deze kop
   grijs net als alle andere koppen. */
body .e-con.wanneer h2 { font-size: 1.1rem; margin: 0 0 .8rem; color: #b33d00; }
.e-con.wanneer table { width: 100%; border-collapse: collapse; }
.e-con.wanneer td { padding: .4rem .5rem .4rem 0; border-bottom: 1px solid #e6e1d8; vertical-align: top; }
.e-con.wanneer tr:last-child td { border-bottom: 0; }
.e-con.wanneer td.tijd { white-space: nowrap; color: #7a7a7a; font-variant-numeric: tabular-nums; width: 9.5rem; }
.e-con.wanneer td.naam { color: #222; font-weight: 600; }
.terug { margin-top: 2.2rem; text-align: center; }
.terug a { color: #ff5500; font-weight: 600; text-decoration: none; }
.terug a:hover { text-decoration: underline; }

/* De banner is een gewone Afbeelding-widget geworden, zodat Eimbert en Fred hem met de mediakiezer
   kunnen vervangen (Rolf 19-10-2026). De band eromheen is nu een Elementor-container, en die kan
   geen data-kaart="rechts" dragen — eigen attributen zitten alleen in Elementor Pro. Daarom staan
   hieronder dezelfde regels als in episodes.css, maar op de klasse .csm-band.
   De keyframes hero-kaart-neer staan in episodes.css; dat blad laadt hier altijd mee. */
.csm-band { position: relative; }
/* Elementor zet 20px onder elk blok dat niet het laatste is. In de band staan er drie (de
   banner, de houder voor de kaart en de verborgen kop), dus werd de band 40px hoger dan de foto
   en keek je in die strook tegen de vervaagde achtergrond aan. (Gemeten 19-10-2026: band 653,
   foto 613.) Het zat in de ruimte tussen de blokken (row-gap van de container), niet in de
   marges. */
.csm-band { gap: 0; }
/* 🔴 De kaart over de banner hangt aan #hero-card en staat op position:absolute. Elementor geeft
   elk blok position:relative, dus rekende de kaart vanaf het lege blokje eronder in plaats van
   vanaf de band: hij viel er onderuit. (Gemeten 19-10-2026: offsetParent was het html-blok,
   0 px hoog, op 713 px.) Met static rekent hij weer vanaf .csm-band. */
.csm-band .elementor-widget-html { position: static; }
.csm-band .elementor-widget:not(:last-child) { margin-block-end: 0; }
.csm-band .csm-binnen { position: relative; max-width: 1400px; margin: 0 auto; }
.csm-band .csm-binnen img { display: block; width: 100%; height: auto; }
.csm-band #hero-card { position: absolute; top: 50%; right: 3.5%; transform: translateY(-50%);
  width: 26%; min-width: 170px; max-width: 290px; z-index: 2; }
.csm-band #hero-card .card-img-top { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #ece9e2; }
.csm-band #hero-card .card { transform: rotate(-3deg);
  box-shadow: 14px 22px 34px rgba(0,0,0,.62), 0 2px 6px rgba(0,0,0,.4) !important;
  transition: transform .35s cubic-bezier(.22,.9,.3,1.1), box-shadow .35s ease;
  animation: hero-kaart-neer 1s cubic-bezier(.22,.9,.3,1.15) both; }
.csm-band #hero-card .card:hover { transform: rotate(0deg) translateY(-6px) scale(1.03);
  box-shadow: 10px 26px 40px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.4) !important; }
/* De band is zo hoog als de foto breed is: 700/1600 van het venster. De kaart is ongeveer 510 px
   hoog, dus onder ongeveer 1200 px past hij er niet meer naast en stak hij boven en onder de band
   uit. Vanaf daar zakt hij eronder. (Gemeten 19-10-2026 op 1680, 1280 en 900 px. Op de website
   staat die grens op 767 px; daar loopt het tussen 768 en 1200 dus net zo scheef.) */
@media (max-width: 1199px) {
  .csm-band #hero-card { position: static; transform: none; width: 100%; max-width: 320px; margin: 1.1rem auto 0; }
  .csm-band { padding-bottom: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { .csm-band #hero-card .card { animation: none; transition: none; } }