/**
 * @file
 * Defines styles for the tile component.
 *
 * This file contains the CSS rules for displaying tile elements,
 * including hover effects and background treatments. It uses CSS
 * custom properties (variables) for theming.
 */

.tile {
  height: 100%;
  overflow: hidden;
  position: relative;
}

/* Tile link styles */
.tile__link {
  display: grid;
  position: relative;
  grid-template: 1fr / 1fr;
  align-items: end;
  border-radius: var(--border-radius-base);
  overflow: hidden;
  height: 100%;
  text-decoration: none;
}

/* Tile title styles */
.tile__title {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 10;
  padding: var(--spacing-lg);
  margin-bottom: 0;
  font-size: var(--font-size-2xl);
  font-family: var(--font-family-primary);
  color: var(--color-white);
  transition: color 0.3s ease;
}

/* Tile background styles */
.tile__image-background {
  overflow: hidden;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.tile__image-background img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Background overlay */
.tile__image-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

.tile__link:hover .tile__image-background::before {
  background-color: rgba(0, 0, 0, 0);
}

.tile__link:hover .tile__image-background {
  transform: scale(1.2);
}

.tile__link:hover .tile__title,
.tile__link:focus .tile__title {
  color: var(--color-white);
}