/* ============================================================================
   How to Spell Empire — Film-Page Stylesheet (Rewrite)
   ----------------------------------------------------------------------------
   Ersetzt die alte "Film Template" CSS komplett. Einfach 1:1 an derselben
   Stelle einfügen (Customizer → Zusätzliches CSS, oder Theme-Stylesheet).

   Alles ist unter `body.film-page` verschachtelt, damit nichts auf den
   Rest der Seite ausstrahlt.

   Architektur (wichtig fürs Verständnis / künftige Änderungen):
   - `.film-content > :where(*)` ist die Basis-Regel: Sie zentriert JEDES
     direkte Kind auf --container Breite. :where() hat Spezifität 0, d.h.
     jede Ausnahme unten (Hero, Fullwidth-Sektionen …) gewinnt automatisch,
     ganz ohne !important-Wettrüsten. Das war der Hauptgrund für die alten
     Bugs: dieselbe Hero-Regel war 3× im File dupliziert und hat sich
     teilweise selbst überschrieben.
   - Fluid Typografie/Abstände via clamp()/min()/max() statt vieler fester
     Breakpoints → das behebt "keine Responsive View" an der Wurzel, statt
     nur eine einzelne @media-Regel nachzuschieben.
   - WordPress verschachtelt Blöcke nicht immer gleich (z.B. ist der
     Media-Text-Block bei "Director" in eine zusätzliche .alignwide-Gruppe
     gewrappt, bei "Book" nicht). Die Regeln unten sind bewusst so
     geschrieben, dass beide Fälle funktionieren.
   ============================================================================ */


/* ----------------------------------------------------------------------------
   1. Design Tokens
   ---------------------------------------------------------------------------- */
body.film-page {
  --container: 1120px;       /* Standard-Inhaltsbreite (Text, Spalten, Zitat) */
  --container-wide: 1280px;  /* Video/Galerie – bewusst etwas breiter als der Text */
  --measure: 760px;          /* schmale Lesespalte (.film-text) */

  --gutter: 24px;            /* Seitenabstand Desktop */
  --gutter-sm: 20px;         /* Seitenabstand Mobile */

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 88px;

  --radius-sm: 2px;
  --radius-md: 4px;

  --font-sans:
    "SF Pro Text", "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif-display: "Instrument Serif", Times, Georgia, serif;
  --font-serif-credit: "Cormorant Garamond", Georgia, serif;
  --font-serif-quote: Georgia, "Times New Roman", Times, serif;
}


/* ----------------------------------------------------------------------------
   2. Reset & Basistypografie
   ---------------------------------------------------------------------------- */

/* Der wahrscheinlich größte Einzel-Fix für "keine Responsive View":
   WordPress schreibt auf jedes <img> feste width/height-Attribute. Ohne
   diese Regel bleibt ein Bild z.B. 1024px breit, egal wie schmal der
   Screen ist, und sprengt das Layout. */
body.film-page img,
body.film-page svg,
body.film-page video {
  max-width: 100%;
  height: auto;
  display: block;
}

body.film-page {
  margin: 0;
  background: #ffffff;
  color: #111111;
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
}

body.film-page .film-content {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: none;
  overflow-x: hidden;       /* Sicherheitsnetz gegen horizontales Scrollen */
  overflow-wrap: break-word; /* lange deutsche Komposita brechen sauber um */
}

/* Default-Margins von Browser/Theme entfernen. Genau diese Standard-
   Abstände (z.B. 1em über/unter jedem <p>), die sich mit den manuell
   gesetzten Spacer-Blöcken addiert haben, waren die Hauptursache für die
   "unregelmäßigen Abstände". Ab hier kommt jeder Abstand nur noch aus
   einer einzigen, bewussten Regel weiter unten. */
body.film-page .film-content :where(h1, h2, h3, h4, h5, h6, p, blockquote, figure, ul, ol, dl) {
  margin: 0;
}

/* Leere Absätze, die der Editor manchmal stehen lässt, sollen keinen
   eigenen Abstand mehr erzeugen. */
body.film-page p:empty {
  display: none;
}

body.film-page p {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 300;
  letter-spacing: 0.002em;
}

body.film-page p + p {
  margin-top: var(--space-3);
}

body.film-page h1,
body.film-page h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.08;
  margin-top: var(--space-3) !important;
  margin-bottom: var(--space-2) !important;
}

body.film-page h3,
body.film-page h4,
body.film-page h5,
body.film-page h6 {
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-top: var(--space-2) !important;
  margin-bottom: var(--space-2) !important;
}

body.film-page a {
  color: inherit;
}

body.film-page .has-small-font-size {
  font-size: 15px;
  line-height: 1.5;
}

/* Absicherung für WP-Kern-Klassen, falls die Block-Library-Styles auf
   diesem Template nicht (vollständig) geladen werden. */
body.film-page .has-text-align-center { text-align: center; }
body.film-page .has-text-align-left { text-align: left; }
body.film-page .has-text-align-right { text-align: right; }


/* ----------------------------------------------------------------------------
   3. Layout-Grundbausteine
   ---------------------------------------------------------------------------- */

/* Basis-Container: jedes direkte Kind von .film-content wird zentriert
   und auf --container begrenzt. :where() => Spezifität 0, siehe Hinweis
   oben – jede Ausnahme unten gewinnt automatisch. */
body.film-page .film-content > :where(*) {
  box-sizing: border-box;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter-sm);
  padding-right: var(--gutter-sm);
  padding-block: var(--space-3);
}

@media (min-width: 700px) {
  body.film-page .film-content > :where(*) {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

/* Fullwidth-Ausnahmen: Hero, Farbsektionen, Media-Text-Banner. Eine
   einzige Regel statt (wie vorher) drei leicht unterschiedlicher, sich
   gegenseitig überschreibender Kopien. Der Media-Text-Block bei
   "Director" steckt im Editor in einer zusätzlichen .alignwide-Gruppe,
   :has() fängt diesen Fall zusätzlich ab. */
body.film-page .film-content > .wp-block-cover:first-child,
body.film-page .film-content > .film-section,
body.film-page .film-content > .wp-block-media-text.film-media-section,
body.film-page .film-content > .alignwide:has(.wp-block-media-text.film-media-section) {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Schmale Lesespalte, überall im Text verwendet (Synopsis, Credits,
   Contact, Zitat …). Funktioniert unabhängig davon, wie tief WordPress
   das Element verschachtelt hat. */
body.film-page .film-text {
  width: 100%;
  max-width: min(var(--measure), calc(100% - 2 * var(--gutter-sm)));
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 700px) {
  body.film-page .film-text {
    max-width: min(var(--measure), calc(100% - 2 * var(--gutter)));
  }
}


/* ----------------------------------------------------------------------------
   4. Hero (wp-block-cover)
   ---------------------------------------------------------------------------- */

body.film-page .wp-block-cover:first-child {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 440px;
  isolation: isolate;
}

@media (min-width: 700px) {
  body.film-page .wp-block-cover:first-child {
    min-height: 620px;
  }
}

/* Eigenständige Cover-Mechanik (Bild/Dim-Overlay/Inhalt stapeln), damit
   der Hero auch funktioniert, falls die WP-Block-Library-CSS auf diesem
   Template nicht greift. */
body.film-page .wp-block-cover__image-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

body.film-page .wp-block-cover__background {
  position: absolute;
  inset: 0;
  z-index: 1;
}

body.film-page .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4) var(--gutter-sm) var(--space-5);
}

@media (min-width: 700px) {
  body.film-page .wp-block-cover__inner-container {
    padding: var(--space-5) var(--gutter) var(--space-5);
  }
}

/* Fluid Typografie statt fixer px-Werte: skaliert stufenlos zwischen
   Mobile- und Desktop-Größe, kein extra Breakpoint nötig. */
body.film-page .hero-title {
  font-family: var(--font-sans);
  font-size: clamp(36px, 9vw, 100px);
  line-height: 0.92;
  font-weight: 600;
  margin: 0 0 14px 0;
}

body.film-page .hero-subtitle {
  font-family: var(--font-serif-display);
  font-size: clamp(24px, 4.5vw, 50px);
  line-height: 1.1;
  font-weight: 550;
  letter-spacing: 0.03em;
  margin: 0 0 8px 0;
  text-shadow: 0px 0px 16px black;
}

body.film-page .hero-credit {
  font-family: var(--font-serif-credit);
  font-size: clamp(17px, 2.5vw, 28px);
  line-height: 1.15;
  margin: 0;
}


/* ----------------------------------------------------------------------------
   5. Buttons (interne Navigation)
   ---------------------------------------------------------------------------- */

body.film-page .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

body.film-page .wp-block-button__link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.9vw, 21px);
  font-weight: 600;
  line-height: 1.2;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
}

body.film-page .wp-block-button__link:hover {
  color: var(--wp--preset--color--pale-cyan-blue);
}


/* ----------------------------------------------------------------------------
   6. Video-Embeds
   ---------------------------------------------------------------------------- */

body.film-page .wp-block-embed {
  width: 100%;
  max-width: var(--container-wide);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  overflow: hidden;
}

body.film-page .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
}

/* aspect-ratio statt des alten padding-top-Hacks: skaliert die Video-
   höhe zuverlässig mit der Breite mit – das hat vorher komplett gefehlt,
   das iframe hatte auf Mobile eine fixe Höhe von 1000px. */
body.film-page .wp-block-embed__wrapper iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}


/* ----------------------------------------------------------------------------
   7. Mehrspaltigkeit (wp-block-columns)
   ---------------------------------------------------------------------------- */

/* Selbst-responsive Flexbox: jede Spalte bekommt eine Mindestbreite und
   bricht automatisch um, sobald sie nicht mehr passt – ganz ohne eigenen
   Breakpoint. Funktioniert gleichermaßen für die 2- und 3-spaltigen
   Layouts auf dieser Seite. */
body.film-page .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  margin: 0 auto;
}

body.film-page .wp-block-column {
  flex: 1 1 260px;
  min-width: 0;
}


/* ----------------------------------------------------------------------------
   8. Zitat
   ---------------------------------------------------------------------------- */

body.film-page blockquote {
  margin: 0;
}

body.film-page blockquote p,
body.film-page .wp-block-quote p,
body.film-page .wp-block-pullquote p {
  font-family: var(--font-serif-quote);
  font-size: clamp(18px, 1.9vw, 21px);
  line-height: 1.5;
  letter-spacing: 0;
}

body.film-page blockquote cite,
body.film-page .wp-block-quote cite,
body.film-page .wp-block-pullquote cite {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 15px;
  line-height: 1.4;
}


/* ----------------------------------------------------------------------------
   9. Media + Text Sektionen (Director / Buch)
   ---------------------------------------------------------------------------- */

body.film-page .wp-block-media-text.film-media-section {
  display: grid;
  align-items: center;
  justify-content: center;
}

/* Ab 700px darf der von WordPress inline gesetzte grid-template-columns-
   Wert (42%/31% auto) wieder greifen – wir fassen ihn hier gar nicht an.
   Unter 700px zwingen wir zweispaltig auf einspaltig; !important ist
   nötig, weil ein inline style="" sonst jede externe Regel schlägt. */
@media (max-width: 699px) {
  body.film-page .wp-block-media-text.film-media-section {
    grid-template-columns: 1fr !important;
  }

  body.film-page .wp-block-media-text.film-media-section .wp-block-media-text__media {
    grid-row: 1;
  }

  body.film-page .wp-block-media-text.film-media-section .wp-block-media-text__content {
    grid-row: 2;
  }
}

body.film-page .wp-block-media-text__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.film-page .wp-block-media-text__content {
  box-sizing: border-box;
  padding: clamp(32px, 6vw, 70px) var(--gutter-sm);
}

@media (min-width: 700px) {
  /* Ersetzt den alten, bei schmalen Viewports negativ werdenden
     calc(100vw - 1120px)-Hack durch max(): der Text bleibt immer
     mindestens --gutter vom Rand entfernt und richtet sich ab da an der
     --container-Breite aus – ganz ohne zusätzlichen Breakpoint. */
  body.film-page .wp-block-media-text__content {
    padding-left: max(var(--gutter), calc((100% - var(--container)) / 2));
    padding-right: max(var(--gutter), calc((100% - var(--container)) / 2));
	max-width: 600px;
  }
}


/* ----------------------------------------------------------------------------
   10. Galerie
   ---------------------------------------------------------------------------- */

/* CSS-Grid mit auto-fit statt der festen columns-2/columns-4-Klassen:
   die Galerien werden dadurch von allein responsive, ohne Breakpoint. */
body.film-page .wp-block-gallery {
  display: grid;
  gap: var(--space-3);
  /* margin: var(--space-5) auto; */
  max-width: var(--container-wide);
}

body.film-page .wp-block-gallery.columns-2 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

body.film-page .wp-block-gallery.columns-4 {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

body.film-page .wp-block-gallery figure a {
  display: block;
}

body.film-page .wp-block-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/* Captions werden bewusst nur in der Lightbox gezeigt (siehe §13), nicht
   im Grid-Preview – das entspricht dem ursprünglichen Design. */
body.film-page .wp-block-gallery figcaption {
  display: none;
}

.wp-block-gallery.has-nested-images.columns-4 figure.wp-block-image:not(#individual-image),
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: 100% !important;
}


/* ----------------------------------------------------------------------------
   11. Fullwidth-Farbsektionen (Credits / Contact)
   ---------------------------------------------------------------------------- */

body.film-page .film-section {
  padding-block: clamp(40px, 8vw, 70px);
}


/* ----------------------------------------------------------------------------
   12. Spacer-Blöcke
   ---------------------------------------------------------------------------- */

/* Spacer-Blöcke tragen ihre Höhe als inline style (für Desktop gedacht,
   0–51px). Auf kleinen Screens wirken diese festen Lücken zufällig und
   zu groß – hier gedeckelt. !important ist nötig, um das inline style zu
   schlagen. */
@media (max-width: 699px) {
  body.film-page .wp-block-spacer {
    height: clamp(8px, 4vw, 28px) !important;
  }
}


/* ----------------------------------------------------------------------------
   13. Simple Lightbox (Drittanbieter-Plugin)
   ---------------------------------------------------------------------------- */

#slb_viewer_wrap .slb_details {
  background: #ffffff !important;
  color: #1d1d1f !important;
  max-width: min(760px, 92vw) !important;
  margin: 0 auto !important;
  padding: 18px 24px 24px !important;
  box-sizing: border-box !important;
  text-align: left !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#slb_viewer_wrap .slb_data,
#slb_viewer_wrap .slb_data_content,
#slb_viewer_wrap .slb_data_title,
#slb_viewer_wrap .slb_data_desc,
#slb_viewer_wrap .slb_group_status {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #1d1d1f !important;
}

#slb_viewer_wrap .slb_data_title,
#slb_viewer_wrap .slb_data_desc {
  font-size: 16px !important;
  line-height: 1.45 !important;
  font-weight: 400 !important;
}

#slb_viewer_slb_default .slb_content,
#slb_viewer_slb_default .slb_content img {
  max-height: calc(100vh - clamp(180px, 30vh, 260px)) !important;
  width: auto !important;
  height: auto !important;
}

#slb_viewer_slb_default .slb_details {
  max-width: min(760px, 92vw) !important;
  margin: 18px auto 0 !important;
  padding: 20px 24px !important;
  box-sizing: border-box !important;
}


/* ----------------------------------------------------------------------------
   14. Barrierefreiheit & Bewegung
   ---------------------------------------------------------------------------- */

body.film-page a:focus-visible,
body.film-page .wp-block-button__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body.film-page * {
    scroll-behavior: auto !important;
  }
}