/* See ./accordion-text-table.md for design notes and rationale. */

/* stylelint-disable selector-class-pattern, no-descending-specificity -- EDS BEM */

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

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

.accordion-text-table.block {
  color: var(--nc-color-text-primary);
  font-family: var(--nc-font-family);
  letter-spacing: var(--nc-text-letter-spacing);
}

.accordion-text-table__inner.is-fluid-width {
  inline-size: calc(100% - 2 * var(--nc-grid-margin));
  max-inline-size: min(calc(100dvw - 2 * var(--nc-grid-margin)), var(--nc-grid-content));
  margin-inline: auto;
}

/* tablet */
@media (width >= 768px) {
  .accordion-text-table__inner.is-fluid-width {
    inline-size: calc(100% - 2 * var(--nc-space-page-margin));
    max-inline-size: min(calc(100dvw - 2 * var(--nc-space-page-margin)), var(--nc-grid-content));
    margin-inline: auto;
  }
}

/* desktop */
@media (width >= 1022px) {
  .accordion-text-table__inner.is-fluid-width {
    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));
  }
}

.accordion-text-table__item {
  border-block-start: 1px solid var(--nc-color-border-disabled);
}

.accordion-text-table__item:last-child {
  border-block-end: 1px solid var(--nc-color-border-disabled);
}

.accordion-text-table__item-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.accordion-text-table__trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--nc-color-text-primary);
  font-family: inherit;
  font-size: 20px;
  font-weight: var(--nc-text-heading-weight);
  letter-spacing: var(--nc-text-letter-spacing);
  line-height: 32px;
  text-align: start;
  cursor: pointer;
  appearance: none;
}

.accordion-text-table__item-title {
  display: block;
  flex: 1 1 auto;
  padding-block: 29px;
  font-size: 20px;
  font-weight: var(--nc-text-heading-weight);
  line-height: 32px;
}

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

.accordion-text-table__trigger:focus-visible {
  outline: 3px solid var(--nc-color-focus);
  outline-offset: 2px;
  border-radius: 8px;
}

.accordion-text-table__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 18px;
  block-size: 19px;
  pointer-events: none;
}

.accordion-text-table__icon img {
  display: block;
  inline-size: 18px;
  block-size: auto;
}

.accordion-text-table__panel {
  margin-inline-start: 30px;
}

.accordion-text-table__panel[hidden] {
  display: none !important;
}

.accordion-text-table__table-wrap {
  max-inline-size: 100%;
  overflow-x: auto;
}

.accordion-text-table__table {
  box-sizing: border-box;
  inline-size: 100%;
  margin-block: 32px;
  border: 2px solid var(--nc-color-border-strong);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--nc-radius-surface);
  overflow: hidden;
}

.accordion-text-table__table th,
.accordion-text-table__table td {
  box-sizing: border-box;
  height: 60px;
  padding: 16px;
  border-block-end: 2px solid #e2e2e2;
  font-size: var(--nc-text-body-size);
  font-weight: var(--nc-text-body-weight);
  line-height: var(--nc-text-body-leading);
  text-align: center;
  background: var(--nc-color-bg-default);
  vertical-align: middle;
}

.accordion-text-table__table th:first-child,
.accordion-text-table__table td:first-child {
  text-align: start;
  background: var(--nc-color-bg-muted);
}

.accordion-text-table__table tr:first-child td:first-child,
.accordion-text-table__table tr:first-child th:first-child {
  border-start-start-radius: 12px;
}

.accordion-text-table__table tr:first-child td:last-child,
.accordion-text-table__table tr:first-child th:last-child {
  border-start-end-radius: 12px;
}

.accordion-text-table__table tr:last-child td:first-child,
.accordion-text-table__table tr:last-child th:first-child {
  border-end-start-radius: 16px;
}

.accordion-text-table__table tr:last-child td:last-child,
.accordion-text-table__table tr:last-child th:last-child {
  border-end-end-radius: 16px;
}

.accordion-text-table__table tr:last-child th,
.accordion-text-table__table tr:last-child td {
  border-block-end: 0;
}

.accordion-text-table__table strong {
  font-weight: var(--nc-text-heading-weight);
}

/* desktop */
@media (width >= 1022px) {
  .accordion-text-table__table {
    --att-col-1: 16.46%;
    --att-col-2: 17.72%;
    --att-col-3: 16.22%;
    --att-col-4: 16.69%;
    --att-col-5: 16.69%;
    --att-col-6: 15.98%;

    table-layout: fixed;
  }

  .accordion-text-table__table--cols-6 :is(th, td):nth-child(1) {
    inline-size: var(--att-col-1);
  }

  .accordion-text-table__table--cols-6 :is(th, td):nth-child(2) {
    inline-size: var(--att-col-2);
  }

  .accordion-text-table__table--cols-6 :is(th, td):nth-child(3) {
    inline-size: var(--att-col-3);
  }

  .accordion-text-table__table--cols-6 :is(th, td):nth-child(4) {
    inline-size: var(--att-col-4);
  }

  .accordion-text-table__table--cols-6 :is(th, td):nth-child(5) {
    inline-size: var(--att-col-5);
  }

  .accordion-text-table__table--cols-6 :is(th, td):nth-child(6) {
    inline-size: var(--att-col-6);
  }
}

.accordion-text-table__mtable {
  display: none;
  margin-block: 32px;
  overflow: hidden;
  border: 2px solid var(--nc-color-border-strong);
  border-radius: 16px;
}

.accordion-text-table__mtable-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 70px;
  margin: 0;
  padding-inline: 16px;
  background: var(--nc-color-cta-primary);
  font-size: 18px;
  font-weight: var(--nc-text-heading-weight);
  line-height: 24px;
  text-align: center;
}

.accordion-text-table__mtable-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.accordion-text-table__mtable-list li {
  display: flex;
  min-block-size: 70px;
  border-block-end: 2px solid #e2e2e2;
}

.accordion-text-table__mtable-list li:last-child {
  border-block-end: 0;
}

.accordion-text-table__mtable-label,
.accordion-text-table__mtable-value {
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  overflow-wrap: break-word;
}

.accordion-text-table__mtable-label {
  background: var(--nc-color-bg-muted);
  font-weight: 700;
}

@media (width < 768px) {
  .accordion-text-table__trigger {
    font-size: 16px;
    line-height: 24px;
  }

  .accordion-text-table__item-title {
    padding-block: 20px;
    font-size: 16px;
    line-height: 24px;
  }

  .accordion-text-table__table-wrap:has(.accordion-text-table__table:not(.accordion-text-table__table--keep)) {
    display: none;
  }

  .accordion-text-table__table:not(.accordion-text-table__table--keep) {
    display: none;
  }

  .accordion-text-table__table--keep {
    inline-size: max-content;
    min-inline-size: max-content;
  }

  .accordion-text-table__mtable {
    display: block;
  }
}