/* Состав палаты и карточка человека.
   Подключается из sostav.html и member.html.
   Только то, чего нет в фундаменте: фундаментальные классы (.pcard, .thumb,
   .field, .select, .grid) здесь не переопределяются.
   Никаких !important на цвет, фон и рамки — иначе ломается режим слабовидящих. */

/* ---------- шапка страницы ---------- */
/* В макете (строки 338-339) h1 отбит от крошек на 20px, лид — на 16px,
   и мера лида 720px, а не общие 680px. Утилиты mt-* дают только 24px,
   поэтому отступ задаём своим классом страницы. */
.sostav-h1 { margin-top: 20px; }
.sostav-lead { max-width: 720px; }

/* ---------- общий ритм разделов ---------- */
.sostav-section { margin-top: clamp(40px, 6vw, 64px); }
/* «Президиум» стоит сразу под лидом — в макете 56px, дальше по 64px */
.sostav-section:first-of-type { margin-top: clamp(40px, 5vw, 56px); }
.sostav-note {
  margin-top: 20px; max-width: 660px;
  font-size: 1.0625rem; line-height: 1.6; color: var(--c-muted);
}
.sostav-empty { margin-top: 20px; }

/* ---------- Президиум ---------- */
.sostav-chair { margin-top: 28px; }
/* Имя — обычная ссылка, а не растянутая на карточку: под ним стоят кнопки
   соцсетей, и невидимый слой ссылки перехватывал бы клики по ним. */
.sostav-chair__name { margin-top: 16px; }
/* на тёмном цвет ссылки не меняем — подчёркивание показывает, что это ссылка */
.sostav-chair__name:hover { text-decoration: underline; }
.sostav-chair .pcard__role { margin-top: 14px; max-width: 520px; line-height: 1.55; }
/* На тёмной карточке кнопки соцсетей в макете (строки 354-356) мельче общих:
   40px высоты, поля 16px, кегль 15px; сам блок отбит на 20px.
   На карточке человека остаётся общий размер 44px/18px/16px — там макет совпал. */
.sostav-chair .soc-btns { margin-top: 20px; }
.sostav-chair .soc-btn { min-height: var(--btn-h-xs); padding: 0 16px; font-size: .9375rem; }
/* зелёная обводка фокуса на тёмном фоне почти не видна — берём светлое золото */
.sostav-chair a:focus-visible { outline-color: var(--c-gold-light); }

.sostav-subhead { margin-top: 36px; }
.sostav-deputies { margin-top: 20px; }

/* ---------- комиссии ---------- */
.sostav-koms { margin-top: 28px; gap: 20px; }
.kom {
  display: flex; align-items: flex-start; gap: 20px;
  padding: 22px 24px;
  border: 1px solid var(--c-border); background: #FFFFFF;
}
.kom__num {
  flex: none; font-size: 1.625rem; font-weight: 600; line-height: 1.05;
  color: var(--c-gold); font-variant-numeric: tabular-nums;
}
.kom__body { min-width: 0; }
.kom__name { text-wrap: pretty; }
.kom__desc { margin-top: 8px; font-size: .9375rem; line-height: 1.5; color: var(--c-muted); }
.kom__chair { margin-top: 14px; display: flex; align-items: center; gap: 12px; }
.kom__photo { flex: 0 0 36px; width: 36px; }
.kom__chair-body { display: block; min-width: 0; }
.kom__chair-label {
  display: block; font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted);
}
.kom__chair-name {
  display: block; margin-top: 2px;
  font-size: .9375rem; font-weight: 500; color: var(--c-text); text-decoration: none;
}
.kom__chair-name:hover { color: var(--c-accent); }
.kom__chair--empty { margin-top: 14px; font-size: .9375rem; color: var(--c-muted); }

/* Члены комиссии. Строкой, а не столбцом: в комиссиях от нуля до полутора
   десятков человек, и столбец растянул бы карточку так, что соседняя в паре
   осталась бы наполовину пустой. Разделитель — золотой ромб; он стоит внутри
   пункта (::before), поэтому переносится вместе с именем и не повисает
   в конце строки. */
.kom__members { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border); }
.kom__members-label {
  display: block; font-size: .75rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted);
}
.kom__list {
  margin-top: 8px; list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.kom__item { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.kom__item:not(:first-child)::before {
  content: ''; flex: none; width: 5px; height: 5px;
  background: var(--c-gold); transform: rotate(45deg);
}
.kom__item-link {
  font-size: .9375rem; line-height: 1.5;
  color: var(--c-text); text-decoration: none;
}
.kom__item-link:hover { color: var(--c-accent); text-decoration: underline; }
.kom__empty { margin-top: 12px; font-size: .9375rem; color: var(--c-muted); }

/* ---------- фильтры членов палаты ---------- */
.mem-tools { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.mem-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* панель скрыта, пока её не включит sostav-filter.js — [hidden] обязан
   пересиливать display:flex, иначе без JS появится неработающее поле */
.mem-filter[hidden] { display: none; }
.mem-filter__search { width: 340px; max-width: 100%; }
/* названия комиссий длинные — ширину закрытого списка держим в рамках */
.mem-filter__select, .mem-filter__pick { width: 300px; max-width: 100%; }
/* Системный select после подмены остаётся в документе носителем значения,
   но с глаз уходит; [hidden] обязан пересилить всё остальное. */
.mem-filter .select[hidden] { display: none; }
.mem-count { margin-left: auto; font-size: .9375rem; color: var(--c-muted); }
/* без JS счётчик остаётся единственным в строке и прижимается влево */
.mem-filter[hidden] ~ .mem-count { margin-left: 0; }

/* ---------- свой список комиссий (собирает sostav-filter.js) ----------
   Меню обычного select рисует операционная система — оформить его нельзя.
   Скрипт подменяет его кнопкой и списком; в разметке остаётся тот же select,
   поэтому без JS фильтр работает по-прежнему. */
.pickr { position: relative; }
/* Кнопка носит заодно класс .select: рамка 1px, скругление 4px, стрелка и
   готовые правила чёрно-белых схем достаются ей от фундамента. Здесь только
   то, чего у select нет, — раскладка строкой и обрезка длинного названия. */
.pickr__btn { display: flex; align-items: center; width: 100%; text-align: left; }
.pickr__value {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pickr__btn:hover { border-color: var(--c-dark); }
/* открытый список: рамка зеленеет, а стрелка смотрит вверх. Стрелку рисуют
   те же два градиента, что у .select, — только зеркально по вертикали;
   в чёрно-белых схемах её перебивает правило фундамента, и это правильно. */
.pickr__btn[aria-expanded="true"] {
  border-color: var(--c-accent);
  background-image: linear-gradient(135deg, transparent 50%, var(--c-accent) 50%),
                    linear-gradient(45deg, var(--c-accent) 50%, transparent 50%);
}
/* комиссия выбрана — фильтр включён; тёмно-зелёная рамка это показывает */
.pickr.is-set .pickr__btn { border-color: var(--c-dark); }

.pickr__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 70;
  margin: 0; padding: 4px 0; list-style: none;
  max-height: min(320px, 60vh); overflow-y: auto;
  border: 1px solid var(--c-dark); border-radius: var(--r-ctl);
  background: #FFFFFF;
  box-shadow: 0 12px 28px rgba(9, 22, 14, .18);
}
/* ширину список берёт от кнопки (left/right: 0) — за край экрана он не уйдёт,
   а длинные названия комиссий переносятся по строкам */
.pickr__list[hidden] { display: none; }
.pickr__opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 14px; cursor: pointer;
  font-size: 1rem; line-height: 1.4; color: var(--c-text);
}
/* Ромб держит место у каждого пункта, но виден только у выбранного:
   иначе строки прыгали бы при смене выбора. */
.pickr__opt::before {
  content: ''; flex: none; width: 7px; height: 7px; margin-top: .38em;
  background: transparent; transform: rotate(45deg);
}
.pickr__opt[aria-selected="true"] { font-weight: 600; }
.pickr__opt[aria-selected="true"]::before { background: var(--c-gold); }
/* подсветка пункта под стрелками и под мышью (курсор ведёт js) */
.pickr__opt.is-active { background: var(--c-plate-bg); }

/* Режим для слабовидящих. Заливку активного пункта схема стирает своим
   !important, поэтому там его показывает обводка; золотой ромб выбранного
   пункта и ромб-разделитель в комиссиях берут цвет текста схемы. */
html.a11y-scheme-bw .pickr__opt.is-active,
html.a11y-scheme-wb .pickr__opt.is-active {
  outline: 2px solid currentColor; outline-offset: -2px;
}
html.a11y-scheme-bw .pickr__opt[aria-selected="true"]::before,
html.a11y-scheme-wb .pickr__opt[aria-selected="true"]::before,
html.a11y-scheme-bw .kom__item:not(:first-child)::before,
html.a11y-scheme-wb .kom__item:not(:first-child)::before { background: currentColor; }

.mem-grid { margin-top: 24px; }
/* подпись плитки члена палаты чуть теснее подписи заместителя (макет, строка 421) */
.mem .pcard__body { padding: 14px 14px 16px; }
.mem .pcard__role { margin-top: 5px; }
/* обёртка нужна для data-атрибутов фильтра; карточка тянется на всю высоту */
.mem { display: flex; }
.mem[hidden] { display: none; }
.mem > .pcard { flex: 1 1 auto; }

.mem-empty { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.mem-empty[hidden] { display: none; }
.mem-empty__text { color: var(--c-muted); }

/* ---------- карточка человека ---------- */
.person {
  margin-top: 32px;
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  gap: 48px; align-items: start;
}
.person__photo { width: 100%; }
/* надзаголовок над именем: в макете (строка 465) ромб 8px при обычных
   gap 10px и разрядке .11em — готового модификатора под это нет
   (.eyebrow--lg меняет заодно gap и letter-spacing), поэтому правим только ромб */
.person__body > .eyebrow::before { width: 8px; height: 8px; }
.person__name { margin-top: 18px; }

/* «Работа в комиссиях»: линейка 4px сверху, надзаголовок без ромба */
.person__block { margin-top: 32px; padding-top: 24px; border-top: 4px solid var(--c-dark); }
.person__coms {
  margin-top: 16px; list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.person__com { font-size: 1.1875rem; font-weight: 500; line-height: 1.5; }
.person__com-note {
  display: block; margin-top: 4px;
  font-size: .9375rem; font-weight: 400; color: var(--c-muted);
}
.person__coms-empty { margin-top: 14px; }

.person .soc-btns { margin-top: 32px; }
.person__bio { margin-top: 32px; max-width: 660px; font-size: 1.0625rem; }
.person__back { margin-top: 32px; }

/* ---------- адаптив ---------- */
@media (max-width: 900px) {
  /* тёмная карточка на телефоне разворачивается в столбец (site.css),
     вертикальный портрет 3:4 занимал бы пол-экрана — как в макете берём 4:3 */
  .sostav-chair .pcard__photo { aspect-ratio: 4 / 3; }
  .sostav-koms { gap: 12px; }
  .kom { padding: 16px; gap: 14px; }
  .kom__num { font-size: 1.25rem; }
  .kom__name { font-size: 1.0625rem; }
  /* на узкой карточке в строку помещается одно имя — зазоры теснее */
  .kom__list { gap: 2px 10px; }
  .kom__item { gap: 10px; }

  /* в макете «Телефон, состав» (строки 967 и 990) обе плитки идут с gap 14px */
  .sostav-deputies, .mem-grid { gap: 14px; }

  .mem-filter { width: 100%; }
  .mem-filter__search, .mem-filter__select, .mem-filter__pick { width: 100%; }
  .mem-count { margin-left: 0; }

  .person { grid-template-columns: 1fr; gap: 24px; }
  .person__media { max-width: 260px; }
  .person__com { font-size: 1.0625rem; }
}

@media (max-width: 560px) {
  .mem-empty { flex-direction: column; align-items: flex-start; }

  /* Заголовки разделов на телефоне выглядят как надзаголовок группы
     (макет «Телефон, состав», строки 936/964/985): ромб 7px + gap 10px,
     текст 14px вразрядку прописными, линейка 4px в 10px под текстом.
     Разметку не трогаем: h2 нужен структуре страницы и озвучке. */
  .sostav-section .section-head {
    align-items: center; gap: 10px;
    padding-bottom: 10px; border-bottom: 4px solid var(--c-dark);
  }
  .sostav-section .section-head::before {
    content: ''; flex: none; width: 7px; height: 7px;
    background: var(--c-gold); transform: rotate(45deg);
  }
  /* линейку теперь рисует border-bottom — псевдоэлемент-линейка лишний */
  .sostav-section .section-head::after { content: none; }
  .sostav-section .section-head .h2 {
    font-size: .875rem; line-height: 1.3;
    letter-spacing: .11em; text-transform: uppercase;
  }
  /* в макете первый раздел отбит от поля поиска на 32px, остальные на 40px */
  .sostav-section { margin-top: 40px; }
  .sostav-section:first-of-type { margin-top: 32px; }

  /* подписи плиток теснее (строки 998-1001). Бейджа поверх портрета больше
     нет — статус человека идёт подписью под ФИО. */
  .mem .pcard__body, .sostav-deputies .pcard__body { padding: 12px 12px 14px; }
}

/* Телефон 390px: плитки заместителей и членов палаты остаются в две колонки —
   в одну колонку карточка 4:5 занимает почти весь экран (макет, строки 967 и 990).
   Файл грузится после site.css, специфичность та же — правило перебивает. */
@media (max-width: 400px) {
  .sostav-deputies, .mem-grid { grid-template-columns: repeat(2, 1fr); }
}