.headlineContainer {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: var(--spacing-md);
  max-width: 100%;
  min-width: 0;
}

.noGrow {
  flex: 0 1 auto;
}

.headlineBlock {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  gap: var(--spacing-xxs);
}

.headlineRow {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  min-width: 0;
}

/* Base headline */
.headline {
  position: relative;
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--spacing-xs);
  margin-block: var(--spacing-xs);

  /* Typography */
  font-weight: var(--font-weight, 600);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  color: inherit;

  /* Behaviour */
  transition: color var(--transition-fast) var(--ease-standard);
  min-width: 0; /* required for truncation inside flex */
}

/* CollapsibleHeadline wrapper */
.collapsibleRoot {
  display: flex;
  flex-direction: column;
}

.collapsiblePanel {
  display: contents;
}

.toggleChevron {
  display: block;
  width: 0.85em;
  height: 0.85em;
  transition: transform var(--transition-normal) var(--ease-standard);
}

.toggleChevronExpanded {
  transform: rotate(180deg);
}

/* Variant overrides */
.variant-muted {
  color: var(--color-fg-subtle);
}

/* Tone overrides */
.tone-dark .headline {
  color: var(--color-fg-default);
}

.tone-light .headline {
  color: var(--color-fg-on-strong);
}

.noMargin {
  margin: 0;
}

/* Marker variant */
.headline.marker {
  padding-inline-start: calc(var(--border-width-medium) + var(--spacing-sm));
}

.headline.marker::before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  block-size: 0.75em;
  inset-inline-start: 0;
  inline-size: var(--border-width-medium);
  background-color: var(--marker-color, var(--color-brand));
  border-radius: var(--border-radius-sm);
  pointer-events: none;
}

/* Subheader */
.subheader {
  font-size: var(--font-size-sm);
  margin-block-start: calc(var(--spacing-2xs) * -1);
  color: var(--color-fg-subtle);
  line-height: var(--line-height-normal);
}

.addition {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
}

/* Icon */
.icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

/* Text wrapper (allows shrinking inside flex layouts) */
.text {
  flex: 0 1 auto;
  min-width: 0;
}

/* Text behaviour */
.truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wrap {
  white-space: normal;
  overflow: visible;
  display: flex;
  align-items: center;
  gap: var(--spacing-xxs);
}

@media (max-width: 767px) {
  .headlineRow {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-md);
  }

  .headlineContainer h1.headline {
    font-size: var(--font-size-xl);
  }

  .headlineContainer h2.headline {
    font-size: var(--font-size-lg);
  }

  .addition {
    inline-size: 100%;
  }
}