/* The mosaic: fifteen capabilities, five across on the measured canvas.
 * Column count and gaps come from the second-screen golden. The tile itself
 * stays a flat surface — no shadow, no gradient, nothing that would read as a
 * button before the departments route exists. The one thing standing off it is
 * the icon object, whose depth is declared once in base.css. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--resurs-tile-column-gap);
  row-gap: var(--resurs-tile-row-gap-1);
}

.tile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--resurs-tile-row-1-height);
  padding: 14px 12px 14px 14px;
  border-radius: var(--resurs-radius-tile);
  background: var(--resurs-surface);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--resurs-quick) var(--resurs-ease);
}
.tile:hover { box-shadow: inset 0 0 0 1px var(--resurs-hairline); }
/* Hover reaches the object and not the ground: the plate rises the single
   pixel a held thing rises, and the surface under it does not move. */
.tile:hover .plate {
  transform: translateY(-1px);
  --resurs-plate-cast: var(--resurs-plate-cast-lifted);
}
@media (prefers-reduced-motion: reduce) {
  .tile:hover .plate { transform: none; }
}

.tile .plate { width: 48px; height: 48px; }
.tile-name { font-size: var(--resurs-size-body); line-height: 1.34; }

@media (max-width: 1080px) {
  .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .tile { gap: 12px; padding: 12px 12px 12px 12px; min-height: 88px; }
  .tile .plate { width: 44px; height: 44px; }
  .tile-name { font-size: var(--resurs-size-small); }
}