/**
 * Heading Component Styles
 *
 * Levels: h1 | h2 | h3 | h4 | h5 | h6
 * All font sizes are responsive via CSS tokens in tokens/typography.css.
 * Letter-spacing uses em units so it scales automatically with font size.
 *
 * Figma node: 141:66329
 */

/* ── Shared base ── */
.heading {
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-weight: var(--font-weight-bold, 700);
  color: inherit;
  margin: 0;

  /* ── Attitude highlight: <em> and <strong> inside headings ── */
  & em,
  & em,
  & .bosch-highlight {
    /* only gradients work, otherwise descenders get obfuscated in multiline text */
    background-image: linear-gradient(
      to bottom,
      transparent 0em,
      var(--attitude, #FFA0FA) 0em,
      var(--attitude, #FFA0FA) 1.23em,
      transparent 1.23em
    );
    font-style: normal;
    font-weight: inherit;
    padding-inline: 0.1em 0.15em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  .label + & {
    margin-top: var(--spacing-150);
  }
}

.heading--centered {
  margin-inline: auto;
  text-align: center;

  .label:has(~ &) {
    margin-inline: auto;
  }
}


.heading--h1 {
  font-size: var(--text-h1);
  line-height: 1.1;
  letter-spacing: -0.022em;
}

.heading--h2 {
  font-size: var(--text-h2);
  line-height: 1.2;
  letter-spacing: -0.021em;
  margin-bottom: var(--spacing-400, 32px);
}

.heading--h3 {
  font-size: var(--text-h3);
  line-height: 1.2;
  letter-spacing: -0.0175em;
  margin-bottom: var(--spacing-300, 24px);
}

.heading--h4 {
  font-size: var(--text-h4);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.heading--h5 {
  font-size: var(--text-h5);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.heading--h6 {
  font-size: var(--text-h6);
  line-height: 1.3;
  letter-spacing: -0.012em;
}

.container-50-50 .heading {
  @media (min-width: 1000px) and (max-width: 1440px) {
    hyphens: auto;
  }
}