/* ============================================================
   Inner-page shared styles
   Подключается ПОСЛЕ components.css на каждой странице pages/*.html
   ============================================================ */

/* ----- Single (статья): длинные неразрывные токены (формулы Pwin=Сr(i)*Y(i)/… , URL, DOI)
   переносим, иначе на узких экранах горизонтальный скролл. overflow-wrap наследуется. ----- */
.single-content,
.single-content__main,
.single-content__inner { overflow-wrap: break-word; word-break: break-word; }

/* ----- Inner-page hero (компактный, светлый) ----- */
.page-hero {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
}
.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: center;
}
/* grid-айтемы (особенно svg-визуал с viewBox 500×400) должны сжиматься ниже своего
   min-content, иначе 1fr-колонка раздувается шире вьюпорта и режет заголовок/лид на мобиле */
.page-hero__inner > * { min-width: 0; }
@media (min-width: 1024px) {
  .page-hero__inner { grid-template-columns: 1.4fr 1fr; gap: var(--sp-8); }
}
.page-hero__title { max-width: 22ch; margin-top: var(--sp-3); }
.page-hero__lead {
  margin-top: var(--sp-5);
  max-width: 60ch;
  font-size: var(--fs-body-l);
  font-weight: 300;
  line-height: var(--lh-snug);
  color: var(--color-muted);
}
.page-hero__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.page-hero__visual {
  position: relative;
  aspect-ratio: 5/4;
  width: 100%;
}
.page-hero__visual svg { width: 100%; height: 100%; }

/* ----- Filter bar над списком ----- */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-7);
}
@media (min-width: 768px) {
  .filter-bar { flex-direction: row; align-items: center; }
  .filter-bar__group { flex: 1; }
}
.filter-bar__label {
  display: block;
  font-size: var(--fs-mini);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-muted);
  margin-bottom: var(--sp-2);
}
.filter-select,
.filter-search {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 var(--sp-4);
  font: inherit;
  font-size: var(--fs-small);
  color: var(--color-ink);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.filter-select:focus,
.filter-search:focus { outline: 0; border-color: var(--color-accent); box-shadow: var(--shadow-focus); }
/* type="search" — снимаем нативную отрисовку WebKit, иначе иконка-лупа
   может «наезжать» на плейсхолдер: браузер игнорирует padding-left у
   searchfield-appearance. Явные background-size/position + padding гарантируют
   зазор между лупой и текстом во всех движках. */
input.filter-search {
  -webkit-appearance: none;
  appearance: none;
  background: var(--color-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235A6A8A' stroke-width='1.75' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.3-4.3'/></svg>") no-repeat left 16px center;
  background-size: 18px 18px;
  padding-left: 44px;
}
/* Убираем «крестик» очистки в WebKit — он дублирует функцию и ломает выравнивание. */
input.filter-search::-webkit-search-decoration,
input.filter-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ----- Tag cloud (для дайджеста) ----- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ----- Section anchor tabs (для laboratory) ----- */
.anchor-tabs {
  position: sticky; top: 80px;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}
.anchor-tabs__list {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  padding-block: var(--sp-3);
  scrollbar-width: none;
}
.anchor-tabs__list::-webkit-scrollbar { display: none; }
.anchor-tabs__link {
  position: relative;
  display: inline-block;
  padding: var(--sp-3) 0;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--color-muted);
  white-space: nowrap;
  text-decoration: none;
}
.anchor-tabs__link:hover { color: var(--color-primary); }
.anchor-tabs__link.is-active { color: var(--color-primary); font-weight: 600; }
.anchor-tabs__link.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--color-accent);
}

/* ----- 2-col list ----- */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }

/* ----- Timeline (history) ----- */
.timeline { display: flex; flex-direction: column; gap: var(--sp-6); position: relative; padding-left: var(--sp-7); }
.timeline::before {
  content: ''; position: absolute; left: 16px; top: 8px; bottom: 8px;
  width: 2px; background: var(--color-border);
}
.timeline__item { position: relative; }
.timeline__item::before {
  content: ''; position: absolute; left: -42px; top: 8px;
  width: 18px; height: 18px;
  background: var(--color-bg);
  border: 3px solid var(--color-accent);
  border-radius: 50%;
}
.timeline__year {
  font-size: var(--fs-h4); font-weight: 700; color: var(--color-primary);
  margin-bottom: var(--sp-2);
}
.timeline__title { font-size: var(--fs-body); font-weight: 600; color: var(--color-ink); margin-bottom: var(--sp-2); }
.timeline__desc { font-size: var(--fs-small); color: var(--color-muted); line-height: var(--lh-snug); }

/* ----- Staff grid (4 col на десктопе) ----- */
.staff-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5);
}
@media (min-width: 768px) { .staff-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .staff-grid { grid-template-columns: repeat(4, 1fr); } }

/* ----- Сетка проектов ----- */
.proj-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 640px) { .proj-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .proj-grid { grid-template-columns: repeat(3, 1fr); } }

/* ----- Сводный CTA-блок (контакты) ----- */
.contact-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-7);
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1.2fr 1fr; }
}
.map-frame {
  position: relative;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-accent-soft) 100%);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.contact-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.contact-row {
  display: flex; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.contact-row__icon {
  flex-shrink: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-soft); color: var(--color-primary);
  border-radius: var(--radius-sm);
}
.contact-row__icon svg { width: 22px; height: 22px; }
.contact-row__label {
  font-size: var(--fs-mini); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-muted); margin-bottom: 4px;
}
.contact-row__value { font-size: var(--fs-body); font-weight: 500; color: var(--color-ink); }
.contact-row__value a { color: var(--color-ink); }

/* ----- Featured / событие ----- */
.event-feature {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-7);
  padding: var(--sp-7);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-soft) 100%);
  color: var(--color-on-primary);
  border-radius: var(--radius-lg);
  align-items: center;
}
@media (min-width: 1024px) { .event-feature { grid-template-columns: 1fr 1fr; padding: var(--sp-8); } }
.event-feature h2 { color: var(--color-on-primary); margin-block: var(--sp-3) var(--sp-4); }
.event-feature p { color: var(--color-on-primary-muted); margin-bottom: var(--sp-5); }
.event-feature__date {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--color-accent-soft);
}
.event-feature__visual { display: flex; justify-content: center; }

/* ----- Архив-список (events) ----- */
.archive-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.archive-row {
  display: flex; align-items: baseline; gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.archive-row:hover { border-color: var(--color-accent); transform: translateX(4px); }
.archive-row__year {
  flex-shrink: 0; width: 64px;
  font-size: var(--fs-h4); font-weight: 700; color: var(--color-primary);
}
.archive-row__title { flex: 1; font-size: var(--fs-body); font-weight: 500; color: var(--color-ink); }
.archive-row__meta { font-size: var(--fs-small); color: var(--color-muted); }

/* ----- Heading стиля section с ссылкой справа ----- */
.head-row {
  display: flex; flex-direction: column; gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
@media (min-width: 768px) {
  .head-row { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}
.head-row__main { max-width: 60ch; }
.head-row__lead { margin-top: var(--sp-3); color: var(--color-muted); font-size: var(--fs-body-l); font-weight: 300; }

/* ============================================================
   Дополнения для list-страниц (digest / publications / projects).
   Базовые .filter-bar / .tag-cloud / .grid-2 / .proj-grid
   определены ВЫШЕ в этом файле — здесь только то, чего там нет.
   ============================================================ */

/* ----- Pagination ----- */
.abm-pagination {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  justify-content: center; margin-top: var(--sp-7);
}
.abm-pagination__item {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  color: var(--color-text); text-decoration: none; font-size: var(--fs-small);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.abm-pagination__item:hover { color: var(--color-primary); border-color: var(--color-accent); }
.abm-pagination__item.is-active {
  color: #fff; background: var(--color-primary); border-color: var(--color-primary);
}
.abm-pagination__item[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ----- Tag (chips) — .tag-cloud уже определён выше ----- */
.abm-tag {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  color: var(--color-text); text-decoration: none; font-size: var(--fs-small);
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.abm-tag:hover { color: var(--color-primary); border-color: var(--color-accent); }
.abm-tag.is-active {
  color: #fff; background: var(--color-primary); border-color: var(--color-primary);
}

/* ----- Digest grid (3-col на десктопе) ----- */
.digest-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 640px)  { .digest-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .digest-grid { grid-template-columns: repeat(3, 1fr); } }

/* ----- Карточка публикации ----- */
.abm-card--publication {
  background: var(--color-bg);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.abm-card--publication:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.abm-card--publication .abm-card__body {
  padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3);
}
.abm-card--publication .abm-card__type {
  display: inline-block; align-self: flex-start;
  padding: 4px 10px;
  font-size: var(--fs-mini); font-weight: 600;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-accent); background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
}
.abm-card--publication .abm-card__title {
  font-size: var(--fs-h4); font-weight: 600;
  color: var(--color-ink); line-height: var(--lh-tight); margin: 0;
}
.abm-card--publication .abm-card__title-link {
  color: inherit; text-decoration: none;
}
.abm-card--publication .abm-card__authors {
  font-size: var(--fs-small); color: var(--color-text); margin: 0;
}
.abm-card--publication .abm-card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-small); color: var(--color-muted);
}
.abm-card--publication .abm-card__actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2);
}

/* ----- Project status badge (.proj-grid определён выше) ----- */
.proj-grid .abm-card .abm-card__media { position: relative; }
.proj-card-status {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  background: rgba(255,255,255,0.95); border-radius: 999px;
  color: var(--color-ink);
}
.proj-card-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #1F8A5B;
}
.proj-card-status--archive::before { background: #94A0B8; }

/* ----- Hero illustrations (digest/publications/projects) ----- */
.digest-hero-svg .grid-bg { fill: none; stroke: var(--color-border); stroke-width: 1; }
.digest-hero-svg .pulse {
  transform-box: fill-box; transform-origin: center;
  animation: dgPulse 2.6s ease-in-out infinite;
}
.digest-hero-svg .pulse:nth-child(2) { animation-delay: 0.7s; }
.digest-hero-svg .pulse:nth-child(3) { animation-delay: 1.3s; }
@keyframes dgPulse { 0%,100% { opacity: 0.4; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .digest-hero-svg * { animation: none !important; } }

.pubs-hero-svg .sheet { fill: #FFFFFF; stroke: #DBE2EC; stroke-width: 1.5; }
.pubs-hero-svg .accent { fill: rgba(217,154,26,0.18); stroke: #d99a1a; }
.pubs-hero-svg .line { stroke: #94A0B8; stroke-width: 4; stroke-linecap: round; }
.pubs-hero-svg .line-dark { stroke: #4f6ad8; stroke-width: 5; stroke-linecap: round; }

.pj-hero-svg .node { fill: #4f6ad8; }
.pj-hero-svg .node--core { fill: #d99a1a; }
.pj-hero-svg .edge { stroke: #4f6ad8; stroke-width: 1.5; fill: none; opacity: 0.55; }
.pj-hero-svg .edge--dark {
  stroke: #7c3aed; stroke-width: 2; opacity: 0.5; stroke-dasharray: 4 4;
}

/* ============================================================
   Правки по обратной связи заказчика (01.07.2026)
   ============================================================ */

/* P36 / P58 / P95 — экраны-герои подстраиваются под высоту вьюпорта (запрос
   заказчика: «чтобы герои подстраивались под высоту экрана, vh»).
   На больших экранах — просторнее, на ноутбуках — компактнее; контент
   вертикально отцентрирован, не режется, а поиск/счётчик/следующая секция
   встают предсказуемо и «деление блоков» читается чётко (События).
   clamp даёт нижний/верхний предел, чтобы на очень маленьких/больших экранах
   не ломалось. */
.page-hero {
  min-height: clamp(320px, 58vh, 600px);
  display: grid;
  align-content: center;
}

/* Секция сразу после hero: меньше верхний отступ, чтобы фильтры/контент
   не «проваливались» в широкую белую полосу под голубой заливкой. */
.page-hero + .abm-section { padding-top: var(--section-gap-s); }

/* ============================================================
   Правки по обратной связи заказчика (27.07.2026)
   ============================================================ */

/* Таблицы в тексте статей (дайджест, проекты): раньше pipe-разметка
   выводилась сырым текстом. Генерируются как <table class="abm-table">. */
.single-content__inner table,
table.abm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  margin-block: var(--sp-5);
  display: block;
  overflow-x: auto;
}
.single-content__inner th,
.single-content__inner td,
table.abm-table th,
table.abm-table td {
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.single-content__inner thead th,
table.abm-table thead th {
  background: var(--color-surface);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}
.single-content__inner tbody tr:nth-child(even) td,
table.abm-table tbody tr:nth-child(even) td {
  background: var(--color-surface);
}

/* Оглавление в рамке (проект «Для чего нужна КМО?») */
.abm-toc {
  background: var(--color-surface);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-5);
  margin-block: var(--sp-5);
}
.abm-toc strong { display: block; margin-bottom: var(--sp-3); color: var(--color-ink); }
.abm-toc ol { margin: 0; padding-left: var(--sp-5); }
.abm-toc li { margin-top: var(--sp-1); }
.abm-toc a { color: var(--color-primary); text-decoration: none; }
.abm-toc a:hover { text-decoration: underline; text-underline-offset: 3px; }