/* =============================================================================
   sub-brand-tiles — Grid aus klickbaren Marken-Tiles (Default 2, generisch N)
   =============================================================================
   Jede Tile zeigt: Logo-Slot, Outcome-Headline, einen großen Beweis-Kennwert
   im Akzent, ein Audience-Label und einen CTA-Link mit Pfeil. Die ganze Tile ist
   klickbar (Stretched-Link: das __cta-<a> spannt per ::after über die Fläche).

   Per-Tile-Akzent: Modifier --a / --b setzt das lokale --tile-accent (Default
   --color-primary bzw. --color-secondary). Es steuert CTA-Farbe und Rahmen-Glow.
   Eine weitere Tile setzt --tile-accent inline oder bekommt einen neuen Modifier.

   TOKEN-PUR: ausschließlich Variablen aus _tokens/_base.css oder color-mix()
   daraus — kein hardgekodeter Marken-Wert. Siehe rules/lp-components-token-disziplin.md.
   Die --sbt-* sind komponenten-lokale Layout-Konstanten (Logo-Höhe, Border-,
   Glow-, Hover-Maß) — an keine Marke gekettet, laut Regel erlaubt.

   RESPONSIVE: mobile-first. 1 Spalte <720px, 2 Spalten ab 720px (auto-fit, damit
   N>2 sauber reflowt). Gleiche Höhe via align-items:stretch + Flex-Tile, der CTA
   sitzt unten (margin-top:auto). Keine vw-Distanz-Falle: alle Maße leiten sich
   aus --space-* / lokalen px-Konstanten ab, nichts wird in vw gegen ein Cap gestellt.

   Lade-Reihenfolge: _tokens/_base.css -> <brand>.css -> diese Datei.
   ============================================================================ */

.sub-brand-tiles {
  /* komponenten-lokale Konstanten (kein Marken-Bezug) */
  --sbt-logo-h:    40px;     /* max. Logo-Höhe im Slot */
  --sbt-border:    1px;      /* Tile-Rahmenstärke */
  --sbt-col-min:   280px;    /* Mindestbreite einer Spalte, bevor umgebrochen wird */
  --sbt-glow:      18%;      /* Misch-Anteil des Akzent-Glows */
  --sbt-lift:      3px;      /* Hover-Anhebung */

  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;

  display: grid;
  grid-template-columns: 1fr;          /* mobile-first: 1 Spalte */
  gap: var(--space-m);
  align-items: stretch;                /* gleiche Höhe über die Reihe */
}

/* Ab 720px: zwei (bzw. N) Spalten. auto-fit + minmax lässt N Tiles sauber
   reflowen, ohne dass eine vw-Distanz gegen ein Cap driftet. */
@media (min-width: 720px) {
  .sub-brand-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Bei mehr als zwei Tiles automatisch passend auffüllen (3, 4, ... Spalten),
   ohne unter die Mindestbreite zu fallen. Greift erst, wenn Platz da ist. */
@media (min-width: 1080px) {
  .sub-brand-tiles {
    grid-template-columns: repeat(auto-fit, minmax(var(--sbt-col-min), 1fr));
  }
}

.sub-brand-tiles__tile {
  /* Default-Akzent; Modifier/inline überschreiben ihn */
  --tile-accent: var(--color-primary);

  position: relative;                  /* Anker für den Stretched-Link */
  display: flex;
  flex-direction: column;              /* Inhalt vertikal */
  gap: var(--space-s);

  background: var(--color-surface);
  border: var(--sbt-border) solid var(--color-line);
  border-radius: var(--radius-card);
  padding: var(--space-l);

  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease;
}

/* Per-Tile-Akzent-Modifier */
.sub-brand-tiles__tile--a { --tile-accent: var(--color-primary); }
.sub-brand-tiles__tile--b { --tile-accent: var(--color-secondary); }

/* Logo-Slot: Bild auf max. Höhe begrenzt, linksbündig */
.sub-brand-tiles__logo {
  display: flex;
  align-items: center;
  min-height: var(--sbt-logo-h);
}
.sub-brand-tiles__logo img {
  display: block;
  max-height: var(--sbt-logo-h);
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.sub-brand-tiles__headline {
  margin: 0;
  font-family: var(--font-headline);
  font-size: var(--font-scale-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-ink);
}

/* Großer Beweis-Kennwert im Akzent */
.sub-brand-tiles__metric {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-scale-small);
  color: var(--color-ink-soft);
}
.sub-brand-tiles__metric strong {
  display: block;
  font-family: var(--font-accent);
  font-size: var(--font-scale-h2);
  font-weight: 700;
  line-height: 1.05;
  color: var(--tile-accent);
}

.sub-brand-tiles__audience {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--font-scale-small);
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}

/* CTA-Link: sitzt unten, trägt den Stretched-Link über die ganze Tile */
.sub-brand-tiles__cta {
  margin-top: auto;                    /* an den unteren Rand schieben */
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;                    /* Touch-Target */
  font-family: var(--font-body);
  font-size: var(--font-scale-body);
  font-weight: 600;
  color: var(--tile-accent);
  text-decoration: none;
}

/* Stretched-Link: das CTA-<a> deckt die gesamte Tile ab, ohne das Markup zu
   verschachteln. Genau ein Anker pro Tile bleibt fokussierbar. */
.sub-brand-tiles__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.sub-brand-tiles__arrow {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hover/Focus-within: Anhebung, Schatten, Akzent-Rahmen-Glow, Pfeil-Schub.
   :focus-within fasst die Tastatur-Navigation mit ein (Fokus liegt auf dem __cta). */
.sub-brand-tiles__tile:hover,
.sub-brand-tiles__tile:focus-within {
  transform: translateY(calc(-1 * var(--sbt-lift)));
  border-color: color-mix(in srgb, var(--tile-accent) 45%, var(--color-line));
  box-shadow: var(--shadow-soft),
              0 0 0 var(--sbt-border) color-mix(in srgb, var(--tile-accent) var(--sbt-glow), transparent);
}
.sub-brand-tiles__tile:hover .sub-brand-tiles__arrow,
.sub-brand-tiles__tile:focus-within .sub-brand-tiles__arrow {
  transform: translateX(var(--space-xs));
}

/* Sichtbarer Fokus-Ring auf dem eigentlichen Anker (A11y, Tastatur) */
.sub-brand-tiles__cta:focus-visible {
  outline: var(--space-xs) solid color-mix(in srgb, var(--tile-accent) 55%, transparent);
  outline-offset: var(--space-xs);
  border-radius: var(--radius-card);
}

/* Reduced-Motion: keine Hover-/Pfeil-Bewegung erzwingen */
@media (prefers-reduced-motion: reduce) {
  .sub-brand-tiles__tile,
  .sub-brand-tiles__arrow {
    transition: none;
  }
  .sub-brand-tiles__tile:hover,
  .sub-brand-tiles__tile:focus-within {
    transform: none;
  }
  .sub-brand-tiles__tile:hover .sub-brand-tiles__arrow,
  .sub-brand-tiles__tile:focus-within .sub-brand-tiles__arrow {
    transform: none;
  }
}