/* De handvol Bootstrap-klassen die onze kaarten gebruiken, overgenomen uit theme-default.css van
   de website en hier binnen .jr-band gezet.
   Waarom niet gewoon heel Bootstrap laden: dat bestand is 288 kB en herschrijft body, koppen,
   knoppen en formulieren van de hele pagina. Daar zou het thema en Elementor van omvallen. Dit is
   alleen wat episodes.js in zijn kaarten zet, letterlijk dezelfde waarden. */

.jr-band .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.jr-band .row > [class*="col-"] { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }

.jr-band .col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) { .jr-band .col-sm-12 { flex: 0 0 100%; max-width: 100%; } }
@media (min-width: 768px) { .jr-band .col-md-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } }
@media (min-width: 992px) { .jr-band .col-lg-4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; } }
@media (min-width: 1200px) { .jr-band .col-xl-3 { flex: 0 0 25%; max-width: 25%; } }

.jr-band .d-flex { display: flex !important; }
.jr-band .flex-column { flex-direction: column !important; }
.jr-band .h-100 { height: 100% !important; }
.jr-band .w-100 { width: 100% !important; }
.jr-band .mt-auto { margin-top: auto !important; }
.jr-band .mb-0 { margin-bottom: 0 !important; }
.jr-band .mb-3 { margin-bottom: 1rem !important; }
.jr-band .text-center { text-align: center !important; }
.jr-band .text-white { color: #fff !important; }
.jr-band .text-muted { color: #6c757d !important; }
.jr-band .small { font-size: 80%; font-weight: 400; }

/* De kaart die over een showbanner ligt (#hero-card) staat buiten .jr-band, en viel daardoor
   zonder opmaak: geen witte achtergrond, geen kader. Op een donkere banner werd hij daarmee
   onleesbaar. Vandaar dat elke kaartregel hieronder ook voor #hero-card geldt.
   (Gemeten 19-10-2026 op /countrystarmeeting/: achtergrond rgba(0,0,0,0).) */
.jr-band .card, #hero-card .card { position: relative; display: flex; flex-direction: column; min-width: 0;
  word-wrap: break-word; background-color: #fff; background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, .125); border-radius: .125rem; }
.jr-band .card-header, #hero-card .card-header { padding: 0; margin-bottom: 0; color: inherit; background-color: transparent; border-bottom: 0; }
.jr-band .card-body, #hero-card .card-body { flex: 1 1 auto; padding: 1.25rem; }
.jr-band .card-img-top, #hero-card .card-img-top { width: 100%; }
.jr-band .card-title, #hero-card .card-title { margin-bottom: .75rem; }
.jr-band .box-shadow, #hero-card .box-shadow { box-shadow: 0 2px 7px -2px rgba(0, 0, 0, .3); }

/* het ronde oranje knopje rechtsonder op het hoesje */
.jr-band .btn-floating { position: absolute; right: 15px; bottom: -23px; width: 46px; height: 46px;
  display: block; text-align: center; border-radius: 50%; line-height: 46px; }

/* De kaarten komen uit een site met een lichte achtergrond. Binnen een donker blok zou de
   zwarte tekst wegvallen, dus daar draaien we alleen de teksten om. Zet .jr-licht op de band als
   de achtergrond licht is. */
.jr-band .card, #hero-card .card { color: #212529; }
.jr-band .card a, #hero-card .card a { color: inherit; }

/* ---- De letter van de website ------------------------------------------------------------
   Op jimreeves.eu staat alles in Poppins en is de titel op een kaart 18 px / 600 / regel 1,2.
   GeneratePress heeft daar geen regel voor; dan pakt de browser zijn eigen letter op 20 px met
   regelhoogte 30, en wordt een kaart 63 px hoger dan op de website. Gemeten 18-10-2026. */
.jr-band, .jr-hero { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.jr-band .card .card-body h5, #hero-card .card .card-body h5 { font-size: 1.125rem; font-weight: 600; line-height: 1.2;
  margin: 0 0 .5rem; color: #272727; }
.jr-band .card .card-body p, #hero-card .card .card-body p { margin-bottom: .5rem; }