/* ============================================================
   Раздел «Результаты работ» (/do-i-posle/…): список, направление, страница случая.
   Продолжение страниц услуг: токены --us-*, секции, заголовки, кнопки, плашки, карточка случая
   со шторкой, форма записи берутся из uslugi.css; здесь только своё, классы cs-*.
   Движения нет: одни переходы цвета, фона и рамки по 0,2 с (их задаёт uslugi.css для ссылок
   внутри main.usl). Разметка — lib/cases.php. Грузится после uslugi.css.
   ============================================================ */

/* ---------- первый экран: подпись и H1, текста под заголовком нет ---------- */
.cs-hero .us-h1 { max-width: 21em; margin-bottom: 0; text-wrap: balance; }
/* фильтр и сетка держатся заголовка: между ними не шаг блока, а короткий отступ */
main.usl > .cs-hero + .cs-filter { margin-top: clamp(24px, 3vw, 36px); }
main.usl > .cs-filter + .us-sec,
main.usl > .cs-hero + .cs-grid,
main.usl > .cs-hero + .cs-shots { margin-top: clamp(24px, 3vw, 40px); }

/* ---------- фильтр по направлениям: плашки-ссылки, текущая выделена ---------- */
/* одной строкой с прокруткой влево-вправо и полосой прокрутки, как разделы на /czeny/ */
.cs-filter ol { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 14px; scrollbar-width: thin;
  scrollbar-color: var(--accent) rgba(255, 255, 255, .08); -webkit-overflow-scrolling: touch; }
.cs-filter ol::-webkit-scrollbar { height: 8px; }
.cs-filter ol::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); border-radius: 999px; margin: 0 2px; }
.cs-filter ol::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; }
.cs-filter li { flex: none; }
.cs-filter a { gap: 8px; min-height: 40px; padding: 0 16px; white-space: nowrap; }
.cs-filter a[aria-current="page"] { border-color: var(--us-link); background: rgba(129, 210, 255, .1); color: #fff; }
.cs-filter-n { position: relative; top: -1px; font-size: 12px; line-height: 1; color: var(--us-muted); font-variant-numeric: tabular-nums; }
.cs-filter a[aria-current="page"] .cs-filter-n { color: #d9f0ff; }

/* ---------- направление: ссылки на раздел услуг, его процедуры и прайс ---------- */
.cs-links .us-pills { gap: 8px; }
.cs-links .us-pill { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.cs-links-foot { justify-content: flex-start; gap: 10px 32px; margin-top: 26px; }

/* ---------- случай: два кадра рядом, каждый целиком ---------- */
/* рамка у обоих кадров одна (--cs-ar из размеров файлов, по более высокому): кадры стоят на одной линии,
   у пары с разным ракурсом меньший кадр вписан в рамку без обрезки */
.cs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.6vw, 20px); align-items: start; }
.cs-pair--1 { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.cs-shot { margin: 0; min-width: 0; }
.cs-shot-ph { position: relative; aspect-ratio: var(--cs-ar, 1 / 1); max-height: 680px; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--us-panel-line); background: var(--us-ph); }
.cs-shot-ph img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cs-shot-lbl { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 8px; background: rgba(13, 14, 16, .72);
  font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .02em; color: #ededed; pointer-events: none; }
.cs-shot--after .cs-shot-lbl { background: rgba(129, 210, 255, .9); color: #0d1014; }
.cs-shot figcaption { margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--us-muted); }

/* ---------- случай: сведения списком (сетка .us-facts страниц услуг) ---------- */
.cs-facts { margin-top: clamp(24px, 3vw, 40px); }
.cs-facts > div { padding: 20px 0 22px; }
.cs-facts dd { font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.cs-facts dd a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cs-facts dd a:hover { color: var(--us-link); text-decoration-color: var(--us-link); }
/* неполный последний ряд: последняя ячейка тянется до края, линия над рядом цельная */
@media (min-width: 961px) {
  .cs-facts--5 > div:last-child, .cs-facts--2 > div:last-child { grid-column: 2 / -1; }
  .cs-facts--4 > div:last-child, .cs-facts--1 > div { grid-column: 1 / -1; }
}
@media (min-width: 561px) and (max-width: 960px) {
  .cs-facts--5 > div:last-child, .cs-facts--3 > div:last-child, .cs-facts--1 > div { grid-column: 1 / -1; }
}

/* ---------- случай: врач с круглым портретом (то же фото, что на /vrachi/) ---------- */
.cs-doc { display: flex; align-items: center; gap: 14px; }
.cs-doc-ph { flex: none; display: block; width: 56px; height: 56px; overflow: hidden; border-radius: 50%;
  border: 1px solid var(--us-panel-line); background: var(--us-ph); }
.cs-doc-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cs-doc-t { min-width: 0; }
.cs-facts dd a.cs-doc-ph { text-decoration: none; }
@media (hover: hover) { .cs-facts dd a.cs-doc-ph:hover { border-color: rgba(129, 210, 255, .6); } }

/* ---------- случай: под кадрами сведения и начало описания в две колонки (cs-sum) ---------- */
/* колонки делят ширину пары кадров: сведения под «До», начало описания под «После». Описание целиком ниже,
   в блоке «Как проходило лечение»; ссылка «Читать полностью» ведёт туда */
.cs-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 4vw, 56px); align-items: start;
  margin-top: clamp(24px, 3vw, 40px); }
.cs-pair--small ~ .cs-sum { max-width: 1044px; }
/* сведения строками: подпись слева, значение справа */
.cs-facts--rows { display: block; margin-top: 0; border-bottom: 1px solid var(--us-line); }
.cs-facts--rows > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 16px 0 17px; }
.cs-facts--rows > div:has(.cs-doc) { align-items: center; padding: 14px 0; }
.cs-facts--rows dt { margin: 0; }
.cs-lead { min-width: 0; padding-top: 16px; border-top: 1px solid var(--us-line); }
.cs-lead-k { margin: 0 0 12px; font-size: 11.5px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--us-muted); }
.cs-lead-text p { margin: 0 0 14px; font-size: 17px; line-height: 1.7; color: #dedede; }
.cs-lead-text p:last-child { margin-bottom: 0; }
.cs-lead-more { margin: 18px 0 0; }
@media (max-width: 960px) {
  /* одна колонка: начало описания идёт следующей строкой сведений, со своей линией сверху */
  .cs-sum { grid-template-columns: minmax(0, 1fr); }
  .cs-facts--rows { border-bottom: 0; }
}

/* ---------- случай: оговорка мелкой строкой под последним блоком ---------- */
.cs-note { margin-top: 24px; font-size: 13.5px; line-height: 1.55; }

/* ---------- случай: «Что сделано», пункты по порядку ---------- */
.cs-col { min-width: 0; }
.cs-done { margin: 0; padding: 0; list-style: none; counter-reset: cs-done; border-top: 1px solid var(--us-line); }
.cs-done > li { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: baseline; padding: 16px 0 18px;
  border-bottom: 1px solid var(--us-line); counter-increment: cs-done; font-size: 17px; line-height: 1.55; color: var(--us-text); }
.cs-done > li::before { content: counter(cs-done, decimal-leading-zero); font-family: var(--font-heading); font-size: 22px; line-height: 1; color: var(--us-muted); }
.cs-done--1 > li { display: block; }
.cs-done--1 > li::before { content: none; }
/* подпись группы пунктов («Зуб 2.1»): у каждой группы своя нумерация */
.cs-done-h { margin: 0 0 12px; font-size: 12px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--us-muted); }
.cs-done + .cs-done-h { margin-top: 30px; }

/* ---------- случай: длинный список и длинный текст на телефоне свёрнуты (cases.js) ---------- */
/* В разметке всё раскрыто, кнопка спрятана: без JS и на компьютере видно целиком. На телефоне cases.js
   ставит контейнеру cs-folded и показывает кнопку; после нажатия хвост раскрыт, кнопки нет. */
.cs-folded .cs-fold { display: none; }
.cs-fold-more { margin: 18px 0 0; }
.cs-fold-more[hidden] { display: none; }
.cs-fold-more .us-btn { width: 100%; min-height: 48px; }

/* ---------- случай: «Подробнее» (типографика .us-art страниц услуг) ---------- */
/* длинный текст справа: заголовок блока слева остаётся в поле зрения, как у прайса на страницах услуг */
@media (min-width: 961px) {
  .cs-done-sec .us-fr-head, .cs-body-sec .us-fr-head { position: sticky; top: 132px; }
}
.cs-body > :first-child { margin-top: 0; }
.cs-body h3 { margin: 30px 0 10px; line-height: 1.35; }
.cs-body h4 { margin: 22px 0 8px; font-family: var(--font-body); font-weight: 500; font-size: 17px; line-height: 1.4; letter-spacing: 0; color: #fff; }

/* ---------- случай: другие работы направления ---------- */
.cs-others-foot { justify-content: flex-end; }

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 960px) {
  .cs-note { margin-top: 20px; }
}

@media (max-width: 640px) {
  .cs-pair { gap: 8px; }
  /* горизонтальные кадры рядом на телефоне слишком мелкие: один под другим, каждый во всю ширину */
  .cs-pair--wide { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cs-shot-ph { border-radius: 12px; }
  .cs-shot-lbl { left: 8px; bottom: 8px; padding: 4px 9px; }
  .cs-shot figcaption { margin-top: 8px; font-size: 13px; line-height: 1.5; }
  .cs-facts > div { padding: 14px 0 16px; }
  .cs-facts dd { font-size: 16px; }
  .cs-done > li { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 0 16px; font-size: 16px; }
  .cs-done > li::before { font-size: 20px; }
  .cs-body h3 { margin-top: 26px; font-size: 18px; }
  .cs-body h4 { font-size: 16.5px; }
  .cs-others-foot, .cs-links-foot { justify-content: flex-start; }
  .cs-links-foot { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 18px; }
  .cs-done + .cs-done-h { margin-top: 24px; }
  /* крошки одной строкой под палец заданы в uslugi.css. На странице случая последняя крошка повторяет H1
     сразу под ней: на телефоне её нет */
  body:has(> main.usl-case) .crumbs li:last-child { display: none; }
  body:has(> main.usl-case) .crumbs li:nth-last-child(2) { flex: 0 1 auto; }
  /* зоны нажатия под палец: ссылки в карточке случая, в сведениях, в подписи первого экрана, на 404.
     Заголовок карточки растёт вверх, ссылка на врача вниз: между собой зоны не перекрываются */
  .usl-cases .us-case-t a, .usl-case .us-case-t a { display: block; margin: -11px 0 -7px; padding: 11px 0 7px; }
  .usl-cases .us-case-doc a, .usl-case .us-case-doc a { display: inline-block; margin: -7px 0 -13px; padding: 7px 0 13px; }
  .cs-facts dd a { display: inline-block; margin: -10px 0; padding: 10px 0; }
  .cs-hero .us-kicker a { display: inline-block; margin: -13px 0; padding: 13px 0; }
  .cs-404 .us-404-links { flex-direction: column; gap: 0; }
  .cs-404 .us-404-links a, .cs-404 .us-lead a { display: inline-block; padding: 9px 0; }
}

/* совсем узкий экран: два кадра рядом уже не читаются, ставим один под другим */
@media (max-width: 339px) {
  .cs-pair { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* листалка страниц списка: квадраты под палец, текущая страница залита */
.cs-pager { margin-top: clamp(28px, 4vw, 44px); }
.cs-pager ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cs-pg { display: flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px; color: var(--us-text); font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; text-decoration: none;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
a.cs-pg:focus-visible { outline: 2px solid var(--us-link); outline-offset: 2px; }
.cs-pg--on { border-color: var(--us-blue); background: var(--us-blue); color: #fff; }
.cs-pg--gap { min-width: 24px; padding: 0; border-color: transparent; color: var(--us-muted); }
@media (hover: hover) { a.cs-pg:hover { border-color: rgba(129, 210, 255, .6); color: #fff; } }
.cs-pager + .us-results-foot { margin-top: clamp(20px, 3vw, 28px); }
@media (max-width: 480px) {
  .cs-pager ul { flex-wrap: nowrap; gap: 4px; }
  .cs-pg { min-width: 40px; height: 44px; padding: 0 4px; }
  .cs-pg--gap { min-width: 12px; }
  .cs-pg-side { display: none; }
}
/* правки по осмотру 13.10 */
/* узкие телефоны: листалка остаётся в один ряд */
@media (max-width: 374px) { .cs-pager ul { gap: 2px; } }
@media (max-width: 340px) { .cs-pg { min-width: 33px; padding: 0 2px; } }
.cs-pg--gap { padding-bottom: 8px; }
a.cs-pg:hover { color: var(--us-text); }
/* переход по листалке: первый ряд фото не прилипает к шапке */
#raboty { scroll-margin-top: 16px; }
/* подпись «До» видна и на тёмном кадре */
.cs-shot-lbl { outline: 1px solid rgba(255, 255, 255, .18); outline-offset: -1px; }
.cs-shot--after .cs-shot-lbl { outline: 0; }
/* кадры почти одной пропорции заполняют рамку целиком, без полос; мелкие исходники не растягиваем */
.cs-pair--same .cs-shot-ph img { object-fit: cover; }
.cs-pair--small { max-width: 1044px; }
/* планшет, две колонки: последняя нечётная карточка не остаётся одна в ряду, а встаёт строкой во всю ширину */
@media (min-width: 641px) and (max-width: 1100px) {
  .cs-grid .us-results > .us-case:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; gap: 16px; }
  .cs-grid .us-results > .us-case:last-child:nth-child(odd) .us-ba { flex: 0 0 calc(50% - 8px); }
  .cs-grid .us-results > .us-case:last-child:nth-child(odd) figcaption { margin-top: 0; }
  .cs-grid .us-results > .us-case:last-child:nth-child(odd) .us-case-t { min-height: 0; }
}
/* телефон: длинный заголовок случая не занимает пол-экрана */
@media (max-width: 640px) { main.usl-case .cs-hero .us-h1--long { font-size: clamp(25px, 7.2vw, 28px); line-height: 1.12; } }
/* правки владельца 19.10: портрет врача и начало описания под кадрами на телефоне */
@media (max-width: 640px) {
  .cs-doc { gap: 12px; }
  .cs-doc-ph { width: 48px; height: 48px; }
  .cs-facts dd a.cs-doc-ph { display: block; margin: 0; padding: 0; }
  /* начало описания коротко: первый абзац в четыре строки и ссылка на блок целиком. Если блок идёт сразу ниже
     или начало и есть весь текст, на телефоне его нет (cs-lead--wide): два одинаковых текста подряд не нужны */
  .cs-lead--wide { display: none; }
  .cs-lead { padding-top: 14px; }
  .cs-lead-text p { font-size: 16px; line-height: 1.65; }
  .cs-lead-text p:first-child { display: -webkit-box; margin: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; }
  .cs-lead-text p + p { display: none; }
  .cs-lead-more { margin-top: 6px; }
  .cs-lead-more a { padding: 10px 0; }
}
@media (max-width: 560px) {
  .cs-facts--rows > div, .cs-facts--rows > div:has(.cs-doc) { display: block; padding: 14px 0 16px; }
  .cs-facts--rows dt { margin: 0 0 10px; }
}