/*
  slab-shot — één echte foto van een slab, naast de uitleg.

  De foto zit in dezelfde papieren lijst met tape als de beursflyers. Dat is
  bewust: een productfoto in een kaal kader had van elke site kunnen zijn, en
  dit merk heeft juist een eigen manier om iets "op te hangen".
*/

.bsc-slabshot {
  padding: var(--block-y) 0;
}

.bsc-slabshot__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x);
  display: grid;
  gap: var(--space-8);
  align-items: center;

  /*
    De foto is staand (een slab is hoger dan breed), dus hij krijgt de smalle
    kolom en de tekst de brede. Andersom zou het beeld de halve pagina vullen
    met een object dat je in één oogopslag hebt gezien.
  */
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}

@media (max-width: 860px) {
  .bsc-slabshot__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    justify-items: start;
  }

  .bsc-slabshot__frame {
    max-width: 320px;
  }
}

/* ── De lijst ──────────────────────────────────────────────────────────── */

.bsc-slabshot__frame {
  position: relative;
  margin: 0;
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface-invert);
  border: var(--border-2) solid var(--border-outline);
  /* Papier: 4px, geen contentkaart. */
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hard);
  /* Net scheef opgehangen, zoals de flyers. */
  transform: rotate(-1.2deg);
}

.bsc-slabshot__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

/*
  De tape. Steekt boven de lijst uit, dus hij mag niet weggeknipt worden door
  overflow — vandaar geen overflow:hidden op het frame.
*/
.bsc-slabshot__tape {
  position: absolute;
  top: calc(var(--space-3) * -1);
  left: 50%;
  width: 96px;
  height: 26px;
  transform: translateX(-50%) rotate(-2.5deg);
  background: var(--bsc-yellow-300);
  opacity: .85;
}

.bsc-slabshot__caption {
  display: block;
  margin-top: var(--space-3);
  /* De lijst staat op crème, ook in een nachtband: inkt is dan navy. */
  color: var(--bsc-navy-500);
}

/* ── De tekst ──────────────────────────────────────────────────────────── */

.bsc-slabshot__body {
  display: grid;
  gap: var(--space-4);
  max-width: 54ch;
}

.bsc-slabshot__eyebrow {
  margin: 0;
}

.bsc-slabshot__title {
  margin: 0;
  font: var(--weight-black) clamp(26px, 3.4vw, 40px) / 1.08 var(--font-ui);
  letter-spacing: -.01em;
  color: var(--text-strong);
  text-wrap: balance;
}

.bsc-slabshot__text {
  margin: 0;
  font: var(--weight-regular) var(--text-md) / 1.7 var(--font-ui);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .bsc-slabshot__frame,
  .bsc-slabshot__tape {
    transform: none;
  }

  .bsc-slabshot__tape {
    left: var(--space-6);
  }
}

/*
  Bij een expliciete contrastvoorkeur staat de lijst recht en verdwijnt de tape.
  De reset staat op het element zelf en niet in een losse regel met hogere
  specificiteit — dat is hier eerder misgegaan bij de partnerstickers, waar een
  media-query het aflegde tegen een selector met twee klassen.
*/
@media (prefers-contrast: more) {
  .bsc-slabshot__frame {
    transform: none;
    border-width: var(--border-3);
  }

  .bsc-slabshot__tape {
    display: none;
  }
}