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

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

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

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

.text.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);
  letter-spacing: var(--nc-text-letter-spacing);
  text-align: center;
}

/* desktop */
@media (width >= 1022px) {
  .text.block {
    max-inline-size: min(1180px, calc(100% - 2 * var(--nc-grid-margin)));
  }
}

.text__p {
  margin: 0 0 24px;
  color: var(--nc-color-text-primary);
  font-family: var(--nc-font-family);
  font-size: var(--nc-text-body-size);
  font-weight: var(--nc-text-body-weight);
  line-height: var(--ds-line-height-24);
  letter-spacing: var(--nc-text-letter-spacing);
}

/* tablet */
@media (width >= 768px) {
  .text__p {
    font-size: var(--heading-font-size-xs);
    line-height: 32px;
  }
}

.text a:any-link {
  color: var(--nc-color-link);
  font-size: inherit;
  font-weight: var(--ds-font-weight-bold);
  line-height: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
}

.text a:hover,
.text a:focus-visible {
  color: var(--nc-color-link-hover);
  text-decoration: underline;
}

:is(.text--20-left, .text-20-left, .text--start, .text-start).block {
  box-sizing: border-box;
  margin-block-end: 75px;
  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));
  text-align: start;
}

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

/* desktop */
@media (width >= 1022px) {
  :is(.text--20-left, .text-20-left, .text--start, .text-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(.text--20-left, .text-20-left, .text--start, .text-start) .text__p {
  margin: 0;
  font-size: var(--nc-text-body-size);
  line-height: var(--ds-line-height-24);
}

:is(.text--20-left, .text-20-left, .text--start, .text-start) .text__p:nth-child(n + 3) {
  margin-block-start: var(--ds-line-height-24);
}

:is(.text--20-left, .text-20-left, .text--start, .text-start) .text__p:empty {
  min-block-size: var(--ds-line-height-24);
}

/* tablet */
@media (width >= 768px) {
  :is(.text--20-left, .text-20-left, .text--start, .text-start) .text__p {
    font-size: var(--heading-font-size-xs);
    line-height: 32px;
  }

  :is(.text--20-left, .text-20-left, .text--start, .text-start) .text__p:nth-child(n + 3) {
    margin-block-start: 32px;
  }

  :is(.text--20-left, .text-20-left, .text--start, .text-start) .text__p:empty {
    min-block-size: 32px;
  }
}