/*
 * De kijkgids — de catalogus als streamingdienst.
 *
 * Steunt op noappy.css voor het palet, de knoppen en de labels; hier staat
 * alleen wat de gids zelf nodig heeft. Zo blijft de startpagina de baas over de
 * huisstijl en hoeft dit bestand niet mee te veranderen als daar iets wijzigt.
 */

.isgids { background: var(--nacht); }

/* ================================================================== *
 *  Het billboard
 * ================================================================== */

.billboard {
  position: relative;
  min-height: min(84svh, 780px);
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(7rem, 14vh, 11rem) clamp(3rem, 7vh, 5rem);
}

/* De affiche van de app zelf, uitvergroot en onscherp: het beeld hoort bij de
   app, maar mag de tekst niet in de weg zitten. */
.billboard__grond {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-size: cover;
  background-position: 62% 22%;
  filter: blur(26px) saturate(120%);
  transform: scale(1.08);
  opacity: .85;
}

.billboard__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(95deg, var(--nacht) 20%, rgba(10, 6, 22, .94) 44%, rgba(10, 6, 22, .5) 72%, rgba(10, 6, 22, .2) 100%),
    linear-gradient(to top, var(--nacht) 2%, rgba(10, 6, 22, 0) 46%),
    linear-gradient(to bottom, rgba(10, 6, 22, .92) 0%, rgba(10, 6, 22, 0) 26%);
}

.billboard__inhoud {
  position: relative;
  z-index: 3;
  max-width: 46rem;
}

.billboard h1 {
  margin: 0 0 .5rem;
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: .95;
  letter-spacing: -.05em;
  font-weight: 800;
  color: var(--ink);
  text-shadow: 0 2px 60px rgba(10, 6, 22, .8);
}

.billboard__tagline {
  margin: 0 0 1.2rem;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--eigen, var(--magenta));
}

.billboard__tekst {
  margin: 0 0 1.4rem;
  max-width: 38rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.billboard__feiten,
.blad__feiten {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  align-items: center;
  margin: 0 0 1.8rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.billboard__feiten em,
.blad__feiten em {
  font-style: normal;
  padding: .35em .8em;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  color: var(--ink-zacht);
}
.billboard__feiten em[data-staat="winkel"] {
  border-color: rgba(255, 46, 136, .5);
  color: var(--magenta);
}
.blad__feiten a { color: var(--magenta); text-transform: none; letter-spacing: .04em; }

.billboard__acties { display: flex; flex-wrap: wrap; gap: .8rem; }

/* De schermen van de uitgelichte app, gewaaierd aan de rechterkant. */
.billboard__schermen {
  position: absolute;
  right: -6%;
  bottom: -12%;
  z-index: 2;
  display: flex;
  gap: 1.2rem;
  transform: perspective(1600px) rotateY(-16deg) rotateZ(4deg);
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}
.billboard__schermen img {
  width: clamp(110px, 11.5vw, 178px);
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(243, 238, 255, .16);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .9);
  transform: translateY(calc(var(--n) * 2.4rem));
}
@media (max-width: 1280px) { .billboard__schermen { opacity: .4; right: -16%; } }
@media (max-width: 720px) { .billboard__schermen { display: none; } }

/* ================================================================== *
 *  De rekken
 * ================================================================== */

.gids { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }

.rek { margin-bottom: clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 5.5rem; }

.rek__kop {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.rek__kop h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  letter-spacing: -.03em;
  font-weight: 750;
}
.rek__kop p {
  margin: 0;
  flex: 1;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}

.rek__pijlen { display: flex; gap: .4rem; }
.rek__pijl {
  width: 34px;
  height: 34px;
  border: 1px solid var(--lijn);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.rek__pijl:hover { border-color: var(--magenta); color: var(--ink); background: rgba(255, 46, 136, .1); }
.rek__pijl[disabled] { opacity: .3; cursor: default; }
@media (hover: none) { .rek__pijlen { display: none; } }

/* Het spoor schuift horizontaal, met snap zodat een kaart nooit half blijft
   hangen. De marges links en rechts lopen gelijk met .wrap, anders staat de
   eerste kaart niet in lijn met de kop erboven. */
.rek__spoor {
  display: flex;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: .4rem max(calc((100vw - var(--max)) / 2), clamp(1.25rem, 4vw, 2.5rem)) 1.4rem;
}
.rek__spoor::-webkit-scrollbar { display: none; }

.kaart {
  position: relative;
  flex: 0 0 clamp(168px, 19vw, 252px);
  scroll-snap-align: start;
  padding: 0;
  border: 1px solid var(--lijn);
  border-radius: 14px;
  overflow: hidden;
  background: var(--nacht-2);
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: inherit;
  transition: transform .28s cubic-bezier(.2,.8,.3,1), border-color .28s ease, box-shadow .28s ease;
}
.kaart img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.8,.3,1), filter .3s ease;
}

.kaart__tekst {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 2.6rem .9rem .85rem;
  background: linear-gradient(to top, rgba(10, 6, 22, .95) 30%, rgba(10, 6, 22, 0));
}
.kaart__tekst b {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.kaart__tekst i {
  display: block;
  margin-top: .15rem;
  font-style: normal;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eigen, var(--magenta));
}

.kaart__meer {
  position: absolute;
  inset: auto 0 0 0;
  padding: .55rem;
  text-align: center;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #12031c;
  background: var(--eigen, var(--magenta));
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
}

.kaart:hover,
.kaart:focus-visible {
  transform: translateY(-6px);
  border-color: var(--eigen, var(--magenta));
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .9), 0 0 34px -12px var(--eigen, var(--magenta));
}
.kaart:hover img, .kaart:focus-visible img { transform: scale(1.06); }
.kaart:hover .kaart__meer, .kaart:focus-visible .kaart__meer { transform: none; }

.kaart[aria-expanded="true"] {
  border-color: var(--eigen, var(--magenta));
  box-shadow: 0 0 0 1px var(--eigen, var(--magenta)), 0 0 40px -10px var(--eigen, var(--magenta));
}

/* ================================================================== *
 *  Het blad dat opengaat
 *
 *  Onder het rek en over de volle breedte, zoals een streamingdienst dat
 *  doet: je blijft waar je was en de rest schuift naar beneden.
 * ================================================================== */

.blad {
  position: relative;
  margin: .2rem 0 1rem;
  border-block: 1px solid var(--lijn);
  background:
    radial-gradient(60% 130% at 12% 0%, color-mix(in srgb, var(--eigen, #ff2e88) 16%, transparent), transparent 70%),
    var(--nacht-2);
  overflow: hidden;
}
.blad[hidden] { display: none; }
.blad[data-open] { animation: bladOpen .38s cubic-bezier(.16,1,.3,1); }

@keyframes bladOpen {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

.blad__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(1.8rem, 4vw, 2.8rem);
  align-items: start;
}
@media (max-width: 900px) { .blad__binnen { grid-template-columns: 1fr; } }

.blad__toe {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border: 1px solid var(--lijn);
  border-radius: 50%;
  background: rgba(10, 6, 22, .6);
  color: var(--ink-soft);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.blad__toe:hover { border-color: var(--magenta); color: var(--ink); }

.blad h3 {
  margin: 0 0 .35rem;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  letter-spacing: -.04em;
  font-weight: 780;
  color: var(--ink);
}
.blad__tagline {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--eigen, var(--magenta));
}
.blad__tekst > p { margin: 0 0 1.1rem; color: var(--ink-soft); line-height: 1.6; }

.blad__punten { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.blad__punten li {
  position: relative;
  padding-left: 1.3rem;
  font-size: .94rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.blad__punten li + li { margin-top: .45rem; }
.blad__punten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--eigen, var(--magenta));
}

.blad__acties { display: flex; flex-wrap: wrap; gap: .7rem; }

.blad__schermen {
  display: flex;
  gap: .8rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .4rem;
}
.blad__schermen::-webkit-scrollbar { display: none; }
.blad__schermen img {
  flex: 0 0 clamp(120px, 15vw, 172px);
  width: clamp(120px, 15vw, 172px);
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--lijn);
}

.blad__geenschermen {
  padding: 1.4rem;
  border: 1px dashed var(--lijn);
  border-radius: 14px;
}
.blad__geenschermen p { margin: 0; color: var(--ink-zacht); font-size: .93rem; }

.gids__slot { border-top: 1px solid var(--lijn); }

@media (prefers-reduced-motion: reduce) {
  .rek__spoor { scroll-behavior: auto; }
  .kaart, .kaart img, .kaart__meer { transition: none; }
  .blad[data-open] { animation: none; }
}

/* ================================================================== *
 *  De pagina van één app
 * ================================================================== */

.billboard--app { min-height: min(66svh, 620px); }

.kruimels {
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-zacht);
}
.kruimels a { color: var(--ink-zacht); text-decoration: none; }
.kruimels a:hover { color: var(--magenta); }
.kruimels b { color: var(--ink-soft); font-weight: 400; }
.kruimels span { margin: 0 .45rem; opacity: .5; }

.appblad {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .appblad { grid-template-columns: 1fr; } }

.appblad .lead { margin-bottom: 1.6rem; max-width: 42rem; }
.appblad__web { margin-top: 1.4rem; font-size: .95rem; color: var(--ink-soft); }
.appblad__web a { color: var(--magenta); }

/* Het kaartje met de feiten. Bewust een definitielijst en geen tabel: het zijn
   eigenschappen van één ding, geen rijen die je met elkaar vergelijkt. */
.appblad__naast {
  padding: 1.5rem 1.6rem 1.7rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--nacht-2);
}
.appblad__naast h3 {
  margin: 0 0 1rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-zacht);
  font-weight: 500;
}
.appblad__naast dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.2rem; }
.appblad__naast dt { font-size: .86rem; color: var(--ink-zacht); }
.appblad__naast dd { margin: 0; font-size: .92rem; color: var(--ink); text-align: right; }
.appblad__naast a { color: var(--magenta); }

.appblad__schermen { margin-top: 1.6rem; }

/* Doorverwijzingen naar andere apps: dit is wat een catalogus samenhoudt, voor
   een lezer én voor een zoekmachine. */
.verder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.verder__kaart {
  position: relative;
  display: block;
  border: 1px solid var(--lijn);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  background: var(--nacht-2);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), border-color .25s ease;
}
.verder__kaart:hover { transform: translateY(-4px); border-color: var(--eigen, var(--magenta)); }
.verder__kaart img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.verder__kaart span {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: 2.4rem .9rem .8rem;
  background: linear-gradient(to top, rgba(10, 6, 22, .95) 30%, rgba(10, 6, 22, 0));
}
.verder__kaart b { display: block; font-size: .98rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.verder__kaart i {
  display: block;
  margin-top: .12rem;
  font-style: normal;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--eigen, var(--magenta));
}


/* ────────────────────────────────────────────────── de kop van de gids ──
 *
 * Deze bladzijde begon met dertien apps en pas onderaan iets om mee te doen.
 * Wie bovenaan binnenkwam, kreeg een catalogus zonder aanleiding. Hier staat
 * nu wat er te halen valt en drie manieren om te beginnen.
 */
.gids__kop {
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
}

.gids__titel {
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  margin: 0.6rem 0 1rem;
  text-wrap: balance;
}

.gids__kop .lead {
  max-width: 44rem;
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

/* De drie acties naast elkaar, en op een telefoon onder elkaar over de volle
   breedte: daar is een knop van halve breedte een knop die je mist. */
.gids__kop .hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

@media (max-width: 560px) {
  .gids__kop .hero__acties { flex-direction: column; align-items: stretch; }
  .gids__kop .hero__acties .knop { text-align: center; }
}

/* De naam van de uitgelichte app is een h2 geworden en mag niet meekrimpen
   met de standaardgrootte van een h2: dit is nog altijd de blikvanger. */
.billboard__naam {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 1;
  margin: 0.3rem 0 0.5rem;
}