/* ============================================================
   Clinical cases – /cases and the localised trees.
   Loads on top of tokens.css + homepage.css: palette, type scale,
   .deco-rule and the gold tokens all come from there. Only the
   components specific to a case record live here.
   ============================================================ */

:root {
  /* Акцент для ТЕКСТА. Кармин #A3142C на новом белом даёт 7.3:1 –
     ровно порог AAA, принятый на сайте. */
  --gold-ink:#A3142C;
  --case-wrap:940px;
}
@media (min-width:1920px) { :root { --case-wrap:1040px; } }

.case-wrap { max-width:var(--case-wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* Низ страницы. И сетка случаев, и текст отдельного кейса упирались прямо в
   подвал: между последним элементом и footer было ровно 0px. Берём тот же
   ритм, что у остальных внутренних страниц (.lp .section в homepage.css) –
   40px на телефоне, 64px на ноутбуке. */
main > .container, main .case-wrap { padding-bottom:clamp(2.5rem, 1.6rem + 3vw, 4.25rem); }

/* ---- breadcrumbs ---- */
.crumbs { font-size:var(--step--1); color:var(--muted); padding-top:clamp(1.2rem,1rem + .8vw,1.8rem); margin:0; }
.crumbs a { color:var(--muted); text-decoration:none; border-bottom:1px solid var(--border-strong); }
.crumbs a:hover { color:var(--garnet-link); border-bottom-color:currentColor; }
.crumbs span { margin-inline:.5em; opacity:.6; }

/* ---- case header ---- */
.case-head { padding-block:clamp(1.6rem,1.2rem + 1.6vw,2.6rem) 0; }
.case-head h1 {
  font-size:var(--step-2); line-height:1.16; letter-spacing:-.01em;
  max-width:30ch; margin:0; font-weight:450;
}
@media (min-width:1040px) { .case-head h1 { font-size:var(--step-3); letter-spacing:.02em; } }
.case-sub { margin:clamp(.9rem,.7rem + .7vw,1.3rem) 0 0; font-size:var(--step-0); color:var(--muted); letter-spacing:.02em; }

/* ---- photography ---- */
.case-photo { margin:clamp(1.8rem,1.4rem + 2vw,3rem) 0 0; }
.case-photo img {
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border:1px solid var(--border-strong); border-radius:6px; background:var(--surface);
}
.case-photo--inline { margin-block:clamp(2rem,1.5rem + 2vw,3.2rem); }
.case-photo--inline img { aspect-ratio:2/1; }

/* ---- patient record ----
   Label/value rows, the way a medical record reads. Not a tile grid:
   the fields differ wildly in length and tiles tear the row open. */
.card-h {
  font-family:var(--font-sans); font-size:var(--step-0); letter-spacing:.16em;
  text-transform:uppercase; font-weight:600;
  color:var(--muted); margin:clamp(2rem,1.6rem + 1.8vw,3rem) 0 .9em;
}
.card {
  margin:0; padding:0; border:1px solid var(--line); border-radius:5px;
  overflow:hidden; background:var(--surface);
}
.card > div { padding:.85rem 1.1rem; border-top:1px solid var(--line); }
.card > div:first-child { border-top:0; }
.card dt {
  font-size:var(--step--1); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin:0 0 .3em;
}
.card dd { margin:0; color:var(--ink); line-height:1.55; }
.card > div.card-key { background:color-mix(in srgb, var(--garnet-tint) 34%, var(--surface)); }
.card > div.card-key dd { color:var(--garnet); font-weight:500; }
@media (min-width:720px) {
  .card > div { display:grid; grid-template-columns:15rem 1fr; gap:0 1.6rem; align-items:baseline; }
  .card dt { margin:0; }
}

/* ---- case body ---- */
.case-body { margin-top:clamp(2.2rem,1.7rem + 2.2vw,3.4rem); }
.case-body h2 {
  font-size:var(--step-2); letter-spacing:-.008em; font-weight:450;
  color:var(--garnet); margin:clamp(2.4rem,1.8rem + 2.4vw,3.6rem) 0 .85em;
  padding-top:clamp(1.4rem,1rem + 1.6vw,2.2rem); border-top:1px solid var(--line);
}
.case-body > h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.case-body h3 {
  font-family:var(--font-sans); font-size:var(--step-0); letter-spacing:.16em;
  text-transform:uppercase; font-weight:600;
  color:var(--gold-ink); margin:clamp(1.7rem,1.3rem + 1.4vw,2.3rem) 0 .6em;
}
.case-body p, .result p { color:var(--text-soft); margin:0 0 1em; }
.case-body strong, .result strong { color:var(--ink); font-weight:600; }
.case-body ul, .result ul { list-style:none; margin:0 0 1.4em; padding:0; }
.case-body li, .result li { position:relative; padding-left:1.6em; margin-bottom:.6em; color:var(--text-soft); break-inside:avoid; }
.case-body li::before, .result li::before {
  content:""; position:absolute; left:.15em; top:.62em; width:7px; height:7px;
  transform:rotate(45deg); border-radius:1.5px;
  background:linear-gradient(135deg, var(--gold-1), var(--gold-2));
}

/* ---- outcome panel ---- */
.result {
  margin-top:clamp(2.4rem,1.8rem + 2.4vw,3.6rem);
  padding:clamp(1.5rem,1.2rem + 1.6vw,2.4rem);
  background:var(--surface); border:1px solid var(--border-strong);
  border-top:3px solid var(--garnet); border-radius:5px;
}
.result h2 {
  margin:0 0 .85em; padding:0; border:0;
  font-size:var(--step-2); letter-spacing:-.008em;
  color:var(--garnet); font-weight:400;
}
.result ul:last-child { margin-bottom:0; }
.result li:last-child { margin-bottom:0; }

/* ---- note and pager ---- */
.case-note {
  margin-top:clamp(2rem,1.6rem + 1.6vw,3rem); font-size:var(--step--1);
  color:var(--muted); line-height:1.6; max-width:66ch;
  border-left:2px solid var(--gold-1); padding-left:1.1em;
}
/* Ссылка с кейса на страницу лечения того же диагноза. */
.case-cond {
  margin-top:clamp(1.4rem,1.1rem + 1.2vw,2rem); font-size:var(--step-0);
}
.case-cond a {
  color:var(--garnet-link); text-decoration:underline; text-underline-offset:.18em;
  font-weight:500;
}
.case-cond a:hover { text-decoration-thickness:2px; }

.case-nav {
  display:flex; flex-wrap:wrap; gap:1rem 1.6rem; justify-content:space-between;
  margin-top:clamp(2.4rem,1.8rem + 2.4vw,3.6rem);
  padding-top:clamp(1.4rem,1.1rem + 1.2vw,2rem); border-top:1px solid var(--line);
  font-size:var(--step--1);
}
.case-nav a { text-decoration:none; border-bottom:1px solid var(--border-strong); padding-bottom:1px; }
.case-nav a:hover { border-bottom-color:currentColor; }

/* ============================================================
   REGISTER
   ============================================================ */

.cases-intro { padding-block:clamp(2.4rem,1.8rem + 3vw,4.6rem) 0; }
.cases-intro h1 {
  font-size:var(--step-4); line-height:var(--lh-tight); letter-spacing:-.018em;
  max-width:20ch; font-weight:400;
}
.cases-intro .lead { font-size:var(--step-1); color:var(--text-soft); line-height:1.45; max-width:58ch; margin:0; }
.cases-intro .note {
  margin-top:1.6em; font-size:var(--step--1); color:var(--muted);
  max-width:62ch; line-height:1.6; border-left:2px solid var(--gold-1); padding-left:1.1em;
}

/* ---- filter bar: icon button + what is currently selected ----
   Панель фильтра требует JS, поэтому без него бар скрыт, а сетка показывает
   все случаи – контент остаётся доступен целиком. Разметка и поведение –
   в scripts/gen-cases.py и js/cases-filter.js. */
.filterbar { display:none; }
.js .filterbar {
  display:flex; align-items:center; gap:.75rem;
  margin:0 0 clamp(1.5rem,1.2rem + 1.4vw,2.4rem);
  padding-bottom:clamp(.9rem,.7rem + .8vw,1.3rem);
  border-bottom:1px solid var(--line);
}
.filter-open {
  flex:none; display:inline-flex; align-items:center; gap:.55em; position:relative;
  font-family:var(--font-sans); font-size:var(--step--1); font-weight:600;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:999px;
  padding:.62em 1.15em .62em .95em; cursor:pointer; min-height:44px;
  transition:border-color .18s ease, background-color .18s ease;
}
.filter-open:hover { border-color:var(--garnet-link); }
.filter-open svg { width:18px; height:18px; flex:none; }
.filterbar.is-on .filter-open { border-color:var(--garnet); background:var(--garnet); color:#fff; }
/* сколько групп выбрано – счётчик на кнопке */
.filter-open[data-count]:not([data-count=""])::after {
  content:attr(data-count); position:absolute; top:-5px; right:-5px;
  min-width:19px; height:19px; padding:0 5px; border-radius:999px;
  background:var(--garnet); color:#fff; border:2px solid var(--paper);
  font-size:11px; font-weight:700; line-height:15px; text-align:center;
}
.filterbar.is-on .filter-open[data-count]:not([data-count=""])::after {
  background:#fff; color:var(--garnet);
}
.filter-summary {
  margin:0; min-width:0; flex:1;
  font-size:var(--step--1); line-height:1.35; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.filterbar.is-on .filter-summary { color:var(--ink); font-weight:500; }
.filter-clear {
  flex:none; background:none; border:0; cursor:pointer; padding:.5em .2em;
  font-family:var(--font-sans); font-size:var(--step--1); color:var(--garnet-link);
  text-decoration:underline; text-underline-offset:.2em;
}
.filter-clear[hidden] { display:none; }

/* ---- the panel ---- */
.filter-sheet[hidden] { display:none; }
/* выше баннера cookies (200) и плавающей кнопки WhatsApp (120): открытый
   диалог не должен оказаться с перекрытыми кнопками «Применить» и «Очистить» */
.filter-sheet { position:fixed; inset:0; z-index:260; display:flex; }
.fs-scrim { position:absolute; inset:0; background:rgba(8,11,14,.45); }
.fs-panel {
  position:relative; margin:auto auto 0; width:100%; max-height:82svh;
  display:flex; flex-direction:column;
  background:var(--surface); border-radius:16px 16px 0 0;
  box-shadow:0 -18px 50px -18px rgba(8,11,14,.45);
}
.fs-head {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 1.25rem .9rem; border-bottom:1px solid var(--line);
}
.fs-head h2 { margin:0; font-size:var(--step-1); font-weight:500; letter-spacing:.01em; }
.fs-close {
  flex:none; width:40px; height:40px; display:grid; place-items:center;
  background:none; border:0; cursor:pointer; color:var(--muted); border-radius:50%;
}
.fs-close:hover { color:var(--ink); background:var(--paper); }
.fs-close svg { width:20px; height:20px; }
.fs-list { list-style:none; margin:0; padding:.4rem .5rem; overflow-y:auto; flex:1; }
.fs-opt {
  display:flex; align-items:center; gap:.85rem; cursor:pointer;
  padding:.8rem .75rem; border-radius:10px; min-height:48px;
}
.fs-opt:hover { background:var(--paper); }
.fs-opt input {
  flex:none; width:20px; height:20px; margin:0; cursor:pointer;
  accent-color:var(--garnet);
}
.fs-name { flex:1; font-size:var(--step-0); line-height:1.3; color:var(--ink); }
.fs-n {
  flex:none; font-size:var(--step--1); font-variant-numeric:tabular-nums;
  color:var(--muted); background:var(--paper); border-radius:999px; padding:.15em .6em;
}
.fs-opt input:checked ~ .fs-n { background:var(--garnet-tint); color:var(--garnet); }
.fs-foot {
  display:flex; align-items:center; gap:.9rem; padding:.9rem 1.25rem;
  padding-bottom:calc(.9rem + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
}
.fs-clear {
  flex:none; background:none; border:0; cursor:pointer; padding:.7em .2em;
  font-family:var(--font-sans); font-size:var(--step--1); font-weight:600;
  color:var(--text-soft);
}
.fs-clear:hover { color:var(--garnet-link); }
.fs-apply {
  flex:1; min-height:50px; cursor:pointer;
  font-family:var(--font-sans); font-size:var(--step--1); font-weight:600;
  background:var(--garnet); color:#fff; border:0; border-radius:999px;
  padding:.85em 1.4em;
}
.fs-apply:hover { background:var(--garnet-hover); }
/* пока панель открыта, страница под ней не прокручивается
   (класс ставится на <html>, у кнопки класс другой – .filter-open) */
html.is-filtering, html.is-filtering body { overflow:hidden; }

@media (min-width:760px) {
  /* на широком экране – карточка по центру, а не шторка снизу */
  .fs-panel {
    margin:auto; width:min(460px, calc(100vw - 3rem));
    max-height:min(78svh, 620px); border-radius:16px;
    box-shadow:0 30px 70px -26px rgba(8,11,14,.5);
  }
}

.cases-grid {
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.4rem,1.1rem + 1.4vw,2.2rem); grid-template-columns:1fr;
}
.cases-grid > li { break-inside:avoid; }
.cases-grid a {
  display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:6px; overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.cases-grid a:hover { border-color:var(--border-strong); transform:translateY(-2px); }
.cases-grid img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; background:var(--paper); }
.cases-grid .body { padding:clamp(1.05rem,.9rem + .7vw,1.5rem); display:flex; flex-direction:column; gap:.55rem; flex:1; }
.cases-grid .tag { margin:0; font-size:var(--step--1); font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold-ink); }
.cases-grid h2 { margin:0; font-size:var(--step-1); line-height:1.28; font-weight:500; letter-spacing:.01em; color:var(--ink); text-wrap:balance; }
.cases-grid .meta { margin:0; font-size:var(--step--1); color:var(--muted); }
.cases-grid .dyn { margin:0; font-size:var(--step--1); color:var(--text-soft); line-height:1.55; }
.cases-grid .more { margin:auto 0 0; padding-top:.5rem; font-size:var(--step--1); font-weight:600; letter-spacing:.06em; color:var(--garnet-link); }

@media (min-width:640px) {
  .cases-grid { grid-template-columns:repeat(2, 1fr); }
  .case-body .cols { columns:2; column-gap:2.4rem; }
}
@media (min-width:1040px) { .cases-grid { grid-template-columns:repeat(3, 1fr); } }

/* сетка прячет карточки через [hidden], который ставит js/cases-filter.js */
.cases-grid > li[hidden] { display:none; }