/* ============================================================
   Новые блоки главной: этапы, SEO-статья, команда, FAQ.
   Построены на шаблонах самого goroda.pro (страницы /about/ и /services/):
   - этапы  — ряд серых карточек 344x280 с 3D-объектом внизу (/about/, /services/);
   - статья и FAQ — колонка 2/3 + боковая серая карточка 460px (/services/);
   - команда — компактный блок «фото + принцип» руководителя (/about/), под ним автослайдер сотрудников.
   ============================================================ */

/* ---------- Этапы ---------- */
.steps{margin-bottom:var(--section-gap)}
.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem}
.step{
  position:relative;overflow:hidden;height:30rem;border-radius:var(--r-xl);background:var(--base-50);
  padding:2.8rem;display:flex;flex-direction:column;gap:1.2rem;
}
.step__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.step__meta,.step__title,.step__text{position:relative;z-index:1}
.step__meta{display:flex;align-items:center;gap:.8rem;font-size:1.6rem;font-weight:500;color:var(--base-500)}
.step__num{
  display:inline-grid;place-items:center;min-width:3.2rem;height:3.2rem;padding-inline:.8rem;border-radius:var(--r-sm);
  background:var(--accent-500);color:#fff;font-weight:600;
}
.step__title{font-size:2rem;line-height:1;font-weight:600;letter-spacing:-.02em}
.step__text{font-size:1.6rem;line-height:1.3;color:var(--base-500);max-width:28rem}
@media (max-width:1279.98px){
  .steps__grid{display:flex;gap:.8rem}
  .steps__grid .step{flex:0 0 calc((100% - .8rem) / 2)}
}
@media (max-width:767.98px){ .steps__grid .step{flex-basis:100%;height:32rem} }
@media (min-width:1280px){ .steps .hslider__nav{display:none} }

/* ---------- SEO-статья: автор слева под заголовком, справа — оглавление и CTA ---------- */
.article-block{margin-bottom:var(--section-gap)}
.article-block__layout{display:grid;grid-template-columns:minmax(0,93.2fr) minmax(0,46fr);gap:.8rem;align-items:start}
.article{
  background:#fff;border:.1rem solid var(--base-50);border-radius:var(--r-xl);box-shadow:var(--shadow-row);padding:4rem 4.8rem 4.8rem;
}
.article__title{font-size:3.2rem;line-height:1.05;letter-spacing:-.02em;font-weight:600;max-width:78rem}
/* подпись автора (rules.txt п.7 + правка лида): «Автор», должность, даты публикации и изменения */
.byline{display:flex;align-items:center;gap:1.6rem;margin-top:2.4rem;padding-bottom:2.4rem;border-bottom:.1rem solid var(--base-100)}
.byline__photo{flex:none;width:6.4rem;height:6.4rem;border-radius:50%;object-fit:cover;object-position:center 18%;background:var(--base-50)}
.byline__name{font-size:1.8rem;font-weight:500;color:var(--base-500);letter-spacing:-.01em}
.byline__name a{color:var(--base-900);font-weight:600;transition:color var(--ease)}
.byline__name a:hover{color:var(--accent-500)}
.byline__role{margin-top:.4rem;font-size:1.6rem;line-height:1.3;color:var(--base-700)}
.byline__dates{margin-top:.4rem;font-size:1.6rem;line-height:1.3;color:var(--base-300)}
.article__lead{font-size:1.8rem;line-height:1.5;color:var(--base-700);margin-top:2.4rem;font-weight:500}
.article__body{margin-top:1.2rem;color:var(--base-700)}
.article__body h3{font-size:2.4rem;line-height:1.1;letter-spacing:-.02em;font-weight:600;color:var(--base-900);margin:4rem 0 1.4rem;scroll-margin-top:12rem}
/* 28.09: статьи блога (заголовок статьи — H1): разделы — H2, подразделы — H3. H2 были без стиля и отступов (прилипали
   к абзацу выше), а H3 получали размер разделов и выглядели крупнее своих разделов — иерархия была перевёрнута */
.article__body h2{font-size:2.4rem;line-height:1.1;letter-spacing:-.02em;font-weight:600;color:var(--base-900);margin:4rem 0 1.4rem;scroll-margin-top:12rem}
.article--post .article__body h3{font-size:2rem;line-height:1.2;letter-spacing:-.01em;margin:2.8rem 0 1rem}
.article__body p{font-size:1.6rem;line-height:1.65;margin-top:1.2rem}
.article__body ul{margin-top:1.4rem;display:grid;gap:.8rem}
.article__body li{position:relative;padding-left:2.8rem;font-size:1.6rem;line-height:1.55}
.article__body li::before{content:"";position:absolute;left:.4rem;top:.9rem;width:1rem;height:1rem;border-radius:50%;background:var(--accent-500)}
.article__body strong{color:var(--base-900)}
/* статьи SEO-пайплайна (22.09 р.3): подразделы H4, нумерованные шаги, таблицы с текстом в ячейках */
.article__body h4{font-size:2rem;line-height:1.2;letter-spacing:-.01em;font-weight:600;color:var(--base-900);margin:2.8rem 0 1rem}
.article__body ol{margin-top:1.4rem;display:grid;gap:.8rem;counter-reset:step}
.article__body ol li{padding-left:4rem;counter-increment:step}
.article__body ol li::before{content:counter(step);top:0;left:0;width:2.8rem;height:2.8rem;display:grid;place-items:center;font-size:1.6rem;line-height:1;font-weight:600;color:#fff}
.article__table--flow th,.article__table--flow td{white-space:normal;text-align:left;vertical-align:top;min-width:12rem;font-variant-numeric:tabular-nums}
.article__table--flow th:first-child{min-width:14rem}
.article__body abbr{text-decoration:underline dotted;cursor:help}
.article__table{margin-top:2rem;overflow-x:auto;border-radius:var(--r-lg);border:.1rem solid var(--base-100)}
.article__table table{width:100%;border-collapse:collapse;font-size:1.6rem}
.article__table caption{caption-side:top;text-align:left;padding:1.4rem 1.8rem;font-weight:600;color:var(--base-900);background:var(--base-50)}
.article__table th,.article__table td{padding:1.2rem 1.8rem;text-align:right;border-top:.1rem solid var(--base-100);white-space:nowrap}
.article__table thead th{color:var(--base-500);font-weight:500}
.article__table th:first-child{text-align:left;font-weight:600;color:var(--base-900)}
/* таблица шире экрана: тени по краям показывают, что её можно прокрутить (белые «шторки» прокручиваются вместе
   с содержимым и прячут тень у того края, дальше которого листать некуда) */
.article__table{
  background:
    linear-gradient(90deg,#fff 30%,#fff0) 0 0/3rem 100% no-repeat local,
    linear-gradient(270deg,#fff 30%,#fff0) 100% 0/3rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,#272a2f38,#0000) 0 0/1.4rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,#272a2f38,#0000) 100% 0/1.4rem 100% no-repeat scroll;
  background-color:#fff;
}
/* телефон: заголовки колонок и подписи строк переносятся (раньше «nowrap» выталкивал колонку со значениями
   за край — вместо «25 000 000 ₸» было видно «25»), числа в ячейках значений остаются целыми */
@media (max-width:767.98px){
  .article__table th,.article__table td{padding:1rem 1.2rem}
  .article__table th{white-space:normal;min-width:8rem}
  .article__table--flow th,.article__table--flow td,.article__table--flow th:first-child{min-width:0}
  .article__table--flow td{min-width:9rem}
}

.aside-card{
  position:sticky;top:calc(var(--header-h) + 2rem);background:var(--base-50);border-radius:var(--r-xl);
  padding:2.4rem;display:flex;flex-direction:column;gap:2rem;overflow:auto;
  max-height:calc(100vh - var(--header-h) - 4rem);scrollbar-width:thin;
}
.toc__title{font-size:1.6rem;font-weight:600;margin-bottom:.8rem}
.toc__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem .4rem;counter-reset:toc}
.toc__list a{
  display:flex;gap:.6rem;padding:.6rem .8rem;border-radius:var(--r-sm);font-size:1.6rem;line-height:1.2;color:var(--base-700);white-space:nowrap;overflow:hidden;
  transition:background var(--ease),color var(--ease);
}
.toc__list a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);color:var(--base-300);font-variant-numeric:tabular-nums;flex:none}
.toc__list a:hover{background:#fff;color:var(--base-900)}
.toc__list a.is-current{background:#fff;color:var(--accent-500)}
/* внутренние страницы и блог: заголовки разделов длиннее, чем на главной — оглавление в одну колонку с переносом */
.toc__list--wide{grid-template-columns:minmax(0,1fr)}
.toc__list--wide a{white-space:normal;line-height:1.3}
/* «Коротко» — выводы статьи сразу под автором */
.article__facts{margin-top:2.4rem;padding:2rem 2.4rem;border-radius:var(--r-lg);background:var(--base-50)}
.article__factstitle{margin-bottom:1.2rem;font-size:1.6rem;font-weight:600;color:var(--base-900)}
.article__facts ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2.4rem}
.article__facts li{display:flex;align-items:flex-start;gap:1rem;font-size:1.6rem;line-height:1.35;font-weight:500;color:var(--base-700)}
.article__facts .icon{flex:none;width:2.4rem;height:2.4rem;padding:.5rem;border-radius:50%;background:var(--accent-500);color:#fff}
@media (max-width:767.98px){ .article__facts{padding:1.6rem} .article__facts ul{grid-template-columns:minmax(0,1fr)} }
.aside-cta{display:flex;flex-direction:column;gap:1rem;padding:2rem;border-radius:var(--r-lg);background:#fff}
.aside-cta__title{font-size:2rem;line-height:1.1;font-weight:600;letter-spacing:-.02em}
.aside-cta__text{font-size:1.6rem;line-height:1.35;color:var(--base-500)}
.aside-cta .btn{margin-top:.6rem}
/* статья всегда раскрыта (правка лида: на мобилке текст сразу виден, без кнопки «Читать полностью») */
@media (max-width:1279.98px){
  .article-block__layout{grid-template-columns:minmax(0,1fr)}   /* не 1fr: таблица статьи раздувала колонку шире экрана */
  .aside-card{position:static;max-height:none;overflow:visible}
  .toc{display:none}
  /* 28.09: без рамки — длинный текст в карточке с обводкой и тенью читался «в коробке» и терял по 20px с каждой стороны;
     теперь статья идёт по ширине контейнера, как текст в журнале. Десктоп (2/3 + липкое оглавление) не трогаем */
  .article{padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .article-block__layout{row-gap:3.2rem}
}
@media (max-width:767.98px){
  .article__title{font-size:2.4rem}
  .byline{align-items:flex-start;gap:1.2rem;margin-top:2rem;padding-bottom:2rem}
  .byline__photo{width:5.6rem;height:5.6rem}
  .article__lead{font-size:1.6rem}
  .article__body h3,.article__body h2{font-size:2rem;margin-top:3.2rem}
  .article--post .article__body h3{font-size:1.8rem;margin-top:2.4rem}
  .aside-card{padding:.8rem}
}

/* ---------- Команда: сначала руководитель (компактная карточка), затем «её команда» — автослайдер ---------- */
.team{margin-bottom:var(--section-gap)}
.team-lead{display:grid;grid-template-columns:36rem minmax(0,1fr);gap:.8rem;padding:.8rem;border-radius:var(--r-xl);background:var(--base-50)}
.team-lead__photo{height:40rem;border-radius:var(--r-lg);overflow:hidden;background:#e6e6e8}
.team-lead__photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.team-lead__body{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem;min-width:0;padding:3.2rem 4rem}
.team-lead__title{font-size:3.2rem;line-height:1.08;letter-spacing:-.02em;font-weight:600;max-width:72rem}
.team-lead__text{font-size:1.8rem;line-height:1.45;color:var(--base-700);max-width:64rem}
.team-lead__sign{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;width:100%;margin-top:auto;padding-top:2rem;border-top:.1rem solid var(--base-100)}
.team-lead__sign p{font-size:1.6rem;line-height:1.35;color:var(--base-500)}
.team-lead__sign b{display:block;margin-bottom:.2rem;font-size:2rem;font-weight:600;color:var(--base-900);letter-spacing:-.01em}
.team-lead__quote{flex:none;width:4.8rem;height:4.8rem;color:var(--accent-200)}

.crew{margin-top:4.8rem}
.crew__bar{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.4rem}
.crew__title{font-size:2.8rem;line-height:1;letter-spacing:-.02em;font-weight:600}
.crew__sub{margin-top:.8rem;font-size:1.6rem;color:var(--base-500)}
.crew__nav{flex:none}
.crew__nav .navcounter{display:grid}
.crew__viewport{overflow:hidden}
.crew__track{display:flex;gap:.8rem;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
/* карточка (правка 22.09, упрощена по правке лида): фото, имя, должность, стаж/отделение,
   специализация нейтральными тегами. Без цитаты, без языков, без кнопки WhatsApp. Красных плашек нет. */
.member{flex:0 0 calc((100% - 4 * .8rem) / 5);min-width:0;display:flex;flex-direction:column;border-radius:var(--r-xl);overflow:hidden;background:var(--base-50)}
.member__photo{aspect-ratio:1/1;overflow:hidden;background:#e6e6e8}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:center 12%;transition:transform .6s ease}
.member:hover .member__photo img{transform:scale(1.04)}
.member__body{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:1.2rem;padding:2rem}
.member__name{font-size:1.8rem;line-height:1.2;font-weight:600;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member__role{height:2.5em;margin-top:-.6rem;font-size:1.6rem;line-height:1.25;color:var(--base-500);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.member__facts{display:grid;gap:.8rem;padding-top:1.2rem;border-top:.1rem solid var(--base-100)}
.member__facts dd{display:flex;align-items:center;gap:.8rem;margin:0;font-size:1.6rem;line-height:1.3;color:var(--base-700)}
.member__facts .icon{flex:none;margin-top:.1rem;color:var(--base-300)}
.member__tags{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}
.member__tags li{display:inline-flex;align-items:center;min-height:3.2rem;padding:.4rem 1.2rem;border-radius:var(--r-md);background:#fff;border:.1rem solid var(--base-100);font-size:1.6rem;font-weight:500;line-height:1.2;color:var(--base-700)}
.chip{display:inline-flex;align-items:center;height:3.2rem;padding-inline:1.2rem;border-radius:var(--r-md);background:#fff;font-size:1.6rem;font-weight:500;color:var(--base-700);white-space:nowrap}
.chip--accent{background:var(--accent-500);color:#fff}
/* нейтральная метка: белая плашка с красной точкой (вместо сплошной красной) */
.eyebrow{display:inline-flex;align-items:center;gap:.8rem;height:3.2rem;padding-inline:1.2rem;border-radius:var(--r-md);background:#fff;font-size:1.6rem;font-weight:500;color:var(--base-700);white-space:nowrap}
.eyebrow::before{content:"";width:.8rem;height:.8rem;border-radius:50%;background:var(--accent-500);flex:none}
/* на очень узких экранах (320px) переводы длиннее русского текста и не помещаются в одну строку без переноса */
@media (max-width:359.98px){ .eyebrow{height:auto;white-space:normal;padding-block:.6rem} }
.team-lead__tags li{background:#fff}
.team-lead__tags:empty{display:none}
@media (max-width:1279.98px){
  .team-lead{grid-template-columns:30rem minmax(0,1fr)}
  .team-lead__photo{height:36rem}
  .team-lead__body{padding:2.4rem}
  .team-lead__title{font-size:2.6rem}
  .member{flex-basis:calc((100% - 2 * .8rem) / 3)}
}
@media (max-width:767.98px){
  .team-lead{grid-template-columns:minmax(0,1fr)}
  .team-lead__photo{height:32rem}
  .team-lead__body{padding:2rem 1.6rem 1.6rem}
  .team-lead__title{font-size:2.2rem}
  .team-lead__text{font-size:1.6rem}
  .team-lead__quote{width:3.6rem;height:3.6rem}
  .crew{margin-top:3.2rem}
  .crew__bar{flex-direction:column;align-items:flex-start;gap:1.6rem}
  .crew__title{font-size:2.2rem}
  .member{flex-basis:100%}
}

/* ---------- FAQ: аккордеон + боковая карточка (шаблон /services/ goroda.pro) ---------- */
.faq{margin-bottom:var(--section-gap)}
.faq__layout{display:grid;grid-template-columns:minmax(0,93.2fr) minmax(0,46fr);gap:.8rem;align-items:start}
.faq__list{display:grid;gap:.8rem}
.qa{background:#fff;border:.1rem solid var(--base-50);border-radius:var(--r-xl);box-shadow:var(--shadow-row)}
.qa__head{margin:0}
.qa__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2.8rem;text-align:left;
  font-size:2.4rem;line-height:1.1;letter-spacing:-.02em;font-weight:600;color:var(--base-900);
}
/* 28.09: подсветка стрелки — только при наведении мышью; на телефоне :hover «залипал» после касания */
@media (hover:hover){ .qa__btn:hover .qa__chev{background:var(--base-50)} }
.qa__btn:active .qa__chev{background:var(--base-100)}
.qa__chev{
  flex:none;width:4.4rem;height:4.4rem;border-radius:var(--r-md);border:.1rem solid var(--base-100);
  display:grid;place-items:center;transition:transform var(--ease),background var(--ease);
}
.qa__btn[aria-expanded="true"] .qa__chev{transform:rotate(180deg)}
.qa__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ease)}
.qa__panel.is-open{grid-template-rows:1fr}
.qa__inner{overflow:hidden}
.qa__inner p{padding:0 2.8rem 2.8rem;font-size:1.6rem;line-height:1.5;font-weight:500;color:var(--base-500);max-width:76rem}
.faq-card{
  position:sticky;top:calc(var(--header-h) + 2rem);background:var(--base-50);border-radius:var(--r-xl);
  padding:2.8rem 2rem 2.8rem 2.8rem;min-height:26rem;overflow:hidden;display:flex;flex-direction:column;gap:1rem;
}
.faq-card__title{position:relative;z-index:1;font-size:2.4rem;line-height:1;letter-spacing:-.02em;font-weight:600;max-width:30rem}
.faq-card__text{position:relative;z-index:1;font-size:1.6rem;line-height:1.35;color:var(--base-700);max-width:26rem}
.faq-card__text a{color:var(--base-500);white-space:nowrap}
.faq-card .btn{position:relative;z-index:1;align-self:flex-start;margin-top:auto}
.faq-card__img{position:absolute;right:-1rem;bottom:-1rem;width:18rem;height:18rem;object-fit:contain}
@media (max-width:1279.98px){
  .faq__layout{grid-template-columns:minmax(0,1fr)}
  .faq-card{position:relative;top:auto}
}
@media (max-width:767.98px){
  .qa__btn{font-size:1.8rem;padding:2rem}
  .qa__inner p{padding:0 2rem 2rem}
  .faq-card{padding:2.4rem 2rem;min-height:28rem}
  .faq-card__img{width:14rem;height:14rem}
  /* мобильный аудит 27.09: серые даты статьи 2,4:1 → читаемые */
  .byline__dates{color:var(--base-500)}
}
@media (hover:none){ .member:hover .member__photo img{transform:none} }