/* ============================================
   ECX 40 - Partner
   Logoreihe am Fuss der Startseite.
   Werte aus dem Entwurf, Klassen mit ecx-Praefix.
   Responsive nach docs/DECISIONS.md.
   ============================================ */

.ecx-partner {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding: 56px 0;
}

.ecx-partner .ecx-partner__titel {
  text-align: center;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-3);
  letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 32px;
}

/*
 * Flexbox statt Grid, und das ist hier der springende Punkt: es sind elf
 * Kacheln, zehn Logos und die Einladung. Elf geht durch keine
 * Spaltenzahl glatt auf - im Raster bliebe in der letzten Reihe eine
 * Luecke am rechten Rand stehen und saehe nach Fehler aus. Mit
 * flex-wrap und justify-content:center sind angebrochene Reihen mittig
 * und wirken gewollt.
 */
.ecx-partner__reihe {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px;
}

/*
 * Feste Kastenhoehe fuer alle. Die Logos sind zwischen 1:1,3 (Norgine)
 * und 1:6,1 (STERIS) breit - ohne gemeinsamen Kasten stuenden sie voellig
 * unterschiedlich gross nebeneinander.
 *
 * 6 Kacheln je Reihe wie im Entwurf. Die Breite kommt aus dem Anteil
 * abzueglich des Zwischenraums; 16px Abstand mal 5 Luecken auf 6 Spalten
 * sind rund 13,3px, die jeder Kachel fehlen.
 *
 * Zur Hoehe von 76px: Der Entwurf hat 56. Die hochformatigen Marken
 * (Norgine 1:1,3, COOK 1:1,5) werden von der Hoehe begrenzt und standen
 * bei 64px sichtbar kleiner da als die uebrigen. Erhoehen kostet nichts -
 * die breiten Logos haengen ohnehin an der Breite - und bringt Norgine
 * und COOK auf eine vergleichbare optische Groesse. Einzelne Logos zu
 * skalieren waere der falsche Weg: dann muesste jedes neue Logo von Hand
 * eingemessen werden.
 */
.ecx-partner__kachel {
  flex: 0 0 calc(16.666% - 13.34px);
  height: 76px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 10px;
  border-radius: var(--r-md);
  background: transparent;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* Dezent: der Kasten hebt sich nur beim Zeigen vom Grund ab. */
.ecx-partner__kachel:hover {
  background: var(--surface);
  transform: translateY(-2px);
}

/*
 * contain und mittig: kein Logo wird beschnitten oder verzerrt.
 * Ausdruecklich KEIN Graustufenfilter - Partner zahlen fuer Sichtbarkeit,
 * ihre Farben gehoeren dazu.
 */
.ecx-partner__logo {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}

/* Rueckfall ohne Logo: der Name im Kasten. */
.ecx-partner__name {
  font-size: var(--t-sm); font-weight: 700; color: var(--ink-2);
  text-align: center; line-height: 1.25;
  overflow-wrap: break-word;
}

/*
 * Die Einladung ist keine Firma. Gestrichelter Rand statt Logo: das
 * unterscheidet sie auf einen Blick von den Partnern, ohne dass sie
 * lauter waere als diese.
 */
.ecx-partner__kachel--werden {
  gap: 8px;
  border: 1px dashed var(--ink-4);
  color: var(--ink-3);
  font-size: var(--t-xs); font-weight: 600;
  text-align: center; line-height: 1.25;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ecx-partner__kachel--werden:hover {
  border-color: var(--ec-red);
  color: var(--ec-red);
}
.ecx-partner__plus { font-size: 16px; font-weight: 700; line-height: 1; }

/* ---- Unter 1080: vier je Reihe ---- */
@media (max-width: 1080px) {
  .ecx-partner__kachel { flex: 0 0 calc(25% - 12px); }
}

/* ---- Unter 900: drei je Reihe ---- */
@media (max-width: 899px) {
  .ecx-partner__kachel { flex: 0 0 calc(33.333% - 10.67px); }
}

/*
 * Unter 640 zwei je Reihe, nicht drei. Bei 375px Bildschirmbreite waere
 * eine Kachel zu dritt nur rund 100px breit - die breiten Logos (STERIS,
 * OLYMPUS) staenden dann als 17px hohe Striche da. Zu zweit bleiben rund
 * 160px, damit sind sie lesbar. Der Preis sind sechs Reihen statt vier.
 */
@media (max-width: 640px) {
  .ecx-partner__kachel { flex: 0 0 calc(50% - 8px); height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecx-partner__kachel { transition-duration: 0s; }
  .ecx-partner__kachel:hover { transform: none; }
}