/*
  Frontend MovieDB 3 - Filmliste, Filterleiste, Kacheln, Statistik.

  Bewusst NICHT in movie_db.css: die Datei laedt auch der Adminbereich. Was hier
  steht, gilt nur fuer die oeffentlichen Seiten.

  Farben kommen durchgehend aus den Bootstrap-5.3-Variablen (--bs-*). Die tauscht
  Bootstrap beim Themawechsel selbst aus, damit stimmen hell und dunkel ohne
  zweiten Regelsatz. Feste Farbwerte stehen nur dort, wo etwas ueber einem Bild
  liegt und deshalb in beiden Themen dunkel bleiben muss.
*/

/* ------------------------------------------------------------- seitenabstand */

/*
  Die Hoehe der fixed-top Navbar. movie_db.css hatte hier 56px fest verdrahtet -
  das stimmt nur, solange die Menuepunkte in eine Zeile passen. Sobald sie
  umbrechen, verschwindet der Seitenanfang unter der Leiste. Den tatsaechlichen
  Wert traegt static/js/navbar_hoehe.js ein; der Startwert deckt die Zeit bis
  dahin ab (gleiches Vorgehen wie in admin.css).
*/
:root {
  --cnl-navbar-h: 56px;
}

html body {
  padding-top: var(--cnl-navbar-h);
}

/* Sprungziele (#...) und Nachladen sollen nicht unter der Leiste landen */
html {
  scroll-padding-top: calc(var(--cnl-navbar-h) + 1rem);
}

/* Abstand am Seitenanfang - ersetzt die <br><br> in den Vorlagen */
.cnl-seite {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

/* ------------------------------------------------------------ filmkacheln */

/*
  Das Raster kommt von CSS Grid, nicht von Bootstrap-Spalten. Vorher stand an
  den Kacheln "col-6 col-sm-4 col-lg-2 col-md-2": drei Kacheln bei sm, sechs bei
  md - ein Sprung, den niemand wollte. auto-fill mit minmax() legt so viele
  Spalten an, wie hineinpassen, und braucht dafuer keinen einzigen Breakpoint.
*/
.cnl-filme {
  display: grid;
  /* 6.5rem, nicht 7: auf einem 375px-Schirm passen damit drei Plakate in die
     Reihe statt zwei - bei zwei war die Kachel so gross, dass pro Bildschirm
     vier Filme sichtbar waren */
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 1rem .5rem;
}

@media (min-width: 576px) {
  .cnl-filme { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1.25rem 1rem; }
}

@media (min-width: 1200px) {
  .cnl-filme { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
}

/* dichter: mehr Kacheln je Reihe, gleiche Bausteine */
.cnl-filme.cnl-dicht {
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
}

/* Die Kachel ist der Rahmen, der Link darin das Anklickbare - der Merken-Knopf
   liegt daneben und darf deshalb nicht mitverlinkt sein. */
.cnl-kachel {
  position: relative;
}

.cnl-kachel-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* -------------------------------------------------------------- merkliste */

.cnl-merken {
  position: absolute;
  top: .35rem;
  left: .35rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* liegt auf dem Plakat und bleibt darum in beiden Themen dunkel */
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: .95rem;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s ease, background-color .15s ease;
}

/* auf dem Touchscreen gibt es kein Hover - dort ist der Knopf immer sichtbar */
.cnl-kachel:hover .cnl-merken,
.cnl-merken:focus-visible,
.cnl-merken.cnl-ist-gemerkt {
  opacity: 1;
}

@media (hover: none) {
  .cnl-merken { opacity: 1; }
}

.cnl-merken:hover { background: rgba(0, 0, 0, .78); }

.cnl-merken.cnl-ist-gemerkt {
  background: rgba(220, 53, 69, .9);
}

.cnl-merken:disabled { opacity: .5; }

.cnl-kachel-bild {
  position: relative;
  display: block;
}

/*
  aspect-ratio + object-fit: die Kachel hat ihre endgueltige Hoehe, bevor das
  Plakat da ist. Vorher hatte das <img> weder Format noch Masse - jedes
  nachgeladene Bild hat die Liste unter dem Finger verschoben.
*/
.cnl-kachel img {
  display: block;
  width: 100%;
  /* height:auto ist Pflicht, nicht Kosmetik: am <img> stehen width="320"
     height="480" (damit der Platz auch ohne CSS stimmt). Diese Attribute setzen
     eine echte Hoehe, und solange die gilt, hat aspect-ratio keine Wirkung -
     die Kacheln waren dadurch 480px hoch statt 1,5x ihrer Breite. */
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: .5rem;
  background: var(--bs-secondary-bg);
  transition: transform .18s ease, box-shadow .18s ease;
}

.cnl-kachel:hover img,
.cnl-kachel-link:focus-visible img {
  transform: translateY(-4px);
  box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .4);
}

/* Tastatur: der Fokus muss sichtbar sein, sonst ist die Liste nicht bedienbar */
.cnl-kachel-link:focus-visible,
.cnl-merken:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 3px;
  border-radius: .6rem;
}

.cnl-kachel .cnl-titel {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .5rem;
  font-size: .85rem;
  line-height: 1.25;
  /* Platz fuer zwei Zeilen freihalten: sonst rutscht die Jahreszeile bei
     einzeiligen Titeln hoch und steht in derselben Reihe unterschiedlich hoch */
  min-height: 2.5em;
}

.cnl-kachel .cnl-unterzeile {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .78rem;
  color: var(--bs-secondary-color);
}

/* Abzeichen auf dem Plakat: Medium, Steelbook, gesehen */
.cnl-abzeichen {
  position: absolute;
  top: .35rem;
  right: .35rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  pointer-events: none;
}

.cnl-abzeichen span {
  /* liegt auf dem Plakat und bleibt deshalb in beiden Themen dunkel */
  padding: .1rem .35rem;
  border-radius: .3rem;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .02em;
  backdrop-filter: blur(2px);
}

.cnl-abzeichen .cnl-uhd { background: rgba(151, 71, 255, .85); }
.cnl-abzeichen .cnl-bd  { background: rgba(13, 110, 253, .82); }
.cnl-abzeichen .cnl-dvd { background: rgba(33, 37, 41, .82); }

/*
  Startseite, Stil "Neuzugänge": nur Plakat und Titel. Ohne Unterzeile gibt es
  nichts mehr, gegen das eine zweite Titelzeile ausgerichtet werden müsste -
  der Titel bleibt deshalb einzeilig und wird abgeschnitten. Die
  Reserve (min-height) faellt damit ebenfalls weg.
*/
.cnl-filme-schlicht .cnl-titel {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 0;
}

/*
  Startseite, Stil "Klassisch": das Plakat in der Karte.
  height:auto ist hier dasselbe Muss wie bei der Kachel oben - am <img> stehen
  width/height, und diese Attribute setzen eine echte Hoehe. Ohne die Regel war
  das Plakat 795 Pixel hoch, egal wie breit die Karte war: lang gezogen.
  aspect-ratio + object-fit halten daneben das Format, auch wenn die Datei
  nicht genau 2:3 ist.
*/
.cnl-klassisch-bild {
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .cnl-kachel img { transition: none; }
  .cnl-kachel:hover img,
  .cnl-kachel-link:focus-visible img { transform: none; }
}

/* ------------------------------------------------------------ filterleiste */

.cnl-filter {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  padding: .85rem;
}

.cnl-filter select,
.cnl-filter input[type="search"] {
  font-size: .9rem;
}

/*
  Unterhalb von lg sind die Felder eingeklappt (Bootstrap-Collapse), ab lg stehen
  sie immer offen. Das muss hier stehen und nicht als d-lg-flex am Element:
  Bootstraps ".collapse:not(.show)" besteht aus zwei Klassen und schlaegt jede
  einklassige Utility. Drei Klassen gewinnen wieder.
*/
@media (min-width: 992px) {
  .cnl-filter-felder.collapse:not(.show) {
    display: flex;
  }
}

/* aktive Filter als entfernbare Marken */
.cnl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
}

.cnl-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .6rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 2rem;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-size: .82rem;
  text-decoration: none;
}

.cnl-chip:hover {
  border-color: var(--bs-danger);
  color: var(--bs-danger);
}

.cnl-chip .cnl-chip-art {
  color: var(--bs-secondary-color);
}

/* --------------------------------------------------------------- tabelle */

/* Tabellenkopf bleibt beim Blaettern sichtbar */
.cnl-tabelle thead th {
  position: sticky;
  top: calc(var(--cnl-navbar-h) - 1px);
  z-index: 2;
  background: var(--bs-body-bg);
  white-space: nowrap;
}

/* Spaltenkoepfe sortieren: in der Filmtabelle serverseitig ueber einen Link, in
   der Studiotabelle im Browser ueber eine Schaltflaeche. Beide sehen gleich aus. */
.cnl-tabelle thead a,
.cnl-tabelle thead button {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.cnl-tabelle thead button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
}

.cnl-tabelle thead a:hover,
.cnl-tabelle thead button:hover { text-decoration: underline; }

/* die Zeile ist keine Schaltflaeche mehr - der Titel ist ein echter Link.
   Dasselbe gilt seit der CSP-Umstellung fuer die Besetzungs- und Regietabellen
   der Filmseite (.personen, erste Spalte - die zweite traegt Abzeichen, die ihre
   eigene Farbe behalten) und fuer die Karte "Film bearbeiten" (#film_aktionen).
   Kein Link-Blau: die Zeilen sollen wie Tabellenzeilen aussehen, dass sie
   anklickbar sind, zeigt erst die Unterstreichung beim Ueberfahren. */
.cnl-tabelle td a,
.personen td:first-child a,
#film_aktionen td a {
  color: inherit;
  text-decoration: none;
}

.cnl-tabelle td a:hover,
.personen td:first-child a:hover,
#film_aktionen td a:hover { text-decoration: underline; }

.cnl-tabelle tbody tr:hover { background: var(--bs-tertiary-bg); }

/*
  Die Karte "Film bearbeiten", solange niemand angemeldet ist.

  Vorher stand am <div> ein style="opacity:0.7" - die ganze Karte auf sieben
  Zehnteln, samt Rahmen, Kopfzeile und Text. Auf der Filmseite laeuft dahinter
  die Backdrop-Diashow, die Karte war also nicht "gedaempft", sondern
  durchsichtig: der Film schien durch seine eigene Bearbeiten-Karte.

  Gedaempft heisst hier deshalb: eine ruhigere Flaeche und blassere Schrift,
  beides deckend. Die Aussage bleibt dieselbe - "das koennen Sie gerade nicht" -,
  das Bild dahinter bleibt draussen.
*/
.cnl-karte-gedaempft {
  background-color: var(--bs-secondary-bg);
  color: var(--bs-secondary-color);
}

.cnl-karte-gedaempft .card-header {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-secondary-color);
}

/* -------------------------------------------------------------- studio-/personenkarten */

.cnl-karten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 1.25rem 1rem;
}

.cnl-karte {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

.cnl-karte img {
  display: block;
  width: 100%;
  /* siehe .cnl-kachel img: ohne height:auto gewinnt das height-Attribut */
  height: auto;
  object-fit: cover;
  border-radius: .5rem;
  background: var(--bs-secondary-bg);
  transition: transform .18s ease;
}

.cnl-karte.cnl-hoch img { aspect-ratio: 2 / 3; }
.cnl-karte.cnl-quadrat img { aspect-ratio: 1 / 1; object-fit: contain; padding: .35rem; background: var(--bs-tertiary-bg); }

.cnl-karte:hover img { transform: translateY(-3px); }

/*
  display:block ist der Punkt, nicht die Kuerzung: die Beschriftung ist ein
  <span> und war damit inline - auf inline-Elementen wirken weder margin-top
  noch overflow/text-overflow. "Constantin / Highlight Communications" lief
  deshalb ungekuerzt aus der Karte heraus und schob sich ueber die Nachbarn,
  und die Filmzahl stand in derselben Zeile wie der Name.
*/
.cnl-karte .cnl-karte-titel {
  display: block;
  margin-top: .45rem;
  font-size: .85rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnl-karte .cnl-karte-zusatz {
  display: block;
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

/* --------------------------------------------------- umschalter karten/tabelle

  Welche Ansicht gilt, steht als data-cnl-ansicht am Rahmen der Seite - gesetzt
  von einem kurzen Skript direkt hinter dem oeffnenden Element, noch bevor der
  Inhalt geparst ist. Ueber d-none per DOMContentLoaded waere die Vorgabe erst
  sichtbar und dann weggeschaltet worden: ein Aufblitzen der Karten bei jedem
  Aufruf, wer die Tabelle gewaehlt hat.
*/
[data-cnl-ansicht="karten"] .cnl-ansicht-tabelle,
[data-cnl-ansicht="tabelle"] .cnl-ansicht-karten { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cnl-karte img { transition: none; }
  .cnl-karte:hover img { transform: none; }
}