/*
  category-tile.css — composant Vignette univers/catégorie
  Photo lifestyle bord à bord + libellé sur bandeau dégradé (contraste garanti).
*/
.category-tile {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: box-shadow var(--transition-base);
}

.category-tile:hover,
.category-tile:focus-visible {
  box-shadow: var(--shadow-lift);
}

.category-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.category-tile:hover img {
  transform: scale(1.05);
}

.category-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(58, 42, 30, 0.82) 0%, rgba(58, 42, 30, 0.15) 55%, rgba(58, 42, 30, 0) 75%);
}

.category-tile__label {
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  color: var(--color-white);
}

.category-tile__label span {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}

.category-tile__label small {
  display: block;
  font-size: var(--fs-xsmall);
  color: var(--color-cream-dark);
  margin-top: 2px;
}