/* ============================================================
   AVANZATO — страницы кейсов
   Собрано на существующих токенах темы: свой шрифт, свой оранжевый,
   те же hairline-линии. Новых цветов и шрифтов не вводится.
   Подключается только на страницах разборов проектов.
   ============================================================ */

/* ---------- шапка кейса ---------- */
.case-hero {
  padding: clamp(128px, 17vh, 188px) 0 0;
}
.case-hero .display {
  font-size: clamp(44px, 7.5vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: clamp(16px, 2vw, 26px) 0 0;
}
.case-lede {
  max-width: 620px;
  margin-top: clamp(22px, 2.6vw, 34px);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
}

/* строка фактов: роль · сроки · формат */
.case-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(38px, 5vw, 62px);
  padding-top: clamp(24px, 3vw, 34px);
  border-top: 1px solid var(--hairline);
}
.case-fact dt {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 9px;
}
.case-fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

/* ---------- крупный кадр проекта ---------- */
.case-shot {
  margin-top: clamp(46px, 6vw, 78px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  line-height: 0;
}
.case-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.case-shot figcaption {
  padding: 14px 18px;
  border-top: 1px solid var(--hairline-2);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- смысловые блоки ---------- */
.case-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(26px, 5vw, 80px);
  align-items: start;
}
.case-block + .case-block {
  margin-top: var(--gap, clamp(78px, 10vw, 132px));
}
.case-block h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.case-block h2 em {
  font-style: normal;
  color: var(--accent);
}
.case-body p {
  margin: 0 0 18px;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.68;
  color: var(--ink-2);
}
.case-body p:last-child { margin-bottom: 0; }
.case-body strong {
  color: var(--ink);
  font-weight: 500;
}

/* список того, что вошло в работу */
.case-list {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline-2);
}
.case-list li {
  /* маркер абсолютным позиционированием, а не flex: иначе вложенный <strong>
     становится отдельным flex-элементом и текст разъезжается по словам */
  position: relative;
  padding: 14px 0 14px 22px;
  border-bottom: 1px solid var(--hairline-2);
  font-size: clamp(14px, 1.35vw, 16px);
  line-height: 1.5;
  color: var(--ink-2);
}
.case-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 22px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ---------- итоговые цифры ---------- */
.case-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin-top: clamp(30px, 4vw, 48px);
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.case-result {
  padding: clamp(20px, 2.4vw, 30px);
  background: var(--bg);
}
.case-result b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 27px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  /* break-word, а не anywhere: целые слова не рвутся по буквам,
     перенос только если слово реально не влезает */
  overflow-wrap: break-word;
  hyphens: none;
}

/* Четыре карточки в три колонки оставляют пустую ячейку в последнем ряду —
   для таких блоков раскладываем строго 2×2. */
.case-results--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .case-results--4 { grid-template-columns: 1fr; }
}
.case-result span {
  display: block;
  margin-top: 11px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ссылка на живой сайт проекта */
.case-live {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0;
  margin-top: clamp(30px, 4vw, 44px);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 17px);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.case-live:hover { gap: 16px; color: var(--accent-text); }
.case-live svg { flex: 0 0 auto; }

/* ---------- отзыв клиента внутри кейса ---------- */
.case-quote {
  margin-top: clamp(30px, 4vw, 48px);
  padding: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--surface);
  position: relative;
}
.case-quote::before {
  content: "\201C";
  position: absolute;
  top: clamp(6px, 1vw, 14px); left: clamp(20px, 2.5vw, 32px);
  font-family: var(--font-serif, Georgia, serif);
  font-size: clamp(56px, 8vw, 92px);
  line-height: 1;
  color: var(--accent);
  opacity: .22;
}
.case-quote p {
  position: relative;
  margin: 0 0 16px;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  color: var(--ink);
  font-weight: 300;
}
.case-quote p:last-of-type { margin-bottom: 22px; }
.case-quote .case-quote-who { display: flex; flex-direction: column; gap: 3px; }
.case-quote .case-quote-who b {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.case-quote .case-quote-who span { font-size: 13.5px; color: var(--ink-2); }

/* ---------- навигация между кейсами ---------- */
.case-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .3s var(--ease), gap .3s var(--ease);
}
.case-back:hover { color: var(--ink); gap: 14px; }

@media (max-width: 820px) {
  .case-block { grid-template-columns: 1fr; gap: 20px; }
  .case-facts { gap: 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .case-live, .case-back { transition: none; }
}

/* ---------- ссылка на разбор с карточки в портфолио ---------- */
/* Основная ссылка карточки ведёт на живой сайт проекта — не трогаем её.
   Разбор выносим отдельной строкой под карточкой. */
.p3-case {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-text);
  text-decoration: none;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.p3-case:hover { gap: 13px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .p3-case { transition: none; } }