/* Het nieuwsblok, in dezelfde opmaak als op extraelvisradio.nl. De regels stonden daar als
   <style> in extra-elvis.html en elvis-nieuws.html; hier staan ze in een bestand, onder
   .jr-nieuwsband, zodat ze niets van het thema of Elementor raken. */

.jr-nieuwsband { background: #141414; border-bottom: 1px solid rgba(232, 182, 76, .18); padding: 1.8rem 1rem 2rem; }
.jr-nieuwsband .jr-binnen { max-width: 1100px; margin: 0 auto; }

.jr-nieuwskop { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin: 0 0 1rem; }
.jr-nieuwskop h2 { margin: 0; font-size: 1.25rem; letter-spacing: .06em; text-transform: uppercase; color: #f0c469; }
.jr-nieuwskop p { margin: 0; color: #9b9b9b; font-size: .92rem; }
.jr-nieuwskop a, .jr-nieuwsmeer a { color: #e8b64c; text-decoration: none; }
.jr-nieuwskop a:hover, .jr-nieuwsmeer a:hover { color: #fff; text-decoration: underline; }

/* Eén kolom, met het kiekje ernaast. (Rolf 27-9-2026: "Misschien 1 kolom in plaats van 2?")
   Zo leest het als een nieuwslijst en niet als een tegelwand. */
.jr-nieuwslijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: 1fr; }
.jr-nieuwslijst li { border: 1px solid rgba(255, 255, 255, .09); border-radius: 8px; background: #191919; }
.jr-nieuwslijst a { display: flex; gap: .9rem; align-items: flex-start; padding: .7rem .9rem; color: #e4ded7; text-decoration: none; }
.jr-nieuwslijst a:hover { background: #211f1d; color: #fff; }
.jr-nieuwsbeeld { flex: 0 0 auto; width: 90px; height: 90px; border-radius: 6px; object-fit: cover; background: #241f1b; }
.jr-nieuwstekstblok { flex: 1 1 auto; min-width: 0; }
.jr-nieuwslijst .wanneer { display: block; color: #8d8d8d; font-size: .8rem; margin-bottom: .15rem; }
.jr-nieuwslijst .jr-nieuwstitel { display: block; font-weight: 600; line-height: 1.35; }
.jr-nieuwslijst .jr-nieuwstekst { display: block; margin-top: .35rem; color: #a9a29a; font-size: .88rem; line-height: 1.5; }
.jr-nieuwslijst .verder { color: #e8b64c; white-space: nowrap; }
.jr-nieuwslijst a:hover .verder { text-decoration: underline; }

/* Een eigen stuk van de makers: zelfde rij, maar met de naam van de schrijver in plaats van
   "read on at …". Zo zie je in één lijst waar iets vandaan komt. */
.jr-nieuwslijst .jr-van { color: #e8b64c; }

.jr-nieuwsmeer { margin: 1rem 0 0; text-align: right; font-size: .9rem; }

@media (max-width: 520px) { .jr-nieuwsbeeld { width: 66px; height: 66px; } }
@media (max-width: 620px) { .jr-nieuwsband { padding: 1.4rem 1rem 1.6rem; } .jr-nieuwsmeer { text-align: left; } }