/* ===========================================
   ASSET TILES — polymorphic T58 scope grid
   Linked tiles: image (Ken Burns on hover via kenburns.css) + title + cartel.
   Column count comes from --tile-cols, set inline by the block.
   =========================================== */

.asset-tile-grid {
  display: grid;
  grid-template-columns: repeat(var(--tile-cols, 3), 1fr);
  gap: 2rem;
  margin: 2rem 0;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .asset-tile-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .asset-tile-grid { grid-template-columns: 1fr; }
}

.asset-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.asset-tile-link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  text-decoration: none;
  color: inherit;
}

/* Portrait by default — the corpus is overwhelmingly portrait work.
   Override --tile-img-ratio for a square or landscape grid. */
.asset-tile-image {
  width: 100%;
  aspect-ratio: var(--tile-img-ratio, 3 / 4);
  overflow: hidden;
  background: #ececec;
}

.asset-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.asset-tile-body {
  padding: 0.9rem 0 0;
}

.asset-tile-title {
  margin: 0 0 0.2em;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
}

.asset-tile-cartel {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #666;
}

/* The code is an identifier, not prose — set it apart without relying on
   colour alone, since colour is not a channel every reader has. */
.asset-tile-code {
  margin: 0.35em 0 0;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a8a8a;
}