/* ============================================
   ECX 40 - Medien-Sektion
   Dunkle Sektion mit Aufzeichnungen aus der
   Mediathek. Steht auf der englischen
   Startseite an der Stelle der Podcast-Sektion
   und ist wie diese der optische Trenner
   zwischen den hellen Sektionen darueber und
   darunter.

   EIGENE DATEI, KEINE ANLEIHE BEI formate.css.
   Die Werte sind dieselben - Hintergrund,
   Rasterbreiten, Zeilenhoehen -, die Bauform
   ist es nicht: links steht hier kein
   quadratisches Cover, sondern ein Textblock,
   und die Zeilen tragen Formatkachel und
   Abspielsymbol statt einer Folgennummer.
   Dieselbe Trennung wie zwischen events.css
   und event-detail.css.

   Responsive nach docs/DECISIONS.md.
   ============================================ */

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

/* Linienbild wie bei der Podcast-Sektion: eine Ebene, screen, wenig
   Deckkraft. Zwei uebereinander machen den Hintergrund unruhig. */
.ecx-medien__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-medien__wrap { position: relative; z-index: 1; }

/* Links die Vorstellung, rechts die Zeilenliste. */
.ecx-medien__grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 48px;
  align-items: start;
}

/* ---- Vorstellung ---- */
.ecx-medien__intro { min-width: 0; }

.ecx-medien__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-medien .ecx-medien__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-medien__text {
  color: rgba(255,255,255,.78);
  font-size: 15.5px; line-height: 1.55;
  margin: 0 0 22px; max-width: 56ch;
}

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

/* ---- Zeilenliste ---- */
.ecx-medien__liste-block { min-width: 0; }

.ecx-medien .ecx-medien__liste-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-medien__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}

.ecx-medium {
  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-medium:hover { background: rgba(255,255,255,.1); }

/*
 * Feste Groesse und Grundfarbe: fehlt das Bild, bleibt eine ruhige
 * Flaeche stehen statt einer eingefallenen Zelle. Beim Entwickeln
 * liegen die Uploads nicht immer lokal vor, das ist der Normalfall.
 *
 * cover und nicht contain: die Aufzeichnungen tragen Standbilder im
 * Querformat, die in einem Quadrat mit contain als schmaler Streifen
 * mit viel Rand stuenden.
 */
.ecx-medium__bild {
  position: relative;
  display: block;
  width: 84px; height: 84px;
  border-radius: 8px;
  flex: none;
  overflow: hidden;
  background-color: #0e2237;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Formatkuerzel oben links, wie auf den Terminkarten. */
.ecx-medium__kachel {
  position: absolute; top: 4px; left: 4px;
  padding: 2px 6px; border-radius: 6px;
  background: rgba(14,34,55,.72);
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #fff;
  max-width: calc(100% - 8px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Abspielsymbol mittig, nur wo es auch etwas abzuspielen gibt. */
.ecx-medium__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.9); color: var(--ec-blue);
  transition: transform var(--dur) var(--ease);
}
.ecx-medium__play svg { width: 15px; height: 15px; fill: currentColor; transform: translateX(1px); }
.ecx-medium:hover .ecx-medium__play { transform: translate(-50%, -50%) scale(1.06); }

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

.ecx-medium__meta {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ec-red-100);
  margin-bottom: 3px;
}
.ecx-medium__punkt { opacity: .6; margin: 0 2px; }

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

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

/* ============================================
   Unter 900: untereinander
   ============================================ */
@media (max-width: 899px) {
  .ecx-medien { padding: 48px 0; }

  .ecx-medien__grid { grid-template-columns: 1fr; gap: 32px; }
  .ecx-medien__text { max-width: none; }
}

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

  /*
   * Die Zeilenliste bleibt eine Zeilenliste - nur der Knopf rutscht
   * unter Bild und Text, sonst wird die mittlere Spalte zu schmal.
   * Genau wie bei der Folgenliste, siehe formate.css.
   */
  .ecx-medium { grid-template-columns: 64px 1fr; gap: 12px; }
  .ecx-medium__bild { width: 64px; height: 64px; }
  .ecx-medium__play { width: 26px; height: 26px; }
  .ecx-medium__play svg { width: 13px; height: 13px; }
  .ecx-medium__cta { grid-column: 1 / -1; }

  /*
   * NUR DREI ZEILEN AUF SCHMALEN SCHIRMEN, wie bei der Folgenliste.
   * Die Sektion wird sonst zu lang und schiebt alles Nachfolgende weit
   * nach unten.
   *
   * Ueber CSS und nicht ueber die Abfrage, weil die Seite
   * zwischengespeichert wird - eine serverseitige Fassung muesste die
   * Bildschirmbreite raten. Der Preis ist die vierte Zeile im
   * Quelltext.
   */
  .ecx-medium:nth-child(n+4) { display: none; }


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

@media (prefers-reduced-motion: reduce) {
  .ecx-medium,
  .ecx-medium__play { transition-duration: 0s; }
  .ecx-medium:hover .ecx-medium__play { transform: translate(-50%, -50%); }
}