/* ============================================================
   B06 · До-Після · 3 кейси
   figma: node-id=931:1130 (кейс 1 · Фото), 937:1112 (кейс 1 · УЗД),
          937:1205 … 937:1337 (кейсы 2 и 3) — правка 2026-09-25
   ============================================================ */

.sc-cases {
  --cases-tab-ind: 3px;  /* толщина бегунка вкладок в макете */
  --cases-divider: 2px;  /* линия шторки в макете */

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--section-padding-y-tight); /* 64 между заголовком и рядом в макете */
  padding-block: var(--section-padding-y);
  background: var(--background);
  color: var(--foreground);
}

.sc-cases *,
.sc-cases *::before,
.sc-cases *::after { box-sizing: border-box; }

.sc-cases__head { padding-inline: var(--sc-pad-x); }

.sc-cases__title { margin: 0; }

/* Кадр · колонка — пропорция макета 680 : 520, между ними 80.
   Зазор — поле страницы: на 1440 это те же 80, уже — сжимается вместе с полями */
.sc-cases__row {
  display: grid;
  grid-template-columns: 680fr 520fr;
  column-gap: var(--page-margin-x);
  padding-inline: var(--sc-pad-x);
  align-items: start;
}

/* ---------- Вкладки ФОТО / УЗД ---------- */

.sc-cases__media { min-inline-size: 0; }

.sc-cases__tabs {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: var(--sc-space-8); /* 32 в макете */
  block-size: var(--control-square);
  border-block: var(--sc-line) solid var(--border);
}

.sc-cases__tab {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted-foreground);
  cursor: pointer;
  text-transform: uppercase;
  transition: color var(--sc-dur-fast) var(--sc-ease);
}

.sc-cases__tab[aria-selected="true"] { color: var(--foreground); }
.sc-cases__tab[hidden] { display: none; } /* у пацієнтки немає цього виду контролю (2026-11-03) */

/* Бегунок едет по линии под активной вкладкой; координаты ставит скрипт */
.sc-cases__tab-ind {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: var(--cases-tab-ind);
  inline-size: var(--cases-ind-w, 0);
  transform: translateX(var(--cases-ind-x, 0));
  background: var(--foreground);
  transition:
    transform var(--sc-dur) var(--sc-ease-out),
    inline-size var(--sc-dur) var(--sc-ease-out);
}

/* До первой расстановки бегунок спрятан: иначе он выезжает из нуля при загрузке */
.sc-cases:not(.sc-is-ready) .sc-cases__tab-ind { display: none; }

/* Без скрипта бегунка нет — активную вкладку подчёркивает тень той же толщины */
.sc-cases:not(.sc-is-ready) .sc-cases__tab[aria-selected="true"] {
  box-shadow: inset 0 calc(-1 * var(--cases-tab-ind)) var(--foreground);
}

/* ---------- Кадр: шторка «до / після» ---------- */

.sc-cases__stage {
  --cases-pos: 33%; /* старт фото — левая треть: кадры до и після сняты не точно в один ракурс */

  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--muted);
  cursor: ew-resize;
  touch-action: pan-y; /* вертикальный скролл страницы пальцем не отнимаем */
  user-select: none;
  -webkit-user-select: none;
}

/* Пары кадров одного кейса и вида лежат стопкой; неактивные выключены совсем,
   чтобы lazy-loading не тянул все двенадцать файлов разом */
.sc-cases__compare {
  position: absolute;
  inset: 0;
  display: none;
}

.sc-cases__compare[data-current] {
  display: block;
  animation: sc-cases-in var(--sc-dur) var(--sc-ease-out);
}

@keyframes sc-cases-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.sc-cases__shot {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* «До» лежит сверху и срезается справа по положению шторки */
.sc-cases__shot--before { clip-path: inset(0 calc(100% - var(--cases-pos)) 0 0); }

.sc-cases__divider {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--cases-pos);
  inline-size: var(--cases-divider);
  transform: translateX(-50%);
  background: var(--background);
  pointer-events: none;
}

.sc-cases__handle {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--cases-pos);
  inline-size: var(--control-square);
  block-size: var(--control-square);
  transform: translate(-50%, -50%);
  display: flex;
  border: var(--sc-line) solid var(--foreground);
  background: var(--background);
  color: var(--foreground);
  cursor: grab;
  touch-action: none;
  transition: background-color var(--sc-dur-fast) var(--sc-ease);
}

.sc-cases__handle svg { inline-size: 100%; block-size: 100%; }

.sc-cases__stage.sc-is-dragging,
.sc-cases__stage.sc-is-dragging .sc-cases__handle { cursor: grabbing; }

/* Плашки ДО / ПІСЛЯ в верхних углах кадра, поле 16 */
.sc-cases__tag {
  position: absolute;
  inset-block-start: var(--grid-gap);
  padding: var(--sc-space-2) var(--sc-space-3); /* 8 / 12 в макете */
  background: var(--background);
  color: var(--foreground);
  text-transform: uppercase;
  pointer-events: none;
}

.sc-cases__tag--before { inset-inline-start: var(--grid-gap); }
.sc-cases__tag--after  { inset-inline-end: var(--grid-gap); }

/* ---------- Правая колонка ---------- */

.sc-cases__col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sc-space-6);
  min-inline-size: 0;
  align-self: stretch;
}

.sc-cases__top {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-10); /* 40 в макете */
}

.sc-cases__switcher {
  overflow: hidden; /* стрелки клипаются по внутреннему краю: фон ховера не ложится на рамку */
  display: grid;
  grid-template-columns: var(--control-square) minmax(0, 1fr) var(--control-square);
  align-items: center;
  block-size: var(--control-square);
  border: var(--sc-line) solid var(--input);
}

.sc-cases__nav {
  inline-size: var(--control-square);
  block-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--sc-dur-fast) var(--sc-ease);
}

.sc-cases__nav:first-child { border-inline-end: var(--hairline) solid var(--input); }
.sc-cases__nav:last-child { border-inline-start: var(--hairline) solid var(--input); }
.sc-cases__nav svg { inline-size: 100%; block-size: 100%; }

.sc-cases__metas { margin: 0; min-inline-size: 0; }

/* Подпись переключателя: слева счётчик «1 / 3» лёгким приглушённым, справа
   имя жирным; поля 16. Один рисунок на все переключалки — B04b, B06, B08c. */
.sc-cases__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--stack-gap-sm);
  margin: 0;
  padding-inline: var(--sc-space-4);
  min-inline-size: 0;
}

.sc-cases__meta[hidden] { display: none; }

.sc-cases__count {
  flex: none;
  font-weight: var(--sc-weight-light);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.sc-cases__label {
  flex: 1 1 auto;
  text-align: end;
  font-weight: var(--sc-weight-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Панели кейсов лежат в одной ячейке: колонка держит высоту самого длинного
   описания, и ряд не прыгает при смене пациентки */
.sc-cases__panels { display: grid; }

.sc-cases__panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-8); /* 32: заголовок → абзацы */
}

.sc-cases__panel[hidden] {
  display: flex;
  visibility: hidden;
}

.sc-cases__panel:not([hidden]) { animation: sc-cases-in var(--sc-dur) var(--sc-ease-out); }

.sc-cases__subtitle { margin: 0; }

.sc-cases__notes {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap); /* 16 между абзацами */
}

.sc-cases__note,
.sc-cases__legal {
  margin: 0;
  max-inline-size: var(--sc-measure);
  color: var(--muted-foreground);
}

/* В Figma состояний нет — обязательны по CLAUDE.md */
.sc-cases__tab:focus-visible,
.sc-cases__nav:focus-visible,
.sc-cases__handle:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

@media (hover: hover) and (pointer: fine) {
  .sc-cases__tab:hover { color: var(--foreground); }
  .sc-cases__nav:hover,
  .sc-cases__handle:hover { background: var(--muted); }
}

.sc-cases__nav:active,
.sc-cases__handle:active { background: var(--secondary); }

@media (prefers-reduced-motion: reduce) {
  .sc-cases__tab,
  .sc-cases__tab-ind,
  .sc-cases__nav,
  .sc-cases__handle { transition: none; }
  .sc-cases__compare[data-current],
  .sc-cases__panel:not([hidden]) { animation: none; }
}

/* ---------- Мобильный ---------- */

@media (max-width: 640px) {
  .sc-cases { gap: var(--section-gap); }

  /* Порядок: переключатель пациенток → вкладки и кадр → описание → согласие */
  .sc-cases__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-inline: var(--page-margin-x);
    gap: var(--page-margin-x);
  }

  .sc-cases__col,
  .sc-cases__top { display: contents; }

  .sc-cases__switcher { order: 1; }
  .sc-cases__media    { order: 2; }
  .sc-cases__panels   { order: 3; }
  .sc-cases__legal    { order: 4; }
}