/* See ./title.md for design notes and rationale. */

/* stylelint-disable selector-class-pattern -- EDS BEM */

.title-container,
main > .section.title-container {
  margin: 0;
  padding: 0;
}

main > .section.title-container > .title-wrapper {
  max-inline-size: none;
  margin: 0;
  padding: 0;
}

.title.block {
  box-sizing: border-box;
  max-inline-size: min(1240px, calc(100% - 2 * var(--nc-grid-margin)));
  margin-inline: auto;
  color: var(--nc-color-text-primary);
  font-family: var(--nc-font-family);
}

.title__text {
  margin-block: 40px;
  color: var(--nc-color-text-primary);
  font-family: var(--nc-font-family);
  font-size: var(--nc-text-title-52-size);
  font-weight: var(--nc-text-heading-weight);
  letter-spacing: var(--nc-text-letter-spacing);
  line-height: var(--nc-text-title-52-leading);
  text-align: center;
}

/* tablet */
@media (width >= 768px) {
  .title__text {
    line-height: var(--ds-line-height-56);
    margin-block: 48px;
  }
}

:is(.title--44, .title-44, .title--44-left, .title-44-left) .title__text {
  margin-block: 0;
  font-size: var(--nc-text-title-44-size);
  line-height: var(--nc-text-title-44-leading);
}

:is(.title--44-left, .title-44-left, .title--start, .title-start).block {
  box-sizing: border-box;
  inline-size: min(calc(100dvw - 2 * var(--nc-space-page-margin)), var(--nc-grid-content));
  max-inline-size: none;
  margin-inline: calc(50% - min(50dvw - var(--nc-space-page-margin), var(--nc-grid-content) / 2));
}

/* tablet */
@media (width >= 768px) {
  :is(.title--44-left, .title-44-left, .title--start, .title-start).block {
    inline-size: calc(100% - 2 * var(--nc-grid-margin));
    margin-inline: auto;
  }
}

/* desktop */
@media (width >= 1022px) {
  :is(.title--44-left, .title-44-left, .title--start, .title-start).block {
    inline-size: min(calc(100dvw - 2 * var(--nc-space-page-margin)), var(--nc-grid-content));
    margin-inline: calc(50% - min(50dvw - var(--nc-space-page-margin), var(--nc-grid-content) / 2));
  }
}

:is(.title--44-left, .title-44-left, .title--start, .title-start) .title__text {
  margin-block: 0 30px;
  text-align: start;
}