/* Кейсы по рубрикам (23.10.2026): подборки, фильтр «Тема / Ситуация / Формат / Для кого», группы рубрик.
   Цвета только из переменных site.css (--red, --ink, --body, --mute, --line, --bg, --pink). Подключается на /kejsy/
   и на новых страницах кейсов (теги в «Обстоятельствах дела»). */
/* шапка сайта закреплена (≈150 px на ПК, ≈90 px на телефоне): отступ при переходе по якорю */
.kr { scroll-margin-top: 160px; }
/* у карточек display:flex, у групп display:grid: без этого атрибут hidden их не прячет */
.kr [hidden], .kr-list [hidden] { display: none !important; }

/* подборки */
.kr-sets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.kr-set { display: flex; flex-direction: column; gap: 8px; min-height: 100%; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.kr-set b { font-family: var(--font-h); font-size: 21px; font-weight: 700; line-height: 1.2; }
.kr-set span { font-size: 14px; line-height: 1.45; color: var(--body); }
.kr-set em { margin-top: auto; padding-top: 6px; font-family: var(--font-b); font-size: 13px; font-style: normal; font-weight: 500; color: var(--red); }
.kr-set:hover { border-color: var(--red); box-shadow: var(--shadow); }
.kr-set[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.kr-set[aria-pressed="true"] span { color: #d9dce3; }
.kr-set[aria-pressed="true"] em { color: #fff; }

/* панель фильтра */
.kr-panel { padding: 8px 24px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.kr-row { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line); }
.kr-lb { padding-top: 10px; font-family: var(--font-b); font-size: 14px; font-weight: 600; color: var(--ink); }
.kr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kr-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 22px; background: #fff; color: var(--ink); font: inherit; font-size: 14px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.kr-chip span { font-size: 12px; opacity: .7; }
.kr-chip:hover { border-color: var(--red); color: var(--ink); }
.kr-chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.kr-chip.is-zero { opacity: .45; }
.kr-bottom { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; padding-top: 16px; }
.kr-search { display: grid; gap: 8px; flex: 1 1 300px; max-width: 520px; font-size: 14px; color: var(--ink); }
.kr-search input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; }
.kr-count { margin: 0; padding: 12px 0; font-size: 14px; color: var(--ink); }
.kr-reset { min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--red); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.kr-reset:disabled { color: var(--mute); text-decoration: none; cursor: default; }
.kr button:focus-visible, .kr a:focus-visible, .kr input:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* группы рубрик */
.kr-list { scroll-margin-top: 160px; }
.kr-group { display: grid; grid-template-columns: 270px 1fr; gap: 28px; padding: 30px 0; border-top: 1px solid var(--line); scroll-margin-top: 160px; }
.kr-group:first-child { border-top: 0; padding-top: 0; }
.kr-gi h2 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; }
.kr-gi p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--body); }
.kr-gc { display: inline-block; padding: 4px 10px; border-radius: 14px; background: var(--pink); color: var(--red); font-family: var(--font-b); font-size: 13px; font-weight: 500; }
.kr-gl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-content: start; }
.kr-card { transition: box-shadow .15s, border-color .15s; }
.kr-card:hover { border-color: #d6d9e0; box-shadow: var(--shadow); }
.kr-card h3 { margin: 0; }
.kr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kr-tags span { padding: 3px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--mute); font-family: var(--font-b); font-size: 11.5px; line-height: 1.3; }
.kr-empty { margin: 24px 0 0; padding: 24px; border: 1px dashed var(--line); border-radius: 14px; text-align: center; color: var(--body); }

/* страница кейса: теги под обстоятельствами */
.kr-case-tags { margin-top: 16px; }
.kr-case-tags span { font-size: 12.5px; padding: 4px 10px; }

@media (max-width: 1000px) {
  .kr-group { grid-template-columns: 1fr; gap: 16px; }
  .kr-gl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .kr-sets { display: flex; overflow-x: auto; gap: 12px; margin: 0 -16px 16px; padding: 0 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .kr-sets::-webkit-scrollbar { display: none; }
  .kr-set { flex: 0 0 78%; scroll-snap-align: start; padding: 16px 18px; }
  .kr-set b { font-size: 18px; }
}
@media (max-width: 600px) {
  .kr, .kr-list, .kr-group { scroll-margin-top: 100px; }
  .kr-panel { padding: 4px 16px 16px; }
  .kr-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; }
  .kr-lb { padding-top: 0; }
  .kr-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .kr-chips::-webkit-scrollbar { display: none; }
  .kr-chip { flex: 0 0 auto; min-height: 44px; font-size: 13px; }
  .kr-search { flex-basis: 100%; max-width: none; }
  .kr-bottom { gap: 4px 20px; }
  .kr-gl { grid-template-columns: minmax(0, 1fr); }
  .kr-gi h2 { font-size: 21px; }
}