/* ============================================
   ECX 40 - Aus der Redaktion
   Zwei Karten: EC Magazin (blau, Link) und
   Endo-Fact (rot, kein Link).
   Werte aus dem Entwurf, Klassen mit ecx-Praefix.
   Responsive nach docs/DECISIONS.md.
   ============================================ */

.ecx-redaktion { background: var(--surface); padding: 80px 0; }
@media (max-width: 720px) { .ecx-redaktion { padding: 56px 0; } }

/* ---- Sektionskopf ---- */
.ecx-redaktion__kopf { margin-bottom: 28px; }

.ecx-redaktion__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ec-red);
}

/* font-size und color ausdruecklich: der Altbestand faerbt Ueberschriften. */
.ecx-redaktion .ecx-redaktion__titel {
  font-size: var(--t-h2); font-weight: 700; color: var(--ink);
  line-height: 1.2; margin: 14px 0 0;
}

/* ---- Die Reihe ---- */
.ecx-redaktion__reihe {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px;
  align-items: stretch;
}
/* Nur eine Karte: sie nimmt die volle Breite, statt eine Luecke zu lassen. */
.ecx-redaktion__reihe--einzeln { grid-template-columns: minmax(0, 1fr); }

/* ---- Grundform beider Karten ---- */
.ecx-promo {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid transparent;
  padding: 28px 30px;
  color: #fff;
  text-decoration: none;
  display: flex; flex-direction: column;
  min-width: 0;
}

/*
 * Das Linienbild in der unteren rechten Ecke, wie im Hero und auf den
 * Partnerseiten. mix-blend-mode: screen laesst es hell aufscheinen.
 * Seit 06.10.2026 nur noch auf der Magazinkarte - der Endo-Fact bleibt
 * einfarbig rot, siehe unten.
 */
.ecx-promo::after {
  content: ""; position: absolute; right: -120px; bottom: -140px;
  width: 340px; height: 340px;
  background: url('../../img/linien.png') center/contain no-repeat;
  mix-blend-mode: screen; pointer-events: none;
}
.ecx-promo > * { position: relative; z-index: 1; }

.ecx-promo__eyebrow {
  display: block;
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
}

/* ---- Linke Karte: EC Magazin ---- */
.ecx-promo--magazin {
  background: var(--ec-blue); border-color: var(--ec-blue);
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px; align-items: center; padding: 24px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ecx-promo--magazin::after { opacity: .8; }

/* Ohne Titelbild entfaellt die Bildspalte, siehe inc/facts-config.php. */
.ecx-promo--magazin-ohne-bild {
  grid-template-columns: minmax(0, 1fr);
  padding: 28px 30px;
}

.ecx-promo--magazin:hover,
.ecx-promo--magazin:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.ecx-promo__cover {
  display: block; line-height: 0; align-self: center;
  border-radius: var(--r-md); overflow: hidden;
}
.ecx-promo__cover img { width: 100%; height: auto; display: block; }

.ecx-promo__body {
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}

.ecx-promo__titel {
  display: block;
  font-size: 18px; font-weight: 600; color: #fff; line-height: 1.3;
}
.ecx-promo__text {
  display: block;
  font-size: var(--t-sm); line-height: 1.55;
  color: rgba(255,255,255,.78);
}

.ecx-promo__cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 6px;
  font-size: var(--t-sm); font-weight: 600; color: #fff;
}
.ecx-promo__cta .ecx-icon {
  width: 16px; height: 16px; flex: none;
  transition: transform var(--dur) var(--ease);
}
.ecx-promo--magazin:hover .ecx-promo__cta .ecx-icon,
.ecx-promo--magazin:focus-visible .ecx-promo__cta .ecx-icon { transform: translateX(4px); }

/* ---- Rechte Karte: Endo-Fact ---- */
.ecx-promo--fakt {
  background: var(--ec-red); border-color: var(--ec-red);
  /* Kein Link: deshalb auch keine Hebebewegung und kein Zeigefinger. */
  cursor: default;
}
/* Ohne Liniengrafik: die rote Karte bleibt einfarbig, Vorgabe der
   Grafikerin vom 06.10.2026. */
.ecx-promo--fakt::after { content: none; }

/*
 * Die Aussage kursiv wie im Entwurf. text-wrap: balance verteilt die
 * Zeilen gleichmaessig - bei Saetzen dieser Laenge sonst gern eine
 * letzte Zeile mit zwei Woertern.
 */
.ecx-promo__fakt {
  margin: 18px 0 0;
  font-size: 18px; font-weight: 500; font-style: italic;
  line-height: 1.6; color: #fff;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/*
 * Die Quelle: eigene Zeile, kleiner, aufrecht und mit einer feinen
 * Trennlinie darueber. Sie soll lesbar bleiben, aber nicht mit der
 * Aussage um Aufmerksamkeit ringen - deshalb margin-top: auto, damit
 * sie am Fuss der Karte sitzt, auch wenn die Aussage kurz ist.
 */
.ecx-promo__quelle {
  display: block;
  margin-top: auto; padding-top: 16px;
  font-size: var(--t-xs); font-style: normal; font-weight: 500;
  line-height: 1.45; color: rgba(255,255,255,.78);
}
.ecx-promo__quelle::before {
  content: ""; display: block;
  width: 28px; height: 1px; margin-bottom: 12px;
  background: rgba(255,255,255,.4);
}

/* ============================================
   Unter 880: die zwei Karten untereinander
   ============================================ */
@media (max-width: 880px) {
  .ecx-redaktion__reihe { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================
   Unter 640: Titelbild klein und oben
   ============================================ */
@media (max-width: 640px) {
  .ecx-redaktion__reihe { gap: 16px; }

  /*
   * COVER LINKS NEBEN DEM TEXT, auch hier (Isa, s14), seit 06.10.2026.
   * Vorher stand es als 72px-Bild ueber dem Text. Jetzt dasselbe Raster
   * wie am Desktop, nur schmaler: 96px Cover, der Text daneben. Oben
   * ausgerichtet - der Text ist hoeher als das Cover, mittig stuende es
   * verloren in der Kartenmitte.
   *
   * Der Fliesstext ("Redaktionell betreute Artikel ...") entfaellt hier,
   * seit 06.10.2026 (Isa, s14: "ggf. Fliesstext hier raus"). Neben dem
   * 96px-Cover brauchte er vier Zeilen und machte die Karte 249px hoch;
   * ohne ihn ist sie so hoch wie das Cover. Ueber 640 bleibt er stehen.
   */
  .ecx-promo--magazin {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px; align-items: start; padding: 18px;
  }
  .ecx-promo--magazin-ohne-bild { grid-template-columns: minmax(0, 1fr); padding: 22px; }

  .ecx-promo__cover { align-self: start; }
  .ecx-promo__body { gap: 6px; }
  .ecx-promo--magazin .ecx-promo__text { display: none; }
  .ecx-promo__titel { font-size: 16px; }

  .ecx-promo--fakt { padding: 22px; }
  .ecx-promo__fakt { font-size: 15px; line-height: 1.5; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ecx-promo--magazin,
  .ecx-promo__cta .ecx-icon { transition-duration: 0s; }
  .ecx-promo--magazin:hover,
  .ecx-promo--magazin:focus-visible { transform: none; }
}