/*
 * Film detail page — SD-9x
 * Template-level layout only: video/cover wrapper + "Informationen"
 * two-column section (label + list-item-filmdetails). Hero reuses
 * blocks/hero-detailseiten's markup/classes directly (film.php), the
 * two-column recipe mirrors text-2clmns (26.25rem + 1fr, same breakpoints).
 */

.film-detail__media {
  padding-block: var(--dk-space-section-xs);
  padding-inline: var(--dk-space-page-inline);
  max-inline-size: 88.75rem; /* 1420px — matches dk-hero-detailseiten__inner */
  margin-inline: auto;
}

.film-detail__info {
  /* Extra section break before "Informationen", on top of the media
     wrapper's own section-xs bottom padding — that alone (32px) was too
     tight for a new content section's heading. */
  padding-block-start: var(--dk-space-section-s);
  padding-block-end: var(--dk-space-section-m);
  padding-inline: var(--dk-space-page-inline);
}

.film-detail__info-inner {
  max-inline-size: 88.75rem; /* 1420px */
  margin-inline: auto;
  display: grid;
  grid-template-columns: 26.25rem minmax(0, 1fr); /* 420px — text-2clmns L */
  gap: var(--dk-space-05);
}

/* Sticky headline column — same recipe as dk-text-2clmns__head */
.film-detail__info-head {
  padding-inline-end: var(--dk-space-05);
  position: sticky;
  /* Below fixed anchor nav when stuck (set by anchornav.js), else page inset */
  inset-block-start: calc(var(--dk-sticky-inset-block-start, var(--dk-space-06)) + var(--dk-space-08));
  align-self: start;
  min-inline-size: 0;
}

.film-detail__info-headline {
  margin: 0;
  hyphens: auto;
}

.film-detail__info-content {
  min-inline-size: 0;
}

@media (max-width: 64rem) {
  .film-detail__info-inner {
    grid-template-columns: 24.875rem minmax(0, 1fr); /* 398px — text-2clmns M */
  }
}

/* Mid tablet: shrink left col + headline so columns don't pull apart */
@media (max-width: 56rem) {
  .film-detail__info-inner {
    grid-template-columns: minmax(9rem, 0.4fr) minmax(0, 1fr);
  }

  .film-detail__info-headline {
    font-size: var(--dk-text-heading-s-size);
  }
}

/* Single column ≤700px (44rem) */
@media (max-width: 44rem) {
  .film-detail__info-inner {
    grid-template-columns: 1fr;
    gap: var(--dk-space-05);
  }

  .film-detail__info-head {
    position: static;
    padding-inline-end: 0;
  }
}