/*
  set-tiles — rij settegels.

  Het kit gebruikt repeat(3,1fr); auto-fit met een minimum houdt het ook heel
  wanneer Duncan er vier of vijf toevoegt, zonder dat de tegels onleesbaar smal
  worden.
*/

.bsc-set-tiles {
  padding-top: var(--band-y, 96px);
  padding-bottom: var(--band-y, 96px);
  /*
    WEEFSEL, GEEN TWEEDE KLEURVLAK.

    De hero, de kaartenrij en deze band staan alle drie op night-000. Drie
    identieke vlakken achter elkaar is precies waardoor de homepage vlak las.
    Een fijne diagonale arcering op ~3% geeft deze band een eigen materiaal
    zonder een vierde kleur te introduceren; je ziet het niet bewust en tóch
    valt de sectiewissel op.

    Het patroon staat op de SECTIE en niet op een pseudo-element: een overlay
    over de content zou de tekst raken, en een ::before met inset:0 vraagt om
    een stapelcontext die dit blok niet nodig heeft.
  */
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, .022) 0 1px,
    transparent 1px 18px
  );
}

/*
  ── De rail ───────────────────────────────────────────────────────────────

  Sectie-opening nummer twee van de homepage. De kaartenrij erboven en de
  Standwand eronder openen met eyebrow-boven-titel; deze band opent met één
  regel. Dat verschil is het punt: vijf keer dezelfde opening onder elkaar leest
  als een sjabloon, ook als elke sectie op zichzelf klopt.
*/
.bsc-set-tiles__rail {
  max-width: var(--page-max);
  margin: 0 auto var(--space-6);
  padding: 0 var(--gutter-x, 28px);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

/* Het label mag niet meekrimpen met de haarlijn. */
.bsc-set-tiles__rail-label {
  flex: 0 0 auto;
}

/*
  De haarlijn pakt alle overgebleven ruimte. min-width:0 zodat hij ook echt kan
  krimpen in plaats van de knop van de band af te duwen.
*/
.bsc-set-tiles__rail-line {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--border-1);
  background: var(--border-hairline);
}

.bsc-set-tiles__rail-link {
  flex: 0 0 auto;
}

.bsc-set-tiles__grid {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter-x, 28px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  list-style: none;
}

.bsc-set-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  /*
    min-height in plaats van meer padding: de tegel moet een vlak zijn waar iets
    ligt, niet een regel tekst met lucht eromheen. 208px is de hoogte waarbij de
    kaartrug rechts in beeld past zonder de naam te raken.
  */
  min-height: 208px;
  overflow: hidden;
  padding: var(--space-6);
  border-radius: var(--radius-card);
  border: var(--border-2) solid var(--border-strong);
  background: var(--surface-card);
  color: var(--text-strong);
  text-decoration: none;
  /*
    `color` hoort in deze lijst. De globale `a:hover { color: var(--link-hover) }`
    uit _brand.scss is specifieker (0,1,1) dan `.bsc-set-tile` (0,1,0) en wint
    dus bij hover: de tegeltekst wisselde hard van kleur terwijl de rand en de
    lift wél overvloeiden.
  */
  transition: color var(--dur-fast) var(--ease-snap),
              border-color var(--dur-fast) var(--ease-snap),
              transform var(--dur-base) var(--ease-snap);
}

a.bsc-set-tile:hover {
  border-color: var(--border-brand);
  transform: translateY(-2px);
}

.bsc-set-tile--accent {
  background: var(--bsc-yellow-500);
  color: var(--border-outline);
  border-color: var(--border-outline);
}

a.bsc-set-tile--accent:hover {
  border-color: var(--border-outline);
}

/*
  Maat, tracking, gewicht en het mono-idioom komen uit .bsc-label (§7) — de
  eigen definitie is weg.

  Wat wél blijft is `color: inherit`, en dat is geen restje. De tegel is een
  gekleurde kaart, geen band: .bsc-set-tile--accent staat op yellow-500 met
  near-black inkt. Zou het label de vaste eyebrow-kleur van .bsc-label pakken,
  dan kwam er lichtgrijze mono-tekst op een fel geel vlak te staan. De
  tokenkanteling die een band wél doet (.bsc-paper / .bsc-night) doet deze
  accentvariant niet, dus hier moet het label de inkt van zijn eigen tegel
  volgen. Blok-CSS laadt ná theme.min.css, dus dit verslaat .bsc-label.
*/
.bsc-set-tile__label {
  display: block;
  color: inherit;
  opacity: .7;
}

.bsc-set-tile__name {
  display: block;
  margin-top: 10px;
  font: var(--weight-regular) clamp(22px, 2.4vw, 30px) / 1 var(--font-display);
  text-transform: uppercase;
  /* Boven het watermerk, en het watermerk staat op z-index 0. */
  position: relative;
  z-index: 1;
}

/* ── Wat de tegel lichaam geeft ────────────────────────────────────────── */

/*
  Het watermerk: de kaartrug van dit merk, half uit de tegel gelopen aan de
  rechterkant. Hetzelfde teken als in de lege binderpagina van de kaartenrij en
  in de hero-waaier — één merkteken op drie plekken is een handtekening, drie
  verschillende tekens is ruis.

  Rechts en niet gecentreerd: de tekst staat links, dus daar mag het watermerk
  niet doorheen lopen. `inset-inline-end` in plaats van `right` zodat het in een
  RTL-context vanzelf meespiegelt.
*/
.bsc-set-tile__weave {
  position: absolute;
  z-index: 0;
  top: 50%;
  /*
    -12px en niet -34px. Het watermerk mag over de tegelrand lopen (de tegel
    heeft overflow:hidden, dus je ziet het niet), maar zijn BOUNDING BOX mag de
    viewport niet passeren: de overflow-detectie in de QA meet
    getBoundingClientRect().right en vlagt een geclipt element net zo goed als
    een echte scrollbalk. Bij -12px blijft de doos op 1024 en 390 binnen het
    scherm en ziet het er hetzelfde uit.
  */
  inset-inline-end: -12px;
  width: 196px;
  height: 196px;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: .22;
  color: var(--bsc-navy-300);
}

.bsc-set-tile__weave .bsc-weave {
  display: block;
  width: 100%;
  height: 100%;
}

/*
  Op de gele tegel is de inkt navy en moet het watermerk juist zachter: op
  yellow-500 is night-000 op .22 al bijna een tweede grafisch element.
*/
.bsc-set-tile--accent .bsc-set-tile__weave {
  color: var(--border-outline);
  opacity: .12;
}

/*
  Hoekmetadata. Het volgnummer, tabulair zodat 01 en 02 dezelfde breedte hebben
  (.bsc-num levert font-variant-numeric). Klein en zwak: het is een ordening,
  geen informatie waar iemand op moet handelen.
*/
.bsc-set-tile__index {
  position: absolute;
  z-index: 1;
  top: var(--space-5);
  inset-inline-end: var(--space-5);
  font-size: 11px;
  letter-spacing: .1em;
  color: currentColor;
  opacity: .45;
}

/*
  Het aantal kaarten van deze set, in de hoek waar het volgnummer stond.
  Dezelfde plek en dezelfde discretie, maar dan met iets te zeggen.
*/
.bsc-set-tile__telling {
  position: absolute;
  z-index: 1;
  top: var(--space-5);
  inset-inline-end: var(--space-5);
  font-size: 13px;
  letter-spacing: .06em;
  color: currentColor;
  opacity: .5;
}

/*
  Het setsymbool als watermerk, op de plek en de maat van de kaartrug die het
  vervangt. Groot en zacht: het is een sfeerlaag, geen tweede label.

  TCGdex levert zwart lijnwerk met transparantie. Op de donkere tegel valt dat
  weg, dus daar wordt het omgekeerd naar licht; op de gele accenttegel is de
  ondergrond licht en blijft het zwart. De filter hangt daarom aan de
  tegelvariant en niet aan het symbool.
*/
.bsc-set-tile__merk {
  position: absolute;
  z-index: 0;
  /* Rechtsonder, net binnen de tegel. Het liep eerst 18px onderuit; dan zie je
     alleen de onderste helft van een breed logo en dat is bij het ene logo een
     herkenbare vorm en bij het andere een vlek. Helemaal in beeld is
     voorspelbaarder. */
  bottom: var(--space-3);
  /* Zelfde -12px als bij de kaartrug: over de tegelrand mag, buiten de viewport
     niet — de overflow-controle in de QA meet de bounding box, niet wat je ziet. */
  inset-inline-end: -12px;
  width: 224px;
  pointer-events: none;
}

/*
  Ontkleurd en heel zacht. De logo's zijn fel en veelkleurig (rood, paars,
  goud); op volle sterkte zou elke tegel een andere kleur krijgen en valt het
  raster uit elkaar. Grijs op lage dekking houdt ze bij elkaar en laat de gele
  accenttegel het enige kleuraccent blijven.
*/
.bsc-set-tile__merk-img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1) brightness(2.4);
  opacity: .11;

  /*
    Uitvloeien naar linksboven.

    Zonder masker hangt het resultaat volledig af van hoe het logo getekend is:
    Obsidian Flames zit vol transparante gaten en leest meteen als textuur,
    maar Evolving Skies is voor 72% een dichte plaat en werd daardoor een
    rechthoekige veeg — hetzelfde percentage dekking, twee totaal verschillende
    uitkomsten. Dat is geen keuze meer maar toeval per set.

    Met deze verloopmasker eindigt élk logo zacht: dicht in de hoek waar het
    hoort, weg richting de kop en de actieregel. Dat maakt het gedrag
    voorspelbaar bij een set die we nog niet gezien hebben — en dat zijn ze
    allemaal, zodra de echte voorraad erin gaat.
  */
  -webkit-mask-image: linear-gradient(to top left, #000 8%, rgba(0, 0, 0, .35) 45%, transparent 80%);
  mask-image: linear-gradient(to top left, #000 8%, rgba(0, 0, 0, .35) 45%, transparent 80%);
}

/*
  Op de gele tegel is de ondergrond licht, dus daar juist donker maken — en
  zachter dan op de donkere tegels. Geel heeft een hoge helderheid; hetzelfde
  percentage zwart leest daar meteen als een vlek in plaats van als textuur.
*/
.bsc-set-tile--accent .bsc-set-tile__merk-img {
  filter: grayscale(1) brightness(0);
  opacity: .085;
}

/* ── Label plus setsymbool ─────────────────────────────────────────────── */

.bsc-set-tile__labelrij {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/*
  Het symbool op ware grootte. De bron is 25×25, dus hier niet groter dan dat —
  opgeblazen wordt het meteen een vlek, en dát is precies waarom het watermerk
  het logo gebruikt en niet dit.
*/
.bsc-set-tile__symbool {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.bsc-set-tile__symbool-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Zwart lijnwerk op een donkere tegel: omkeren naar licht. */
  filter: invert(1);
  opacity: .7;
}

.bsc-set-tile--accent .bsc-set-tile__symbool-img {
  filter: none;
  opacity: .8;
}

/*
  De actieregel. Duwt zichzelf naar de onderkant van de tegel, zodat drie tegels
  met verschillend lange setnamen tóch één onderlijn houden.

  Dit is een <span> binnen de <a> en dus geen tweede link: de hele tegel is het
  klikbare vlak, deze regel maakt alleen zichtbaar dát hij dat is en waarheen.
*/
.bsc-set-tile__go {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: var(--space-5);
  font: var(--weight-bold) 11px / 1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-brand);
}

/*
  Op de gele tegel is --text-brand geel-op-geel. De inkt van de tegel zelf is
  hier de juiste kleur; dezelfde afweging als bij .bsc-set-tile__label.
*/
.bsc-set-tile--accent .bsc-set-tile__go {
  color: inherit;
}

/*
  De pijl schuift mee op hover — maar alleen op de tegels die daadwerkelijk een
  link zijn. mixins.hover uit de merklaag geldt vanaf 1025px; hier is dezelfde
  grens handmatig gezet, omdat blok-CSS geen SCSS is.
*/
@media (min-width: 1025px) {
  a.bsc-set-tile:hover .bsc-set-tile__go .bsc-icon {
    transform: translateX(3px);
  }
}

.bsc-set-tile__go .bsc-icon {
  transition: transform var(--dur-base) var(--ease-snap);
}

/* Homepage-band: 96 desktop → 48 mobiel (§4). */
@media screen and (max-width: 600px) {
  .bsc-set-tiles {
    padding-top: var(--band-y, 48px);
    padding-bottom: var(--band-y, 48px);
  }

  .bsc-set-tiles__grid,
  .bsc-set-tiles__rail {
    padding: 0 var(--gutter-x, 20px);
  }

  /*
    De rail valt om: label boven, knop eronder over de volle breedte. Naast
    elkaar houdt de knop op 390px nog 150px over voor label plus haarlijn, en
    dan is de haarlijn een streepje van 12px dat nergens meer op slaat.
  */
  .bsc-set-tiles__rail {
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .bsc-set-tiles__rail-line {
    display: none;
  }

  .bsc-set-tiles__rail-link {
    width: 100%;
  }

  /* Op een telefoon is de tegel al smal; 208px zou hem leeg maken. */
  .bsc-set-tile {
    min-height: 164px;
  }

  .bsc-set-tile__weave {
    width: 150px;
    height: 150px;
    inset-inline-end: -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bsc-set-tile,
  .bsc-set-tile__go .bsc-icon {
    transition: none;
  }

  a.bsc-set-tile:hover {
    transform: none;
  }

  a.bsc-set-tile:hover .bsc-set-tile__go .bsc-icon {
    transform: none;
  }
}

/*
  Windows-contrastmodus vervangt alle kleuren en zet opacity niet om. Het
  watermerk wordt daar een massief blok over de tegel; weglaten is netter dan
  doorzetten. Zelfde keuze als bij de tape op de lege briefjes.
*/
@media (forced-colors: active) {
  .bsc-set-tile__weave {
    display: none;
  }

  .bsc-set-tiles {
    background-image: none;
  }
}