/*
 * download-list.css — die Download-Liste (Arbeitspaket 2, T6 — M10 `download-list`).
 *
 * Gehört zum Baustein M10 der Divi Library. Das Markup steht in
 * template-parts/download-list.php und kommt über den Shortcode [wildisland_downloads] in ein
 * Divi-Code-Modul — dasselbe Muster wie Kopf und Fuß aus AP 1: Hülle im Builder, Markup im
 * Repo (AI/architecture/divi-fallstricke.md, Abschnitt 1).
 *
 * Warum das CSS hier steht und nicht am Modul: E7 des Plans. Modulgebundenes Custom-CSS wird
 * beim Duplizieren mitkopiert und ist danach nicht mehr zentral änderbar — genau der Drift,
 * den die Bibliothek verhindern soll. Divis Feld „Custom CSS" scheidet aus demselben Grund
 * aus wie in AP 1: CSS in einem Datenbankfeld ist kein übergebbarer Quellcode
 * (Angebot 2.1 r, 4.4).
 *
 * Alle Werte kommen aus tokens.css und sind dort am GERENDERTEN Bestand gemessen
 * (`scripts/measure-bestand.sh 1920 downloads`), nicht aus dessen Stylesheet gelesen — der
 * Unterschied hat in AP 1 die Versalien-H2 erzeugt (E11).
 *
 * Zwei Klassen im Selektor, durchgehend. Divi setzt auf Listen im Builder-Inhalt
 * `#left-area ul, .entry-content ul, .et-l--body ul { list-style-type: disc; padding: 0 0 23px
 * 1em; line-height: 26px }` — Klasse plus Element. Ein einklassiges `.wi-downloads__list`
 * verlöre dagegen, unabhängig von der Ladereihenfolge; das ist die Spezifitätsregel aus
 * divi-fallstricke.md, Abschnitt 2, dort dreimal gelernt. Deshalb trägt die Liste einen
 * Behälter, dessen Klasse in jedem Selektor mitläuft.
 *
 * Die Breakpoints stehen als Zahl in den @media-Regeln, nicht als Token: CSS löst Custom
 * Properties in Medienabfragen nicht auf, der Verweis wäre wirkungslos und niemand merkte es.
 * Es sind die Stufen des Bestands (1100 / 550) und nicht die von Divi (980 / 767) — die Liste
 * ist eigenes Markup und keine Divi-Zeile, hier gibt es keinen Grund auszuweichen.
 */

/* ------------------------------------------------------------------ *
 * Das Raster
 * ------------------------------------------------------------------ */

.wi-downloads .wi-downloads__list {
  display: flex;
  flex-wrap: wrap;

  /* Listen-Reset gegen Divis Vorgabe (siehe Kopfkommentar). `padding: 0` nimmt zugleich die
   * 23px unten weg, die dort mit den Punkten zusammen kommen. */
  margin: 0;
  padding: 0;
  list-style: none;
}

.wi-downloads .wi-downloads__item {
  /* Der Spaltenanteil steht doppelt, wie im Bestand: `flex-basis` sagt, wie breit der Eintrag
   * beginnt, `max-width` verhindert, dass `flex-grow` einer angebrochenen letzten Zeile ihn
   * aufzieht. Ohne die zweite Angabe stünde ein einzelner Eintrag über die ganze Breite. */
  flex: 0 0 var(--wi-downloads-column);
  max-width: var(--wi-downloads-column);

  /* Das Polster liegt INNERHALB des Spaltenanteils — sonst ergäben drei Spalten zu je 33,333 %
   * plus je 30px Polster mehr als 100 % und die dritte Spalte bräche um. Bootstrap setzt im
   * Bestand `box-sizing: border-box` global; hier steht es an der Zelle, damit die Regel nicht
   * davon abhängt, ob Divi dieselbe Normalisierung mitbringt. */
  box-sizing: border-box;
  margin: 0 0 var(--wi-downloads-item-space);
  padding: 0 var(--wi-downloads-gutter);

  /*
   * Vorschau und Text nebeneinander — als Flex-Zeile und nicht als gefloatetes Bild.
   *
   * Der Bestand macht es mit `img { float: left }` und `li div { overflow: hidden }`: das
   * gefloatete Bild links, der Textblock daneben als eigener Blockformatierungskontext. Das
   * Ergebnis ist dasselbe Bild, der Weg dorthin ist der ältere. Wichtig für die Abgrenzung zu
   * E4: hier UMFLIESST kein Text ein Bild — der `overflow: hidden`-Block des Bestands
   * verhindert das gerade —, es stehen zwei Blöcke nebeneinander. Der Verzicht auf den Float
   * ändert nichts am Bild und spart den Umbruchfall, in dem ein langer Dateiname unter das
   * Bild rutscht.
   */
  display: flex;
  align-items: flex-start;
  gap: var(--wi-downloads-preview-gap);
}

@media only screen and (max-width: 1100px) {
  .wi-downloads .wi-downloads__item {
    flex-basis: var(--wi-downloads-column-medium);
    max-width: var(--wi-downloads-column-medium);
  }
}

@media only screen and (max-width: 550px) {
  .wi-downloads .wi-downloads__item {
    flex-basis: var(--wi-downloads-column-narrow);
    max-width: var(--wi-downloads-column-narrow);
  }
}

/* ------------------------------------------------------------------ *
 * Vorschau
 * ------------------------------------------------------------------ */

/* Der Bildlink schrumpft nicht mit: ohne `flex-shrink: 0` staucht ein langer Dateiname das
 * Vorschaubild schmaler als seine 80px, und die Liste steht danach auf ungleichen Breiten. */
.wi-downloads .wi-downloads__figure {
  flex: 0 0 auto;
  line-height: 0;
}

.wi-downloads .wi-downloads__preview {
  display: block;
  /* Nur eine Obergrenze, keine Breite: ein Vorschaubild, das schmaler als 80px erzeugt wurde,
   * soll nicht hochskaliert werden. Der Bestand hält es genauso. */
  max-width: var(--wi-downloads-preview-width);
  height: auto;
}

/* ------------------------------------------------------------------ *
 * Text
 * ------------------------------------------------------------------ */

.wi-downloads .wi-downloads__body {
  /* `min-width: 0` ist die Bedingung dafür, dass ein langer Dateiname ohne Leerzeichen die
   * Zelle nicht aufsprengt: ein Flex-Kind hat als Mindestbreite seinen Inhalt, und ein Wort,
   * das breiter als die Spalte ist, schiebt sonst das ganze Raster auseinander. */
  min-width: 0;
  flex: 1 1 auto;
}

.wi-downloads .wi-downloads__name {
  display: block;
  font-size: var(--wi-downloads-name-size);
  line-height: var(--wi-downloads-name-line-height);
  color: var(--wi-color-accent-hover);

  /* Dateinamen sind lang und enthalten keine Trennstellen. Ohne den Umbruch steht ein
   * „DanubeInside_Magazine_2022_final" über die Spaltenkante hinaus. */
  overflow-wrap: anywhere;
}

.wi-downloads .wi-downloads__description {
  display: block;
  font-size: var(--wi-downloads-text-size);
  line-height: var(--wi-downloads-text-line-height);
  color: var(--wi-downloads-description-color);
}

/*
 * Dateityp und -größe. Der einzige Teil des Bausteins, den der Bestand NICHT hat — T6 verlangt
 * ihn ausdrücklich, und er ist der Grund, warum M10 nicht einfach eine Liste von Links ist:
 * wer auf einen Link klickt, soll vorher wissen, dass 12 MB PDF kommen.
 *
 * Die Farbe erbt vom Sektionsmodus statt eigene mitzubringen (weiß im Dunkelmodus, `#707070`
 * im Hellmodus). Das ist die Regel aus der Definition of Done — kein Baustein bringt eigene
 * Farbwerte mit — und zugleich der Unterschied zur Beschreibung darüber: deren Schwarz ist ein
 * gemessener Bestandswert, hier gibt es nichts zu messen.
 */
.wi-downloads .wi-downloads__meta {
  display: block;
  font-size: var(--wi-downloads-text-size);
  line-height: var(--wi-downloads-text-line-height);
  color: inherit;
}

/* ------------------------------------------------------------------ *
 * Der Hinweis für die Redaktion
 * ------------------------------------------------------------------ */

/*
 * Sichtbar nur für angemeldete Bearbeiter, und nur solange der Baustein leer ist oder eine
 * Datei-ID ins Leere zeigt. Ein Baustein, der bei falscher ID einfach nichts ausgibt, sieht im
 * Builder aus wie einer, der noch nicht befüllt wurde — dieselbe Sorte stiller Fehlschlag wie
 * das Preset, das seine Klasse trägt und keine Regel hat (E11).
 */
.wi-downloads .wi-downloads__notice {
  display: block;
  font-size: var(--wi-downloads-text-size);
  line-height: var(--wi-downloads-text-line-height);
  color: inherit;
  border: var(--wi-border-width-button) dashed currentcolor;
  padding: var(--wi-downloads-gutter);
}