/* ══════════════════════════════════════════════════════════════════════
   FKK MONTE CARLO — css/templates/event.css
   Einzelne Veranstaltung: das Plakat unter dem Seitenkopf.

   Wird nach der Konvention des PageLoaders allein für das Template
   „event“ geladen — also genau auf /events/{id} und nirgends sonst.
   ══════════════════════════════════════════════════════════════════════ */

.evfig{
  /* Oben eng an den Seitenkopf, unten nur so viel Luft, dass der
     folgende Abschnitt mit seinem eigenen Innenabstand nicht doppelt
     aufträgt. */
  padding:clamp(2.4rem,5vh,3.8rem) 0 0;
}

/* Der Textabschnitt darunter bekommt oben weniger, sonst klafft
   zwischen Bild und erster Zeile eine Lücke von zwei Abständen. */
.sec--afterfig{ padding-top:clamp(2.6rem,6vh,4.2rem); }

.evfig__frame{
  --cut:38px;
  width:min(100%, 880px);
  margin:0 auto;
}

.evfig__frame .bevel__in{
  position:relative;
  overflow:hidden;
  background:var(--noir, #06060A);
  display:flex; justify-content:center;
  /* Ein sehr kleines Plakat soll nicht als Briefmarke in einem
     riesigen Rahmen sitzen. */
  min-height:clamp(220px, 34vh, 380px);
  align-items:center;
}

/* Das Bild behält sein eigenes Verhältnis.

   Die Plakate kommen in jedem Format herein — mal quer als Foto, mal
   hoch als gestaltetes Blatt mit Preisen und Programm. Ein fester
   Rahmen mit object-fit:cover würde genau den Teil wegschneiden, auf
   den es ankommt. Gedeckelt wird nur die Höhe, damit ein sehr hohes
   Plakat nicht den ganzen Bildschirm einnimmt und der Text darunter
   erst nach zwei Wischern auftaucht. */
/* width:auto statt 100% — das Bild wird nie größer gezogen, als es
   ist. Die Plakate kommen in sehr unterschiedlichen Größen herein;
   eines mit 650 px Kantenlänge auf 795 px aufzublasen macht es weich,
   und gerade die Preise und Namen darauf sollen scharf bleiben. Ist
   das Bild größer als der Rahmen, greift max-width und verkleinert
   es — das schadet nie. */
.evfig__img{
  position:relative; z-index:1;
  display:block;
  width:auto; height:auto;
  max-width:100%;
  max-height:min(78vh, 900px);
  margin-inline:auto;
}

.evfig__bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
  transform:scale(1.3);
  filter:blur(34px) saturate(1.2) brightness(.42);
  pointer-events:none;
}

/* Der wandernde Goldschimmer der Fase läuft sonst dauerhaft, auch
   wenn niemand hinsieht. Hier genügt er bei Berührung. */
.evfig__frame::before{ animation-play-state:paused; }
.evfig__frame:hover::before,
.evfig__frame:focus-within::before{ animation-play-state:running; }

/* Die Platte ist kein Bedienelement — sie soll beim Überfahren nicht
   hochspringen wie eine Karte. */
.evfig__frame:hover{ transform:none; }

@media (max-width:620px){
  .evfig{ padding-top:clamp(1.8rem,4vh,2.6rem); }
  .evfig__frame{ --cut:26px; }
  .evfig__img{ max-height:72vh; }
  .evfig__bg{ filter:blur(22px) saturate(1.2) brightness(.42); }
}