/* ============================================================
   VM/Rubrics · тематики (плитки) — конфигуратор ленты (проба, финал макета 2026-10-04)
   figma: node-id=1123:875
   Поведение — assets/js/vm-topics.js
   ============================================================ */

.vm-topics {
  --topics-tile-min: 280px;          /* плитка рубрики: при колонке 1265 — четыре по ~310 */
  --topics-tile-gap: var(--sc-space-2); /* 8 */
  --topics-open-dur: 700ms;   /* раскрытие полочки */
  --topics-chip-dur: 520ms;   /* появление чипа темы */
  --topics-chip-step: 40ms;   /* волна: шаг между чипами */
  --topics-x: 10px;           /* крестик в выбранной теме */
  --topics-busy-opacity: 0.4; /* выдача, пока грузятся карточки (согласуемое) */

  display: flex;
  flex-direction: column;
  /* было var(--sc-space-8) — 32 в макете */
  gap: var(--sc-head-gap); /* заголовок → содержимое, всегда одинаково (2026-10-05) */
}

.vm-topics *,
.vm-topics *::before,
.vm-topics *::after { box-sizing: border-box; }

.vm-topics__title { margin: 0; }

.vm-topics__rubrics,
.vm-topics__tags {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vm-topics__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-gap); /* 10 — как чипы «Показань» и послуг лікаря (2026-10-11; было 6) */
}

/* ---------- Рубрика: плитка, клик раскрывает темы, не фильтрует ----------
   Проба 2026-09-30: плитка — кнопка-блок лендинга (Button/Block,
   --sc-cta-block-*: 320 × 76): название сверху слева, стрелка снизу справа,
   на наведении стрелка тычется в угол, как в хиро. В открытой рубрике
   стрелка смотрит вниз — на раскрытую полочку.
   Сетка: колонка не уже --topics-tile-min, на десктопе четыре плитки по ~310,
   на телефоне две. Иконки рубрик из Figma (Icon/Rubric, node 1110:782)
   пробовали на месте стрелки — сняты 2026-09-30, разметка в коммите fb5f791 */
.vm-topics__rubrics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--topics-tile-min)), 1fr));
  column-gap: var(--topics-tile-gap);
  /* Просвет между рядами — полями пунктов, а не row-gap: строка закрытой
     полочки иначе оставляла бы лишний просвет (отрицательный отступ не
     делает строку сетки меньше нуля). Поля крайних рядов гасит margin */
  margin-block: calc(-0.5 * var(--topics-tile-gap));
}

.vm-topics__rubrics > li:not(.vm-topics__panel) { padding-block: calc(0.5 * var(--topics-tile-gap)); }

.vm-topics__rubric {
  inline-size: 100%;
  /* 76 — минимум: название в две строки (телефон) растит ряд, соседняя
     плитка тянется следом (100% от растянутого пункта сетки) */
  block-size: 100%;
  min-block-size: var(--sc-cta-block-h);
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 16 + строка 20 + стрелка 24 + 16 = 76 */
  align-items: stretch;
  /* рамка входит в 76: поля по вертикали меньше на её толщину */
  padding: calc(var(--grid-gap) - var(--sc-line)) var(--grid-gap);
  border: var(--sc-line) solid var(--border);
  background: transparent;
  color: var(--foreground);
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
  text-align: start;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color var(--sc-dur-fast) var(--sc-ease),
    color var(--sc-dur-fast) var(--sc-ease);
}

.vm-topics__arrow {
  display: flex;
  justify-content: flex-end;
}

.vm-topics__arrow svg {
  display: block;
  transform: rotate(45deg); /* вниз-вправо, в угол */
  transition: transform var(--sc-dur-arrow) var(--sc-ease-out);
}

.vm-topics__rubric[aria-expanded="true"] .vm-topics__arrow svg { transform: rotate(90deg); }

.vm-topics__rubric[aria-expanded="true"] {
  background: var(--foreground);
  color: var(--background);
}

/* ---------- Панель тем ---------- */

/* Полочка — строка сетки рубрик во всю ширину; скрипт ставит её сразу за
   рядом нажатой плитки. Раскрывается плавно: строка растёт от 0fr до 1fr с
   выраженным ease-out. Закрытая — строка нулевой высоты, пустой щели нет. Закрытая — inert: фокус внутрь не попадает.
   Линии сверху и снизу — на самой панели, вне обрезки: при открытии они на
   месте сразу, нижняя едет вниз вместе с краем; при закрытии пропадают, когда
   полочка уже свернулась */
.vm-topics__panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  border-block: 0 solid var(--border);
  transition:
    grid-template-rows var(--topics-open-dur) var(--sc-ease-out-expo),
    margin-block var(--topics-open-dur) var(--sc-ease-out-expo),
    border-block-width 0s linear var(--topics-open-dur);
}

.vm-topics__panel.sc-is-open {
  grid-template-rows: 1fr;
  margin-block: calc(1.5 * var(--topics-tile-gap)); /* + поле пункта 4 = 16 от плиток */
  border-block-width: var(--sc-line);
  transition:
    grid-template-rows var(--topics-open-dur) var(--sc-ease-out-expo),
    margin-block var(--topics-open-dur) var(--sc-ease-out-expo),
    border-block-width 0s;
}

/* Переезд в другой ряд — без анимации закрытия (класс ставит скрипт) */
.vm-topics__panel.sc-is-moving { transition: none; }

.vm-topics__clip {
  min-block-size: 0;
  overflow: hidden;
}

.vm-topics__shelf { padding-block: var(--sc-space-6); /* 24 */ }

.vm-topics__group[hidden] { display: none; }

/* Темы появляются волной: каждый чип чуть позже предыдущего (--i ставит скрипт) */
.vm-topics__panel.sc-is-open .vm-topics__group:not([hidden]) .vm-topics__tags > li,
.vm-topics__panel.sc-is-open .vm-topics__group:not([hidden]) .vm-topics__all {
  animation: vm-topics-in var(--topics-chip-dur) var(--sc-ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * var(--topics-chip-step));
}

@keyframes vm-topics-in {
  from { opacity: 0; transform: translateY(var(--sc-space-2)); }
  to   { opacity: 1; transform: none; }
}

.vm-topics__group {
  display: flex;
  align-items: center;
  gap: var(--sc-space-8);
}

.vm-topics__tags { flex: 1 1 auto; min-inline-size: 0; }

.vm-topics__tag {
  /* Крупнее, как чипы послуг на странице лікаря (sc-dindications__chip): кегль small,
     поля 12 / 14 (правка 2026-10-11; в макете chip 28 — --sc-chip-pad 6 / 10 и mini) */
  padding: var(--sc-space-3) var(--sc-space-3_5);
  border: var(--sc-line) solid var(--input);
  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
  transition:
    background-color var(--sc-dur-fast) var(--sc-ease),
    color var(--sc-dur-fast) var(--sc-ease);
}

/* Тема без материалов: приглушена и не нажимается (disabled ставит скрипт) */
.vm-topics__tag:disabled {
  border-color: var(--border);
  color: var(--muted-foreground);
  cursor: default;
}

.vm-topics__tag[aria-pressed="true"] {
  background: var(--foreground);
  color: var(--background);
}

/* Темы выбираются по нескольку: у выбранной справа крестик — «снять».
   Иконка — маска, цвет берёт от текста */
.vm-topics__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
}

.vm-topics__tag[aria-pressed="true"]::after {
  content: "";
  flex: none;
  inline-size: var(--topics-x);
  block-size: var(--topics-x);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vm-topics__all {
  flex: none;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* ---------- Результат фильтра ---------- */

.vm-topics__result {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.vm-topics__result[hidden] { display: none; }

/* Загрузка (aria-busy ставит скрипт, пока идёт запрос карточек) */
.vm-topics__result [data-topics-list] { transition: opacity var(--sc-dur-fast) var(--sc-ease); }
.vm-topics__result[aria-busy="true"] [data-topics-list] { opacity: var(--topics-busy-opacity); pointer-events: none; }

.vm-topics__result-head {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sc-space-2);
  color: var(--sc-neutral-600);
}

.vm-topics__result-topic {
  font-weight: var(--sc-weight-bold);
  color: var(--foreground);
}

.vm-topics__result-name + .vm-topics__result-name::before {
  content: " · ";
  font-weight: normal;
  color: var(--sc-neutral-600);
}

.vm-topics__reset {
  padding: 0;
  border: 0;
  background: none;
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer;
}

/* ---------- Состояния (в Figma их нет — обязательны по CLAUDE.md) ---------- */

@media (hover: hover) and (pointer: fine) {
  .vm-topics__rubric[aria-expanded="false"]:hover .vm-topics__arrow svg {
    transform: translate(calc(var(--grid-gap) / 2), calc(var(--grid-gap) / 2)) rotate(45deg);
  }
  .vm-topics__rubric[aria-expanded="false"]:hover,
  .vm-topics__tag:not(:disabled):not([aria-pressed="true"]):hover { background: var(--muted); }
  .vm-topics__all:hover,
  .vm-topics__reset:hover { text-decoration: none; }
}

.vm-topics__rubric:focus-visible,
.vm-topics__tag:focus-visible,
.vm-topics__all:focus-visible,
.vm-topics__reset:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

.vm-topics__rubric:active,
.vm-topics__tag:not(:disabled):active { background: var(--secondary); }

@media (prefers-reduced-motion: reduce) {
  .vm-topics__rubric,
  .vm-topics__arrow svg,
  .vm-topics__tag,
  .vm-topics__panel,
  .vm-topics__panel.sc-is-open { transition: none; }
  .vm-topics__panel.sc-is-open .vm-topics__group:not([hidden]) .vm-topics__tags > li,
  .vm-topics__panel.sc-is-open .vm-topics__group:not([hidden]) .vm-topics__all { animation: none; }
}

/* ---------- Телефон: ссылка «Усі матеріали» под темами ---------- */

@media (max-width: 640px) {
  .vm-topics { --topics-tile-min: 140px; } /* две плитки в ряд */

  .vm-topics__group {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sc-space-5);
  }
}