/* Раздел «Полезное» — вариант B «Тёмная обложка» (выбор заказчика 2026-10-22 из трёх в
   артефакте «Дизайн «Полезное» ORYX»). Верх страницы раздела и статьи — тёмно-синяя
   обложка, как короба главной; ниже — светлая «бумага». Цвета, шрифты, кнопки и шапка —
   из vitrina.css (подключён перед этим файлом); здесь только вёрстка раздела. Всё под
   .pol: общие правила сайта для h1 и p рассчитаны на первый экран главной. */

.pol { padding-bottom: 72px; }
.pol a { text-underline-offset: 3px; }

/* ---------- обложка ---------- */
.pol__cover {
  background-color: var(--navy); color: var(--on);
  background-image: radial-gradient(60% 80% at 85% 0%, rgba(228,206,156,.14), transparent 70%);
  padding: clamp(28px, 4vw, 48px) 16px clamp(36px, 5vw, 56px);
}
.pol__cover-in { max-width: 1120px; margin: 0 auto; display: grid; gap: 28px; align-items: center; }
.pol__in { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; font-size: var(--fs-sm); color: var(--on-2); }
.crumbs a { color: var(--on-2); }
.crumbs span[aria-hidden] { color: var(--on-2); opacity: .6; }
.pol__cover h1 {
  margin: 0; color: var(--on); font: 800 clamp(2rem, 4.6vw, 3.2rem)/1.06 var(--font-d);
  letter-spacing: -.035em; text-wrap: balance; max-width: 22ch;
}
.pol__lead { margin: 16px 0 0; color: var(--on-2); font-size: var(--fs-md); line-height: 1.55; max-width: 46ch; }
.pol__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.pol__chips li {
  padding: 7px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600;
  background: rgba(228,206,156,.14); color: var(--brass-lit);
}
.pol__meta { margin: 18px 0 0; font-size: var(--fs-sm); color: var(--brass-lit); }
/* Рисунок карты на обложке: на ПК — справа от текста, на телефоне — полосой под ним. */
.pol__art { max-width: 100%; }
/* Карта на обложке статьи — светлая, «дневная»: тёмная карта на тёмной обложке сливалась
   (замечание заказчика 2026-10-22). Строка поиска и подпись — HTML поверх рисунка, а не
   текст внутри SVG: плашка всегда по длине слова, каким бы шрифтом его ни нарисовал браузер. */
.mapcard { position: relative; border-radius: var(--r-box); overflow: hidden; box-shadow: var(--shadow-box); }
.mapcard > svg { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; }
.mapcard__search {
  position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 10px 14px; border-radius: var(--r-pill); background: var(--plate); color: var(--ink);
  font: 600 var(--fs-base)/1 var(--font-t); box-shadow: var(--shadow-plate); white-space: nowrap;
}
.mapcard__search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.mapcard__miss {
  /* Под пунктирным кружком в центре карты (213/400 по высоте, радиус 32): на телефоне в
     левом нижнем углу плашка закрывала кружок — замечание заказчика 2026-10-22. */
  position: absolute; left: 50%; top: calc(61.5% + 8px); transform: translateX(-50%); white-space: nowrap;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--plate); color: var(--ox); font: 600 var(--fs-sm)/1.2 var(--font-t); box-shadow: var(--shadow-plate);
}
@media (min-width: 900px) {
  .pol__cover-in--art { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; }
  /* Рядом с картой заголовок мельче: иначе на ПК он вставал в четыре строки. */
  .pol__cover-in--art h1 { font-size: clamp(2rem, 3.3vw, 2.75rem); }
}

/* ---------- страница раздела: карточки статей ---------- */
.arts__list {
  /* Карточки — на светлой основе под обложкой, а не наезжают на неё: синий на синем и
     светлая обводка по тёмному смотрелись плохо (замечание заказчика 2026-10-22). */
  list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.arts__item a {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: 100%;
  background: var(--plate); border-radius: var(--r-box); overflow: hidden; text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-plate); transition: box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.arts__item a:hover { box-shadow: var(--shadow-box); transform: translateY(-2px); }
.arts__item a:hover .arts__title { text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }
.arts__item a:focus-visible { outline: 2px solid var(--ox); outline-offset: 3px; }
.arts__img { display: block; aspect-ratio: 16 / 9; max-width: 100%; background: var(--paper-2); }
.arts__img svg { display: block; width: 100%; height: 100%; }
.arts__txt { display: grid; gap: 8px; align-content: start; padding: 20px 22px 22px; }
.arts__tag { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-ink); }
.arts__title { font: 800 var(--fs-lg)/1.22 var(--font-d); letter-spacing: -.015em; }
.arts__sum { font-size: var(--fs-base); line-height: 1.55; color: var(--ink-2); }
.arts__more { font-size: var(--fs-sm); font-weight: 600; color: var(--ox); }

/* ---------- статья: текст слева, оглавление справа ---------- */
.art__in { display: grid; gap: 24px; margin-top: 32px; }
@media (min-width: 1000px) { .art__in { grid-template-columns: minmax(0, 720px) 300px; justify-content: space-between; align-items: start; } }
.art__toc {
  background: var(--plate); border-radius: var(--r-box); padding: 22px; border: 1px solid var(--line);
  font-size: var(--fs-sm);
}
/* Оглавление стоит в разметке перед текстом: на телефоне оно первым, а не после статьи
   (замечание заказчика 2026-10-22). На ПК сетка уводит его в правую колонку. */
@media (min-width: 1000px) {
  .art__toc { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 112px; }
  .art__body, .art__cta-wrap { grid-column: 1; }
}
.art__toc-h { margin: 0 0 10px; font-weight: 800; font-size: var(--fs-base); color: var(--ink); }
.art__toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.art__toc a { color: var(--ink); text-decoration: none; }
.art__toc a:hover { color: var(--ox); text-decoration: underline; }

.art__body { font-size: var(--fs-body); line-height: 1.68; color: var(--ink); min-width: 0; }
.art__body p { margin: 0 0 1em; max-width: none; }
.art__body ul { margin: .2em 0 1.2em; padding-left: 1.2em; }
.art__body li { margin-bottom: .45em; }
.art__body li::marker { color: var(--brass-ink); }
.art__body a { color: var(--ox); }
.art__body strong { font-weight: 600; }
.art__body > h2 { font: 800 var(--fs-2xl)/1.18 var(--font-d); letter-spacing: -.02em; margin: 1.6em 0 .5em; color: var(--ink); text-wrap: balance; }
.art__body > h2:first-child { margin-top: 0; }

/* Причина — белая табличка (класс .cause: имя .reason занято плашками «Узнаёте себя» главной) с латунной кромкой сверху и номером в плашке. */
.cause {
  position: relative; overflow: hidden; margin: 18px 0; padding: clamp(22px, 3vw, 28px);
  background: var(--plate); border-radius: var(--r-box); border: 1px solid var(--line);
}
.cause::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--brass), var(--brass-lit)); }
.cause h2 {
  display: flex; gap: 14px; align-items: baseline; margin: 0 0 .6em;
  font: 800 var(--fs-xl)/1.2 var(--font-d); letter-spacing: -.015em; color: var(--ink); text-wrap: balance;
}
.cause__n { flex: none; padding: 4px 11px; border-radius: var(--r-pill); background: var(--brass-wash); color: var(--navy); font-size: var(--fs-sm); font-weight: 800; }
.cause > :last-child { margin-bottom: 0; }
/* «Что делать» — отдельной плашкой: ради неё человек и читает. */
.todo { padding: 14px 16px; border-radius: var(--r-plate); background: var(--paper); }
.todo b:first-child { color: var(--ox); font-weight: 800; }

/* ---------- рисунки ---------- */
.fig { margin: 1.6em 0; }
.fig figcaption { margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); }

/* Три вопроса, которые площадка задаёт каждой карточке: значок, вопрос, из чего ответ. */
.trio__q {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: var(--fs-sm); color: var(--ink-2);
}
.trio__search {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--plate); border: 1px solid var(--line); color: var(--ink); font-weight: 600;
}
.trio__search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-2); stroke-width: 1.8; }
.trio { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trio__c {
  display: grid; gap: 8px; align-content: start; padding: 20px 18px; border-radius: var(--r-box);
  background-color: var(--navy); color: var(--on);
}
.trio__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(228,206,156,.12); }
.trio__ic svg { width: 32px; height: 32px; fill: none; stroke: var(--brass-lit); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.trio__c b { font: 800 var(--fs-lg)/1.2 var(--font-d); color: var(--on); }
.trio__c span { font-size: var(--fs-sm); line-height: 1.45; color: var(--on-2); }
.trio__c em { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--brass-lit); }

/* Пустая и заполненная карточка рядом. */
.cards2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cards2 { grid-template-columns: 1fr 1fr; } }
.mini { background: var(--plate); border-radius: var(--r-plate); border: 1px solid var(--line); overflow: hidden; display: grid; gap: 6px; padding-bottom: 14px; align-content: start; }
.mini > :not(.mini__photo) { margin: 0 14px; }
.mini__photo { height: 140px; background: var(--paper-2); display: grid; place-items: center; font-size: var(--fs-sm); color: var(--ink-ghost); }
/* Фото лежит в рамке поверх неё: в сетке с выравниванием по центру картинка со своей
   высотой вылезала из 140 px и наползала на название. */
.mini__photo { position: relative; overflow: hidden; }
.mini__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mini__name { font-size: var(--fs-base); }
.mini__cat { font-size: var(--fs-xs); color: var(--ink-2); }
.mini__rows { list-style: none; padding: 0 !important; margin: 4px 14px 0 !important; display: grid; gap: 4px; font-size: var(--fs-sm); }
.mini__rows li { margin: 0 !important; padding-left: 20px; position: relative; }
.mini__rows li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--pf-gis); }
.mini__rows li.is-off { color: var(--ink-ghost); }
.mini__rows li.is-off::before { background: transparent; border: 1.5px solid var(--ink-ghost); }
.mini--full { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }

/* График: длина полосы — сама величина в процентах. */
.bars { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-plate); background: var(--plate); border: 1px solid var(--line); }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.bar__t { grid-column: 1 / -1; font-size: var(--fs-sm); }
.bar__track { height: 14px; border-radius: 7px; background: var(--paper-2); overflow: hidden; }
.bar__fill { display: block; height: 100%; border-radius: 7px; background: var(--navy); }
.bar__v { font: 800 var(--fs-lg)/1 var(--font-d); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
.bars__axis { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--ink-2); margin-right: calc(3ch + 16px); }

/* Чек-лист — тёмная табличка, вопросы — раскрывающиеся строки. */
.art__box { margin: 28px 0; padding: clamp(22px, 3vw, 28px); border-radius: var(--r-box); background-color: var(--navy); color: var(--on); }
.art__box h2 { margin: 0 0 .5em; font: 800 var(--fs-xl)/1.2 var(--font-d); color: var(--on); }
.art__box p { color: var(--on-2); }
.check-list { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 8px; }
.check-list li { position: relative; padding-left: 32px; color: var(--on); margin: 0 !important; }
.check-list li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--brass-lit); }
.faq-a details { border-top: 1px solid var(--line); padding: 12px 0; }
.faq-a details:last-child { border-bottom: 1px solid var(--line); }
.faq-a summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.faq-a details p { margin: 6px 0 0; color: var(--ink-2); }

/* Призыв в конце статьи. */
.art__cta { margin-top: 28px; padding: clamp(24px, 4vw, 36px); border-radius: var(--r-box); background-color: var(--navy); color: var(--on); }
.art__cta h2 { margin: 0 0 10px; font: 800 var(--fs-xl)/1.2 var(--font-d); color: var(--on); }
.art__cta p { margin: 0 0 20px; color: var(--on-2); max-width: none; line-height: 1.55; }
.art__cta .btn { display: inline-flex; }