/*
  single-tile — de kaartfoto ís de tegel.

  Alleen block-eigen styling; tokens en primitives komen uit de core-bundel
  (theme.min.css). Hover zit hier in CSS in plaats van in JS-state, zodat de
  tegel ook zonder JavaScript volledig werkt.

  Bewust géén transitie op transform bij prefers-reduced-motion: de huisregel
  van het design system is korte, mechanische beweging, maar wie 'm uitzet
  krijgt niets.
*/

.bsc-tile {
  position: relative;
  aspect-ratio: 63 / 88; /* de fysieke kaartverhouding */
  /* Contentkaart → --radius-card (12px). Stond op --radius-lg (14px), dat token
     verdwijnt met het vier-waardensysteem uit §1. */
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bsc-ink-000);
  /*
    Eigen stapelcontext, zodat het beeld met z-index:-1 ónder de tekst kan maar
    bóven de achtergrond van deze tegel blijft.

    Zonder dit tekende de kaartfoto over de naam en de prijs heen: __media en
    __scrim staan absoluut gepositioneerd en __body staat gewoon in de flow, en
    dan wint een gepositioneerd element altijd. Met een lege tegel viel dat niet
    op — daar was het beeldvlak doorzichtig — dus het kwam pas boven zodra er
    echte kaartscans in stonden.

    De voor de hand liggende oplossing (position:relative op __body) mag hier
    níét: dan wordt __body het containing block voor de uitgerekte ::after van
    de titellink en klikt alleen het tekstblok nog, precies de bug die in de
    toelichting hieronder beschreven staat.
  */
  isolation: isolate;
  border: var(--border-2) solid var(--bsc-ink-600);
  /*
    Kolom-flex met de inhoud onderaan. Dit is de dráger van de stretched link:
    het tekstblok hoefde alleen maar onderaan te staan, en dat deed het eerder
    met position:absolute. Daarmee werd .bsc-tile__body zelf het containing
    block, mat het ::after zich op tegen die 228x95px in plaats van tegen de
    hele tegel, en klikte 70% van de kaart niet. Nu is .bsc-tile het enige
    gepositioneerde element in de keten en meet inset:0 de héle tegel.
  */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /*
    Eén easing voor de hele declaratie (§5). Er stond --ease-snap op transform
    en `linear` op border-color en box-shadow: de tegel kwam met een curve
    omhoog terwijl de rand en de slagschaduw er in een rechte lijn achteraan
    liepen, en dat is bij 180ms zichtbaar als naijlen. De rolverdeling uit het
    besluit: kleur is --dur-fast, verplaatsing --dur-base — de slagschaduw hoort
    bij de lift en volgt dus de transform.
  */
  transition:
    transform var(--dur-base) var(--ease-snap),
    box-shadow var(--dur-base) var(--ease-snap),
    border-color var(--dur-fast) var(--ease-snap);
}

.bsc-tile:hover,
.bsc-tile:focus-within {
  transform: translateY(-4px);
  border-color: var(--bsc-yellow-500);
  box-shadow: var(--shadow-lg);
}

/* ── Beeld ─────────────────────────────────────────────────────────────── */

.bsc-tile__media {
  position: absolute;
  inset: 0;
  /* Achter de tekst, vóór de achtergrond van de tegel — zie isolation hierboven. */
  z-index: -1;
}

.bsc-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}

.bsc-tile:hover .bsc-tile__img {
  transform: scale(1.04);
}

.bsc-tile--out .bsc-tile__img {
  opacity: .4;
  filter: grayscale(1);
}

.bsc-tile--out:hover .bsc-tile__img {
  transform: none;
}

/*
  Expliciet gelabeld vlak in plaats van een decoratieve vulling — huisregel uit
  het design system. Stond op --bsc-ink-500 (1,85:1 op zwart) én aria-hidden,
  waardoor het "label" voor niemand leesbaar was. Nu --bsc-ink-300 (6,08:1) en
  wél in de a11y-boom, want het vertelt iets echts over het product.
*/
.bsc-tile__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: var(--weight-bold) 10px / 1 var(--font-ui);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bsc-ink-300);
}

/* Beschermgradiënt zodat de tekst onderaan altijd leesbaar is op elke foto. */
.bsc-tile__scrim {
  position: absolute;
  inset: 0;
  /* Boven het beeld, onder de tekst: precies waar een beschermlaag hoort. */
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .92) 0%,
    rgba(0, 0, 0, .72) 22%,
    rgba(0, 0, 0, 0) 52%
  );
}

/* ── Pillen linksboven / rechtsboven ───────────────────────────────────── */

.bsc-tile__flags {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.bsc-tile__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  /* Rechthoekig label, geen ronde vorm → --radius-md (§1). */
  border-radius: var(--radius-md);
  /* .72 liet de kaartfoto doorschemeren; op een lichte scan zakte de PL-code
     (rood) daardoor naar 2,8:1. Op .88 haalt de zwakste conditiekleur ruim
     4,5:1 ongeacht wat eronder ligt. */
  background: rgba(0, 0, 0, .88);
  backdrop-filter: blur(6px);
  border: var(--border-1) solid rgba(255, 255, 255, .14);
  font: var(--weight-bold) 10px / 1 var(--font-mono);
  letter-spacing: .1em;
  color: var(--bsc-white);
  white-space: nowrap;
}

.bsc-tile__pill--grade {
  color: var(--_grade, var(--cond-nm));
}

.bsc-tile__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--_grade, var(--cond-nm));
}

/*
  "Uitverkocht" is de enige visuele drager van die informatie, dus gewone tekst:
  WCAG 1.4.3 vraagt 4,5:1 op 10px/700. Wit op red-500 (#ff4d4d) haalde 3,27:1.

  Niet opgelost door het rood donkerder te maken: red-700 (#b81f1f) geeft wel
  6,45:1 met wit, maar haalt tegen de tegelachtergrond (ink-000 #0b1220) nog
  maar 2,53:1 — dan lost de pil zelf op in de donkere kaart en verlies je de
  signaalwaarde. In plaats daarvan de tekst omgedraaid, precies zoals
  .bsc-tile__pill--flag het al doet: fel vlak, donkere inkt.
  ink-000 op red-500 = 5,72:1, en de pil blijft 4,99:1 los van de tegel.
*/
.bsc-tile__pill--out {
  background: var(--bsc-red-500);
  color: var(--bsc-ink-000);
  border-color: var(--bsc-ink-000);
}

.bsc-tile__pill--flag {
  background: var(--bsc-yellow-500);
  color: var(--bsc-ink-000);
  border-color: var(--bsc-ink-000);
}

/* ── Tekstblok onderaan ────────────────────────────────────────────────── */

/*
  BEWUST STATIC. Dit blok mag géén position, transform, filter, contain:paint,
  perspective of will-change krijgen: het staat tussen de <a> en de tegel in, en
  elk van die eigenschappen maakt het weer containing block voor het stretched
  ::after. Onderaan staan doet het nu via de kolom-flex op .bsc-tile.
*/
.bsc-tile__body {
  position: static;
  padding: 12px;
  display: grid;
  gap: 7px;
  min-width: 0;
}

.bsc-tile__meta {
  font-size: 9px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .72);
}

.bsc-tile__name {
  margin: 0;
  font: var(--weight-bold) 15px / 1.2 var(--font-ui);
  color: var(--bsc-white);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
  Stretched link: de hele tegel is klikbaar terwijl er in de a11y-boom maar één
  link zit, met de kaartnaam als tekst. Het ::after ligt over álles behalve de
  cart-actie (die zit op z-index 2); de pillen zijn spans zonder eigen actie, dus
  dat het transparante vlak daar overheen ligt kost niets en levert wél een
  volledig klikbare kaart op.

  Twee regels die je hier niet mag breken (apart uitgezocht en gemeten):
  1. De <a> blijft display:inline. Geeft hij block/grid/flex/inline-block, dan
     grijpt de `animated`-mixin uit dev/css/components/_animation.scss aan — die
     zet -webkit-transform-style:preserve-3d op élke a en button, en dat maakt een
     *transformable* element zelf containing block. Een non-replaced inline box is
     niet transformable, dus daar is de mixin inert.
  2. Tussen deze <a> en .bsc-tile mag geen element staan met position != static,
     transform, filter, contain:paint, perspective of will-change. Zie de
     waarschuwing op .bsc-tile__body hierboven.
  Controleer het nooit op het oog: hang er een <i style="position:absolute;inset:0">
  in en lees offsetParent + getBoundingClientRect().
*/
.bsc-tile__link {
  color: inherit;
  text-decoration: none;
}

.bsc-tile__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.bsc-tile__link:hover {
  color: inherit;
}

.bsc-tile__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  row-gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}

.bsc-tile__prices {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex: 1 1 auto;
  min-width: min-content;
}

.bsc-tile__price {
  font: var(--weight-bold) 19px / 1 var(--font-mono);
  color: var(--bsc-yellow-500);
  white-space: nowrap;
}

.bsc-tile__compare {
  font: var(--weight-regular) 12px / 1 var(--font-mono);
  color: rgba(255, 255, 255, .55);
  text-decoration: line-through;
  white-space: nowrap;
  min-width: 0;
  flex-shrink: 1;
}

/* ── Actie rechtsonder ─────────────────────────────────────────────────── */

.bsc-tile__action {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 30px;
  padding: 0 12px;
  /* Bedieningselement → --radius-md (§1). */
  border-radius: var(--radius-md);
  font: var(--weight-bold) 10px / 1 var(--font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .12);
  color: var(--bsc-white);
  border: var(--border-1) solid rgba(255, 255, 255, .2);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-snap),
    color var(--dur-fast) var(--ease-snap),
    border-color var(--dur-fast) var(--ease-snap);
}

.bsc-tile:hover .bsc-tile__action:not(.bsc-tile__action--disabled) {
  background: var(--bsc-yellow-500);
  color: var(--bsc-ink-000);
  border-color: var(--bsc-ink-000);
}

.bsc-tile__action--disabled {
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .62);
  border-color: rgba(255, 255, 255, .12);
  cursor: not-allowed;
}

/*
  De cart-actie is een echte link en moet dus bovenop de stretched link van de
  titel liggen, anders vangt die alle kliks af.
*/
.bsc-tile__action--cart {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .bsc-tile,
  .bsc-tile__img,
  .bsc-tile__action {
    transition: none;
  }

  .bsc-tile:hover,
  .bsc-tile:focus-within {
    transform: none;
  }

  .bsc-tile:hover .bsc-tile__img {
    transform: none;
  }
}