/* ============================================
   ECX 40 - Formate
   Dunkle Sektion mit der neuesten Podcastfolge.
   Sie ist zugleich der optische Trenner zwischen
   den hellen Sektionen darueber und darunter.
   Responsive nach docs/DECISIONS.md.
   ============================================ */

.ecx-formate {
  position: relative;
  background: var(--ec-blue);
  color: #fff;
  overflow: hidden;
  padding: 72px 0;
}

/*
 * Linienbild als zweite Ebene, dezent. Der Entwurf legt hier zwei
 * Ebenen uebereinander (::before und ::after) - eine reicht, sonst wird
 * der Hintergrund unruhig und der Text schwerer lesbar.
 * Gleiche Machart wie bei den Hero-Slides: screen und wenig Deckkraft.
 */
.ecx-formate__lines {
  position: absolute;
  right: -260px;
  bottom: -300px;
  width: 900px;
  height: 900px;
  background: url('../../img/linien.png') no-repeat;
  background-size: contain;
  opacity: .8;
  mix-blend-mode: screen;
  pointer-events: none;
}

.ecx-formate__wrap { position: relative; z-index: 1; }

/*
 * Links das Format, rechts die Folgenliste.
 *
 * Kommt das Journal-Scan-Format dazu, wird es als drittes Kind
 * eingehaengt. Am Markup ist dann nichts zu aendern, im CSS wird aus
 * "380px 1fr" ein "380px 1fr 1fr" - oder das Format bekommt eine eigene
 * Zeile darunter, je nachdem wie viel Platz es braucht.
 */
.ecx-formate__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: start;
}

/* ---- Podcast ---- */
/* Format-Vorstellung: Cover oben, Text darunter. */
.ecx-podcast {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/*
 * Feste Groesse und Grundfarbe: fehlt das Cover, bleibt eine ruhige
 * Flaeche stehen statt einer eingefallenen Zelle. Beim Entwickeln liegen
 * die Uploads nicht lokal vor, das ist der Normalfall.
 */
.ecx-podcast__cover {
  display: block;
  aspect-ratio: 1;
  width: 100%;
  max-width: 260px;
  border-radius: var(--r-2xl);
  /* Grundfarbe der Cover: ein 16:9-Cover steht hier ganz und ohne
     sichtbare Streifen, ein quadratisches fuellt den Rahmen.
     DECISIONS Punkt 40. */
  background-color: var(--ec-blue-700);
  /* contain wie bei den uebrigen Karten, siehe events-seite.css. */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 30px 60px rgba(0,0,0,.4);
  transition: transform var(--dur) var(--ease);
}
.ecx-podcast__cover:hover { transform: translateY(-3px); }

.ecx-podcast__body { min-width: 0; }

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

/* Farbe und Groesse ausdruecklich: der Altbestand faerbt h2. */
.ecx-formate .ecx-formate__titel {
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 700; color: #fff;
  line-height: 1.2; margin: 10px 0 14px;
  overflow-wrap: break-word;
}

.ecx-podcast__text {
  color: rgba(255,255,255,.78);
  font-size: 15.5px; line-height: 1.55;
  margin: 0 0 22px; max-width: 56ch;
}

.ecx-podcast__cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- Folgenliste zum Stoebern ----
   Bauform aus dem Entwurf (.js-row), dort fuer die Studien gedacht.
   Die Folge, die der Hero zeigt, fehlt hier - siehe inc/formate.php. */
.ecx-folgen { min-width: 0; }

.ecx-formate .ecx-folgen__kopf {
  font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.7);
  margin: 0 0 14px;
}

.ecx-folgen__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}

.ecx-folge {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 16px;
  align-items: center;
  background: rgba(255,255,255,.05);
  border-radius: var(--r-md);
  padding: 12px;
  transition: background var(--dur) var(--ease);
}
.ecx-folge:hover { background: rgba(255,255,255,.1); }

/*
 * Feste Groesse und Grundfarbe: fehlt das Cover, bleibt eine ruhige
 * Flaeche stehen statt einer eingefallenen Zelle.
 */
.ecx-folge__bild {
  display: block;
  width: 84px; height: 84px;
  border-radius: 8px;
  flex: none;
  /* Wie beim grossen Cover: --ec-blue-700, siehe oben. */
  background-color: var(--ec-blue-700);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.ecx-folge__body { min-width: 0; }

/*
 * FOLGENNUMMER ALS ROTER CHIP, seit 06.10.2026 (Isa, s11).
 *
 * Erst stand die Nummer als rote Schrift auf der blauen Karte - 2,22:1,
 * kaum lesbar. Dann weiss auf --ec-red (4,07:1 - unter 4,5:1, und 14px
 * fett zaehlt nach WCAG noch nicht als grosse Schrift, das waeren 14
 * PUNKT = 18,67px).
 *
 * JETZT WEISS AUF --ec-red-600: 5,04:1, erfuellt AA fuer normale Schrift
 * bei jeder Groesse. Im Ton kaum von --ec-red zu unterscheiden. Fett und
 * 14px bleiben. DECISIONS Punkt 45.
 *
 * inline-block, damit der Chip so breit ist wie sein Text.
 */
.ecx-folge__nummer {
  display: inline-block;
  font-size: 14px; font-weight: 700; letter-spacing: .06em; line-height: 1.3;
  text-transform: uppercase;
  color: #fff; background: var(--ec-red-600);
  padding: 2px 8px; border-radius: 4px;
  margin-bottom: 6px;
}

/* "Alle Folgen" gibt es nur unter 640, siehe parts/formate.php. */
.ecx-folgen__alle { display: none; }

.ecx-formate .ecx-folge__titel {
  font-size: 14px; font-weight: 600; color: #fff;
  line-height: 1.3; margin: 0 0 4px;
  overflow-wrap: break-word;
}

.ecx-folge__text {
  font-size: 12px; color: rgba(255,255,255,.72);
  line-height: 1.5; margin: 0;
}

.ecx-folge__cta { white-space: nowrap; }

/* ============================================
   Unter 900: Cover oben, Text darunter, zentriert
   ============================================ */
@media (max-width: 899px) {
  .ecx-formate { padding: 48px 0; }

  /* Untereinander: erst das Format, darunter die Liste. */
  .ecx-formate__grid { grid-template-columns: 1fr; gap: 32px; }

  .ecx-podcast { align-items: flex-start; }
  .ecx-podcast__cover { max-width: 240px; }
  .ecx-podcast__text { max-width: none; }
}

@media (max-width: 640px) {
  .ecx-formate { padding: 40px 0; }

  /*
   * Die Zeilenliste bleibt eine Zeilenliste - nur der Knopf rutscht
   * unter Bild und Text, sonst wird die mittlere Spalte zu schmal.
   */
  .ecx-folge { grid-template-columns: 64px 1fr; gap: 12px; }
  .ecx-folge__bild { width: 64px; height: 64px; }
  .ecx-folge__cta { grid-column: 1 / -1; }

  /*
   * NUR DIE AKTUELLE FOLGE AUF SCHMALEN SCHIRMEN, seit 06.10.2026
   * (Isa, s13). Vorher drei. Darunter der Link "Alle Folgen".
   *
   * Ueber CSS und nicht ueber die Abfrage, weil die Seite
   * zwischengespeichert wird - eine serverseitige Fassung muesste die
   * Bildschirmbreite raten. Der Preis sind drei Zeilen im Quelltext.
   */
  .ecx-folge:nth-child(n+2) { display: none; }

  .ecx-folgen__alle {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; margin-top: 6px;
    color: #fff; font-weight: 600; font-size: var(--t-sm); text-decoration: none;
  }
  .ecx-formate .ecx-folgen__alle:hover { color: #fff; }
  .ecx-folgen__alle .ecx-icon { width: 16px; height: 16px; }

  /*
   * COVER GROESSER (Isa, s12): 260px wie am Desktop statt 180. Der Knopf
   * "Alle Episoden" steht bereits unter dem Beschreibungstext - Isa
   * kannte vermutlich einen aelteren Stand.
   */
  .ecx-podcast__cover { max-width: 260px; }

  /* Das Linienbild kleiner, sonst liegt es auf halber Textbreite. */
  .ecx-formate__lines {
    width: 560px; height: 560px;
    right: -200px; bottom: -220px;
    opacity: .3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecx-podcast__cover,
  .ecx-folge { transition-duration: 0s; }
}