/* ==========================================================================
   PAGES-CASES — кейсы клиентов, лента кейсов, страницы отраслей,
   b2b/гарантии/вакансии/спасибо/согласие-152фз.
   Подключается ПОСЛЕ pages.css (и pages-static.css, где он используется).
   Ничего инлайново — только классы отсюда + системные из components.css.
   ========================================================================== */

/* ── Кейс: увеличенный заголовок бренда ──────────────────────────────── */
.case-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-8);
  max-width: 16ch;
}
.case-hero__title em { color: var(--color-primary); font-style: italic; }
.case-hero__lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 56ch; margin: 0 0 var(--space-10); }

/* Быстрая спецификация под hero — обёртка для .spec-list */
.case-spec { max-width: 640px; margin-top: var(--space-8); }

/* ── Фото-образец кейса: подпись из трёх частей (бренд/техника/конструкция) */
.case-photo__caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
}
.case-photo__caption span:first-child { color: var(--color-text); font-weight: 600; }
.case-photo__caption span:not(:first-child)::before { content: '— '; color: var(--color-text-faint); }

/* Детальные кадры (crop одного и того же снимка под разными фокусами) */
.specimen--focus-tl img { object-position: 12% 15%; }
.specimen--focus-br img { object-position: 88% 85%; }
.specimen--focus-center img { object-position: 50% 40%; }

/* ── Текстовый блок кейса: 7 колонок с полем справа под маргиналии ──── */
.case-row { align-items: start; }
.case-row .prose { grid-column: span 7; }
.case-row__note {
  grid-column: 9 / span 4;
  align-self: start;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  line-height: 1.45;
  color: var(--color-text-muted);
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-divider);
  margin: 0;
}
@media (max-width: 900px) {
  .case-row .prose { grid-column: 1 / -1; }
  .case-row__note { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--color-divider); padding: var(--space-4) 0 0; margin-top: var(--space-6); }
}

/* ── Сложность / Решение — парные блоки без карточек ─────────────────── */
.case-issues {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10);
  margin-top: clamp(var(--space-10), 5vw, var(--space-14));
}
.case-issue { padding-top: var(--space-6); border-top: 1px solid var(--color-divider); }
.case-issue__label { display: block; margin-bottom: var(--space-4); }
.case-issue p { color: var(--color-text-muted); line-height: 1.7; margin: 0; }
@media (max-width: 700px) {
  .case-issues { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ── Результат — короткая плашка-вывод ───────────────────────────────── */
.case-result {
  margin-top: clamp(var(--space-10), 5vw, var(--space-14));
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-text);
}
.case-result .stamp { margin-bottom: var(--space-4); }
.case-result p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.3;
  color: var(--color-text);
  max-width: 62ch;
  margin: 0;
}

/* ── Лента кейсов (index): вкладки-табы как в портфолио ──────────────── */
.case-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.case-tabs span {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.case-tabs span.is-current { color: var(--color-primary); }

/* ── Отрасли: маргиналия под lede в hero ──────────────────────────────── */
.industry-hero__note {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-8);
}

/* ── CTA-форма отрасли: короткий список условий над формой ───────────── */
.end-form__bullets {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.end-form__bullets li::before { content: '— '; color: var(--color-text-faint); }

/* ── Отрасли: сетка «что делаем» — асимметричные развороты ───────────── */
.industry-item {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-6) var(--space-10);
  align-items: start;
  padding-block: clamp(var(--space-12), 6vw, var(--space-16));
  border-top: 1px solid var(--color-divider);
}
.industry-item:first-of-type { border-top: 0; padding-top: 0; }
.industry-item__photo { grid-column: span 5; aspect-ratio: 4 / 5; }
.industry-item--reverse .industry-item__photo { grid-column: 8 / span 5; grid-row: 1; }
.industry-item--reverse .industry-item__body { grid-row: 1; grid-column: 1 / span 7; }
.industry-item__body { grid-column: span 7; }
.industry-item__note {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-4);
}
.industry-item__title { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0 0 var(--space-4); }
.industry-item__body p { color: var(--color-text-muted); line-height: 1.7; margin: 0 0 var(--space-5); max-width: 60ch; }
.industry-item__tags { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-5); }
@media (max-width: 900px) {
  .industry-item__photo,
  .industry-item--reverse .industry-item__photo,
  .industry-item__body,
  .industry-item--reverse .industry-item__body {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

/* ── Отрасли: правила работы с брендом (список без карточек) ─────────── */
.rules-list { display: flex; flex-direction: column; }
.rules-list__row {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--space-8);
  padding-block: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.rules-list__row:last-child { border-bottom: 1px solid var(--color-divider); }
.rules-list__row h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0; }
.rules-list__row p { color: var(--color-text-muted); line-height: 1.7; margin: 0; max-width: 60ch; }
@media (max-width: 700px) { .rules-list__row { grid-template-columns: 1fr; gap: var(--space-2); } }

/* ── Крупная вводная реплика на grid-12 (b2b, гарантии) ───────────────── */
.lede-block { grid-column: span 8; font-size: var(--text-lg); color: var(--color-text-muted); margin: 0; }
@media (max-width: 900px) { .lede-block { grid-column: 1 / -1; } }

/* ── b2b: 12 пунктов закупки — нумерованные секции ───────────────────── */
.point-list { display: flex; flex-direction: column; }
.point {
  display: grid;
  grid-template-columns: 1fr 6fr;
  gap: var(--space-8);
  padding-block: clamp(var(--space-8), 4vw, var(--space-10));
  border-top: 1px solid var(--color-divider);
}
.point:last-child { border-bottom: 1px solid var(--color-divider); }
.point__num {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-text-faint);
}
.point__body h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.point__body p { color: var(--color-text-muted); line-height: 1.7; margin: 0 0 var(--space-4); max-width: 68ch; }
.point__body ul { margin: 0; padding-left: 1.2em; color: var(--color-text-muted); line-height: 1.7; }
.point__body li { margin-bottom: var(--space-2); }
@media (max-width: 700px) { .point { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ── Вакансии: список карточек-статей с dl-спецификацией ─────────────── */
.vacancy-list { display: flex; flex-direction: column; }
.vacancy {
  padding-block: clamp(var(--space-10), 5vw, var(--space-14));
  border-top: 1px solid var(--color-divider);
}
.vacancy:first-of-type { border-top: 0; padding-top: 0; }
.vacancy:last-of-type { border-bottom: 1px solid var(--color-divider); }
.vacancy__head { display: flex; align-items: baseline; gap: var(--space-5); margin-bottom: var(--space-3); }
.vacancy__num { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-primary); flex-shrink: 0; }
.vacancy__title { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0; }
.vacancy__meta { display: block; margin: 0 0 var(--space-5); }
.vacancy__lede { color: var(--color-text-muted); line-height: 1.7; max-width: 68ch; margin: 0 0 var(--space-6); }
.vacancy .spec-list__value ul { margin: 0; padding-left: 1.1em; }
.vacancy .spec-list__value li { margin-bottom: var(--space-1); }

/* ── Спасибо: крупный статус + список «что дальше» ───────────────────── */
.thanks-hero { padding-block: clamp(var(--space-20), 10vw, var(--space-24)) clamp(var(--space-10), 5vw, var(--space-14)); }
.thanks-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-8);
}
.thanks-hero__lede { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 60ch; margin: 0 0 var(--space-4); }
.thanks-hero__urgent { color: var(--color-text-muted); max-width: 60ch; }
.thanks-hero__urgent a { color: var(--color-primary); }
.thanks-links { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-10); }

/* Мобильный: гасим колоночный gap 12-колоночных сеток — 11 отступов
   по 2.5rem дают 440px минимальной ширины и режут содержимое. */
@media (max-width: 900px) {
  .industry-item { column-gap: 0; }
}