/*
  Heading scale matches Content with Media and Proof Points:
  32px below 768, 36px from 768, 40px from 1024. The Figma text style
  records line height 100, so the line height equals the font size.
  This frame's eyebrow is Inter Bold 18px #667085, not the 16px
  Inter Tight eyebrow used on those modules.
  Description uses the same 16px / 28px body as those modules.
*/

.mod-section-header {
  --mod-section-header-bg: #ffffff;
  --mod-section-header-bg-opacity: 0;
  --mod-section-header-text: var(--color-black, #111111);
  --mod-section-header-eyebrow: #667085;
  --mod-section-header-link: #005fcc;
  --mod-section-header-heading-size: 32px;
  --mod-section-header-heading-line: 1;
  --mod-section-header-eyebrow-size: 18px;
  --mod-section-header-body-size: 16px;
  --mod-section-header-body-line: 28px;
  --mod-section-header-intro-gap: 30px;
  --mod-section-header-stack-gap: 30px;
  --mod-section-header-pad-top: 60px;
  --mod-section-header-pad-bottom: 30px;

  box-sizing: border-box;
  padding-top: var(--mod-section-header-pad-top);
  padding-bottom: var(--mod-section-header-pad-bottom);
  padding-inline: 10px;
  background-color: transparent;
  background-color: color-mix(
    in srgb,
    var(--mod-section-header-bg) calc(var(--mod-section-header-bg-opacity) * 1%),
    transparent
  );
  color: var(--mod-section-header-text);
}

.mod-section-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--mod-section-header-stack-gap);
  width: 100%;
  max-width: 1044px;
  margin-inline: auto;
  text-align: center;
}

.mod-section-header--left .mod-section-header__inner {
  align-items: flex-start;
  text-align: left;
}

.mod-section-header--left .mod-section-header__intro,
.mod-section-header--left .mod-section-header__description {
  max-width: 512px;
}

.mod-section-header__intro {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: var(--mod-section-header-intro-gap);
  width: 100%;
}

.mod-section-header__eyebrow {
  margin: 0;
  color: var(--mod-section-header-eyebrow);
  font-family: var(--secondary-font, Inter, sans-serif);
  font-size: var(--mod-section-header-eyebrow-size);
  font-weight: 700;
  line-height: 1;
}

.mod-section-header__heading {
  margin: 0;
  color: var(--mod-section-header-text);
  font-family: var(--primary-font, "Inter Tight", sans-serif);
  font-size: var(--mod-section-header-heading-size);
  font-weight: 700;
  line-height: var(--mod-section-header-heading-line);
}

.mod-section-header__description,
.mod-section-header__description p {
  margin: 0;
  color: var(--mod-section-header-text);
  font-family: var(--secondary-font, Inter, sans-serif);
  font-size: var(--mod-section-header-body-size);
  font-weight: 400;
  line-height: var(--mod-section-header-body-line);
}

.mod-section-header__description p + p {
  margin-top: 16px;
}

.mod-section-header__description a {
  color: var(--mod-section-header-link);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mod-section-header__description a:hover,
.mod-section-header__description a:focus-visible {
  color: var(--mod-section-header-link);
}

.mod-section-header__description a:focus-visible {
  outline: 2px solid var(--mod-section-header-link);
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .mod-section-header__description a:focus {
    outline: 2px solid var(--mod-section-header-link);
    outline-offset: 3px;
  }
}

.mod-section-header--top-tight {
  --mod-section-header-pad-top: 15px;
}

.mod-section-header--bottom-tight {
  --mod-section-header-pad-bottom: 15px;
}

.mod-section-header--top-none {
  --mod-section-header-pad-top: 0px;
}

.mod-section-header--bottom-none {
  --mod-section-header-pad-bottom: 0px;
}

@media (min-width: 768px) {
  .mod-section-header {
    --mod-section-header-heading-size: 36px;
    --mod-section-header-pad-top: 80px;
    --mod-section-header-pad-bottom: 30px;
    padding-inline: 92px;
  }

  .mod-section-header--top-tight {
    --mod-section-header-pad-top: 30px;
  }

  .mod-section-header--bottom-tight {
    --mod-section-header-pad-bottom: 30px;
  }

  .mod-section-header--top-none {
    --mod-section-header-pad-top: 0px;
  }

  .mod-section-header--bottom-none {
    --mod-section-header-pad-bottom: 0px;
  }
}

@media (min-width: 1024px) {
  .mod-section-header {
    --mod-section-header-heading-size: 40px;
    --mod-section-header-pad-top: 100px;
    --mod-section-header-pad-bottom: 60px;
    padding-inline: clamp(48px, calc((100vw - 1044px) / 2), 198px);
  }

  .mod-section-header--top-tight {
    --mod-section-header-pad-top: 30px;
  }

  .mod-section-header--bottom-tight {
    --mod-section-header-pad-bottom: 30px;
  }

  .mod-section-header--top-none {
    --mod-section-header-pad-top: 0px;
  }

  .mod-section-header--bottom-none {
    --mod-section-header-pad-bottom: 0px;
  }

  .mod-section-header__inner {
    max-width: none;
  }
}