/*
 * Teaser Special module — SD-35
 * Figma: content modules / teaser / special (node 6361-114352)
 * Secondary-coloured teaser box: label + headline (H2) + text + primary CTA.
 * Module-level layout only — CTA uses .dk-cta-primary, type uses .dk-text-* utilities.
 *
 * Spacing (L / M / S — tokens already respond):
 *   outer: section-m + page-inline
 *   inner: padding-block space-11 (80/72/64), padding-inline space-06 (32/28/24)
 *   label → headline: space-04 (20/18/16)
 *   headline → text: section-xs (32/28/24)
 *   text → CTA: space-05 (24/20/18)
 */

.dk-teaser-special {
  padding-block: var(--dk-space-section-m);
  padding-inline: var(--dk-space-page-inline);
}

.dk-teaser-special__inner {
  background-color: var(--dk-color-brand-secondary-01);
  color: var(--dk-color-black);
  padding-block: var(--dk-space-11);
  padding-inline: var(--dk-space-06);
  max-inline-size: 88.75rem; /* 1420px — SD-120 revision */
  margin-inline: auto;
}

.dk-teaser-special__label {
  margin: 0 0 var(--dk-space-04);
}

.dk-teaser-special__headline {
  display: block; /* override basic.css h2 inline-block — constrain to inner width */
  inline-size: 100%;
  max-inline-size: 100%;
  margin: 0 0 var(--dk-space-section-xs);
  hyphens: auto;
}

/* Figma S values for phones wider than the 375px artboard (e.g. iPhone 17 Pro ~402px).
   Global S tokens only kick in at ≤375px; between 376–700px M headline (56px) is too large. */
@media (max-width: 700px) {
  .dk-teaser-special {
    padding-block: 3.5rem;   /* section-m S — 56px */
    padding-inline: 0.75rem; /* page-inline S — 12px */
  }

  .dk-teaser-special__inner {
    padding-block: 4rem;   /* space-11 S — 64px */
    padding-inline: 1.5rem; /* space-06 S — 24px */
  }

  .dk-teaser-special__label {
    margin-block-end: 1rem; /* space-04 S — 16px */
  }

  .dk-teaser-special__headline {
    font-size: 2.5rem;       /* heading-l S — 40px */
    margin-block-end: 1.5rem; /* section-xs S — 24px */
  }

  .dk-teaser-special__cta {
    margin-block-start: 1.125rem; /* space-05 S — 18px */
  }
}

.dk-teaser-special__text {
  margin: 0;
}

.dk-teaser-special__text > :first-child { margin-block-start: 0; }
.dk-teaser-special__text > :last-child  { margin-block-end: 0; }
.dk-teaser-special__text p              { margin-block: var(--dk-space-04) 0; }

.dk-teaser-special__cta {
  margin-block-start: var(--dk-space-05);
}