/* Четвёртый экран портфолио — три белые карточки.
   Форма и раскладка сняты с референса Руслана: у карточки срезаны
   три угла из четырёх (левый верхний, правый верхний, правый нижний),
   четвёртый скруглён. Карточки стоят в ряд «вприпрыжку» — средняя
   опущена примерно на половину своей высоты. */

.principles {
  position: relative; /* отсчёт для украшения в углу */
  padding: clamp(0.5rem, 1vw, 1.25rem) var(--gutter) clamp(6rem, 12vw, 10rem);
}

/* Украшение в левом нижнем углу — веер «лучей майндкарты» из того же
   материала, что волна на первом экране и диаграммы на втором:
   моноширинные нули и единицы, серые, ось и центральная ветка светлые.
   Шрифт только моноширинный: цифры и пробелы обязаны быть одной ширины,
   иначе рисунок разъезжается.
   Кегль привязан к ширине экрана: сетка 54 знакоместа по 0.6 кегля.
   Место слева от ряда карточек — это колонка отступа плюс всё, что
   левее --value-left; кегль подобран так, чтобы рисунок в неё уложился
   с запасом. */
.principles__chart {
  position: absolute;
  /* Не по колонке отступа: рисунок стоит чуть правее и ниже неё —
     так он читается отдельным украшением, а не элементом сетки. */
  left: calc(var(--gutter) * 2.6);
  bottom: 0;
  z-index: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: min(0.62vw, 9.5px);
  line-height: 1;
  color: var(--color-text-muted);
  white-space: pre;
  user-select: none;
}

/* Ось веера, остриё и центральная ветка. */
.principles__chart-core {
  color: var(--color-text);
}

/* Ряд стоит ровно под текстом блока «Ценность»: левый край совпадает
   с левым краем той колонки, ширина — с самой длинной строкой текста
   (см. --card-row в токенах). Ширину карточки не задаём: три равные
   доли ряда за вычетом промежутков. */
.principles__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5vw;
  align-items: start;
  width: var(--card-row);
  margin: 0 0 0 calc(var(--value-left) - var(--gutter));
  padding: 0;
  list-style: none;
}

/* Средняя карточка опущена — от этого ряд перестаёт быть линейкой. */
.principles__list .principle:nth-child(2) {
  margin-top: var(--card-offset);
}

/* Форма карточки. Маска нарисована на холсте 100x105 — ровно
   в пропорции самой карточки, поэтому срезы выходят симметричными:
   7 единиц по горизонтали дают ту же длину в пикселях, что 7 единиц
   по вертикали. Три угла срезаны наискось, левый нижний просто скруглён.
   Скруглены и стыки срезов с кромками: радиус 3 единицы, на карточке
   это примерно 9px. Точки касания отодвинуты от вершины на r*tg(22.5°)
   = 1.24 вдоль кромки — у тупого угла в 135° это и есть длина подхода
   к дуге. У прямого нижнего левого угла радиус 4 и отступ равен ему.
   preserveAspectRatio='none' растягивает холст по боксу — пропорция
   у бокса та же, так что форма не плывёт. */
.principle {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  padding: 7% 7% 6%;
  background-color: var(--color-card);
  color: var(--color-bg);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 105' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M8.24 0L91.76 0A3 3 0 0 1 93.88 0.88L99.12 6.12A3 3 0 0 1 100 8.24L100 96.76A3 3 0 0 1 99.12 98.88L93.88 104.12A3 3 0 0 1 91.76 105L4 105A4 4 0 0 1 0 101L0 8.24A3 3 0 0 1 0.88 6.12L6.12 0.88A3 3 0 0 1 8.24 0Z'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

/* Распорка держит пропорцию карточки 100 : 105. Не aspect-ratio:
   тот задаёт высоту жёстко, и длинный текст вылезал бы за края.
   Здесь пропорция работает как минимум: карточка ниже не станет,
   а вырасти при нужде может. Ширины у распорки нет — она стоит
   поверх содержимого и на раскладку не влияет. Каждому блоку внутри
   строка назначена явно: распорка занимает колонку целиком,
   и автоматическая раскладка увела бы содержимое под неё. */
.principle::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / -1;
  width: 0;
  padding-top: 105%;
}

/* Номер карточки. Набран моноширинным: у него цифры технической
   формы и одинаковой ширины, так что 01, 02 и 03 занимают ровно
   одно место и стоят в ряд по одной линии. */
.principle__index {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--card-index-size);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* Заголовок стоит на месте крупной цифры из референса: прижат к низу
   средней зоны, набран тем же начертанием, что заголовки страницы. */
.principle__title {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin: 0;
  font-size: var(--card-title-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: var(--statement-tracking);
}

/* Подвал: линия во всю ширину карточки, под ней мелкий текст слева
   и знак справа — расстановка из референса. */
.principle__footer {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1em;
  margin-top: 1.2em;
  padding-top: 1.2em;
  border-top: 1px solid rgba(6, 6, 6, 0.18);
}

.principle__text {
  margin: 0;
  max-width: 22ch;
  font-size: var(--card-text-size);
  font-weight: 500;
  line-height: 1.35;
}

/* Знак в углу — декор из референса, поэтому от чтения он скрыт. */
.principle__glyph {
  flex: none;
  width: 1.9em;
  height: 1.9em;
  fill: none;
  stroke: rgba(6, 6, 6, 0.45);
  stroke-width: 6;
  font-size: var(--card-text-size);
}

/* Порог шире обычных 767px: карточка занимает пятую часть экрана,
   и уже на планшете в неё перестаёт помещаться текст. Там ряд
   разворачивается в столбик. */
@media (max-width: 1023px) {
  /* Карточки занимают всю ширину экрана — свободной колонки слева,
     где стоит украшение, больше нет. Убираем, как и рисунки
     на втором экране. */
  .principles__chart {
    display: none;
  }

  /* Ряд разворачивается в столбик, «скачущее» смещение теряет смысл —
     карточки и так идут одна под другой. */
  /* Столбик во всю ширину: равняться по колонке текста больше не на что,
     на узком экране она и так во весь экран. */
  .principles__list {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 6vw, 2.5rem);
    width: auto;
    margin-left: 0;
  }

  /* Кегли внутри карточки завязаны на ширину экрана, а карточка
     на телефоне занимает его целиком — берём размеры покрупнее. */
  .principle__title {
    font-size: clamp(1.5rem, 7vw, 2.25rem);
  }

  .principle__index {
    font-size: clamp(0.7rem, 3vw, 0.85rem);
  }

  .principle__text {
    font-size: clamp(0.85rem, 3.8vw, 1.05rem);
  }

  .principles__list .principle:nth-child(2) {
    margin-top: 0;
  }

  /* Пропорция карточки на узком экране растянула бы её в столб:
     ширина во весь экран, а текста внутри столько же. Распорку
     убираем, высоту отдаём содержимому. */
  .principle {
    gap: clamp(2.5rem, 12vw, 4rem);
    padding: 8% 7% 7%;
  }

  .principle::before {
    padding-top: 0;
  }
}