/*
 * Hero Detailseiten module — SD-26
 * Figma: content modules / hero / detailseiten (node 6361-114346)
 * Back link + label + headline (H1) + optional subline + optional share.
 * Background Secondary 01 (default) or Primary. Module-level layout only —
 * share uses the share component, back link uses the arrow-left icon.
 */

.dk-hero-detailseiten {
  padding-block: var(--dk-space-section-m);
  padding-inline: var(--dk-space-page-inline);
  color: var(--dk-color-black);
}

.dk-hero-detailseiten--secondary01 {
  background-color: var(--dk-color-brand-secondary-01);
}

.dk-hero-detailseiten--primary {
  background-color: var(--dk-color-brand-primary);
}

.dk-hero-detailseiten__inner {
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-06);
  min-block-size: 16rem;
  inline-size: 100%;
  max-inline-size: 88.75rem; /* 1420px — SD-120 revision */
  margin-inline: auto;
}

/* Back-to-overview pill */
.dk-hero-detailseiten__back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--dk-space-02);
  padding-block: var(--dk-space-02);
  padding-inline: var(--dk-space-04);
  border: 1px solid var(--dk-color-black);
  border-radius: 999px;
  color: var(--dk-color-black);
  text-decoration: none;
  /* Extra hover stroke via box-shadow — border-width would shift layout */
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.dk-hero-detailseiten__back:hover {
  background-color: var(--dk-color-white-20);
  box-shadow: 0 0 0 1px var(--dk-color-black);
}

.dk-hero-detailseiten__back:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--dk-color-black),
    0 0 0 4px var(--dk-color-white),
    0 0 0 6px var(--dk-color-focus);
}

.dk-hero-detailseiten__back-icon {
  display: inline-flex;
  inline-size: 1rem;
  block-size: 1rem;
}

/* Content sits toward the bottom of the hero */
.dk-hero-detailseiten__content {
  margin-block-start: auto; /* pushes content to bottom of __inner */
  display: flex;
  flex-direction: column;
  gap: var(--dk-space-02);
  inline-size: 100%;
}

.dk-hero-detailseiten__label,
.dk-hero-detailseiten__headline,
.dk-hero-detailseiten__subline {
  margin: 0;
  hyphens: auto;
}

/* Share row — separator comes from the share component (SD-62) */
.dk-hero-detailseiten__share {
  padding-block-start: var(--dk-space-04);
}

/* News detail: taller hero, date + headline stack (Figma news/detail) */
.dk-hero-detailseiten--news {
  justify-content: flex-end;
  min-block-size: 24.75rem; /* 396px — Figma L */
  padding-block-start: var(--dk-space-section-xl);
  padding-block-end: 0;
}

.dk-hero-detailseiten--news .dk-hero-detailseiten__inner {
  min-block-size: 0;
  gap: var(--dk-space-09);
}

.dk-hero-detailseiten--news .dk-hero-detailseiten__content {
  margin-block-start: 0;
  padding-block-end: var(--dk-space-08);
}

@media (max-width: 79.9375rem) {
  .dk-hero-detailseiten--news {
    min-block-size: 21.25rem;
    padding-block-start: 10rem;
  }
}

@media (max-width: 63.9375rem) {
  .dk-hero-detailseiten--news {
    min-block-size: 16.25rem;
    padding-block-start: var(--dk-space-section-xl);
  }
}

/* Team / profile detail heroes (Figma team Detail 6101-46621, moderator Detail 6101-47472) */
.dk-hero-detailseiten--team {
  min-block-size: 29.625rem; /* 474px — Figma moderator detail L */
  padding-block-start: var(--dk-space-section-xl);
  padding-block-end: 0;
}

.dk-hero-detailseiten--team:has(.dk-hero-detailseiten__label),
.dk-hero-detailseiten--team:has(.dk-hero-detailseiten__subline) {
  min-block-size: 34rem; /* 544px — Figma team detail L */
}

.dk-hero-detailseiten--team .dk-hero-detailseiten__inner {
  min-block-size: 0;
  gap: var(--dk-space-09);
}

.dk-hero-detailseiten--team .dk-hero-detailseiten__content {
  margin-block-start: 0;
  padding-block-end: var(--dk-space-07);
}

@media (max-width: 79.9375rem) {
  .dk-hero-detailseiten--team,
  .dk-hero-detailseiten--team:has(.dk-hero-detailseiten__label),
  .dk-hero-detailseiten--team:has(.dk-hero-detailseiten__subline) {
    min-block-size: 21.25rem;
    padding-block-start: 10rem;
  }
}

@media (max-width: 63.9375rem) {
  .dk-hero-detailseiten--team,
  .dk-hero-detailseiten--team:has(.dk-hero-detailseiten__label),
  .dk-hero-detailseiten--team:has(.dk-hero-detailseiten__subline) {
    min-block-size: 16.25rem;
    padding-block-start: var(--dk-space-section-xl);
  }
}