/* nl-clips — publieke kant: site, speler, swipe-feed en embeds.
   Bouwt op bb-ui (tokens + base); merken passen kleuren aan via hun thema. */
:root { --clip-portrait: 9 / 16; --clip-landscape: 16 / 9; }

/* ---------- Site ---------- */
.site-header { padding-block: var(--space-2); }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 22px; }
.brand img { height: var(--logo-height, 48px); width: auto; }
.site-main { display: grid; gap: var(--space-4); padding-block: var(--space-3) var(--space-5); }
.site-footer { background: var(--surface-deep); color: var(--ink); padding-block: var(--space-3); }
.hero { padding-block: var(--space-2); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Raster met posters (staand eerst) ---------- */
.clip-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.clip-card__link { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.clip-card__link:hover .clip-card__title, .clip-card__link:focus-visible .clip-card__title { text-decoration: underline; text-decoration-thickness: 2px; }
.clip-card__frame { position: relative; display: block; aspect-ratio: var(--clip-portrait); overflow: hidden; background: var(--surface-deep); }
.clip-card__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.clip-card__frame--wide img { object-fit: contain; }
.clip-card__link:hover img { transform: scale(1.03); }
.clip-card__duration { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; background: rgb(0 0 0 / 70%); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.clip-card__play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 34px; text-shadow: 0 1px 6px rgb(0 0 0 / 60%); opacity: .9; }
.clip-card__title { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Video-pagina ---------- */
.watch { display: grid; gap: var(--space-3); align-items: start; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
.watch--landscape { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 860px) { .watch, .watch--landscape { grid-template-columns: 1fr; } }
.clip-frame { position: relative; background: #000; width: 100%; overflow: hidden; }
.clip-frame--portrait { aspect-ratio: var(--clip-portrait); width: min(100%, calc(82vh * 9 / 16)); margin-inline: auto; }
.clip-frame--landscape { aspect-ratio: var(--clip-landscape); }
.clip-frame--square { aspect-ratio: 1; }
.clip-frame video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.watch__desc { white-space: pre-line; }
.share textarea { width: 100%; font-family: var(--font-mono); font-size: 13px; padding: 8px; border: var(--border-thin) solid currentColor; background: var(--panel); color: var(--on-panel); }
.share summary { cursor: pointer; }

/* ---------- Swipe-feed ---------- */
body.bare { background: #000; color: #fff; margin: 0; }
.feed { position: fixed; inset: 0; background: #000; }
.feed__track { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.feed__track::-webkit-scrollbar { display: none; }
.feed__slide { position: relative; height: 100vh; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; overflow: hidden; cursor: pointer; }
.feed__video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Staand op een staand scherm: vullen; elders: passend. */
@media (max-aspect-ratio: 10/16) { .feed__slide--portrait .feed__video { object-fit: cover; } }
.feed__meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-4) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgb(0 0 0 / 75%)); pointer-events: none; display: grid; gap: 4px; max-width: 640px; margin-inline: auto;
}
.feed__title { font-size: 19px; line-height: 1.25; font-weight: 900; text-shadow: 0 1px 3px rgb(0 0 0 / 60%); }
.feed__desc { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed__link { position: absolute; right: var(--space-2); bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); color: #fff; font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.feed__controls { position: fixed; top: calc(var(--space-1) + env(safe-area-inset-top)); right: var(--space-1); display: flex; gap: 6px; z-index: 2; }
.feed__btn {
  min-height: 44px; min-width: 44px; padding: 0 12px; border: 0; background: rgb(0 0 0 / 55%); color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px; text-transform: uppercase; cursor: pointer;
}
.feed__btn--close { font-size: 26px; line-height: 1; padding: 0; }
.feed__btn:focus-visible { outline: var(--border-thin) solid #fff; }
.feed__empty { position: absolute; inset: 0; display: grid; place-items: center; }

/* ---------- Embeds ---------- */
.embed-item { height: 100vh; width: 100%; aspect-ratio: auto; }
.embed-item__brand { position: absolute; left: 8px; top: 8px; padding: 2px 6px; background: rgb(0 0 0 / 55%); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; text-decoration: none; opacity: .85; }
/* De rij posters neemt de achtergrond van de site over (bb-ui kleurt ook html). */
html:has(.embed-collection), body.bare:has(.embed-collection) { background: transparent; color: var(--on-panel); }
.embed-collection { padding: var(--space-1) 0; color: var(--surface-deep); }
.embed-collection__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-1); padding: 0 2px 6px; }
.embed-collection__title { font-size: 18px; font-weight: 900; }
.embed-collection__row { list-style: none; margin: 0; padding: 0 0 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 160px); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; }
.embed-collection__row li { scroll-snap-align: start; }
.embed-collection .clip-card__title { font-size: 14px; }