// ────────────────────────────────────────────────────────────────
// Komponente · Kachelreihe (KI · Drohnen · SmartHome)
//
// Die Kacheln der Dev-Startseite: ein Raster gleicher Spalten, je Kachel ein
// Bild ueber einer gesperrten Versalien-Beschriftung. Aus dem Bestand
// uebernommen, damit die Startseite ihre Kacheln aus dem System bezieht und
// nicht als eigenes CSS fuehrt.
//
// Ein Bild kann ein gerendertes Objekt sein (`.tile__shot`) — dann ist es
// breiter als hoch und traegt einen weichen Schein statt eines Quadrats.
//
// AUFBAU
//   <div class="tiles">
//     <a class="tile" href="..."><img src="..."><span class="tile__title">KI</span></a>
//     <span class="tile"><img class="tile__shot" src="..."><span class="tile__title">Drohnen</span></span>
//   </div>
// ────────────────────────────────────────────────────────────────

.tiles {
  align-content: start;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(12px, 2.2vw, 26px);
  width: 100%;
}

.tile {
  display: block;
  padding: clamp(16px, 2.4vw, 24px) 12px;
  color: inherit;
  text-align: center;
  text-decoration: none;
  border-radius: var(--r-xl);

  img {
    display: block;
    width: clamp(78px, 15vw, 132px);
    height: clamp(78px, 15vw, 132px);
    margin: 0 auto clamp(18px, 2.4vw, 26px);
    opacity: .92;
    transition:
      opacity var(--dur-slow) var(--ease),
      transform var(--dur-slow) var(--ease);
  }

  &:hover img {
    opacity: 1;
    transform: scale(1.06);
  }

  &__title {
    display: block;
    font-size: clamp(14px, 1.9vw, 19px);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-widest);
    text-indent: var(--tracking-widest);
    text-transform: uppercase;
    transition: color var(--dur-slow) var(--ease), text-shadow var(--dur-slow) var(--ease);
  }

  &__shot {
    width: clamp(162px, 28vw, 240px);
    height: auto;
    opacity: 1;
    filter:
      drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 24%, transparent))
      drop-shadow(0 0 30px color-mix(in srgb, var(--accent) 12%, transparent));
  }
}

// Nur die Kachel, die ein Verweis ist, bekommt beim Ueberfahren den Akzent.
a.tile:hover .tile__title,
a.tile:focus-visible .tile__title {
  color: var(--accent);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--accent) 45%, transparent),
    0 0 26px color-mix(in srgb, var(--accent) 22%, transparent);
}

a.tile:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

@media (max-width: 620px) {
  .tiles {
    grid-template-columns: 1fr;
    width: min(88vw, 380px);
    margin: 0 auto;
  }

  .tile__shot {
    width: clamp(180px, 54vw, 260px);
  }
}