/* Полоса из четырёх фактов под первым экраном главной — «крупная типографика».
   Работает у вариантов первого экрана на общем каркасе (.hero-uni: главная и /des_11 … /des_15);
   у прежних главных (/v1 … /v3) и вариантов 1–10 остаётся старая полоса .facts с иконками.
   Разметка — app/views/home/_facts.html.erb: <section class="home-facts wrap f1" data-controller="reveal">.

   Иконок нет: числа набраны высотой ровно в две строки крупного набора, поэтому «60», «8» и
   двухстрочные «Дома или / в школе», «Награда / каждому» стоят на одной верхней линии и на одной
   базовой. По базовой линии каждого пункта проходит мазок маркера своего цвета (--ff-a … --ff-d).
   Все размеры набора задаёт одна переменная --f1-s (кегль крупных слов).
   Появление: контроллер reveal ставит секции класс is-seen — мазки и разделители прочерчиваются;
   текст виден всегда. */

/* Палитра полосы: меняется вместе со сценой первого экрана. */
.hero-uni{
  --ff-ink: #24243e;        /* основной текст */
  --ff-muted: #6b7389;      /* подписи */
  --ff-line: #e9ecf3;       /* тонкие линии */
  --ff-a: #6744d4;          /* главный акцент темы */
  --ff-a-soft: #efe9fd;     /* его светлая подложка */
  --ff-b: #f7b928;          /* второй цвет (тёплый) */
  --ff-c: #2bb3d6;          /* третий цвет (холодный) */
  --ff-d: #e86fb5;          /* четвёртый цвет */
}
.hero-des-12.hero-uni{ --ff-a: #1763d6; --ff-a-soft: #e6f0ff; --ff-b: #ffb52e; --ff-c: #2a9d6a; --ff-d: #ff5a4d; }
.hero-des-13.hero-uni{ --ff-a: #1c7a5a; --ff-a-soft: #e3f2ea; --ff-b: #f2b830; --ff-c: #4aa3d8; --ff-d: #e9728a; }
.hero-des-14.hero-uni{ --ff-a: #d7263d; --ff-a-soft: #ffece6; --ff-b: #ffa23d; --ff-c: #c2185b; --ff-d: #7a1a55; }
.hero-des-15.hero-uni{ --ff-a: #6744d4; --ff-a-soft: #efe9fd; --ff-b: #f7b928; --ff-c: #37c6e8; --ff-d: #e86fd0; }

.home-facts{ position: relative; z-index: 2; margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; color: var(--ff-ink); }
.home-facts :where(ul, ol, li, p, dl, dt, dd){ margin: 0; padding: 0; list-style: none; }

.f1{
  --f1-s: 30px;                 /* кегль слов; число = 2.534 × --f1-s (≈76px) */
  --f1-gap: 26px;               /* наименьшее поле по сторонам разделителя */
  padding: 34px 0 36px;
}
/* Колонки — по ширине своего текста, свободное место делится поровну между ними:
   левый край полосы — по левому краю колонки сайта, правый — по правому. */
.f1-list{
  display: grid;
  grid-template-columns: repeat(3, auto) fit-content(100%);
}
.f1-item{
  --f1-c: var(--ff-a); --f1-p: 30%; --f1-r: -1.2deg; --f1-d: .1s;
  position: relative; z-index: 0;
  display: grid; grid-row: span 2;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-rows: subgrid;      /* базовые линии и подписи всех пунктов — на общих строках */
  min-width: 0;
  font-size: var(--f1-s);
}
.f1-item-tasks{ --f1-c: var(--ff-b); --f1-p: 58%; --f1-r: .9deg;  --f1-d: .22s; }
.f1-item-place{ --f1-c: var(--ff-c); --f1-p: 34%; --f1-r: -.7deg; --f1-d: .34s; }
.f1-item-award{ --f1-c: var(--ff-d); --f1-p: 30%; --f1-r: 1.1deg; --f1-d: .46s; }
.hero-des-14 .f1-item-award{ --f1-p: 23%; }      /* тёмная слива: светлее, чтобы мазок не был грязным */

/* главная строка */
.f1-main{
  grid-column: 1; align-self: last baseline;
  display: block;
  font-weight: 800; line-height: 1.1; letter-spacing: -.024em;
  color: var(--ff-ink);
}
.f1-row{ display: block; white-space: nowrap; }
.f1-num{
  font-size: 2.534em; line-height: .868;      /* 2.2 строки набора ÷ 2.534 */
  letter-spacing: -.045em;
  font-variant-numeric: lining-nums tabular-nums;
}
.f1-unit{ font-size: .667em; line-height: 0; letter-spacing: -.012em; margin-left: .1em; }
.f1-or{ font-style: italic; font-weight: 500; letter-spacing: -.01em; color: var(--ff-a); }

/* подпись */
.f1-sub{
  grid-column: 1;
  display: block; margin-top: 9px;
  font-size: 14px; line-height: 1.3; font-weight: 500;
  color: var(--ff-muted);
  text-wrap: balance;
}

/* мазок маркера: привязан к базовой линии через строчный блок кегля --f1-s */
.f1-hl{ position: relative; white-space: nowrap; }
.f1-hl::before{
  content: ""; position: absolute; z-index: -1;
  left: -.2em; right: -.26em; bottom: .05em; height: .5em;
  border-radius: .1em .26em .12em .3em / .2em .12em .24em .1em;
  background: var(--ff-a-soft);
  rotate: var(--f1-r);
  transform: scaleX(0); transform-origin: 0 60%;
  transition: transform .62s cubic-bezier(.2, .75, .2, 1) var(--f1-d), scale .28s ease;
}
@supports (background: color-mix(in srgb, red 10%, #fff)){
  .f1-hl::before{ background: color-mix(in srgb, var(--f1-c) var(--f1-p), #fff); }
}
.f1.is-seen .f1-hl::before{ transform: none; }

/* тонкий разделитель: стоит посередине свободного места справа от пункта */
.f1-item::after{
  content: ""; grid-column: 2; grid-row: 1 / -1; justify-self: center;
  width: 1px; margin: 4px var(--f1-gap) 2px;
  background: var(--ff-line);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .5s cubic-bezier(.2, .75, .2, 1) var(--f1-d);
}
.f1-item:last-child::after{ content: none; }
.f1.is-seen .f1-item::after{ transform: none; }

@media (hover: hover){
  .f1-item:hover .f1-hl::before{ scale: 1.05 1.3; }
}

@media (max-width: 1100px){
  .f1{ --f1-s: clamp(22px, 2.72vw, 30px); --f1-gap: clamp(12px, 2vw, 24px); padding: 28px 0 30px; }
  .f1-sub{ font-size: 13px; margin-top: 8px; }
}
/* телефон: 2×2; колонки — по своему тексту плюс поровну свободного места (длинная подпись
   «на математику и логику» не переносится на 360px), разделитель — в середине промежутка */
@media (max-width: 700px){
  .f1{ --f1-s: clamp(21px, 5.6vw, 27px); --f1-gap: 24px; padding: 26px 0 28px; }
  .f1-list{ grid-template-columns: auto auto; column-gap: var(--f1-gap); }
  .f1-item{ grid-template-columns: minmax(0, 1fr); }
  .f1-item:nth-child(n+3){ padding-top: 24px; }
  .f1-item::after{
    grid-area: auto;
    position: absolute; right: calc(var(--f1-gap) / -2); top: 0; bottom: 0; margin: 4px 0 2px;
  }
  .f1-item:nth-child(n+3)::after{ top: 24px; }
  .f1-item:nth-child(even)::after{ content: none; }
  .f1-sub{ margin-top: 6px; }
}

@media (scripting: none){
  .f1 .f1-hl::before, .f1 .f1-item::after{ transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .f1 .f1-hl::before, .f1 .f1-item::after{ transform: none; transition: none; scale: none; }
}