/* ========================================
   MOTION — Cinematic Film Showcase (statisch)
   ======================================== */

.film-showcase {
  position: relative;
  background: var(--color-bg-light);
  color: var(--color-text-dark);
  padding: var(--space-2xl) 0;
}

.film-showcase__stage {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 3vw;
  display: grid;
  grid-template-areas:
    "chapter chapter"
    "name name"
    "video video"
    "location caption";
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-lg);
  row-gap: var(--space-xl);
  align-items: center;
}

/* Editorial eyebrow — Chapter I, II, III … */
.film-showcase__chapter {
  grid-area: chapter;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}

/* Theme headline — editorial title in place of couple name */
.film-showcase__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.1;
  white-space: normal;
  max-width: 18ch;
  color: var(--color-text-dark);
  text-transform: uppercase;
  margin: 0 auto;
  text-align: center;
}

/* Meta-block under video — location (left half) + caption (right half) */
.film-showcase__location {
  grid-area: location;
  justify-self: start;
  align-self: start;
  max-width: 38ch;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.8;
  text-align: left;
  white-space: normal;
  color: var(--color-secondary);
  margin: 0;
}

.film-showcase__caption {
  grid-area: caption;
  justify-self: end;
  align-self: start;
  max-width: 38ch;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: 1.7;
  text-align: left;
  color: var(--color-secondary);
  margin: 0;
}

/* Video frame — 16:9, fixed width, kein Scroll-Animation, kein Crop */
.film-showcase__frame {
  grid-area: video;
  position: relative;
  width: clamp(480px, 64vw, 1000px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: transparent;
}

/* Höhen-Fallback für Browser ohne aspect-ratio-Support (sonst kollabiert der
   Frame auf 0 px, weil das iframe absolut positioniert ist → leerer Bereich). */
@supports not (aspect-ratio: 16 / 9) {
  .film-showcase__frame {
    height: 0;
    padding-bottom: 56.25%;
  }
}

.film-showcase__frame iframe {
  position: absolute;
  /* Iframe ragt unten 44 px raus, damit die Player-Bar abgeschnitten wird.
     Der Pic-Time-Embed läuft mit transparentbg=true, also bleibt der Rest
     des iframe-Bereichs transparent und zeigt die Cream-Seitenfarbe. */
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% + 44px);
  border: 0;
}

/* Mobile fallback — gestapeltes Layout */
@media (max-width: 767px) {
  .film-showcase {
    padding: var(--space-xl) 0;
  }

  .film-showcase__stage {
    grid-template-areas:
      "chapter"
      "name"
      "video"
      "location"
      "caption";
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--space-md);
    padding: 0 var(--space-md);
  }

  .film-showcase__name {
    font-size: clamp(1.8rem, 7vw, 3rem);
    white-space: normal;
  }

  .film-showcase__location,
  .film-showcase__caption {
    justify-self: center;
    align-self: center;
    text-align: center;
    max-width: none;
  }

  .film-showcase__caption {
    font-size: var(--text-sm);
  }

  .film-showcase__frame {
    width: 100%;
    max-width: none;
  }
}