/* Overstappagina in het apple.nl-stramien: brede promobanden onder
   elkaar, gescheiden door een dunne witte voeg, elk met een grote kop,
   één regel eronder, pilknoppen en beeld dat onderaan tegen de rand
   aan loopt. Daarna een raster van halve tegels, drie verhalen en de
   kleine lettertjes.

   Twee dingen zijn hier bewust geregeld, omdat ze anders meteen
   misgaan. Een foto wordt bijgesneden op een vaste verhouding, zodat
   de snede een compositie is en geen ongeluk. Een dashboardmock wordt
   niet hard afgekapt maar loopt onderaan uit in een mask -- een
   halve tabelregel leest als een fout, een vervagende leest als
   diepte.

   Op een telefoon vallen de tegels naar één kolom, schuiven de
   verhalen horizontaal en worden de beeldhoogtes kleiner; verder is
   alles vloeiend, dus font-size media queries zijn nergens nodig. */

@layer components {
  .ov-band {
    position: relative;
    overflow: hidden;
    padding-block-start: clamp(3rem, 2.5rem + 2vw, 4.5rem);
    padding-block-end: 0;
    text-align: center;
    background: var(--color-surface);
  }

  .ov-band + .ov-band,
  .ov-grid,
  .ov-grid + .ov-band {
    margin-block-start: 0.75rem;
  }

  /* Wit bovenaan, lila onderaan: de band tussen twee lila banden. */
  .ov-band--soft {
    background: var(--gradient-light);
  }

  .ov-band--dark {
    background: var(--gradient-dark);
    color: #ffffff;
  }

  /* Bandtekst blijft smal: de kop moet de regel breken zoals bedoeld. */
  .ov-band__inner {
    width: min(100% - var(--gutter) * 2, 44rem);
    margin-inline: auto;
  }

  .ov-band__title {
    font-size: var(--step-5);
    line-height: 1.03;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .ov-band__sub {
    margin-block-start: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--step-1);
    line-height: 1.4;
    text-wrap: pretty;
  }

  .ov-band--dark .ov-band__sub {
    color: rgb(255 255 255 / 0.72);
  }

  .ov-band__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin-block-start: var(--space-m);
  }

  /* Foto: vaste verhouding, tegen de onderrand van de band aan. */
  .ov-band__figure {
    width: min(100% - var(--gutter) * 2, 58rem);
    margin-block-start: var(--space-l);
    margin-inline: auto;
    overflow: hidden;
    border-start-start-radius: var(--radius);
    border-start-end-radius: var(--radius);
  }

  .ov-band__figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 6;
    object-fit: cover;
  }

  /* Mock: loopt onderaan uit in plaats van dat hij wordt afgehakt. */
  .ov-band__mock {
    width: min(100% - var(--gutter) * 2, 44rem);
    max-block-size: clamp(12rem, 26vw, 19rem);
    margin-block-start: var(--space-l);
    margin-inline: auto;
    overflow: hidden;
    text-align: start;
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }

  .ov-grid {
    display: grid;
    gap: 0.75rem;
  }

  @media (min-width: 56rem) {
    .ov-grid {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Kolom, zodat het beeld altijd aan de onderrand hangt en er geen
     gat valt tussen tekst en tegelrand bij ongelijke tekstlengtes. */
  .ov-tile {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-block-start: clamp(2.5rem, 2rem + 1.5vw, 3.25rem);
    text-align: center;
    background: var(--color-surface);
  }

  .ov-tile--dark {
    background: var(--gradient-dark);
    color: #ffffff;
  }

  .ov-tile__inner {
    width: min(100% - var(--space-m) * 2, 30rem);
    margin-inline: auto;
  }

  .ov-tile h3 {
    font-size: var(--step-3);
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }

  .ov-tile p {
    margin-block-start: var(--space-3xs);
    color: var(--color-muted);
    text-wrap: pretty;
  }

  .ov-tile--dark p {
    color: rgb(255 255 255 / 0.72);
  }

  .ov-tile__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2xs);
    margin-block-start: var(--space-s);
  }

  .ov-tile__figure {
    width: min(100% - var(--space-m) * 2, 26rem);
    margin-block-start: auto;
    margin-inline: auto;
    padding-block-start: var(--space-m);
  }

  .ov-tile__figure img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 8;
    object-fit: cover;
    border-start-start-radius: var(--radius);
    border-start-end-radius: var(--radius);
  }

  .ov-tile__mock {
    width: min(100% - var(--space-m) * 2, 24rem);
    max-block-size: clamp(12rem, 20vw, 16rem);
    margin-block-start: auto;
    margin-inline: auto;
    padding-block-start: var(--space-m);
    overflow: hidden;
    text-align: start;
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }

  /* Drie verhalen naast elkaar op breed; daaronder schuiven ze
     horizontaal met de buren in beeld. */
  .ov-stories {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(80%, 24rem);
    gap: var(--space-m);
    padding-inline: var(--gutter);
    padding-block: var(--space-2xs);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-inline: contain;
  }

  @media (min-width: 72rem) {
    .ov-stories {
      width: min(100% - var(--gutter) * 2, var(--container));
      margin-inline: auto;
      padding-inline: 0;
      grid-auto-flow: row;
      grid-auto-columns: auto;
      grid-template-columns: repeat(3, 1fr);
      overflow-x: visible;
    }
  }

  .ov-story {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-m);
    min-block-size: 15rem;
    margin: 0;
    padding: var(--space-l);
    border-radius: var(--radius);
    background: var(--gradient-brand);
    color: #ffffff;
    scroll-snap-align: center;
  }

  .ov-story--ink {
    background: var(--gradient-dark);
  }

  .ov-story--soft {
    background: var(--color-surface);
    color: var(--color-ink);
  }

  .ov-story blockquote {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.3;
    text-wrap: pretty;
  }

  .ov-story figcaption {
    font-size: var(--step--1);
    opacity: 0.78;
  }

  .ov-close {
    margin-block-start: var(--space-l);
    text-align: center;
  }

  /* De kleine lettertjes onderaan, zoals de voorwaardenblokken bij
     Apple: klein, rustig, maar wel volledig. */
  .ov-fine {
    padding-block: var(--space-l);
    border-block-start: 1px solid var(--color-line);
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.65;
  }

  .ov-fine > * + * {
    margin-block-start: var(--space-xs);
  }

  .ov-fine ol {
    padding-inline-start: 1.2em;
  }

  .ov-fine li + li {
    margin-block-start: var(--space-2xs);
  }
}