/*
Theme Name: PopRockRadio
Theme URI: https://poprockradio.nl
Author: PopRockRadio
Author URI: https://poprockradio.nl
Description: Bold red & black editorial theme voor PopRockRadio.nl — pop & rock klassiekers radiostation. Inclusief live audio player, nieuwsgrid, programma en playlist.
Version: 1.58.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: poprockradio
Tags: radio, music, red, black, news, editorial
*/

/* =========================================================
   PopRockRadio Theme — Reset & Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #111;
  background: #fff;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 900; line-height: 1.1; }
:root {
  --red: #cc0000;
  --dark: #0e0e0e;
  --darker: #0a0a0a;
}
::selection { background: var(--red); color: #fff; }

/* =========================================================
   Layout helpers
   ========================================================= */
.prr-container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.prr-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
@media (min-width: 768px) { .prr-grid { gap: 24px; } }

/* =========================================================
   Top ticker bar
   ========================================================= */
.prr-ticker { background: var(--red); color: #fff; }
.prr-ticker__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; font-size: 14px; gap: 16px;
}
.prr-ticker__live { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
.prr-live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; letter-spacing: 0.1em;
}
.prr-live-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.75);
  animation: prr-ping 1.5s ease-out infinite;
}
@keyframes prr-ping {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.75); }
  80%, 100% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
}
.prr-ticker__now {
  font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto; min-width: 0;
}
.prr-ticker__now span { opacity: .85; font-weight: 600; }
/* Mobiel: laat "Nu speelt" netjes wrappen op meerdere regels zodat de
   nummertitel altijd volledig leesbaar is. */
@media (max-width: 720px) {
  .prr-ticker__inner { padding: 8px 0; font-size: 13px; flex-wrap: wrap; gap: 8px; }
  .prr-ticker__live { flex-wrap: wrap; gap: 8px; width: 100%; }
  .prr-ticker__now {
    white-space: normal; overflow: visible; text-overflow: clip;
    font-size: 13px; line-height: 1.35; width: 100%;
  }
  .prr-live-dot { font-size: 12px; }
}
.prr-ticker__links { display: none; gap: 16px; align-items: center; font-size: 12px; opacity: .9; }
.prr-ticker__links a:hover { text-decoration: underline; }
.prr-ticker__social {
  display: flex; gap: 8px; padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,.3);
}
.prr-ticker__social svg { width: 14px; height: 14px; }
@media (min-width: 768px) { .prr-ticker__links { display: flex; } }

/* =========================================================
   Main header
   ========================================================= */
.prr-header {
  border-bottom: 1px solid #e5e5e5;
  position: sticky; top: 0; z-index: 40; background: #fff;
}
.prr-header__inner {
  display: flex; align-items: center;
  gap: 24px; height: 96px;
}
/* Nav rechts naast logo, actions tegen de rechterrand. Zonder
   space-between blijven afstanden natuurlijk en springt de
   "NU LUISTEREN"-knop niet helemaal naar uiterst rechts. */
.prr-header__inner .prr-nav { margin-left: 24px; }
.prr-header__inner .prr-actions { margin-left: auto; }
.prr-logo {
  display: inline-flex; align-items: center; flex-shrink: 0;
  line-height: 0;
}
.prr-logo img {
  height: 68px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  display: block;
  object-fit: contain;
}
@media (max-width: 1023px) {
  .prr-header__inner { height: 84px; }
  .prr-logo img { height: 60px !important; }
}
@media (max-width: 720px) {
  .prr-header__inner { height: 72px; gap: 12px; }
  .prr-logo img { height: 48px !important; }
}
.prr-nav { display: none; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; color: #222; }
.prr-nav a { display: inline-flex; align-items: center; gap: 4px; padding: 26px 0; }
.prr-nav a:hover { color: var(--red); }
.prr-nav .current-menu-item > a,
.prr-nav a.is-current {
  color: var(--red); border-bottom: 3px solid var(--red);
}
.prr-nav svg { width: 14px; height: 14px; opacity: .6; }
@media (min-width: 1024px) { .prr-nav { display: flex; } }

.prr-actions { display: flex; align-items: center; gap: 8px; }
.prr-iconbtn {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid #d4d4d4; color: #222;
}
.prr-iconbtn:hover { border-color: var(--red); color: var(--red); }
.prr-iconbtn svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .prr-iconbtn { display: inline-flex; } }

.prr-listenbtn {
  display: inline-flex !important; align-items: center; gap: 8px;
  background: var(--red); color: #fff; padding: 0 20px; height: 40px;
  font-weight: 700; letter-spacing: .1em; font-size: 13px;
  flex-shrink: 0; white-space: nowrap; border: 0; cursor: pointer;
}
.prr-listenbtn:hover { filter: brightness(1.1); }
.prr-listenbtn svg { width: 14px; height: 14px; fill: #fff; }
/* Tablet: knop iets compacter maar volledig zichtbaar */
@media (max-width: 1023px) {
  .prr-listenbtn { padding: 0 16px; height: 40px; font-size: 12px; letter-spacing: .08em; }
}
/* Mobiel: pil-knop met DUIDELIJK play-icoon in witte cirkel */
@media (max-width: 720px) {
  .prr-listenbtn {
    padding: 0 16px 0 6px; height: 42px; font-size: 12px; gap: 10px;
    letter-spacing: .08em; border-radius: 999px;
  }
  .prr-listenbtn svg {
    width: 30px !important; height: 30px !important;
    background: #fff; color: var(--red); fill: var(--red);
    border-radius: 999px; padding: 7px; box-sizing: border-box;
  }
  .prr-listenbtn #prr-listen-label { font-size: 12px; font-weight: 800; }
}
/* PLAY-label tonen op mobiel, NU LUISTEREN op desktop */
.prr-listen-label--mobile { display: none; }
@media (max-width: 720px) {
  .prr-listen-label--desktop { display: none; }
  .prr-listen-label--mobile  { display: inline; font-weight: 800; font-size: 13px; letter-spacing: .08em; }
}
@media (max-width: 380px) {
  .prr-listen-label--mobile { display: none; }
}
/* Heel klein scherm: ronde knop, alleen het duidelijke play-icoon */
@media (max-width: 380px) {
  .prr-listenbtn { padding: 0; width: 44px; height: 44px; justify-content: center; border-radius: 999px; gap: 0; }
  .prr-listenbtn #prr-listen-label { display: none; }
  .prr-listenbtn svg {
    width: 22px !important; height: 22px !important;
    background: transparent; color: #fff; fill: #fff;
    padding: 0; border-radius: 0;
  }
}

.prr-menubtn {
  display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid #d4d4d4; color: #222;
}
.prr-menubtn svg { width: 16px; height: 16px; }
@media (min-width: 1024px) { .prr-menubtn { display: none; } }

/* ============================================================
   MOBIEL/TABLET DROPDOWN-MENU
   ============================================================
   Verschijnt als nette overlay-paneel onder de header zodra er
   op het hamburger-icoon wordt geklikt. Donker thema, grote
   tikvlakken, geen overlap met overige header-elementen. */
.prr-mobile-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: #0e0e0e; color: #fff;
  border-top: 3px solid #cc0000;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  z-index: 90;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.prr-mobile-nav.is-open { display: block; animation: prr-mnav-in .18s ease-out; }
@keyframes prr-mnav-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Reset de desktop-stijlen van .prr-nav-list binnen het mobiele paneel */
.prr-mobile-nav .prr-nav-list {
  display: flex !important; flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important; height: auto !important;
  padding: 0; margin: 0; list-style: none; width: 100%;
}
.prr-mobile-nav .prr-nav-list > li {
  display: block !important;       /* override desktop flex-row */
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: static;
  align-items: initial;
}
.prr-mobile-nav .prr-nav-list > li:last-child { border-bottom: 0; }
.prr-mobile-nav .prr-nav-list > li > a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; color: #fff; font-size: 15px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; gap: 12px;
}
.prr-mobile-nav .prr-nav-list > li > a::after { display: none; } /* geen onderstreping-animatie */
.prr-mobile-nav .prr-nav-list > li::after     { display: none; } /* geen hover-brug */
.prr-mobile-nav .prr-nav-list > li > a:hover,
.prr-mobile-nav .prr-nav-list > li.is-current > a {
  color: #fff; background: #cc0000;
}
.prr-mobile-nav .prr-nav-list > li.has-mega > a .prr-mega-caret {
  font-size: 12px; opacity: .8; margin-left: auto;
  transition: transform .2s ease;
}
.prr-mobile-nav .prr-nav-list > li.has-mega.is-open > a .prr-mega-caret { transform: rotate(180deg); }
/* Mega-dropdown binnen mobiel paneel: subitems uitklapbaar, dichter op het hoofditem */
.prr-mobile-nav .prr-mega {
  position: static; transform: none; width: auto;
  opacity: 1; visibility: visible; pointer-events: auto;
  box-shadow: none; border-top: 1px solid rgba(255,255,255,.08);
  background: #161616; color: #fff;
  display: none;
}
.prr-mobile-nav .prr-nav-list > li.has-mega.is-open > .prr-mega { display: block; }
.prr-mobile-nav .prr-mega__inner { grid-template-columns: 1fr; gap: 12px; padding: 12px 20px 16px; }
.prr-mobile-nav .prr-mega__cols  { grid-template-columns: 1fr; gap: 8px; }
.prr-mobile-nav .prr-mega__title { color: #cc0000; font-size: 10px; margin-bottom: 6px; }
.prr-mobile-nav .prr-mega__links a { color: #fff; font-size: 14px; padding: 6px 0; }
.prr-mobile-nav .prr-mega__feature { display: none; } /* feature-tile verbergen in mobiele dropdown */

/* =========================================================
   Hero grid
   ========================================================= */
.prr-hero { background: var(--dark); padding: 24px 0; }
.prr-feature {
  position: relative; display: block; overflow: hidden;
  height: 460px; color: #fff;
}
.prr-feature img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s;
}
.prr-feature:hover img { transform: scale(1.05); }
.prr-feature__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #000 0%, rgba(0,0,0,.4) 50%, transparent 100%);
}
.prr-feature__cat {
  position: absolute; top: 16px; left: 16px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 900; letter-spacing: .15em;
  padding: 4px 10px;
}
.prr-feature__cat--np {
  font-size: 17px;
  padding: 6px 14px;
  letter-spacing: .1em;
}
@media (min-width: 768px) {
  .prr-feature__cat--np { font-size: 20px; padding: 7px 16px; }
}
.prr-feature__body {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 24px;
}
.prr-feature__body h2 { font-size: 28px; line-height: 1.1; margin-bottom: 8px; }
@media (min-width: 768px) { .prr-feature__body h2 { font-size: 32px; } }
.prr-feature__meta {
  display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .8;
}
.prr-feature__meta svg { width: 12px; height: 12px; }

.prr-hero__big { grid-column: span 12; }
.prr-hero__side { grid-column: span 12; display: flex; flex-direction: column; gap: 16px; }
.prr-hero__side .prr-feature { height: 222px; }
.prr-hero__side .prr-feature__cat { top: 12px; left: 12px; padding: 3px 10px; font-size: 13px; }
.prr-hero__side .prr-feature__body { padding: 18px; }
.prr-hero__side .prr-feature__body h2 { font-size: 19px; font-weight: 700; line-height: 1.15; }
.prr-hero__side .prr-feature__meta { font-size: 14px; }
.prr-hero__side .prr-feature__meta svg { width: 14px; height: 14px; }
@media (min-width: 768px) {
  .prr-hero__big { grid-column: span 8; }
  .prr-hero__side { grid-column: span 4; }
}

/* =========================================================
   Section titles
   ========================================================= */
.prr-section { padding: 56px 0; }
.prr-section--gray { background: #f4f4f4; }
.prr-section--dark { background: var(--dark); color: #fff; }
.prr-section--red { background: var(--red); color: #fff; }
.prr-stitle { display: flex; align-items: center; gap: 12px; }
.prr-stitle__bar { background: var(--red); width: 6px; height: 28px; display: inline-block; }
.prr-stitle h2 {
  font-size: 22px; letter-spacing: -.01em; text-transform: uppercase;
}
.prr-section--dark .prr-stitle h2 { color: #fff; }

/* =========================================================
   Categories
   ========================================================= */
.prr-cats { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
@media (min-width: 768px) { .prr-cats { grid-template-columns: repeat(4, 1fr); } }
.prr-cat {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3;
}
.prr-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.prr-cat:hover img { transform: scale(1.05); }
.prr-cat__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
}
.prr-cat__body {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 12px; color: #fff;
  font-size: 15px; font-weight: 900; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: space-between;
}
.prr-cat__body svg { width: 16px; height: 16px; opacity: .7; transition: transform .2s; }
.prr-cat:hover .prr-cat__body svg { transform: translateX(4px); }
.prr-cat__accent { position: absolute; top: 0; left: 0; height: 4px; width: 0; background: var(--red); transition: width .5s; }
.prr-cat:hover .prr-cat__accent { width: 100%; }

/* =========================================================
   Two-column main + aside
   ========================================================= */
.prr-main { grid-column: span 12; }
.prr-aside { grid-column: span 12; }
@media (min-width: 1024px) {
  .prr-main  { grid-column: span 8; }
  .prr-aside { grid-column: span 4; }
}

/* Latest articles */
.prr-latest { margin-top: 48px; }
.prr-latest__list {
  margin-top: 20px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.prr-latest__item {
  display: flex; gap: 20px; padding: 20px 0;
  border-bottom: 1px solid #e5e5e5;
}
.prr-latest__item:last-child { border-bottom: 0; }
.prr-latest__thumb {
  width: 160px; height: 100px; flex-shrink: 0; overflow: hidden;
}
.prr-latest__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.prr-latest__item:hover .prr-latest__thumb img { transform: scale(1.05); }
.prr-latest__cat { font-size: 11px; font-weight: 900; letter-spacing: .15em; color: var(--red); }
.prr-latest__title { font-size: 17px; font-weight: 700; line-height: 1.35; margin-top: 4px; }
.prr-latest__item:hover .prr-latest__title { color: var(--red); }
.prr-latest__time { font-size: 12px; color: #777; margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.prr-latest__time svg { width: 12px; height: 12px; }

/* Aside list */
.prr-aside__list {
  margin-top: 20px;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.prr-aside__item {
  display: flex; gap: 12px; padding: 16px 0;
  border-bottom: 1px solid #e5e5e5;
}
.prr-aside__item:last-child { border-bottom: 0; }
.prr-aside__num {
  font-size: 26px; font-weight: 900; color: #e5e5e5;
  width: 28px; line-height: 1;
}
.prr-aside__item:hover .prr-aside__num { color: var(--red); }
.prr-aside__cat { font-size: 10px; font-weight: 900; letter-spacing: .15em; color: var(--red); margin-bottom: 4px; }
.prr-aside__title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.prr-aside__time { font-size: 11px; color: #777; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.prr-aside__time svg { width: 12px; height: 12px; }
.prr-aside__more {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--dark); color: #fff;
  padding: 12px 16px; margin-top: 20px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em;
}
.prr-aside__more:hover { opacity: .9; }
.prr-aside__more svg { width: 16px; height: 16px; }

/* =========================================================
   Deze week
   ========================================================= */
.prr-week__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px;
}
.prr-week__sub { font-size: 14px; font-weight: 900; letter-spacing: .25em; color: var(--red); }
.prr-week__head h2 { font-size: 50px; margin-top: 6px; letter-spacing: -.02em; }
.prr-week__link { display: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; opacity: .8; }
.prr-week__link:hover { opacity: 1; }
.prr-week__link svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .prr-week__link { display: inline-flex; } }

.prr-week__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .prr-week__grid { grid-template-columns: 1fr 1fr; } }

.prr-track { background: #1a1a1a; display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 768px) { .prr-track { flex-direction: row; } }
.prr-track__image { position: relative; aspect-ratio: 1 / 1; }
.prr-track__image img { width: 100%; height: 100%; object-fit: cover; }
.prr-track__badge {
  position: absolute; top: 0; left: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  padding: 10px 20px; font-size: 14px; font-weight: 900; letter-spacing: .15em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
@media (min-width: 768px) { .prr-track__image, .prr-track__body { flex: 1; } }
.prr-track__body { padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.prr-track__label { font-size: 14px; letter-spacing: .2em; opacity: .6; font-weight: 700; }
.prr-track__artist { font-size: 36px; font-weight: 900; margin-top: 10px; line-height: 1.1; }
.prr-track__title { font-size: 20px; opacity: .85; font-style: italic; margin-top: 6px; }
.prr-track__times-label { font-size: 13px; letter-spacing: .2em; opacity: .6; font-weight: 700; margin-bottom: 10px; }
.prr-track__times { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.prr-track__time {
  padding: 6px 12px; font-size: 14px; font-weight: 700;
  border: 1px solid rgba(255,255,255,.2);
}

/* =========================================================
   Playlist + Programma
   ========================================================= */
.prr-twocol { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .prr-twocol { grid-template-columns: 1fr 1fr; } }

.prr-list { background: #fff; border: 1px solid #e5e5e5; margin-top: 20px; }
.prr-list__row {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 16px; border-bottom: 1px solid #f0f0f0;
}
.prr-list__row:last-child { border-bottom: 0; }
.prr-list__row:nth-child(even) { background: #fafafa; }
.prr-list__time {
  font-size: 12px; font-family: 'Courier New', monospace; font-weight: 700;
  color: #999; width: 50px; font-variant-numeric: tabular-nums;
}
.prr-list__pos {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: #eee; font-size: 10px; font-weight: 700; color: #777;
}
.prr-list__pos--live { background: var(--red); color: #fff; }
.prr-list__pos--live svg { width: 14px; height: 14px; }
.prr-list__info { flex: 1; min-width: 0; }
.prr-list__name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prr-list__sub { font-size: 12px; color: #777; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prr-list__nu { color: var(--red); font-size: 10px; font-weight: 900; letter-spacing: .1em; }

.prr-prog__row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
.prr-prog__row:last-child { border-bottom: 0; }
.prr-prog__row--live { background: #fff5f5; }
.prr-prog__time {
  font-size: 12px; font-family: 'Courier New', monospace; font-weight: 700;
  color: #888; width: 100px; font-variant-numeric: tabular-nums;
}
.prr-prog__row--live .prr-prog__time { color: var(--red); }
.prr-prog__name { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.prr-prog__sub { font-size: 12px; color: #777; }
.prr-prog__live {
  background: var(--red); color: #fff;
  font-size: 9px; font-weight: 900; padding: 2px 6px; letter-spacing: .1em;
}

/* =========================================================
   App CTA
   ========================================================= */
.prr-cta {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 20px; padding: 40px 0;
}
@media (min-width: 768px) { .prr-cta { flex-direction: row; } }
.prr-cta__left { display: flex; align-items: center; gap: 20px; }
.prr-cta__left svg { width: 40px; height: 40px; flex-shrink: 0; }
.prr-cta__kicker { font-size: 11px; font-weight: 900; letter-spacing: .25em; opacity: .85; }
.prr-cta h3 { font-size: 22px; line-height: 1.2; margin-top: 4px; }
@media (min-width: 768px) { .prr-cta h3 { font-size: 24px; } }
.prr-cta__btns { display: flex; gap: 12px; }
.prr-cta__btns a {
  padding: 0 20px; height: 44px; display: inline-flex; align-items: center;
  font-weight: 700; font-size: 14px;
}
.prr-cta__btns a:first-child { background: #000; color: #fff; }
.prr-cta__btns a:first-child:hover { background: #111; }
.prr-cta__btns a:last-child { background: #fff; color: var(--red); font-weight: 900; }
.prr-cta__btns a:last-child:hover { background: #f5f5f5; }

/* =========================================================
   Footer
   ========================================================= */
.prr-footer { background: var(--darker); color: #ccc; padding: 56px 0 24px; }
.prr-footer__grid { display: grid; gap: 32px; grid-template-columns: repeat(12, 1fr); }
.prr-footer__brand { grid-column: span 12; }
.prr-footer__col { grid-column: span 6; }
.prr-footer__contact { grid-column: span 12; }
@media (min-width: 768px) {
  .prr-footer__brand   { grid-column: span 7; }
  .prr-footer__col     { grid-column: span 2; }
  .prr-footer__contact { grid-column: span 5; }
}
.prr-footer__brand img { height: 64px; margin-bottom: 16px; width: auto; }
.prr-footer__brand p { font-size: 13px; line-height: 1.6; color: #999; }
.prr-footer__social { display: flex; gap: 8px; margin-top: 20px; }
.prr-footer__social a {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
}
.prr-footer__social a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.prr-footer__social svg { width: 16px; height: 16px; }
.prr-footer h5 { color: #fff; font-size: 12px; letter-spacing: .1em; margin-bottom: 16px; }
.prr-footer__col li { margin-bottom: 8px; font-size: 13px; }
.prr-footer__col a:hover { color: #fff; }
.prr-footer__contact li {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; font-size: 13px;
}
.prr-footer__contact svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; margin-top: 2px; }
.prr-footer__bottom {
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; gap: 12px;
  justify-content: space-between; font-size: 12px; color: #777;
}
@media (min-width: 768px) { .prr-footer__bottom { flex-direction: row; } }
.prr-footer__bottom .links { display: flex; gap: 20px; }
.prr-footer__bottom a:hover { color: #fff; }

/* =========================================================
   Utilities
   ========================================================= */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); border: 0;
}

/* =========================================================
   Uitgelicht — Programma van de dag
   ========================================================= */
.prr-uit { background: #fff; }
.prr-uit__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
@media (min-width: 768px) { .prr-uit__head { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.prr-uit__kicker { font-size: 11px; font-weight: 900; letter-spacing: .25em; color: var(--red); }
.prr-uit__head h2 { font-size: 34px; margin: 4px 0 0; letter-spacing: -.02em; line-height: 1.1; font-weight: 900; }
.prr-uit__lead { font-size: 14px; color: #666; margin-top: 4px; }
.prr-uit__link { display: none; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .1em; opacity: .8; color: #111; }
.prr-uit__link:hover { opacity: 1; }
.prr-uit__link svg { width: 16px; height: 16px; }
@media (min-width: 768px) { .prr-uit__link { display: inline-flex; } }

.prr-uit__tabs {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb;
}
@media (min-width: 768px) { .prr-uit__tabs { gap: 8px; } }
.prr-uit__tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  padding: 16px 4px; text-align: center; color: #111; transition: background-color .15s, color .15s;
  font-family: inherit;
}
.prr-uit__tab:hover { background: #f5f5f5; }
.prr-uit__tab.is-active { background: var(--dark); color: #fff; }
.prr-uit__tab-short { display: block; font-size: 11px; font-weight: 900; letter-spacing: .2em; opacity: .7; }
.prr-uit__tab-date { display: block; font-size: 15px; font-weight: 900; margin-top: 2px; }

.prr-uit__panel { display: none; gap: 32px; margin-top: 32px; grid-template-columns: 1fr; }
.prr-uit__panel.is-active { display: grid; }
@media (min-width: 768px) { .prr-uit__panel { grid-template-columns: 7fr 5fr; } }
.prr-uit__media { background: var(--dark); overflow: hidden; }
.prr-uit__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.prr-uit__media:hover img { transform: scale(1.02); }
.prr-uit__body { display: flex; flex-direction: column; }
.prr-uit__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prr-uit__badge { background: var(--red); color: #fff; padding: 6px 12px; font-size: 11px; font-weight: 900; letter-spacing: .15em; }
.prr-uit__day { font-size: 12px; text-transform: uppercase; letter-spacing: .2em; color: #666; font-weight: 700; }
.prr-uit__title { font-size: 32px; font-weight: 900; margin: 12px 0 4px; letter-spacing: -.01em; line-height: 1.05; }
@media (min-width: 768px) { .prr-uit__title { font-size: 36px; } }
.prr-uit__sub { font-size: 15px; color: #444; font-style: italic; }
.prr-uit__info { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 13px; font-weight: 700; color: #111; }
.prr-uit__info span { display: inline-flex; align-items: center; gap: 6px; }
.prr-uit__info svg { width: 16px; height: 16px; color: var(--red); }
.prr-uit__desc { margin-top: 20px; font-size: 15px; line-height: 1.7; color: #333; }
.prr-uit__btns { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.prr-uit__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; height: 44px;
  border: 1px solid #d4d4d8; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: #111; text-decoration: none; transition: border-color .15s, color .15s, filter .15s;
}
.prr-uit__btn:hover { border-color: var(--red); color: var(--red); }
.prr-uit__btn svg { width: 14px; height: 14px; }
.prr-uit__btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.prr-uit__btn--primary:hover { filter: brightness(1.1); color: #fff; }
.prr-uit__btn--primary svg { fill: #fff; }

/* =========================================================
   Cookies pagina
   ========================================================= */
.prr-cookies__hero { background: var(--dark); color: #fff; padding: 56px 0; }
.prr-cookies__hero-inner { max-width: 920px; margin: 0 auto; padding: 0 20px; }
.prr-cookies__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; letter-spacing: .2em; color: var(--red); }
.prr-cookies__hero h1 { font-size: 40px; font-weight: 900; margin: 12px 0 0; line-height: 1.1; }
@media (min-width: 768px) { .prr-cookies__hero h1 { font-size: 48px; } }
.prr-cookies__hero p { margin: 16px 0 0; color: #d4d4d8; font-size: 15px; max-width: 680px; }
.prr-cookies__updated { margin-top: 20px; font-size: 12px; color: #71717a; }

.prr-cookies__content { max-width: 920px; margin: 0 auto; padding: 0 20px; }
.prr-cookies__content h2 { font-size: 22px; font-weight: 900; margin: 32px 0 12px; letter-spacing: -.01em; }
.prr-cookies__content p, .prr-cookies__content li { font-size: 15px; line-height: 1.7; color: #2a2a2a; }
.prr-cookies__content ul { list-style: disc; padding-left: 22px; margin: 8px 0 16px; }
.prr-cookies__content a { color: var(--red); text-decoration: underline; }
.prr-cookies__content strong { color: #111; }

.prr-cookies__tablewrap { overflow-x: auto; border: 1px solid #e5e7eb; margin-top: 12px; }
.prr-cookies__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.prr-cookies__table thead { background: var(--dark); color: #fff; }
.prr-cookies__table th { text-align: left; padding: 12px 16px; font-weight: 700; letter-spacing: .08em; }
.prr-cookies__table td { padding: 12px 16px; border-top: 1px solid #f0f0f0; vertical-align: top; }
.prr-cookies__table tr.is-alt td { background: #fafafa; }
.prr-cookies__name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.prr-cookies__nowrap { white-space: nowrap; }
.prr-cookies__tag { display: inline-block; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.prr-cookies__tag.is-functioneel { background: #e6f4ea; color: #1e7a3b; }
.prr-cookies__tag.is-analytisch  { background: #fff4e0; color: #8a5a00; }
.prr-cookies__tag.is-marketing   { background: #fde8e8; color: #a01919; }

.prr-cookies__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.prr-cookies__btn {
  display: inline-flex; align-items: center; padding: 0 20px; height: 44px;
  border: 1px solid #d4d4d8; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: #111; text-decoration: none; transition: border-color .15s, color .15s, filter .15s;
}
.prr-cookies__btn:hover { border-color: var(--red); color: var(--red); }
.prr-cookies__btn--primary { background: var(--red); color: #fff; border-color: var(--red); }
.prr-cookies__btn--primary:hover { filter: brightness(1.1); color: #fff; }
.prr-prog__note { font-size: 12px; color: #555; margin-top: 4px; line-height: 1.4; }

/* UITGELICHT PAGE */
.prr-uit-page__hero { background: var(--dark); color: #fff; padding: 56px 0; }
.prr-uit-page__hero-inner { max-width: 920px; margin: 0 auto; padding: 0 20px; }
.prr-uit-page__kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.25em; color: var(--red); }
.prr-uit-page__hero h1 { font-size: 40px; font-weight: 900; margin: 12px 0 0; line-height: 1.1; }
@media (min-width: 768px) { .prr-uit-page__hero h1 { font-size: 48px; } }
.prr-uit-page__hero p { margin: 16px 0 0; color: #d4d4d8; font-size: 15px; max-width: 680px; }
.prr-uit-page__intro { max-width: 920px; margin: 0 auto 32px; font-size: 16px; line-height: 1.65; color: #333; }

/* ACTUEEL CAROUSEL */
.prr-carousel { position: relative; overflow: hidden; }
.prr-carousel__item { transition: opacity 350ms ease, transform 350ms ease; }
.prr-carousel__item.is-leaving { opacity: 0; transform: translateY(-8px); }
.prr-carousel__item.is-entering { opacity: 0; transform: translateY(8px); }

/* ============================================================
   MEGA NAV (header)
   ============================================================ */
.prr-nav-list { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; align-items: center; }
.prr-nav-list > li { position: relative; }
.prr-nav { align-self: stretch; }
.prr-nav-list { height: 100%; align-items: stretch; }
.prr-nav-list > li { display: flex; align-items: stretch; }
.prr-nav-list > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 4px; color: #222; text-decoration: none;
  font-weight: 700; font-size: 13px; letter-spacing: .04em;
  position: relative; transition: color .15s ease; height: 100%;
}
.prr-nav-list > li > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: #cc0000; transform: scaleX(0); transform-origin: center;
  transition: transform .18s ease;
}
.prr-nav-list > li:hover > a,
.prr-nav-list > li.has-mega:hover > a { color: #cc0000; }
.prr-nav-list > li:hover > a::after,
.prr-nav-list > li.has-mega.is-open > a::after,
.prr-nav-list > li.is-current > a::after { transform: scaleX(1); }
.prr-nav-list > li.is-current > a { color: #cc0000; }
/* Onzichtbare 'brug' tussen menu-item en mega-dropdown zodat de
   muis niet door een gat valt en het dropdown direct blijft open staan. */
.prr-nav-list > li.has-mega::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 14px; background: transparent;
}
.prr-nav-list > li.has-mega > a .prr-mega-caret { font-size: 10px; opacity: .7; transition: transform .2s ease; }
.prr-nav-list > li.has-mega:hover > a .prr-mega-caret,
.prr-nav-list > li.has-mega.is-open > a .prr-mega-caret { transform: rotate(180deg); }

.prr-mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: min(960px, 92vw);
  background: #fff;
  color: #0e0e0e;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  border-top: 3px solid #cc0000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index: 80;
}
.prr-nav-list > li.has-mega:hover > .prr-mega,
.prr-nav-list > li.has-mega.is-open > .prr-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}
.prr-mega__inner { display: grid; grid-template-columns: 1fr 280px; gap: 36px; padding: 28px 32px; }
.prr-mega__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.prr-mega__title { margin: 0 0 12px; font-size: 11px; letter-spacing: .15em; color: #cc0000; font-weight: 800; text-transform: uppercase; }
.prr-mega__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prr-mega__links a { color: #0e0e0e; text-decoration: none; font-weight: 600; font-size: 14px; display: inline-block; padding: 4px 0; }
.prr-mega__links a:hover { color: #cc0000; }

.prr-mega__feature {
  display: block;
  background: #0e0e0e;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  min-height: 200px;
}
.prr-mega__feature img { width: 100%; height: 140px; object-fit: cover; display: block; opacity: .85; }
.prr-mega__feature-body { padding: 14px 16px 18px; }
.prr-mega__kicker { display: inline-block; font-size: 10px; letter-spacing: .15em; color: #cc0000; font-weight: 800; margin-bottom: 6px; }
.prr-mega__feature h3 { margin: 0 0 10px; font-size: 16px; line-height: 1.25; font-weight: 800; }
.prr-mega__cta { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #fff; opacity: .85; }
.prr-mega__feature:hover .prr-mega__cta { opacity: 1; color: #cc0000; }

@media (max-width: 1024px) {
  .prr-mega { position: static; transform: none; width: auto; opacity: 1; visibility: visible; pointer-events: auto;
              box-shadow: none; border-top: 1px solid #222; display: none; background: #111; color: #fff; }
  .prr-nav-list > li.has-mega.is-open > .prr-mega { display: block; transform: none; }
  .prr-mega__inner { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .prr-mega__cols { grid-template-columns: 1fr 1fr; }
  .prr-mega__links a { color: #fff; }
  .prr-mega__feature { background: #1a1a1a; }
}

/* ============================================================
   MEGA FOOTER
   ============================================================ */
.prr-footer__mega {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding: 56px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.prr-footer__block { color: #fff; }
.prr-footer__kicker { display: inline-block; font-size: 10px; letter-spacing: .18em; color: #cc0000; font-weight: 800; margin-bottom: 10px; }
.prr-footer__block h3 { margin: 0 0 12px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.prr-footer__block p { margin: 0 0 16px; color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.55; }

.prr-footer__form { display: flex; gap: 0; max-width: 380px; }
.prr-footer__form input { flex: 1; min-width: 0; padding: 12px 14px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.12); border-right: none; font: inherit; font-size: 14px; }
.prr-footer__form input::placeholder { color: rgba(255,255,255,.45); }
.prr-footer__form input:focus { outline: 2px solid #cc0000; outline-offset: -2px; }
.prr-footer__form button { background: #cc0000; color: #fff; border: none; padding: 12px 18px; font: inherit; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.prr-footer__form button:hover { background: #a30000; }

.prr-footer__podlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.prr-footer__podlist a { color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; }
.prr-footer__podlist a:hover { color: #cc0000; }
.prr-footer__poddot { width: 6px; height: 6px; border-radius: 50%; background: #cc0000; display: inline-block; flex: 0 0 6px; }

.prr-footer__badges { display: flex; gap: 12px; flex-wrap: wrap; }
.prr-footer__badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; border-radius: 4px; transition: background .15s ease; }
.prr-footer__badge:hover { background: rgba(204,0,0,.18); border-color: #cc0000; }
.prr-footer__badge span { display: flex; flex-direction: column; line-height: 1.1; }
.prr-footer__badge small { font-size: 9px; opacity: .65; letter-spacing: .08em; text-transform: uppercase; }
.prr-footer__badge strong { font-size: 14px; font-weight: 800; }

@media (max-width: 900px) {
  .prr-footer__mega { grid-template-columns: 1fr; gap: 32px; padding: 36px 0 28px; }
}

/* ============================================================
   COOKIE BANNER (verschijnt rechtsonder bij eerste bezoek)
   ============================================================ */
.prr-cookiebar {
  position: fixed; right: 20px; bottom: 20px; left: 20px;
  max-width: 520px; margin-left: auto; z-index: 9999;
  background: #0e0e0e; color: #fff;
  border: 1px solid rgba(255,255,255,.1); border-left: 4px solid #cc0000;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(20px);
  transition: opacity .3s ease, transform .3s ease;
}
.prr-cookiebar.is-visible { opacity: 1; transform: translateY(0); }
.prr-cookiebar__inner {
  display: grid; grid-template-columns: 40px 1fr; gap: 16px;
  padding: 20px 22px;
}
.prr-cookiebar__icon { color: #cc0000; padding-top: 2px; }
.prr-cookiebar__body strong {
  display: block; font-size: 15px; font-weight: 800; margin-bottom: 6px;
  letter-spacing: -.01em;
}
.prr-cookiebar__body p {
  margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.8);
}
.prr-cookiebar__body a {
  color: #fff; text-decoration: underline; font-weight: 700;
  text-underline-offset: 3px; white-space: nowrap;
}
.prr-cookiebar__body a:hover { color: #cc0000; }
.prr-cookiebar__actions {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 4px;
}
.prr-cookiebar__btn {
  background: #cc0000; color: #fff; border: none;
  padding: 11px 20px; font: inherit; font-weight: 800;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: background .15s ease;
}
.prr-cookiebar__btn:hover { background: #a30000; }

@media (max-width: 600px) {
  .prr-cookiebar { right: 12px; bottom: 12px; left: 12px; }
  .prr-cookiebar__inner { grid-template-columns: 1fr; padding: 18px; gap: 10px; }
  .prr-cookiebar__icon { display: none; }
  .prr-cookiebar__actions { justify-content: stretch; }
  .prr-cookiebar__btn { flex: 1; }
}

/* Mega footer met slechts één blok (podcasts) — gecentreerd */
.prr-footer__mega--single { grid-template-columns: minmax(0, 560px) !important; justify-content: center; }
.prr-footer__mega--single .prr-footer__podcasts { text-align: center; }
.prr-footer__mega--single .prr-footer__podlist { display: inline-block; text-align: left; }

/* ============================================================
   BUMA / Sena licentie-blok onderaan de footer
   ============================================================ */
.prr-footer__licentie {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 0; margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.prr-footer__licentie-badges { display: flex; gap: 10px; flex-shrink: 0; }
.prr-footer__licbadge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; padding: 8px 14px;
  background: #fff; color: #0e0e0e;
  font-weight: 900; font-size: 14px; letter-spacing: .04em;
  border-radius: 4px; line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.prr-footer__licbadge small {
  font-size: 8px; font-weight: 700; letter-spacing: .12em;
  margin-top: 3px; color: #cc0000;
}
.prr-footer__licbadge--sena { background: #cc0000; color: #fff; font-style: italic; }
.prr-footer__licentie-text {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: rgba(255,255,255,.65);
}
.prr-footer__licentie-text strong {
  font-size: 11px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.85);
}
@media (max-width: 600px) {
  .prr-footer__licentie { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Live album-cover op de hero-side cards (ververst elke 30s) */
.prr-np-cover { transition: opacity .3s; }
.prr-nowcard__cover {
  position: relative;
  background: #000;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);
}
.prr-nowcard__cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .3s;
}
.prr-nowcard__live {
  position: absolute; top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #cc0000; color: #fff;
  padding: 4px 9px; font-size: 10px; font-weight: 900; letter-spacing: .15em;
}
.prr-nowcard__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff; animation: prr-pulse 1.5s ease-in-out infinite;
}
@keyframes prr-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.7); }
}
.prr-nowcard__body { min-width: 0; }
.prr-nowcard__kicker {
  font-size: 11px; font-weight: 900; letter-spacing: .25em;
  color: #cc0000; margin-bottom: 8px;
}
.prr-nowcard__artist {
  font-size: 30px; font-weight: 900; line-height: 1.1; margin: 0;
  letter-spacing: -.01em;
}
.prr-nowcard__track {
  font-size: 17px; color: rgba(255,255,255,.7);
  margin-top: 4px; font-style: italic;
}
.prr-nowcard__btns {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px;
}
.prr-nowcard__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px;
  background: transparent; color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  font-size: 12px; font-weight: 800; letter-spacing: .1em;
  text-decoration: none; cursor: pointer; transition: all .15s;
}
.prr-nowcard__btn:hover { border-color: #fff; }
.prr-nowcard__btn svg { width: 14px; height: 14px; }
.prr-nowcard__btn--primary { background: #cc0000; border-color: #cc0000; }
.prr-nowcard__btn--primary:hover { background: #e60000; border-color: #e60000; }
@media (max-width: 700px) {
  .prr-nowcard__inner { grid-template-columns: 100px 1fr; gap: 16px; }
  .prr-nowcard__cover { width: 100px; height: 100px; }
  .prr-nowcard__artist { font-size: 20px; }
  .prr-nowcard__track  { font-size: 14px; }
  .prr-nowcard__kicker { font-size: 10px; }
}

/* ===== Klassiekers pagina ===== */
.prr-klassiekers{padding:48px 0 80px;background:#0a0a0a;color:#fff;min-height:60vh}
.prr-klassiekers__head{margin-bottom:28px;text-align:left}
.prr-klassiekers__kicker{display:inline-block;background:#e30613;color:#fff;font-weight:800;letter-spacing:.08em;font-size:11px;padding:5px 10px;border-radius:3px;margin-bottom:12px}
.prr-klassiekers h1{font-size:clamp(28px,4vw,44px);margin:0 0 8px;line-height:1.1}
.prr-klassiekers__head p{color:#bbb;margin:0 0 18px;font-size:16px}
.prr-klassiekers__tools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
.prr-klassiekers__tools input[type=search]{flex:1;min-width:240px;max-width:480px;background:#181818;border:1px solid #2a2a2a;color:#fff;padding:11px 14px;border-radius:6px;font-size:15px;outline:none}
.prr-klassiekers__tools input[type=search]:focus{border-color:#e30613}
.prr-klassiekers__count{color:#999;font-size:14px}
.prr-klassiekers__list{list-style:none;padding:0;margin:0;border-top:1px solid #1f1f1f}
.prr-klassiekers__row{display:grid;grid-template-columns:48px 1fr 1.4fr 60px;gap:14px;align-items:center;padding:12px 8px;border-bottom:1px solid #1a1a1a;transition:background .15s}
.prr-klassiekers__row:hover{background:#141414}
.prr-klassiekers__num{color:#666;font-variant-numeric:tabular-nums;font-size:13px;text-align:right}
.prr-klassiekers__artist{font-weight:700;color:#fff;font-size:15px}
.prr-klassiekers__title{color:#ccc;font-size:15px}
.prr-klassiekers__year{color:#888;font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.prr-klassiekers__empty{padding:40px 12px;color:#888;text-align:center;font-style:italic}
@media (max-width:640px){
  .prr-klassiekers__row{grid-template-columns:32px 1fr 50px}
  .prr-klassiekers__title{grid-column:2 / 3;color:#aaa;font-size:13px;margin-top:2px}
  .prr-klassiekers__artist{grid-column:2 / 3}
  .prr-klassiekers__year{grid-row:1 / 3;grid-column:3 / 4}
}

/* ===== Top Artiesten ===== */
.prr-top-artists__list{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:12px}
.prr-top-artists__row{display:grid;grid-template-columns:54px 1fr 90px;gap:18px;align-items:center;background:#141414;border:1px solid #1f1f1f;border-radius:8px;padding:14px 18px;transition:transform .15s,border-color .15s}
.prr-top-artists__row:hover{border-color:#e30613;transform:translateX(2px)}
.prr-top-artists__rank{font-size:28px;font-weight:900;color:#e30613;font-variant-numeric:tabular-nums;text-align:center;line-height:1}
.prr-top-artists__main{display:flex;flex-direction:column;gap:8px;min-width:0}
.prr-top-artists__name{font-size:17px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prr-top-artists__bar{position:relative;height:6px;background:#222;border-radius:3px;overflow:hidden}
.prr-top-artists__bar > span{display:block;height:100%;background:linear-gradient(90deg,#e30613,#ff4d57);border-radius:3px;transition:width .4s ease}
.prr-top-artists__count{color:#fff;font-weight:700;font-size:18px;text-align:right;font-variant-numeric:tabular-nums}
.prr-top-artists__count small{display:block;color:#888;font-weight:400;font-size:11px;margin-top:2px}
@media (max-width:640px){
  .prr-top-artists__row{grid-template-columns:42px 1fr 60px;padding:12px 14px;gap:12px}
  .prr-top-artists__rank{font-size:22px}
  .prr-top-artists__name{font-size:15px}
}

/* ===== Uitgelicht — 3 banners ===== */
.prr-feat-banners{background:#0f0f0f}
.prr-feat-banners__grid{display:grid;gap:20px;margin-top:18px}
.prr-feat-banners__grid[data-cols="1"]{grid-template-columns:1fr}
.prr-feat-banners__grid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.prr-feat-banners__grid[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
.prr-fbanner{position:relative;display:flex;flex-direction:column;background:#171717;border:1px solid #1f1f1f;border-radius:10px;overflow:hidden;text-decoration:none;color:#fff;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.prr-fbanner:hover{transform:translateY(-3px);border-color:#e30613;box-shadow:0 12px 28px rgba(227,6,19,.18)}
.prr-fbanner__img{aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#222}
.prr-fbanner__body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.prr-fbanner__kicker{display:inline-block;align-self:flex-start;background:#e30613;color:#fff;font-weight:800;letter-spacing:.08em;font-size:11px;padding:4px 9px;border-radius:3px;margin-bottom:2px}
.prr-fbanner__title{font-size:19px;font-weight:800;color:#fff;line-height:1.25;margin:0}
.prr-fbanner__desc{color:#bbb;font-size:14px;line-height:1.45;margin:0;flex:1}
.prr-fbanner__btn{display:inline-flex;align-items:center;gap:6px;color:#e30613;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.prr-fbanner__btn svg{width:14px;height:14px}
@media (max-width:880px){.prr-feat-banners__grid[data-cols="3"],.prr-feat-banners__grid[data-cols="2"]{grid-template-columns:1fr}}

/* Uitgelicht bovenaan — iets compacter en eigen tint */
.prr-feat-banners--top{background:#0a0a0a;padding-top:28px;padding-bottom:28px;border-bottom:1px solid #1a1a1a}
.prr-feat-banners--top .prr-stitle h2{font-size:20px}

/* ===== Evenementen ===== */
.prr-events{background:#0f0f0f}
.prr-events__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:14px;margin-bottom:20px}
.prr-events__kicker{display:inline-block;background:#e30613;color:#fff;font-weight:800;letter-spacing:.08em;font-size:11px;padding:4px 9px;border-radius:3px;margin-bottom:8px}
.prr-events__head h2{color:#fff;margin:0;font-size:clamp(22px,3vw,30px)}
.prr-events__more{color:#e30613;font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.prr-events__more svg{width:14px;height:14px}
.prr-events__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.prr-events__grid--page{grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}
.prr-event{position:relative;display:flex;flex-direction:column;background:#171717;border:1px solid #1f1f1f;border-radius:10px;overflow:hidden;text-decoration:none;color:#fff;transition:transform .2s,border-color .2s,box-shadow .2s}
.prr-event:hover{transform:translateY(-3px);border-color:#e30613;box-shadow:0 12px 28px rgba(227,6,19,.18)}
.prr-event__img{position:relative;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#222}
.prr-event__date{position:absolute;top:10px;left:10px;background:#e30613;color:#fff;border-radius:6px;padding:6px 10px;text-align:center;line-height:1;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.prr-event__day{display:block;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums}
.prr-event__mon{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.prr-event__body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.prr-event__title{margin:0;font-size:16px;font-weight:800;color:#fff;line-height:1.3}
.prr-event__meta{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:#bbb}
.prr-event__desc{margin:4px 0 0;color:#aaa;font-size:13px;line-height:1.45}
@media (max-width:980px){.prr-events__grid{grid-template-columns:repeat(2,1fr)} .prr-events__grid--page{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.prr-events__grid,.prr-events__grid--page{grid-template-columns:1fr}}

/* ===== Evenementenkalender (in sidebar van Categorie-grid) ===== */
.prr-evcal{background:#171717;border:1px solid #1f1f1f;border-radius:10px;padding:14px 14px 10px;margin-bottom:22px}
.prr-evcal__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
.prr-evcal__head .prr-stitle{margin:0}
.prr-evcal__head .prr-stitle h2{font-size:14px;color:#fff;margin:0}
.prr-evcal__all{display:inline-flex;align-items:center;gap:4px;color:#e30613;font-weight:700;font-size:11px;letter-spacing:.06em;text-decoration:none;flex-shrink:0}
.prr-evcal__all svg{width:12px;height:12px}
.prr-evcal__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.prr-evcal__item{border-top:1px solid #232323}
.prr-evcal__item:first-child{border-top:0}
.prr-evcal__item a{display:flex;gap:12px;align-items:center;padding:10px 0;color:#fff;text-decoration:none;transition:opacity .15s}
.prr-evcal__item a:hover{opacity:.85}
.prr-evcal__date{flex-shrink:0;width:46px;background:#e30613;color:#fff;border-radius:6px;padding:6px 0;text-align:center;line-height:1}
.prr-evcal__day{display:block;font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.prr-evcal__mon{display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.prr-evcal__body{min-width:0;flex:1}
.prr-evcal__title{font-size:13px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.prr-evcal__meta{font-size:11px;color:#999;display:flex;gap:4px;flex-wrap:wrap}

/* Evenementenkalender — horizontale rij boven Nieuws per Categorie */
.prr-evcal--row{margin-bottom:22px;padding:16px 16px 12px}
.prr-evcal--row .prr-evcal__head{margin-bottom:12px}
.prr-evcal--row .prr-evcal__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.prr-evcal--row .prr-evcal__chip{background:#0f0f0f;border:1px solid #232323;border-radius:8px;transition:border-color .15s,transform .15s}
.prr-evcal--row .prr-evcal__chip:hover{border-color:#e30613;transform:translateY(-2px)}
.prr-evcal--row .prr-evcal__chip a{display:flex;gap:10px;align-items:center;padding:10px;color:#fff;text-decoration:none}
.prr-evcal--row .prr-evcal__date{width:42px;padding:5px 0}
.prr-evcal--row .prr-evcal__day{font-size:16px}
.prr-evcal--row .prr-evcal__mon{font-size:9px}
.prr-evcal--row .prr-evcal__title{font-size:12px;-webkit-line-clamp:1}
.prr-evcal--row .prr-evcal__meta{font-size:10px}
@media (max-width:780px){.prr-evcal--row .prr-evcal__row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.prr-evcal--row .prr-evcal__row{grid-template-columns:1fr}}

/* Evenementenkalender — full-width band (zelfde breedte als header) */
.prr-evcal-band{padding:0;background:#0a0a0a;border-bottom:1px solid #1a1a1a}
.prr-evcal--full{margin:0;border-radius:0;border-left:0;border-right:0;border-top:0;padding:18px 24px 16px;background:#0a0a0a}
.prr-evcal--full .prr-evcal__row{grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:1200px){.prr-evcal--full .prr-evcal__row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.prr-evcal--full .prr-evcal__row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.prr-evcal--full .prr-evcal__row{grid-template-columns:1fr}}

/* Evenementenkalender — rich variant met foto en volledige tekst */
.prr-evcal--full .prr-evcal__row{grid-template-columns:repeat(4,1fr)}
@media (max-width:1200px){.prr-evcal--full .prr-evcal__row{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.prr-evcal--full .prr-evcal__row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.prr-evcal--full .prr-evcal__row{grid-template-columns:1fr}}
.prr-evcal__chip--rich{padding:0;overflow:hidden;background:#171717;border:1px solid #232323;border-radius:10px;transition:transform .2s,border-color .2s,box-shadow .2s}
.prr-evcal__chip--rich:hover{transform:translateY(-3px);border-color:#e30613;box-shadow:0 10px 24px rgba(227,6,19,.18)}
.prr-evcal__chip--rich a{display:flex;flex-direction:column;padding:0;align-items:stretch;gap:0;color:#fff;text-decoration:none}
.prr-evcal__chip--rich .prr-evcal__img{position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;background-color:#222}
.prr-evcal__chip--rich .prr-evcal__date{position:absolute;top:10px;left:10px;width:auto;min-width:50px;padding:6px 9px;background:#e30613;border-radius:6px;text-align:center;line-height:1;box-shadow:0 4px 10px rgba(0,0,0,.4)}
.prr-evcal__chip--rich .prr-evcal__day{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;display:block}
.prr-evcal__chip--rich .prr-evcal__mon{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:2px}
.prr-evcal__chip--rich .prr-evcal__body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.prr-evcal__chip--rich .prr-evcal__title{font-size:15px;font-weight:800;color:#fff;line-height:1.3;display:block;-webkit-line-clamp:unset;overflow:visible}
.prr-evcal__chip--rich .prr-evcal__meta{font-size:12px;color:#bbb;display:flex;flex-wrap:wrap;gap:10px}
.prr-evcal__chip--rich .prr-evcal__meta span{display:inline-flex;align-items:center;gap:4px}
.prr-evcal__desc{margin:0;color:#aaa;font-size:13px;line-height:1.5}
.prr-evcal__cta{display:inline-flex;align-items:center;gap:5px;margin-top:auto;color:#e30613;font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.prr-evcal__cta svg{width:13px;height:13px}

/* Evenementenkalender — toon de VOLLEDIGE afbeelding (geen crop) */
.prr-evcal__chip--rich .prr-evcal__img{position:relative;aspect-ratio:auto;background:#0a0a0a;display:block;line-height:0}
.prr-evcal__chip--rich .prr-evcal__img img{display:block;width:100%;height:auto}

/* Uitgelicht — 1 banner met rode achtergrond */
.prr-feat-banners--top{background:#e30613;border-bottom:3px solid #b00510;padding:24px 0}
.prr-feat-banners--top .prr-stitle h2{color:#fff}
.prr-feat-banners--top .prr-stitle__bar{background:#fff}
.prr-feat-banners--top .prr-feat-banners__grid[data-cols="1"]{grid-template-columns:1fr;max-width:100%}
.prr-feat-banners--top .prr-fbanner{background:#fff;border:0;border-radius:10px;overflow:hidden;display:grid;grid-template-columns:minmax(280px,42%) 1fr;min-height:240px;color:#111;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.prr-feat-banners--top .prr-fbanner:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(0,0,0,.35)}
.prr-feat-banners--top .prr-fbanner__img{height:auto;min-height:240px;background-size:cover;background-position:center}
.prr-feat-banners--top .prr-fbanner__body{padding:24px 28px;display:flex;flex-direction:column;justify-content:center;gap:10px;color:#111}
.prr-feat-banners--top .prr-fbanner__kicker{background:#e30613;color:#fff;align-self:flex-start}
.prr-feat-banners--top .prr-fbanner__title{color:#111;font-size:clamp(20px,2.4vw,28px);margin:0}
.prr-feat-banners--top .prr-fbanner__desc{color:#555;font-size:15px}
.prr-feat-banners--top .prr-fbanner__btn{background:#111;color:#fff;align-self:flex-start;padding:10px 18px;border-radius:6px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.prr-feat-banners--top .prr-fbanner__btn:hover{background:#e30613}
@media (max-width:720px){
  .prr-feat-banners--top .prr-fbanner{grid-template-columns:1fr;min-height:0}
  .prr-feat-banners--top .prr-fbanner__img{aspect-ratio:16/9;min-height:0}
}

/* Uitgelicht banner — toon de VOLLEDIGE afbeelding (geen crop) en volledige tekst */
.prr-feat-banners--top .prr-fbanner{grid-template-columns:minmax(280px,45%) 1fr;align-items:stretch;min-height:0}
.prr-feat-banners--top .prr-fbanner__img{background:#0a0a0a;display:flex;align-items:center;justify-content:center;padding:0;min-height:0;height:auto}
.prr-feat-banners--top .prr-fbanner__img img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.prr-feat-banners--top .prr-fbanner__body{padding:28px 32px}
.prr-feat-banners--top .prr-fbanner__desc{color:#444;font-size:15px;line-height:1.6;white-space:pre-line;display:block;overflow:visible;-webkit-line-clamp:unset;max-height:none}
.prr-feat-banners--top .prr-fbanner__title{display:block;overflow:visible;-webkit-line-clamp:unset}
@media (max-width:720px){
  .prr-feat-banners--top .prr-fbanner__img img{width:100%;height:auto}
}

/* Uitgelicht — volledige breedte (over de hele pagina) */
.prr-feat-banners--full{padding-left:0;padding-right:0}
.prr-feat-banners--full .prr-feat-banners__inner{width:100%;max-width:100%;padding:0 24px;box-sizing:border-box}
.prr-feat-banners--full .prr-fbanner{max-width:100%;width:100%;border-radius:0}

/* Uitgelicht banner — grotere tekst, volledig uitgevouwen */
.prr-feat-banners--top .prr-fbanner__kicker{font-size:13px;padding:6px 12px;letter-spacing:.1em}
.prr-feat-banners--top .prr-fbanner__title{font-size:clamp(26px,3.4vw,42px);line-height:1.2;font-weight:900;margin:6px 0 4px}
.prr-feat-banners--top .prr-fbanner__desc{font-size:clamp(16px,1.4vw,19px);line-height:1.65;color:#333;white-space:pre-line;overflow:visible;display:block;-webkit-line-clamp:unset;max-height:none}
.prr-feat-banners--top .prr-fbanner__btn{font-size:15px;padding:13px 22px;margin-top:6px}
.prr-feat-banners--top .prr-fbanner__body{padding:36px 40px;gap:14px}
@media (max-width:720px){
  .prr-feat-banners--top .prr-fbanner__body{padding:24px 22px}
  .prr-feat-banners--top .prr-fbanner__title{font-size:24px}
  .prr-feat-banners--top .prr-fbanner__desc{font-size:15px}
}

/* Actueel zijbalk — widget-spacing tussen meerdere widgets */
.prr-aside__widget + .prr-aside__widget{margin-top:32px}
.prr-aside__widget .prr-stitle{margin-bottom:12px}

/* Actueel zijbalk — iets meer naar rechts op desktop, mobiel ongewijzigd */
@media (min-width: 992px){
  .prr-grid .prr-aside{padding-left:32px}
}
@media (min-width: 1280px){
  .prr-grid .prr-aside{padding-left:56px}
}

/* ===== Uitgelicht — MOBIEL: afbeelding netjes gecropt + tekst eronder ===== */
/* Op mobiel staat de banner-grid al onder elkaar (1 kolom). De volledige
   "contain"-weergave maakt de afbeelding daar te klein/leeg — daarom switchen
   we naar een nette crop (cover) met vaste 16/9 verhouding, en valt de tekst
   er logisch onder. Op tablet/desktop (≥721px) blijft alles ongewijzigd. */
@media (max-width:720px){
  .prr-feat-banners--top .prr-fbanner{
    grid-template-columns:1fr;
    min-height:0;
  }
  .prr-feat-banners--top .prr-fbanner__img{
    aspect-ratio:16/9;
    width:100%;
    height:auto;
    min-height:0;
    padding:0;
    background:#0a0a0a;
    background-size:cover;
    background-position:center;
    display:block;
    overflow:hidden;
  }
  .prr-feat-banners--top .prr-fbanner__img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
  }
}

/* ===== "Deze Week op PopRockRadio" — MOBIEL ===== */
/* Op mobiel (≤720px) compacter: kleinere kop, 16:9 afbeelding netjes gecropt,
   en alle tekst eronder in kleiner formaat. Op tablet/desktop (≥768px)
   blijft alles ongewijzigd. */
@media (max-width:720px){
  .prr-week__head{flex-direction:column;align-items:flex-start;gap:6px}
  .prr-week__sub{font-size:12px;letter-spacing:.2em}
  .prr-week__head h2{font-size:26px;line-height:1.15;margin-top:2px;letter-spacing:-.01em}

  .prr-week__grid{gap:18px}
  .prr-track{flex-direction:column}
  .prr-track__image{aspect-ratio:16/9;width:100%;height:auto}
  .prr-track__image img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
  .prr-track__badge{font-size:11px;padding:7px 12px;letter-spacing:.12em}

  .prr-track__body{padding:18px 18px 20px;gap:14px}
  .prr-track__label{font-size:11px;letter-spacing:.18em}
  .prr-track__artist{font-size:22px;margin-top:6px;line-height:1.15}
  .prr-track__title{font-size:15px;margin-top:4px}
  .prr-track__times-label{font-size:11px;letter-spacing:.18em;margin-bottom:6px}
  .prr-track__times{gap:6px;margin-top:10px}
  .prr-track__time{padding:5px 9px;font-size:12px}
}

/* ===== "Nu speelt op Pop Rock Radio" — MOBIEL ===== */
/* Op mobiel (≤720px) krijgt de grote hero-kaart een nette 16:9-crop in plaats
   van de vaste 460px-hoogte (die op telefoons te dominant is), en worden de
   tekstgroottes proportioneel kleiner. De rechter hero-kaarten ("Deze Week"
   in de zijbalk op desktop) krijgen dezelfde 16:9-behandeling. Op tablet en
   desktop (≥768px) blijft alles ongewijzigd. */
@media (max-width:720px){
  .prr-hero{padding:14px 0}
  .prr-hero .prr-grid{gap:14px}

  .prr-feature.prr-hero__big{height:auto;aspect-ratio:16/9}
  .prr-hero__side .prr-feature{height:auto;aspect-ratio:16/9}

  .prr-feature__cat--np{font-size:13px;padding:5px 11px;letter-spacing:.08em;top:12px;left:12px}
  .prr-hero__big .prr-feature__body{padding:16px}
  .prr-hero__big .prr-feature__body h2{font-size:20px;line-height:1.15;margin-bottom:4px}
  .prr-hero__big .prr-feature__meta{font-size:13px}
  .prr-hero__big .prr-feature__meta svg{width:13px;height:13px}

  .prr-hero__side .prr-feature__cat{top:10px;left:10px;font-size:11px;padding:3px 8px}
  .prr-hero__side .prr-feature__body{padding:14px}
  .prr-hero__side .prr-feature__body h2{font-size:16px;line-height:1.15}
  .prr-hero__side .prr-feature__meta{font-size:12px}

  /* Iets sterkere donkere overlay zodat de tekst goed leesbaar blijft op
     een kleinere mobiele crop. */
  .prr-feature__shade{background:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.1) 100%)}
}

/* ===== Footer brand-tekst — MOBIEL netjes uitgelijnd ===== */
/* Op mobiel viel de korte beschrijving onder het logo niet altijd lekker uit
   (te smal naast de socials, of leek gecentreerd). Hier expliciet links
   uitlijnen, volle breedte en wat lucht eronder. */
@media (max-width:720px){
  .prr-footer{padding:40px 0 20px}
  .prr-footer__grid{gap:24px}
  .prr-footer__brand{text-align:left;max-width:none}
  .prr-footer__brand img{height:56px;margin-bottom:14px;display:block;width:auto}
  .prr-footer__brand p{
    margin:0 0 16px;
    font-size:14px;
    line-height:1.6;
    color:#bbb;
    text-align:left;
    text-wrap:pretty;
    max-width:100%;
  }
  .prr-footer__social{margin-top:14px;justify-content:flex-start}
  .prr-footer__contact{margin-top:8px}
}