/* Блоки страниц, собираемых из контента (не по макету Figma, а по схеме ТЗ).
   Токены те же, что у выверенных страниц, — сайт остаётся одним. */

.phero {
  position: relative;          /* шапка внутри позиционируется по этой рамке */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.5625vw, 30px);
  padding: clamp(96px, 9.375vw, 180px) var(--gutter) clamp(40px, 4.1667vw, 80px);
  background: var(--ink);
  color: var(--paper);
}
.phero__crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; }
.phero__crumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.phero__crumbs li + li::before { content: "/"; color: rgba(255, 255, 255, 0.3); }
.phero__crumbs a { color: rgba(255, 255, 255, 0.55); }
.phero__crumbs a:hover { color: var(--gold); }
.phero__crumbs [aria-current] { color: var(--gold); }
.phero h1 {
  max-width: 18ch;
  font-size: clamp(30px, 3.4375vw, 66px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1px;
}
.phero__lead {
  max-width: 62ch;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--text-on-dark);
}
.phero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ——— полосы содержания ——— */
.pblock { padding: clamp(40px, 4.1667vw, 80px) var(--gutter); }
.pblock--paper { background: var(--paper); color: var(--ink); }
.pblock--ink { background: var(--ink); color: var(--paper); }
.pblock__inner { display: flex; flex-direction: column; gap: clamp(16px, 1.25vw, 24px); }
.pblock h2 {
  max-width: 24ch;
  font-size: clamp(24px, 2.0833vw, 40px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.pblock p, .pblock li { max-width: 68ch; font-size: var(--t-lead); line-height: 1.45; }
.pblock--ink p, .pblock--ink li { color: var(--text-on-dark); }
.pblock__text { display: flex; flex-direction: column; gap: 14px; }
/* контекстная ссылка внутри абзаца. Цвет наследуется от полосы — значит
   контраст текста не падает ни на светлой, ни на тёмной; видимой ссылку
   делает подчёркивание, а не один только цвет. Золото приходит на наведение
   тем же переходом, что у плиток .ptiles; за фокус с клавиатуры отвечает общий
   золотой outline из base.css:27, отдельного правила :focus-visible тут нет */
.pblock__text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pblock__text a:hover { color: var(--gold); }

/* карточка характеристик */
.pspecs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  border: 1px solid var(--border-glass);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--border-glass);
}
.pspecs > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  background: var(--ink);
}
.pblock--paper .pspecs { border-color: rgba(24, 29, 36, 0.12); background: rgba(24, 29, 36, 0.12); }
.pblock--paper .pspecs > div { background: var(--white); }
.pspecs dt { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.pspecs dd { font-size: var(--t-lead); font-weight: 600; }

/* две колонки: кому подходит / кому нет */
.pduo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 1.3021vw, 25px); }
.pduo__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(20px, 1.5625vw, 30px);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.04);
}
.pblock--paper .pduo__card { border-color: rgba(24, 29, 36, 0.12); background: var(--white); }
.pduo__card h3 { font-size: clamp(19px, 1.3542vw, 26px); font-weight: 900; letter-spacing: -0.3px; }
.pduo__card--no h3 { color: var(--gold); }

/* таблица выбора */
.ptable { overflow-x: auto; }
.ptable table { width: 100%; border-collapse: collapse; min-width: 520px; }
.ptable th, .ptable td {
  padding: 14px 18px;
  text-align: start;
  vertical-align: top;
  font-size: var(--t-body);
  line-height: 1.4;
  border-bottom: 1px solid var(--border-glass);
}
.pblock--paper .ptable th, .pblock--paper .ptable td { border-color: rgba(24, 29, 36, 0.12); }
.ptable th { font-weight: 900; letter-spacing: 0.3px; }
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }

/* плитки ссылок */
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: clamp(10px, 0.7813vw, 15px); }
.ptiles a {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 14px 20px;
  border: 1px solid var(--border-glass);
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, 0.04);
  font-size: var(--t-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--paper);
  transition: border-color 240ms cubic-bezier(0.4, 0, 0.2, 1), color 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pblock--paper .ptiles a { border-color: rgba(24, 29, 36, 0.12); background: var(--white); color: var(--ink); }
.ptiles a:hover { border-color: var(--gold); color: var(--gold); }

/* список неисправностей */
.pfaults { display: flex; flex-direction: column; gap: 1px; border-radius: var(--r-xl); overflow: hidden; background: var(--border-glass); }
.pfaults > div {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: 8px 24px;
  padding: 18px 24px;
  background: var(--ink);
}
.pfaults dt { font-weight: 900; font-size: var(--t-body); }
.pfaults dd { font-size: var(--t-body); line-height: 1.4; color: var(--text-on-dark); }
@media (max-width: 599px) { .pfaults > div { grid-template-columns: 1fr; } }

@media (max-width: 1023px) {
  .phero h1 { max-width: none; }
}

/* ——— Схема механизма ———
   Тезис раздела: стоит сразу за героем и отвечает «как это устроено» раньше,
   чем текст успеет спросить. Тон ink-deep, чтобы схема читалась как врезка,
   а не как ещё один текстовый блок. */
.pblock--ink-deep { background: var(--ink-deep); color: var(--paper); }
.pdiag__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 0;
}
.pdiag__frame img {
  width: min(100%, 560px);
  height: auto;
  border-radius: var(--r-l);
  border: 1px solid var(--border-glass);
}
.pdiag__frame figcaption {
  max-width: 46ch;
  text-align: center;
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--text-on-dark);
}

/* ——— Характеристики со знаками ———
   Голая пара «Рама / алюминий 25 мм» глазом не цепляется: знак даёт строке
   точку входа и разбивает список на смысловые куски. */
.pspecs--iconic > div { gap: 8px; }
.pspecs--iconic dt {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.pspecs__i {
  flex: 0 0 20px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ——— Плитки полотна с макро-фото ———
   Полотно выбирают глазами: пять текстовых ссылок этого не дают. */
.mcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(12px, 1.0417vw, 20px);
}
.mcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border-glass);
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--surface-tint);
  color: inherit;
}
.pblock--paper .mcard { border-color: rgba(24, 29, 36, 0.12); background: var(--white); }
.mcard__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.mcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.mcard__name { font-size: var(--t-body); font-weight: 600; }
.mcard__spec { font-size: 13.5px; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ——— Текст и кадр рядом ———
   Кусок «как это работает» на 300 слов в одну колонку читается как стена. */
.pshot {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 2.0833vw, 40px);
  align-items: start;
}
.pshot__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pshot__media { margin: 0; min-width: 0; }
.pshot__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-l);
  display: block;
}
@media (max-width: 899px) {
  .pshot { grid-template-columns: 1fr; }
  .pshot__media { order: -1; }
}

/* Кадр слева, текст справа — чтобы два соседних блока с фото не читались
   одинаково. Порядок меняется классом, а не разметкой: DOM остаётся
   в порядке чтения, и фокус по Tab не прыгает. */
.pshot--flip .pshot__media { order: -1; }
.pshot--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }

/* Карточки механизмов: схема вместо фото, поэтому кадр не обрезается */
.mcards--diag .mcard__media { aspect-ratio: 426 / 309; background: var(--ink-deep); }
.mcards--diag .mcard__media img { object-fit: contain; }
.mcard--diag .mcard__spec { color: var(--text-on-dark); font-variant-numeric: normal; }
.pblock--paper .mcard--diag .mcard__spec { color: var(--ink-2, rgba(24, 29, 36, 0.62)); }

/* ——— Кадр в герое контентной страницы ———
   125 героев начинались с пустой плашки. Кадр лежит фоном, вуаль поверх
   держит контраст: белый текст на светлом небе иначе не читается. */
.phero--shot { overflow: hidden; }
.phero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.phero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* к низу плотнее: там лежат заголовок и кнопки */
  background: linear-gradient(180deg,
    rgba(15, 18, 23, 0.62) 0%,
    rgba(15, 18, 23, 0.74) 46%,
    rgba(15, 18, 23, 0.88) 100%);
}
/* Шапка исключена намеренно: .phero это flex-колонка с align-items:flex-start,
   и position:relative превращал .nav из внепоточной рамки в флекс-элемент —
   он сжимался по содержимому и уезжал на свои же left/top. Своё
   position:absolute + z-index:20 из nav.css уже держат её выше вуали. */
.phero--shot > *:not(.phero__bg):not(.phero__veil):not(.nav) { position: relative; z-index: 2; }

/* ——— Видеофон текстового блока ———
   Макро плетения дышит под блоком «Выберите полотно»: карточки и заголовок
   лежат выше, вуаль держит контраст — видео это текстура, а не содержание. */
.pblock--vbg { position: relative; overflow: hidden; }
.pblock--vbg .pblock__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(15, 18, 23, 0.78);
}
.pblock--vbg .pblock__inner { position: relative; z-index: 2; }