/* Styling fuer static/js/lightbox.js (ersetzt jquery.fancybox) */

.cnl-lightbox {
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  background: transparent;
  overflow: visible;
}

.cnl-lightbox::backdrop {
  background: rgba(0, 0, 0, .82);
}

.cnl-lightbox img {
  display: block;
  max-width: 92vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: .5rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .6);
}

.cnl-lightbox-close {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  z-index: 1;
  padding: .5rem;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .6);
  opacity: 1;
}

/*
  Blaetterpfeile.

  Sie sitzen INNEN am Bildrand und nicht ausserhalb des Dialogs: der Dialog ist
  nur so breit wie das Bild, und bei einem querformatigen Backdrop auf 92vw
  waere aussen kein Platz mehr. Die dunkle Scheibe darunter haelt sie auf
  hellen wie auf dunklen Bildstellen lesbar.

  top/transform statt align-items: der Dialog enthaelt neben dem Bild auch die
  Bildunterschrift - zentriert man ueber die volle Hoehe, rutschen die Pfeile
  um deren halbe Hoehe nach unten.
*/
.cnl-lightbox-pfeil {
  position: absolute;
  top: 40%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  background-color: rgba(0, 0, 0, .55);
  transition: background-color .15s ease-in-out;
}

.cnl-lightbox-pfeil:hover,
.cnl-lightbox-pfeil:focus-visible {
  background-color: rgba(0, 0, 0, .85);
}

.cnl-lightbox-pfeil.zurueck { left: .75rem; }
.cnl-lightbox-pfeil.weiter  { right: .75rem; }

/* [hidden] verliert gegen das display:flex darueber - ohne diese Zeile stuenden
   die Pfeile auch bei einem einzelnen Bild da */
.cnl-lightbox-pfeil[hidden] { display: none; }

@media (max-width: 575.98px) {
  .cnl-lightbox-pfeil { width: 2.5rem; height: 2.5rem; font-size: 1.25rem; }
  .cnl-lightbox-pfeil.zurueck { left: .25rem; }
  .cnl-lightbox-pfeil.weiter  { right: .25rem; }
}

.cnl-lightbox-meta {
  margin-top: .5rem;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

/* Trefferliste fuer static/js/suche.js (ersetzt typeahead.js) */

.cnl-suche {
  position: relative;
}

.cnl-suche-treffer {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  z-index: 1050;
  min-width: 22rem;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .3);
}

/*
  Ein Treffer ist eine Zeile aus Plakat, Titel und rechts Jahr und Medium.
  Steht hier und nicht in frontend.css, weil der Adminbereich dasselbe
  Suchfeld benutzt und diese Datei ebenfalls laedt.
*/
.cnl-suche-treffer .list-group-item {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.cnl-suche-treffer-bild {
  flex: 0 0 auto;
  width: 2rem;
  height: 3rem;
  object-fit: cover;
  border-radius: .2rem;
  background: var(--bs-secondary-bg);
}

.cnl-suche-treffer .cnl-treffer-titel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cnl-suche-treffer .cnl-treffer-meta {
  margin-left: auto;
  font-size: .75rem;
  opacity: .75;
  white-space: nowrap;
}