/* ==========================================================================
   v4/board.css — витрина-сравнение для владелицы сайта, НЕ один из четырёх
   вариантов. Использует те же токены (tokens.css) и те же .btn/.tap классы,
   что и a-cinematic/b-editorial/c-gallery/d-story, чтобы борд визуально
   принадлежал тому же семейству, но здесь нет ни скролл-сцены, ни лайтбокса
   — только карточки-превью со ссылками наружу.
   ========================================================================== */

body.board {
  background: var(--bg);
}

.board-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--gut);
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}

.board-hdr__brand {
  font-family: var(--serif);
  font-size: var(--t-h4);
  color: var(--ink);
  flex-shrink: 0;
}
.board-hdr__brand em { font-style: italic; color: var(--deep); }

/* На 200% масштабе (прокси-тест reflow) бренд + служебная пометка не
   помещаются в строку — тот же класс дефекта, что чинили в d-story/
   style.css `.hdr`: оба текста уже упёрлись в защитный min-width: auto,
   а флекс-строке без wrap деть лишнюю ширину некуда. Перенос не годится
   (шапка не фиксированная здесь, но вторая строка ломает вертикальный
   ритм страницы-сравнения так же). Бренд — имя сайта, оставляем целым
   (flex-shrink: 0 выше); пометка «Черновик для сравнения» — служебная,
   для внутреннего использования, не для посетителя — ей разрешено
   сжиматься ниже своего текста и обрезаться многоточием. */
.board-hdr__note {
  font-size: var(--t-small);
  color: var(--soft);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==== Вступление =========================================================== */

.intro {
  max-width: 860px;
  margin: 0 auto;
  padding: var(--sec-y) var(--gut) var(--s-8);
  text-align: center;
}

.intro__eyebrow {
  display: inline-block;
  margin-bottom: var(--s-3);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--deep);
}

.intro h1 {
  font-size: var(--t-h1);
  margin-bottom: var(--s-5);
}

.intro__lead {
  max-width: var(--measure);
  margin: 0 auto var(--s-6);
  font-size: var(--t-lead);
  color: var(--soft);
}

.steps {
  display: grid;
  gap: var(--s-3);
  max-width: 640px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-6);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  text-align: left;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding-left: var(--s-7);
  font-size: var(--t-body);
}

.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--onaccent);
  font-size: var(--t-small);
  font-weight: 500;
}

/* ==== Совет: если не хотите разбираться сами =============================== */

.quickpick {
  max-width: 760px;
  margin: 0 auto var(--s-8);
  padding: var(--s-6) var(--s-7);
  background: var(--bg2);
  border-left: 4px solid var(--deep);
  border-radius: 0 var(--rad) var(--rad) 0;
}

.quickpick__eyebrow {
  display: block;
  margin-bottom: var(--s-3);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--deep);
}

.quickpick p {
  font-size: var(--t-body);
  color: var(--ink);
}
.quickpick p + p { margin-top: var(--s-3); }
.quickpick__lead { font-size: var(--t-lead); }
.quickpick strong { color: var(--deep); }

/* ==== Сетка карточек ======================================================= */

.board-grid {
  padding: 0 var(--gut) var(--sec-y);
}

.board-grid h2 {
  max-width: 1180px;
  margin: 0 auto var(--s-6);
  font-size: var(--t-h2);
  text-align: center;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  max-width: 1180px;
  margin: 0 auto;
}

@media (min-width: 860px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-6);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: var(--rad);
  box-shadow: var(--shadow-lift);
  /* Grid items default to min-width:auto (floor = content's min-content
     size) — without this override the card can't shrink below its widest
     descendant and forces horizontal scroll on 320-360px viewports. */
  min-width: 0;
}

.card__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

/* min-width:0 обязателен — иначе флекс-элемент держится за интринсик-ширину
   заголовка (h3) и не сжимается уже на 320-414px, раздувая всю карточку. */
.card__head > div { min-width: 0; }

.card__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--deep);
  color: var(--ondeep);
  font-family: var(--serif);
  font-size: 1.3rem;
}

.card__eyebrow {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 0.2em;
}

.card__title {
  font-size: var(--t-h3);
}

/* ---- Превью: скриншот компьютера + скриншот телефона рядом -------------- */

.card__preview {
  display: flex;
  align-items: flex-end;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--rad);
}

/* Пропорции 7:2 подобраны под соотношения сторон самих скриншотов
   (1440x900 и 390x844), чтобы оба превью были примерно одной высоты.
   flex-basis 0 + min-width:0 обязательны: иначе flex-элемент не сжимается
   уже свою собственную (пиксельную) ширину картинки на узких экранах —
   именно так появляется горизонтальный скролл на 320-414px.
   margin: 0 обязателен — <figure> получает от браузера дефолтный маргин
   (~1em сверху/снизу, 40px слева/справа), которого нигде здесь не было
   явно снято. На узкой карточке (390px) эти 2×40px съедали почти всё
   содержимое .card__preview — flex-grow честно делил в пропорции 7:2, но
   ОСТАВШИЕСЯ после маргина 62px вместо ожидаемых ~220px, поэтому «Телефон»
   под 14-пиксельной колонкой переносился по одной букве на строку.
   Измерено вживую: computed margin у .card__shot был "15.82px 40px". */
.card__shot { position: relative; flex: 7 1 0%; min-width: 0; margin: 0; }
.card__shot--mob { flex: 2 1 0%; }

.card__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(30, 40, 42, 0.18);
}

.card__shot figcaption {
  margin-top: var(--s-2);
  text-align: center;
  font-size: var(--t-small);
  color: var(--soft);
}

.card__idea {
  font-family: var(--serif);
  font-size: var(--t-lead);
  font-style: italic;
  color: var(--ink);
}

.card__list {
  display: grid;
  gap: var(--s-2);
}

.card__list li {
  position: relative;
  padding-left: var(--s-5);
  font-size: var(--t-body);
  color: var(--soft);
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---- Вывод: чем силён вариант и честная цена этого выбора --------------- */

.card__verdict {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--rad);
}

.card__verdict dt {
  font-size: var(--t-micro);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  margin-bottom: 0.3em;
}

.card__verdict dd {
  margin: 0;
  font-size: var(--t-body);
  color: var(--ink);
}

.card__verdict div:first-child dt { color: var(--deep); }
.card__verdict div:last-child dt { color: var(--soft); }

.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: auto;
}

/* ==== Подвал ================================================================ */

.board-ftr {
  padding: var(--s-6) var(--gut) var(--s-8);
  text-align: center;
  font-size: var(--t-small);
  color: var(--soft);
  border-top: 1px solid var(--line);
}