/* ===== Плитки фильтров типов проектирования ===== */
.design-tiles .container {
  max-width: var(--container-max-width);
  margin: 24px auto 48px;
  padding: 0 var(--container-padding, 16px);
}
.design-tiles .page-title {
  margin-bottom: 12px;
}
.design-tiles .page-intro {
  margin-bottom: 20px;
  color: var(--clr-muted);
}

/* сетка плиток */
.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: calc(var(--gap) * 1.25);
}

/* плитка */
.tile {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius, 12px);
  overflow: hidden;
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-card, 0 6px 18px rgba(0, 0, 0, 0.06));
  transform: translateZ(0);
}

/* фон */
.tile__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.92) contrast(1.02);
  transition: filter var(--transition, 0.25s ease),
    transform var(--transition, 0.25s ease);
}

/* нижняя плашка */
.tile__label {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--accent);
  color: var(--btn-fg);
  padding: 10px 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none; /* можно uppercase */
  border-top-right-radius: 10px;
}

/* hover: фон «светлее» + лёгкий zoom */
.tile:hover .tile__bg {
  filter: brightness(1.05) contrast(1.02);
  transform: scale(1.02);
}

/* фокус доступности */
.tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ghost);
}