/* pages.css — владелец: тикет 04. Другие тикеты сюда не пишут.
   Компоненти для «Методологія», трьох сторінок категорій і «Обмін».
   Розширюють класи .deck-* (tokens.css) і класи T01 (.flow, .entries,
   .contact-grid) — нових паралельних систем не заводимо, лише додаємо
   те, чого бракує в наявних класах. Кольори — тільки var(--deck-*). */

/* --- Герой контентної сторінки: той самий приём, що .hero--cine на головній
   (фото як текстура під скримом, фільтр saturate/brightness, ghost-цифра),
   але без повного екрана. На сторінці, де головне — зміст, 100svh відсунув
   би першу секцію під згин; тут герой віддає екран змісту, а не собі.
   Підключається разом із .hero--cine, pages.css іде після site.css. --- */
.hero--page {
  min-height: 52vh;
  min-height: calc(58svh - var(--header-h));
  align-items: flex-end;
  padding: var(--deck-s-8) 0 var(--deck-s-7);
}
/* На рівень нижче за головну: h1 сторінки не сперечається з h1 сайту. */
.hero--page h1 { font-size: clamp(30px, 4.4vw, 54px); max-width: 20ch; }
.hero--page .hero-lead { max-width: 58ch; }
/* Ghost-марка масштабується під нижчий герой: штатні 360px з головної тут
   налізли б на текст на середніх ширинах. На вузьких екранах прибираємо —
   місця під неї поруч із заголовком уже немає. */
.hero--page .deck-ghost-num { font-size: clamp(120px, 15vw, 240px); opacity: 0.12; }
@media (max-width: 680px) {
  .hero--page .deck-ghost-num { display: none; }
}

/* --- Розширення .flow для кроків з довшим описом (ворота угоди,
   ланцюжок упаковки тизер → IM → фінмодель → дата-рум) --- */
.flow--detailed .flow__step {
  text-align: left;
  align-items: flex-start;
  min-width: 210px;
}
.flow__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--deck-text-2);
  margin-top: 2px;
}

/* --- Шість воріт угоди: розгорнутий варіант рейки, базові класи
   .process-rail* лежать у site.css (головна сторінка). Тут лише модифікатор
   під повні описи — паралельної системи не заводимо, щоб відвідувач, який
   прийшов з кнопки на головній, упізнав ту саму схему.
   Причина переходу з .flow: шість кроків по min-width 210px + стрілки дають
   ~1430px при контентній ширині .wrap 1192px, тобто головний зміст сторінки
   ішов у горизонтальну прокрутку на будь-якому ноутбуці. --- */
.process-rail--gates { margin-top: var(--deck-s-6); }
.process-rail--gates .process-rail__item { padding: var(--deck-s-5) 0; }
/* Центр гуртка зсувається разом з padding-top: 24px + 52px / 2 = 50px.
   Ці два правила обривають лінію рейки рівно в точці дотику до першого
   й останнього гуртка, а не тягнуть її в порожнечу. */
.process-rail--gates .process-rail__item:first-child::before { top: 50px; }
.process-rail--gates .process-rail__item:last-child::before { height: 50px; }
.process-rail--gates .process-rail__body {
  flex: 1;
  /* Єдине оптичне число: піднімає перший рядок тексту на рівень центру
     гуртка. align-items:baseline тримає заголовок і опис на спільній лінії,
     скільки б рядків не займав опис. */
  padding-top: 12px;
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1.7fr;
  gap: var(--deck-s-5);
  align-items: baseline;
}
.process-rail--gates .process-rail__body h3 {
  font-size: 19px;
  color: var(--deck-text);
}
.process-rail--gates .gate-desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--deck-text-2);
  max-width: 62ch;
}
/* --- Контракт воріт: опис відповідає «що відбувається», а ці рядки —
   «що потрібно від вас», «хто працює», «що виходить». Без них ворота
   лишалися назвою кроку; з ними кожен крок має вхід і артефакт.
   Обгортка .gate-col тримає опис і факти в одній колонці сітки, щоб не
   переписувати розкладку .process-rail__body. --- */
.gate-col { min-width: 0; }
.gate-facts {
  margin: var(--deck-s-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--deck-s-2);
  max-width: 62ch;
}
.gate-facts > div {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--deck-s-3);
  align-items: baseline;
}
/* Мітка тримається на --deck-text-2, а не на --deck-text-3: третій рівень
   тексту не проходить AA (4.21:1 на фоні), і додавати нові такі місця не
   можна. Ієрархію дає розмір і капітель, а не колір. */
.gate-facts dt {
  font-family: var(--deck-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--deck-text-2);
}
.gate-facts dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--deck-text);
}
.gate-facts b { color: var(--deck-amber); font-weight: 700; }
@media (max-width: 860px) {
  .gate-facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* --- Межі методу: перелік того, чого компанія не робить --- */
.promise-rows { margin-top: var(--deck-s-6); }
.limits { margin-top: var(--deck-s-5); }
.limit-list {
  list-style: none;
  margin: var(--deck-s-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--deck-s-3) var(--deck-s-6);
}
.limit-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--deck-text-2);
}
.limit-list li::before {
  content: "×";
  position: absolute;
  left: 4px;
  font-family: var(--deck-font-mono);
  font-weight: 700;
  color: var(--deck-text-2);
}
@media (max-width: 860px) {
  .process-rail--gates .process-rail__body {
    grid-template-columns: 1fr;
    gap: var(--deck-s-2);
  }
}

/* --- Три режими публічності: у цих картках немає кнопки, тому розпірка
   .entry-card p {flex:1} (site.css) нічого не притискає донизу — вона лише
   розтягує абзац, і списки в трьох картках починаються на різній висоті.
   Прибираємо розпірку локально: вільне місце падає в низ картки, а списки
   вирівнюються по верхньому краю. Картки з кнопкою на інших сторінках
   поведінки не змінюють. --- */
.entries--modes .entry-card p { flex: none; }
/* Мітка-крок замість кікера: рядок довший за звичайну .deck-label, тому
   трекінг трохи щільніший — з 0.14em він розганявся на два рядки. */
.mode-step { letter-spacing: 0.09em; }

/* --- Списки всередині .entry-card (режими публічності) --- */
.entry-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin-top: 4px;
  color: var(--deck-text-2);
  font-size: 14.5px;
}
.entry-card li {
  padding-left: 18px;
  position: relative;
}
.entry-card li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--deck-text-3);
}

/* --- Реєстр червоних флагів --- */
.redflags {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--deck-s-4);
  margin-top: var(--deck-s-6);
}
@media (max-width: 780px) {
  .redflags { grid-template-columns: 1fr; }
}
.redflag-group { display: flex; flex-direction: column; gap: var(--deck-s-3); }
.redflag-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.redflag-list li {
  padding-left: 22px;
  position: relative;
  font-size: 14.5px;
  color: var(--deck-text-2);
}
.redflag-list li::before {
  content: "!";
  position: absolute;
  left: 2px;
  color: var(--deck-red);
  font-family: var(--deck-font-mono);
  font-weight: 700;
}

/* --- М'який акцентний варіант callout (напр. «відмова — нормальний
   результат», «керований вихід без ринкового шуму») --- */
.deck-callout--outcome { border-left-color: var(--deck-lime); }
.deck-callout--outcome .hl,
.deck-callout--outcome b { color: var(--deck-lime); }

/* --- Списки на сторінках категорій: критерії / ризики / структури угод --- */
.check-list,
.risk-list,
.deal-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin-top: var(--deck-s-4);
}
.check-list li,
.risk-list li,
.deal-list li {
  padding-left: 26px;
  position: relative;
  font-size: 15px;
  color: var(--deck-text-2);
  line-height: 1.5;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--deck-amber);
  font-weight: 700;
}
.risk-list li::before {
  content: "!";
  position: absolute;
  left: 4px;
  color: var(--deck-red);
  font-family: var(--deck-font-mono);
  font-weight: 700;
}
.deal-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--deck-amber);
}

/* --- Сценарії дохідності: обгортка навколо .contact-grid всередині картки --- */
.scenario-metrics { margin-top: 0; }
.scenario-metrics dt {
  font-family: var(--deck-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Ряд піллів (непрофільні категорії) --- */
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deck-s-2);
  margin-top: var(--deck-s-4);
}

/* --- Текстове посилання всередині абзацу (не .deck-btn) --- */
.inline-link {
  color: var(--deck-amber);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.inline-link:hover { color: var(--deck-amber-bright); }

/* --- Завершальний CTA у кінці довгих сторінок, веде на /kontakty/.
   Був центрованою карткою на ліво-вирівняних сторінках — єдиний центрований
   елемент у всьому макеті, тобто дефолт, а не рішення, і закривав сторінку
   тихіше, ніж вона йшла. Тепер ліве вирівнювання, як у решти сторінки, і
   ширина працює на два стовпці: заява ліворуч, дія праворуч.
   Фон і рамка — готові значення .deck-card--highlight з дизайн-системи, а не
   власний градієнт: єдиний теплий блок на холодній сторінці стоїть саме там,
   де від читача чекають кроку. --- */
.page-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--deck-s-4) var(--deck-s-8);
  align-items: center;
  padding: var(--deck-s-8) var(--deck-s-7);
  /* Напрямок градієнта — до правого верхнього кута, туди, де стоїть дія:
     тепло наростає до кнопки, а не розмазується по блоку рівно. */
  background:
    radial-gradient(120% 180% at 100% 0%, var(--deck-amber-wash), transparent 62%),
    var(--deck-surface);
  border: 1px solid var(--deck-amber-line);
  border-radius: var(--deck-r-lg);
  /* Світло по верхній кромці — глибина, а не кольорова смуга збоку. */
  box-shadow: inset 0 1px 0 rgba(239, 168, 63, 0.14);
}
/* Явні координати замість обгортки — щоб не переписувати розмітку на п'яти
   сторінках, де цей блок стоїть: заголовок і абзац лишаються в лівому
   стовпці, дія займає правий на всю висоту. */
.page-cta h2 {
  grid-column: 1; grid-row: 1;
  font-family: var(--deck-font-display);
  font-weight: 800;
  /* Нарівні з h2 секцій, не нижче: це не підпис до блоку, а остання
     репліка сторінки, і вона тримає ширину, яку блок їй дає. */
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  max-width: 24ch;
}
.page-cta p {
  grid-column: 1; grid-row: 2;
  color: var(--deck-text-2);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}
/* Однакова поведінка для обох форм: одна кнопка прямим нащадком (чотири
   сторінки) і ряд із двох дій у .page-cta__actions (методологія). */
.page-cta__actions,
.page-cta > .deck-btn {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.page-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--deck-s-3);
}
.page-cta .deck-btn { margin: 0; }
@media (max-width: 820px) {
  .page-cta {
    grid-template-columns: 1fr;
    padding: var(--deck-s-6);
  }
  .page-cta h2,
  .page-cta p,
  .page-cta__actions,
  .page-cta > .deck-btn { grid-column: 1; grid-row: auto; }
}