/* dist/rugbyanimator/app/tiles.css
   Play tiles, shared by the public plays pages (play.css) and the editor's
   preset window. Its own file because play.css and the editor both define
   .ra-search, differently. Tokens come from the page (session.css or the
   editor's :root). */

/* Tile grid, mirroring the iOS library. auto-fill keeps rows full at any width
   rather than stretching tiles: four across the 1120px page, three on a
   narrow laptop, one on a phone. */
.ra-playlist {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.ra-tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.ra-tile:hover { border-color: var(--lineStrong); transform: translateY(-2px); }
/* The anchor fills the tile so a grid-stretched tile has no dead strip at the
   bottom, and every tile in a row is clickable to the same depth. */
.ra-tile { display: flex; }
/* ...which beat the UA's [hidden] rule, so search hid whole categories but left
   non-matching tiles on screen ("7 plays" over 13 tiles). */
.ra-tile[hidden] { display: none; }
.ra-tile > a, .ra-tile > button { display: flex; flex-direction: column; flex: 1; width: 100%; text-decoration: none; }
/* The editor's tiles are buttons (they open a play rather than navigate), and
   the editor styles every button as a chip. Undo that. */
.ra-tile > button, .ra-tile > button:hover {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}

.ra-tile-thumb {
  position: relative; display: block;
  aspect-ratio: 5 / 4;              /* taller than the app's 4:3 — two per row
                                       leaves room, and it crops the pitch less */
  background: var(--surface2);
}
.ra-thumb { display: block; width: 100%; height: 100%; }

.ra-tile-badge, .ra-tile-lock {
  position: absolute; top: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(8, 41, 28, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--line);
}
.ra-tile-badge { left: 8px; color: var(--textPrimary); }
.ra-tile-lock { right: 8px; color: var(--ball, #F2C53D); }

/* Title and blurb get fixed line budgets rather than relying on
   -webkit-line-clamp, which does not clamp reliably here (display computed as
   flow-root, so the clamp was ignored and tiles came out uneven). Fixed heights
   make every tile identical, which is what makes the grid read as a grid. */
.ra-tile-title {
  display: block; padding: 11px 12px 0;
  color: var(--textPrimary); font-weight: 600; font-size: 14.5px; line-height: 19px;
  height: 49px;                     /* 11px padding + exactly two 19px lines */
  overflow: hidden;
}
.ra-tile-blurb {
  display: block; padding: 5px 12px 13px;
  color: var(--textDim); font-size: 12.5px; line-height: 18px;
  height: 54px;                     /* 5+13px padding + exactly two 18px lines */
  overflow: hidden;
}