/*
 * Teaser-Bundle Filme module — SD-32
 * Figma: content modules / teaser-bundle / filme (node 6361-114351)
 * Coloured section with fullscreen pattern, headline, white card container, CTA.
 */

.dk-teaser-bundle-filme {
  position: relative;
  isolation: isolate;
  padding-block: var(--dk-space-section-m);
}

.dk-teaser-bundle-filme__content {
  padding-inline: var(--dk-space-page-inline-wide); /* 192px at L */
  width: 100%;
}

.dk-teaser-bundle-filme__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dk-space-09);
  max-inline-size: 66rem; /* 1056px */
  margin-inline: auto;
  width: 100%;
}

.dk-teaser-bundle-filme--secondary02 { background-color: var(--dk-color-brand-secondary-02); }
.dk-teaser-bundle-filme--secondary01 { background-color: var(--dk-color-brand-secondary-01); }
.dk-teaser-bundle-filme--primary     { background-color: var(--dk-color-brand-primary); }

/* Pattern: fullscreen behind section content */
.dk-teaser-bundle-filme__pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.dk-teaser-bundle-filme__headline {
  margin: 0;
  align-self: flex-start;
}

/* White inner container wrapping the film cards */
.dk-teaser-bundle-filme__inner {
  background-color: var(--dk-color-white);
  padding: var(--dk-space-04);
  width: 100%;
}

.dk-teaser-bundle-filme__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--dk-space-teaser-2-clmns);
  row-gap: var(--dk-space-10);
}

.dk-teaser-bundle-filme__item {
  min-inline-size: 0;
}

/* First card spans full width */
.dk-teaser-bundle-filme__item:first-child {
  grid-column: 1 / -1;
}

.dk-teaser-bundle-filme__cta {
  display: flex;
}

/* Card font overrides: heading-xs (Inter) + caption (per Figma) */
.dk-teaser-bundle-filme .card-standard {
  gap: var(--dk-space-02);
}

.dk-teaser-bundle-filme .card-standard__link {
  padding-block: 0;
}

.dk-teaser-bundle-filme .card-standard__body {
  gap: var(--dk-space-01); /* 8px — Figma spacing-01 */
}

.dk-teaser-bundle-filme .card-standard__heading {
  font-family: var(--dk-font-family); /* Inter, not ABC Whyte Inktrap from dk-text-heading-m */
  font-size: var(--dk-text-heading-xs-size);
  font-weight: var(--dk-text-heading-xs-weight);
  line-height: 1.2;
}

.dk-teaser-bundle-filme .card-standard__text {
  font-size: var(--dk-text-caption-size);
  font-weight: var(--dk-text-caption-weight);
  line-height: 1.3;
}

/* M: 120px — module exception between standard 192px (L) and 20px (M/S narrow) */
@media (max-width: 79.9375rem) {
  .dk-teaser-bundle-filme__content {
    padding-inline: 7.5rem; /* 120px */
  }
}

/* M/S narrow: padding drops to 20px (Figma note says 12px but corrected to 20px) */
@media (max-width: 700px) {
  .dk-teaser-bundle-filme__content {
    padding-inline: 1.25rem; /* 20px — module exception, overrides --dk-space-page-inline */
  }

  .dk-teaser-bundle-filme__inner {
    padding: 1rem; /* 16px */
  }

  .dk-teaser-bundle-filme__grid {
    row-gap: 3rem; /* 48px */
  }
}

/* S: single column; reset padding-inline back to global token (= 12px at S) */
@media (max-width: 63.9375rem) {
  .dk-teaser-bundle-filme__content {
    padding-inline: var(--dk-space-page-inline);
  }

  .dk-teaser-bundle-filme__grid {
    grid-template-columns: 1fr;
  }

  .dk-teaser-bundle-filme__item:first-child {
    grid-column: auto;
  }
}