/* Шестой экран портфолио — принципы работы.
   Класс блока — .rules, а не .principles: имя занято белыми карточками
   выше по странице. Текст повторяет композицию блока «Ценность»:
   слева у края мелкая подпись в скобках, справа широкая колонка,
   первая строка утоплена вправо, вторая половина фразы приглушена.
   Под текстом — шесть тёмных карточек-правил в том же ряду, по которому
   выровнены белые карточки: левый край и ширина совпадают с текстом. */

.rules {
  display: grid;
  grid-template-columns: 1fr var(--value-column);
  align-items: start;
  padding: clamp(3rem, 8vw, 7rem) var(--value-inset) clamp(6rem, 12vw, 10rem) var(--gutter);
}

/* Подпись слева. Та же, что «(Продукт)», «(Ценность)» и «(Кейсы)».
   Верхняя строка подписи выравнивается по первой строке текста: подпись
   мельче, поэтому её строка ниже, и разницу компенсируем отступом —
   расчёт тот же, что в value.css. */
.rules__label {
  margin: 0;
  padding-top: calc((var(--value-size) * var(--value-leading) - var(--subtitle-size) * 1.2) / 2);
  color: var(--color-text-muted);
  font-size: var(--subtitle-size);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
}

.rules__text {
  margin: 0;
  font-size: var(--value-size);
  font-weight: 700;
  line-height: var(--value-leading);
  letter-spacing: var(--statement-tracking);
  text-indent: var(--value-indent);
}

/* Строка заданного переноса — как в блоке «Ценность»: блочная, поэтому
   рисунок фразы не зависит от ширины экрана. Отступ первой строки лежит
   на абзаце и наследуется каждой строкой-блоком, у остальных его гасим. */
.rules__line {
  display: block;
  text-indent: 0;
}

.rules__line:first-child {
  text-indent: var(--value-indent);
}

/* Вторая половина фразы приглушена — тот же приём, что в «Ценности»
   и в заголовке первого экрана. */
.rules__muted {
  color: var(--color-text-muted);
}

/* Ряд карточек стоит в колонке текста и повторяет ширину ряда белых
   карточек выше — страница держит одну вертикаль. Шесть штук: три
   в ряд, два ряда. */
.rules__list {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rule-gap);
  width: var(--card-row);
  margin: clamp(2rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

/* Карточка. Три обычных угла скруглены border-radius, срез верхнего
   левого — маской.

   Почему маска, а не clip-path: у белых карточек стыки среза с кромками
   тоже скруглены, а polygon() рисует только прямые. Почему маска
   из трёх слоёв, а не одна на всю карточку, как у белых: та растянута
   по боксу (preserveAspectRatio='none') и держится только потому,
   что пропорция карточки задана жёстко. Здесь высоту задаёт текст,
   и растянутая маска увела бы срез с 45°, а скругления — в эллипсы.
   Поэтому уголок вынесен в отдельную квадратную плитку с размером
   в пикселях: она не растягивается, а остальную площадь закрывают
   два прямоугольника. Слои маски складываются, шва между ними нет.

   Геометрия плитки. Холст 100x100 равен --rule-tile, то есть полутора
   срезам, — сам срез приходит на 66.67 единицы, а лишняя половина
   нужна, чтобы в плитку целиком вошли дуги. Радиус дуг 24.3 единицы =
   0.365 среза: у белой карточки этот радиус равен 3% ширины при срезе
   в 8.24%, здесь та же доля. Стык кромки со срезом — тупой угол
   в 135°, дуга отходит от вершины на r*tg(22.5°) = 10.07 единицы
   вдоль кромки и на столько же вдоль среза (по осям это 7.12).

   Прямоугольные слои залезают на плитку на 1px: без нахлёста на стыке
   остаётся щель в полпикселя от сглаживания, и её видно как светлую
   линию через всю карточку. */
/* Строки: номер, заголовок, текст и пустая распорка внизу. Свободное
   место копится под текстом, а не над заголовком, — тогда заголовки
   всех карточек ряда стоят на одной линии независимо от того, сколько
   строк занял текст. Карточки в ряду одной высоты (растягивает грид),
   поэтому разной у них остаётся только пустота внизу. */
.rule {
  --rule-tile: calc(var(--rule-cut) * 1.5);

  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto 1fr;
  padding: clamp(1rem, 1.5vw, 1.75rem);
  background-color: var(--color-surface);
  border-radius: var(--rule-radius);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M100 0L76.74 0A24.3 24.3 0 0 0 59.55 7.12L7.12 59.55A24.3 24.3 0 0 0 0 76.74L0 100L100 100Z'/%3E%3C/svg%3E"),
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0);
  mask-size:
    var(--rule-tile) var(--rule-tile),
    calc(100% - var(--rule-tile) + 1px) 100%,
    var(--rule-tile) calc(100% - var(--rule-tile) + 1px);
  mask-position: 0 0, 100% 0, 0 100%;
  mask-repeat: no-repeat;
}

/* Распорка задаёт карточке минимальную высоту в долях ширины — приём
   тот же, что у белых карточек: пропорция работает как минимум,
   длинный текст карточку растянет, а не вылезет за край. Ширины
   у распорки нет, на раскладку она не влияет, поэтому каждому блоку
   внутри строка назначена явно. */
.rule::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / -1;
  width: 0;
  padding-top: var(--rule-ratio);
}

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

/* Отбивка от номера задана величиной, а не распоркой: расстояние
   от номера до заголовка одинаково во всех карточках. */
.rule__title {
  grid-column: 1;
  grid-row: 2;
  margin: var(--rule-title-gap) 0 0;
  font-size: var(--rule-title-size);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--statement-tracking);
}

.rule__text {
  grid-column: 1;
  grid-row: 3;
  margin: 0.55em 0 0;
  color: var(--color-text-soft);
  font-size: var(--card-text-size);
  font-weight: 500;
  line-height: 1.45;
}

/* Порог тот же, что у белых карточек: карточка занимает пятую часть
   экрана, и уже на планшете в неё перестаёт помещаться текст.
   Здесь карточек шесть, поэтому ряд не разворачивается в столбик
   сразу, а сначала переходит на две колонки во всю ширину колонки
   текста — с текстом он остаётся вровень до самого телефона. */
@media (max-width: 1023px) {
  .rules__list {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1rem, 3vw, 1.5rem);
    width: auto;
  }

  .rule__title {
    font-size: clamp(1.1rem, 3vw, 1.5rem);
  }

  .rule__text {
    font-size: clamp(0.85rem, 2.2vw, 1rem);
  }
}

@media (max-width: 767px) {
  /* На телефоне две колонки не помещаются: подпись уходит над текстом,
     утопленная первая строка теряет смысл — строки и так короткие. */
  .rules {
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 5vw, 2rem);
    padding-right: var(--gutter);
  }

  .rules__label {
    padding-top: 0;
  }

  /* Заданные переносы рассчитаны на широкий экран — возвращаем текст
     в общий поток, пусть переносится сам. */
  .rules__text,
  .rules__line:first-child {
    text-indent: 0;
  }

  .rules__line {
    display: inline;
  }

  .rules__list {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  /* Во всю ширину экрана карточка от пропорции вытянулась бы в столб:
     высоту отдаём содержимому. */
  .rule::before {
    padding-top: 0;
  }

  .rule {
    --rule-title-gap: clamp(2rem, 9vw, 3rem);
    padding: clamp(1.25rem, 5vw, 1.75rem);
  }

  .rule__text {
    font-size: clamp(0.9rem, 3.6vw, 1.05rem);
  }
}