/* Б-22 Таблица-контраст. Источник: новый макет (задача 6.3) */

.b-contrast {
  padding-block: var(--space-section);
  background: var(--color-bg);
}

.b-contrast__note {
  margin-top: var(--space-4);
}

/* Мобильный */

.b-contrast__table {
  display: grid;
  width: 100%;
}

.b-contrast__table thead,
.b-contrast__table tbody,
.b-contrast__table tr {
  display: contents;
}

.b-contrast__table th,
.b-contrast__table td {
  display: grid;
  gap: 0.125rem;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  font-size: var(--fs-small);
  line-height: 1.4;
  text-align: left;
}

.b-contrast__table td::before {
  content: attr(data-label);
  color: var(--color-text-subtle);
  font-size: var(--fs-caption);
  font-weight: var(--font-weight-semibold);
}

.b-contrast__table .b-contrast__corner,
.b-contrast__table .b-contrast__row {
  display: none;
}

.b-contrast__head {
  padding-top: var(--space-5);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: var(--fs-h4);
  font-weight: var(--font-weight-bold);
}

.b-contrast__table tbody tr:last-child > td {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-5);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.b-contrast__c3 { order: 1; }
.b-contrast__c1 { order: 2; }
.b-contrast__c2 { order: 3; }
.b-contrast__c4 { order: 4; }

.b-contrast__table .b-contrast__verter {
  background: var(--color-accent-soft);
}

.b-contrast__table .b-contrast__head.b-contrast__verter {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.b-contrast__table td.b-contrast__verter::before {
  color: var(--color-accent-strong);
}

/* Планшет и шире */

@media (min-width: 768px) {
  .b-contrast__wrap {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
  }

  .b-contrast__table {
    display: table;
    min-width: 44rem;
    table-layout: fixed;
  }

  .b-contrast__table thead {
    display: table-header-group;
  }

  .b-contrast__table tbody {
    display: table-row-group;
  }

  .b-contrast__table tr {
    display: table-row;
  }

  .b-contrast__table .b-contrast__corner,
  .b-contrast__table .b-contrast__row,
  .b-contrast__table th,
  .b-contrast__table td {
    display: table-cell;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
  }

  .b-contrast__table td::before {
    content: none;
  }

  .b-contrast__corner,
  .b-contrast__row {
    width: 24%;
  }

  .b-contrast__row {
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
  }

  .b-contrast__head {
    border-radius: 0;
    font-size: var(--fs-small);
    vertical-align: bottom;
  }

  .b-contrast__table tbody tr:last-child > td,
  .b-contrast__table tbody tr:last-child > th {
    margin: 0;
    padding-bottom: var(--space-4);
    border-bottom: 0;
    border-radius: 0;
  }

  .b-contrast__table td {
    color: var(--color-text-muted);
  }

  .b-contrast__table .b-contrast__verter {
    color: var(--color-accent-deep);
  }

  .b-contrast__table .b-contrast__head.b-contrast__verter {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
}

@media (min-width: 1024px) {
  .b-contrast__corner,
  .b-contrast__row,
  .b-contrast__table th,
  .b-contrast__table td {
    padding: var(--space-5);
    font-size: var(--fs-body);
  }

  .b-contrast__head {
    font-size: 1.0625rem;
  }
}