/* ДНЖ · днж-практики.рф · about.css
   Вкладка «Информация → Об инициативе». Вся вёрстка страницы лежит в about.js
   прямо в разметке (инлайновые стили), здесь — только то, что инлайном не задать:
   сброс внутри страницы, переносы на узких экранах и состояния при наведении.
   Все правила начинаются с .about-page, чтобы не задеть остальные разделы сайта. */

/* Страница идёт во всю ширину: убираем ограничение и поля у <main>. */
#app>main.main-about{max-width:none; padding:0}
@media (max-width:900px){ #app>main.main-about{padding:0} }

/* ── сброс внутри страницы ───────────────────────────────────────────────── */
.about-page{
  box-sizing:border-box;
  font-family:"Fact","Fact Semi Expanded","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.55; color:#1D1726; background:#fff;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-wrap:pretty;
}
.about-page *{box-sizing:border-box; margin:0; padding:0}
.about-page button{font:inherit; cursor:pointer; font-family:inherit}
.about-page a{color:#550577; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.about-page a:hover{color:#E64F00}
.about-page h1,.about-page h2,.about-page h3,.about-page h4{font-weight:800; letter-spacing:-0.02em; line-height:1.12; overflow-wrap:break-word}
.about-page :focus-visible{outline:none; box-shadow:0 0 0 3px rgba(85,5,119,.22); border-radius:8px}
.about-page img{max-width:100%}

/* ── отступ под шапкой и полосой вкладок сайта ───────────────────────────── */
/* Шапка приклеена сверху (56px), полоса вкладок под ней (ещё ~58px).
   Через --anchor-offset считаются отступы у якорей оглавления. */
/* запасные значения: точные ставит aboutSyncOffset() в about.js по факту */
.about-page [data-page]{--anchor-offset:176px}
.about-page [data-rail]{top:180px !important}

@media (max-width:1180px){
  .about-page [data-shell]{display:block !important}
  .about-page [data-rail]{display:none !important}
}
@media (max-width:1240px){
  .about-page [data-hero]{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-hero-photo]{min-height:340px}
}
@media (max-width:1100px){
  .about-page [data-wheel]{aspect-ratio:auto !important; max-width:none !important; display:grid !important; gap:20px !important}
  .about-page [data-wheel] [data-ring],.about-page [data-wheel] [data-arrow]{display:none !important}
  .about-page [data-wheel] [data-core]{position:static !important; transform:none !important; width:100% !important; aspect-ratio:auto !important; border-radius:14px !important; order:9}
  .about-page [data-wheel] [data-step]{position:relative !important; left:auto !important; top:auto !important; transform:none !important; width:100% !important}
  .about-page [data-flow]{grid-template-columns:minmax(0,1fr) !important; gap:14px !important}
  .about-page [data-flow] [data-flow-arrow]{transform:rotate(90deg)}
  .about-page [data-flow] > div:empty{display:none !important}
}
@media (max-width:1320px){
  .about-page [data-c5]{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .about-page [data-c4]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .about-page [data-chain4]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .about-page [data-chain4] [data-rail-line]{display:none !important}
  .about-page [data-timeline]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .about-page [data-timeline] [data-rail-line]{display:none !important}
  .about-page [data-c3-2]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:900px){
  .about-page [data-c5]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .about-page [data-c2]{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-c3]{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-c3-2]{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-c4]{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-chain4]{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-row]{grid-template-columns:minmax(0,1fr) !important; gap:8px !important}
  .about-page [data-h2]{font-size:30px !important}
  .about-page [data-lead]{font-size:21px !important}
  .about-page [data-quote]{font-size:24px !important}
  .about-page [data-quote-row]{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-timeline]{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-matry]{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-goal2]{grid-template-columns:minmax(0,1fr) !important}
}
@media (max-width:480px){
  /* на самых узких экранах уменьшаем внутренние поля карточек,
     иначе появляется горизонтальная прокрутка */
  .about-page [style*="padding:26px 32px"]{padding-left:18px !important; padding-right:18px !important}
  .about-page [style*="padding:26px 28px"]{padding-left:18px !important; padding-right:18px !important}
}
@media (max-width:640px){
  .about-page [data-svc] > a{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-svc] > a > span:first-of-type{grid-column:1 !important; grid-row:2 !important; justify-content:flex-start !important; margin-right:0 !important}
  .about-page [data-orgs] > div{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-orgs] > div > span{grid-column:1 !important; grid-row:2 !important; justify-content:flex-start !important; margin-right:0 !important}
}
@media (max-width:640px){
  /* на узком экране заголовок первого экрана переносится по словам */
  .about-page [data-hero] h1{white-space:normal !important}
}
@media (max-width:760px){
  /* подписи-разделители («Схема. От указа до человека» и подобные) на узком экране
     переносятся по словам, а не вылезают за правый край. */
  .about-page span[style*="text-transform:uppercase"][style*="flex:none"]{flex:0 1 auto !important; min-width:0}
}
@media (max-width:700px){
  .about-page [data-c5]{grid-template-columns:minmax(0,1fr) !important}
  .about-page [data-logos]{gap:22px !important}
}

/* ── логотипы партнёров на первом экране ─────────────────────────────────── */
/* Держим четыре знака в один ряд: если места мало, они уменьшаются
   пропорционально, а не переносятся на вторую строку. На узком экране
   (до 640px) перенос снова разрешён, иначе знаки стали бы нечитаемыми. */
@media (min-width:641px){
  .about-page [data-logos]{flex-wrap:nowrap !important; gap:clamp(18px,2.2vw,36px) !important}
  .about-page [data-logos] img{height:auto !important; width:auto; min-width:0; flex:0 1 auto}
  .about-page [data-logos] img[src*="logo-dobro"]{max-height:clamp(34px,3vw,46px)}
  .about-page [data-logos] img[src*="logo-rosmolodezh"]{max-height:clamp(23px,2vw,31px)}
  .about-page [data-logos] img[src*="logo-minec"],
  .about-page [data-logos] img[src*="logo-asi"]{max-height:clamp(46px,4vw,62px)}
}

/* ── карточки документов (строятся в about.js) ───────────────────────────── */
.about-page .about-doc-btn:hover{background:#7E128F !important}
.about-page .about-doc-missing{
  align-self:flex-start; margin-top:auto; font-size:14.5px; line-height:1.5; color:#6E6780;
}

/* ── состояния при наведении (в разметке заданы инлайновые стили) ────────── */
.about-page .abh1:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh2:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh3:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh4:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh5:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh6:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh7:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh8:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh9:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh10:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh11:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh12:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh13:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh14:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh15:hover{background:#F6F2F9 !important;color:#550577 !important;box-shadow:inset 2px 0 0 #550577 !important}
.about-page .abh16:hover{background:linear-gradient(105deg,#F7F2FD 0%,#E4D2F7 100%) !important}
.about-page .abh17:hover{background:linear-gradient(105deg,#F4F4FC 0%,#DBDBF7 100%) !important}
.about-page .abh18:hover{background:linear-gradient(105deg,#FCF3FA 0%,#F2D2EB 100%) !important}
.about-page .abh19:hover{background:linear-gradient(105deg,#F6F0FA 0%,#EBD8F4 100%) !important}
.about-page .abh20:hover{background:linear-gradient(112deg,#F5F1FD 0%,#E0D5F8 100%) !important}
.about-page .abh21:hover{background:linear-gradient(112deg,#FFF7F1 0%,#FFDCC2 100%) !important}
.about-page .abh22:hover{background:linear-gradient(105deg,#F6FAF4 0%,#DFECDA 100%) !important}
.about-page .abh23:hover{background:#FBEDE3 !important}
.about-page .abh24:hover{background:linear-gradient(105deg,#F3F6FD 0%,#D8E1F8 100%) !important}
.about-page .abh25:hover{background:linear-gradient(105deg,#F8F1FC 0%,#E6D2F5 100%) !important}