/* ==========================================================================
   heavy.ch - Content, Medien & Komponenten Stylesheet
   Verwaltet: Lead-Banner, Media-Entitäten, Nodes, Teaser, Views, Komponenten
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Medien & Lead-Banner (Spotify / Apple Music Blur-Effekt)
   -------------------------------------------------------------------------- */
.media-lead-banner {
  position: relative;
  width: 100%;
  height: 325px;
  max-height: 325px;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--heavy-bg-surface);
  border: 1px solid var(--heavy-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
}

/* Weichgezeichneter Hintergrund (Farbatmosphäre aus dem Bild) */
.media-lead-banner__backdrop {
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(35px) brightness(0.4) saturate(1.5);
  transform: scale(1.15);
  pointer-events: none;
  z-index: 1;
}

/* Vordergrund-Container */
.media-lead-banner__foreground {
  position: relative;
  z-index: 2;
  height: 100%;
  max-height: 325px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-lead-banner__foreground .field,
.media-lead-banner__foreground .field__item,
.media-lead-banner__foreground a.glightbox {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modus A: Schmal / Hochformat -> Zentriert mit Spotify-Blur */
.media-lead-banner--contain .media-lead-banner__foreground {
  width: auto;
}

.media-lead-banner--contain .media-lead-banner__foreground img {
  height: 100%;
  max-height: 325px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}

/* Modus B: Großes Querformat -> Vollflächige 100% Breite mit Focal Point */
.media-lead-banner--full-width .media-lead-banner__foreground,
.media-lead-banner--full-width .media-lead-banner__foreground .field,
.media-lead-banner--full-width .media-lead-banner__foreground .field__item,
.media-lead-banner--full-width .media-lead-banner__foreground a.glightbox {
  width: 100%;
}

.media-lead-banner--full-width .media-lead-banner__foreground img {
  width: 100%;
  height: 100%;
  max-height: 325px;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
  display: block;
  border-radius: 0;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   2. Content-Typen & Detailansichten (Nodes)
   -------------------------------------------------------------------------- */
/* Band, Event, News, Album Detailseiten */
.node--view-mode-full {
  margin-bottom: 2rem;
}

/* --------------------------------------------------------------------------
   3. WYSIWYG / Fließtext Inline-Medien (Ausrichtung & Abstände)
   -------------------------------------------------------------------------- */
/* Gilt strikt nur innerhalb von WYSIWYG/Textformat-Feldern (.text-formatted) */
.text-formatted .align-left {
  float: left;
  margin: 0.5rem 1.5rem 1rem 0;
  /* Oben 8px, Rechts 24px, Unten 16px, Links 0 */
  max-width: 50%;
}

.text-formatted .align-right {
  float: right;
  margin: 0.5rem 0 1rem 1.5rem;
  /* Oben 8px, Rechts 0, Unten 16px, Links 24px */
  max-width: 50%;
}

.text-formatted .align-center {
  display: table;
  margin: 1.5rem auto;
  text-align: center;
  max-width: 100%;
}

/* Responsiv: Auf kleinen Smartphones kein enges Umfließen, sondern volle Breite */
@media (max-width: 575.98px) {

  .text-formatted .align-left,
  .text-formatted .align-right {
    float: none;
    display: block;
    margin: 1rem auto;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   4. Teaser, Cards & Listen
   -------------------------------------------------------------------------- */
/* Wiederverwendbare Teaser-Kacheln */
/* .node--view-mode-teaser { } */

/* --------------------------------------------------------------------------
   4. Views & Filterblöcke
   -------------------------------------------------------------------------- */
/* .view { } */