/* =========================================================================
   Block · Card / Tile — Figma 6869:75 (page Global: Blocks)
   A photo tile, spacing/card-padding inside, radius/box: Top (Eyebrow +
   Heading/Item, spacing/card-padding apart) and the play button at the foot.
     Size=Large  → .b-card-tile--large   1:1 (Figma 384 × 384), play 44
     Size=Small  → .b-card-tile--small   4:5 (Figma 320 × 400), play 32
     Text=Dark   → .b-card-tile--dark    ink text over a white sheen
     Text=Light  → .b-card-tile--light   white text over Black 50
     (code only) → .b-card-tile--auto    the play button follows size/icon
                   (32 → 44 at 1392); no ratio of its own: the module sizes
                   the tile (where its variants switch Size and draw the
                   tile at their own proportions, e.g. Cards / Tiles)
     veil=60     → .b-card-tile--veil-60 the Light veil at Black 60 — a fill
                   override Figma makes on a page instance
     mesh=true   → [data-mesh]: tilemesh.js draws the photo in a canvas (the
                   diamond lattice under the pointer) and marks the tile
                   .is-mesh once it is live; until then the <img> shows
   Hover (a link): the old card — 1px outline, the photo zooms; the heading
   goes Blue on Dark tiles (on Light, blue on a dark veil would not read);
   the play button does its own hover.
   Raw in Figma: the tile ratios; the gap between Top and the button (20 on
   Dark, 226 on Light — only a minimum here, the two are pushed apart); the
   sheen: White 100% → 0% at 40% layer opacity, drawn at ~104°.
   ========================================================================= */
.b-card-tile {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-20);
  overflow: hidden;
  padding: var(--spacing-card-padding);
  border-radius: var(--radius-box);
  background: var(--color-placeholder);
  color: var(--color-black);
  text-decoration: none;
  box-shadow: 0 0 0 1px transparent;
  transition: box-shadow var(--ds-outline-duration) var(--ds-hover-ease);
}
.b-card-tile--large { aspect-ratio: 1; }
.b-card-tile--small { aspect-ratio: 4 / 5; }
.b-card-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.b-card-tile--dark::before  { background: linear-gradient(104deg, var(--color-white-40) 27.3%, transparent 85%); }
.b-card-tile--light::before { background: var(--color-black-50); }
.b-card-tile--light { color: var(--color-white); }
.b-card-tile--light.b-card-tile--veil-60::before { background: var(--color-black-60); }

.b-card-tile__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.b-card-tile__media picture { display: contents; }
.b-card-tile__media canvas.hp-mesh { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.b-card-tile.is-mesh .b-card-tile__media img { visibility: hidden; }
.b-card-tile__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ds-zoom-duration) var(--ds-zoom-ease); }
.b-card-tile__top {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-card-padding);
}
.b-card-tile__heading { align-self: stretch; transition: color var(--ds-title-duration) var(--ds-hover-ease); }

@media (any-hover: hover) {
  a.b-card-tile:is(:hover, :focus-visible) { box-shadow: 0 0 0 1px var(--ds-outline); }
  a.b-card-tile--dark:is(:hover, :focus-visible) .b-card-tile__heading { color: var(--color-blue); }
  a.b-card-tile:is(:hover, :focus-visible) .b-card-tile__media img { transform: scale(var(--ds-zoom)); }
}
@media (prefers-reduced-motion: reduce) {
  .b-card-tile, .b-card-tile__heading, .b-card-tile__media img { transition: none; }
}