/* nl-streamt frontend — generieke layout voor elk merk. Het thema van het
   merk (/-/theme.css) wordt ná dit bestand geladen en kan alles overschrijven. */

.site-header { padding-block: var(--space-2); border-bottom: var(--border-thin) solid var(--rule, currentColor); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; min-width: 0; }
.brand__logo { display: block; height: var(--logo-height, 48px); width: auto; max-width: 260px; object-fit: contain; }
.brand__name { font-weight: 900; font-size: 26px; line-height: 1.1; }
.brand__tagline { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; color: var(--label); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.site-nav a {
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; text-transform: uppercase; color: var(--ink);
  text-decoration: none; padding-block: 8px; display: inline-flex; align-items: center; gap: 6px;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--border-thin); text-underline-offset: 6px; text-decoration-color: var(--label); }
.site-nav .dot-live { width: 10px; height: 10px; background: var(--live); display: inline-block; }

main { display: block; }
main > section { padding-block: var(--space-3); }
main > section:first-child { padding-top: var(--space-3); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.empty { font-size: 17px; opacity: .85; }

/* Uitgelichte live stream op de voorpagina */
.feature { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.feature__body { display: grid; gap: var(--space-2); align-content: center; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: var(--space-2); } }

/* Kaarten met streams */
.stream-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.stream-card { position: relative; display: grid; gap: var(--space-1); align-content: start; background: var(--card); color: var(--on-card); padding: 0 0 var(--space-2); min-width: 0; }
.stream-card > :not(.thumb) { padding-inline: var(--space-2); }
.stream-card h3 { font-size: 20px; line-height: 1.25; }
.stream-card a.stream-card__link { color: inherit; text-decoration: none; }
.stream-card a.stream-card__link::after { content: ""; position: absolute; inset: 0; } /* hele kaart klikbaar */
.stream-card a.stream-card__link:hover h3, .stream-card:focus-within h3 { text-decoration: underline; text-decoration-thickness: var(--border-thin); }
.stream-card:focus-within { outline: var(--border-thin) solid var(--focus); outline-offset: 3px; }
.stream-card a.stream-card__link:focus-visible { outline: none; }
.stream-card .meta { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.thumb { aspect-ratio: 16 / 9; background: var(--surface-deep); color: var(--ink); position: relative; display: grid; align-content: end; padding: 12px; overflow: hidden; }
.thumb::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(var(--surface) 0 0) 0 0 / 62% 58% no-repeat,
  linear-gradient(var(--accent) 0 0) 100% 0 / 30% 22% no-repeat; opacity: .9; }
.thumb > * { position: relative; }
.thumb .tag { justify-self: start; }

/* Kanaalpagina */
.channel-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--space-3); align-items: start; }
@media (max-width: 960px) { .channel-layout { grid-template-columns: 1fr; } }
.channel-main { display: grid; gap: var(--space-2); min-width: 0; }
.channel-aside { display: grid; gap: var(--space-2); min-width: 0; }
.now { display: grid; gap: var(--space-1); }
.now__title { font-size: clamp(26px, 3.6vw, 38px); }
.status-line { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; font-family: var(--font-mono); font-size: 14px; text-transform: uppercase; }
.schedule { list-style: none; margin: 0; padding: 0; }
.schedule li { border-top: var(--border-thin) solid currentColor; padding-block: 10px; display: grid; gap: 2px; }
.schedule li:last-child { border-bottom: var(--border-thin) solid currentColor; }
.schedule time { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; font-weight: 700; }

.channels { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.channels a { display: grid; gap: 6px; padding: var(--space-2); background: var(--panel); color: var(--on-panel); text-decoration: none; height: 100%; }
.channels a:hover strong { text-decoration: underline; text-decoration-thickness: var(--border-thin); }
.channels strong { font-size: 22px; font-weight: 900; }

/* Index van merken (alleen pad-modus / development) */
.tenant-index { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }

.site-footer { background: var(--surface-deep); color: var(--ink); padding-block: var(--space-3); margin-top: var(--space-4); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; font-size: 15px; }
.site-footer a { color: inherit; }

.live-region { min-height: 1px; }
noscript .notice { margin-top: var(--space-1); }