/* Shared tile grid + card shell (page-tiles, page-carousel, …). */

.tiles {
  display: grid;
  gap: 1.5rem; /* Figma 24px */
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(100%, var(--tile-width, 300px)), 1fr)
  );
}

.tile {
  position: relative;
  display: block;
  overflow: hidden;
  inline-size: 100%;
  block-size: 100%;
  height: 100%;
  color: var(--color-on-primary);
  text-decoration: none;
  isolation: isolate;
}

.tile:hover,
.tile:focus,
.tile:focus-visible {
  color: var(--color-on-primary);
}

.tile-image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  width: 100% !important;
  height: 100% !important;
  max-inline-size: none;
  max-block-size: none;
  object-fit: cover;
  object-position: center top;
  margin-block-end: 0 !important;
  transition: transform 0.7s ease;
}

.tile-image-placeholder {
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}

.tile:has(.tile-overlay):hover .tile-image,
.tile:has(.tile-overlay):focus-visible .tile-image {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
  .tile-image {
    transition: none;
  }

  .tile:has(.tile-overlay):hover .tile-image,
  .tile:has(.tile-overlay):focus-visible .tile-image {
    transform: none;
  }
}

.tile-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    #ffffff 34%,
    var(--color-primary)
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}

.tile-label {
  margin-block-end: 0;
  position: absolute;
  inset: auto 2rem 2rem;
  z-index: 2;
  color: var(--color-on-primary);
}

.tile:hover .tile-label,
.tile:focus .tile-label {
  color: var(--color-on-primary);
}