/* jimreeves.eu — blokken op de startpagina: gezochte cd's, Disc-Covery en de promo voor de collectie */
.home-band { border-top: 1px solid #e9e6df; }
.home-wanted { background: #fff8f3; }
.home-cijfers { background: #f7f9fc; }
.cij-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.cij-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .1rem;
  padding: 1.1rem .8rem; background: #fff; border: 1px solid #e3e6ec; border-radius: 10px;
  text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s, border-color .15s; }
.cij-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); border-color: #ff5500;
  text-decoration: none; color: inherit; }
.cij-naam { font-weight: 700; color: #2a2a2a; margin-bottom: .35rem; }
.cij-groot { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: #ff5500; font-variant-numeric: tabular-nums; }
.cij-klein { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #8a8a8a; }
.cij-rest { font-size: .85rem; color: #6c757d; margin-top: .4rem; }
@media (max-width: 767px) { .cij-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .cij-grid { grid-template-columns: 1fr; } }
.home-disc { background: #f5f7fb; }
.band-title { font-size: 1.35rem; text-align: center; margin: 0 0 .3rem; }
.band-flag { display: inline-block; background: #ff5500; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .2rem .6rem; border-radius: 4px; vertical-align: .18em; margin-right: .5rem; }
.band-flag.dc { background: #2a6cc4; }
.band-sub { text-align: center; color: #6c757d; margin: 0 0 1.25rem; }
.band-sub a { color: #ff5500; font-weight: 600; }
.band-more { text-align: center; margin: 1.1rem 0 0; }

/* gezochte cd's */
.hw-grid, .hd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; max-width: 1000px; margin: 0 auto; }
.hw-card { position: relative; display: block; background: #fff; border: 1px solid #e3e0d8; border-radius: 10px; overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease; }
.hw-card:hover, .hd-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0,0,0,.2); }
.hw-card img, .hd-card img { display: block; width: 100%; height: auto; }
.hw-title { display: block; padding: .55rem .7rem .8rem; font-size: .85rem; font-weight: 600; line-height: 1.3; }
/* het schuine lint in de hoek */
.hw-ribbon { position: absolute; top: 14px; left: -34px; z-index: 2; width: 130px; transform: rotate(-45deg);
  background: #d33; color: #fff; text-align: center; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .22rem 0; box-shadow: 0 2px 6px rgba(0,0,0,.35); }

/* Disc-Covery */
.hd-card { position: relative; display: block; border: 1px solid #dfe3ea; border-radius: 10px; overflow: hidden; background: #fff;
  transition: transform .25s ease, box-shadow .25s ease; }
.hd-date { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.6); color: #fff; font-size: .78rem;
  font-weight: 600; text-align: center; padding: .3rem 0; }

/* promo voor de collectie */
.home-promo { background: #1c1c1c; color: #fff; }
.promo-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center; max-width: 1100px; margin: 0 auto; }
.promo-count { color: #ff5500; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: .9rem; margin: 0 0 .2rem; }
.promo-count strong { font-size: 1.6rem; margin-right: .3rem; }
.promo-text h2 { color: #fff; margin: 0 0 .6rem; }
.promo-text p { color: #ccc; }
.promo-buttons { margin: 1.2rem 0 0; }
.promo-buttons .btn i { margin-right: .5rem; }
.promo-art { display: flex; align-items: center; justify-content: center; }
.promo-art img { width: 32%; max-width: 180px; height: auto; align-self: center; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,.6); border: 2px solid #2a2a2a; }
.promo-art img:nth-child(1) { transform: rotate(-8deg); margin-right: -16px; z-index: 1; }
.promo-art img:nth-child(2) { transform: translateY(-12px); z-index: 3; }
.promo-art img:nth-child(3) { transform: rotate(8deg); margin-left: -16px; z-index: 2; }

@media (max-width: 991px) {
  .hw-grid, .hd-grid { grid-template-columns: repeat(2, 1fr); max-width: 560px; }
  .promo-inner { grid-template-columns: 1fr; text-align: center; }
  .promo-art { order: -1; margin-bottom: 1rem; }
}
@media (max-width: 420px) {
  .band-title { font-size: 1.15rem; }
  .hw-grid, .hd-grid { gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .hw-card, .hd-card { transition: none; } .hw-card:hover, .hd-card:hover { transform: none; } }

/* Tijdelijk balkje in de kop voor de 500ste uitzending (zie js/countdown.js).
   Overal !important, want de opmaak van het thema (d-inline-block, w-100) wint anders. */
#hero-500[hidden], #hero-live[hidden], #hero-label[hidden] { display: none !important; }
.hero-500 { background: linear-gradient(180deg, #f3d488, #d9a531); color: #4a3308;
            font-weight: 700; font-size: 1.5rem; letter-spacing: .04em; border-radius: 4px;
            white-space: nowrap; box-shadow: 0 3px 12px rgba(0,0,0,.45); }
/* de klok meteen onder het gouden balkje; de oude plek onderaan blijft leeg */
.hero-klok-boven { margin: .6rem 0 0; font-size: 1.05rem; color: #fff;
                   text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.hero-klok-boven[hidden] { display: none !important; }
.hero-countdown.hero-klok-weg { display: none !important; }
/* de tekst staat op een foto: een schaduw houdt hem leesbaar */
.hero-schaduw { text-shadow: 0 2px 10px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.6); }
#hero-live { width: auto !important; background: #fff; color: #c0392b; border: 0; font-weight: 600; }
#hero-live:hover { background: #f4f2ec; color: #a5281c; }
#hero-live.aan { background: #c0392b; color: #fff; }
/* op een telefoon staat alles gecentreerd; dan oogt de kop rustiger */
@media (max-width: 767px) {
  .hero-500 { font-size: 1.15rem; white-space: normal; }
  #hero-500, #hero-label, .hero-klok-boven, .display-3.hero-schaduw, #hero-when { text-align: center; }
  #hero-500, #hero-label { display: block !important; }
  .hero-klok-boven { text-align: center; }
}
@media (max-width: 575px) {
  .hero-500 { font-size: 1rem; }
  #hero-live { width: 100% !important; }
}