/* ============================================================
   article-shared.css — общая система оформления статей
   Сайт тёмный (тёмно-синий фон, светлый текст, жёлтый акцент —
   см. migration.css: .migration-copy{color:#cbd5e1}, h2/h3:#fff,
   a:#f7cb4b). Эта таблица стилей продолжает ту же палитру.
   Общий верх (breadcrumbs, H1, лид, hero) + типографика
   содержимог �� FAQ/портфолио/related/CTA — общие для обоих
   режимов. Режимы: .article-page--useful (информационная) и
   .article-page--solutions (коммерческая), по значению TV
   articleGroup.
   ============================================================ */

:root{
  --article-max: 1180px;
  --article-content-w: 800px;
  --article-side-w: 300px;

  --article-navy: #152633;
  --article-navy-dark: #0d1a24;
  --article-gold: #ffd138;
  --article-link: #f7cb4b;

  --article-ink: #f3f6fa;        /* яркие заголовки */
  --article-body: #cbd5e1;       /* основной текст контента (как .migration-copy) */
  --article-soft: #91a4b9;       /* приглушённый текст: breadcrumbs, подписи, мета */

  --article-line: rgba(255,255,255,.14);
  --article-card-bg: #0f1f2c;    /* карточки на тёмном фоне */
  --article-card-bg-2: #0c1928;  /* чуть темнее, для медиа-плейсхолдеров */
  --article-card-border: #26404f;

  --eyebrow-useful: #86c5ec;     /* холодный сине-голубой - информационные */
  --eyebrow-solutions: #f7cb4b;  /* тёплый золотой — коммерческие */
}

/* ---------- общая шапка статьи ---------- */
.article-page{max-width:var(--article-max);margin:0 auto;padding:28px 22px 0}
.article-breadcrumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--article-soft);margin:0 0 18px;flex-wrap:wrap}
.article-breadcrumbs a{color:var(--article-soft);text-decoration:none}
.article-breadcrumbs a:hover{text-decoration:underline}
.article-breadcrumbs b{color:var(--article-ink);font-weight:600}
.article-breadcrumbs span{opacity:.6}

.article-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--eyebrow-useful);margin:0 0 12px}
.article-page--solutions .article-eyebrow{color:var(--eyebrow-solutions)}

.article-h1{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:40px;line-height:1.18;color:var(--article-ink);margin:0 0 16px;max-width:900px}
.article-lead{font-size:19px;line-height:1.6;color:var(--article-body);max-width:760px;margin:0 0 24px}

.article-hero{margin:0 0 30px;border-radius:18px;overflow:hidden;background:var(--article-card-bg-2);border:1px solid var(--article-card-border)}
.article-hero img{display:block;width:100%;height:auto;object-fit:contain}

/* ---------- информационная статья: контент + сайдбар ---------- */
.article-info-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--article-side-w);column-gap:40px;align-items:start;padding-bottom:8px}
.article-content{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:subgrid;row-gap:0}
.article-side{grid-column:2;grid-row:1;align-self:start;position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
.article-toc{background:var(--article-card-bg);border:1px solid var(--article-card-border);border-radius:14px;padding:18px 20px}
.article-toc span{display:block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--article-soft);margin:0 0 10px}
.article-toc ol{margin:0;padding:0 0 0 18px;font-size:14.5px;line-height:1.6;color:var(--article-body)}
.article-toc a{color:var(--article-body);text-decoration:none}
.article-toc a:hover{color:var(--article-ink);text-decoration:underline}
.article-side-cta{background:var(--article-navy);border:1px solid var(--article-card-border);color:#fff;border-radius:14px;padding:18px 20px}
.article-side-cta span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--article-gold);margin:0 0 6px}
.article-side-cta strong{display:block;font-size:16px;font-weight:600;margin:0 0 12px;color:#fff}
.article-side-cta a{display:inline-flex;align-items:center;gap:6px;background:var(--article-gold);color:var(--article-navy);font-weight:700;font-size:14px;padding:10px 16px;border-radius:9px;text-decoration:none}
.article-side-cta a:hover{background:#ffdb54}

/* ---------- коммерческая статья: hero + акценты ---------- */
.article-hero-commercial{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-bottom:34px}
.article-hero-commercial--single{grid-template-columns:1fr}
.article-hero-commercial .article-eyebrow{margin-bottom:14px}
.article-hero-commercial .article-h1{font-size:38px;margin-bottom:14px}
.article-hero-commercial .article-lead{margin-bottom:22px}
.article-commercial-cta{display:inline-flex;align-items:center;gap:8px;background:var(--article-gold);color:var(--article-navy);font-weight:700;font-size:15.5px;padding:14px 26px;border-radius:11px;text-decoration:none;transition:background .15s,transform .15s}
.article-commercial-cta:hover{background:#ffdb54;transform:translateY(-1px)}
.article-content .article-commercial-cta,.article-content--wide .article-commercial-cta{color:var(--article-navy)}
.article-hero-commercial-media{border-radius:18px;overflow:hidden;background:var(--article-card-bg-2);border:1px solid var(--article-card-border);min-height:320px}
.article-hero-commercial-media img{display:block;width:100%;height:auto;object-fit:contain}
.article-content--wide{max-width:var(--article-max);margin:0 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}

.article-variants{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 40px}
.article-variant-card{border:1px solid var(--article-card-border);border-radius:14px;overflow:hidden;background:var(--article-card-bg)}
.article-variant-card img{display:block;width:100%;height:120px;object-fit:cover;background:var(--article-card-bg-2)}
.article-variant-card div{padding:12px 14px}
.article-variant-card small{display:block;color:var(--article-soft);font-size:12px;margin:0 0 4px}
.article-variant-card strong{display:block;font-size:14.5px;color:var(--article-ink);font-weight:600}

.article-consider{margin:0 0 40px}
.article-consider h2{margin-top:0;color:var(--article-ink)}
.article-consider ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.article-consider li{padding-left:26px;position:relative;font-size:16px;line-height:1.5;color:var(--article-body)}
.article-consider li::before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:50%;background:var(--article-gold)}

.article-decision{margin:0 0 40px}
.article-decision h2{margin-top:0;color:var(--article-ink)}
.article-decision-row{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--article-line)}
.article-decision-row:first-of-type{border-top:none;padding-top:4px}
.article-decision-row b{flex:0 0 220px;color:var(--article-ink)}
.article-decision-row span{color:var(--article-body)}

.article-cost-factors{margin:0 0 40px}
.article-cost-factors h2{color:var(--article-ink);margin-top:0}
.article-cost-factors ul{margin:0 0 20px;font-size:16px;line-height:1.7;color:var(--article-body)}
.article-cost-factors .article-commercial-cta{margin-top:6px}

/* ---------- типографика содержимого (общая для обоих режимов) ---------- */
.article-content h2,.article-content--wide h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:34px;line-height:1.25;color:var(--article-ink);margin:44px 0 18px}
.article-content h3,.article-content--wide h3{font-size:25px;line-height:1.3;color:var(--article-ink);font-weight:600;margin:32px 0 14px}
.article-content p,.article-content--wide p{font-size:18px;line-height:1.65;color:var(--article-body);margin:0 0 20px}
.article-content ul,.article-content ol,.article-content--wide ul,.article-content--wide ol{font-size:18px;line-height:1.65;color:var(--article-body);margin:0 0 20px;padding-left:26px}
.article-content li,.article-content--wide li{margin-bottom:8px}
.article-content a,.article-content--wide a{color:var(--article-link);text-decoration:underline;text-decoration-color:rgba(247,203,75,.4)}
.article-content strong,.article-content--wide strong{color:var(--article-ink);font-weight:700}
.article-content table,.article-content--wide table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:15.5px}
.article-content table caption,.article-content--wide table caption{caption-side:top;text-align:left;font-size:13px;color:var(--article-soft);margin:0 0 8px}
.article-content th,.article-content td,.article-content--wide th,.article-content--wide td{border:1px solid var(--article-line);padding:11px 14px;text-align:left;color:var(--article-body)}
.article-content th,.article-content--wide th{background:rgba(255,255,255,.06);font-weight:700;color:var(--article-ink)}
.article-content figure,.article-content--wide figure{margin:28px 0}
.article-content figure img,.article-content--wide figure img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto;border-radius:14px}
.article-content figcaption,.article-content--wide figcaption{font-size:13.5px;color:var(--article-soft);margin-top:8px;text-align:center}
.article-content img,.article-content--wide img{max-width:100%;height:auto;border-radius:14px}

.article-content .callout--fact,.article-content--wide .callout--fact{border-left:4px solid var(--article-gold);background:rgba(255,209,56,.08);border-radius:0 12px 12px 0;padding:18px 22px;margin:28px 0;font-size:19px;line-height:1.55;color:var(--article-ink)}
.article-content .callout--tip,.article-content--wide .callout--tip{display:flex;gap:12px;background:rgba(110,210,150,.09);border-radius:12px;padding:16px 20px;margin:28px 0;font-size:16.5px;line-height:1.55;color:#cdeedc}
.article-content .callout--tip::before,.article-content--wide .callout--tip::before{content:'\1F4A1';font-size:20px;line-height:1}

.article-content .two-col,.article-content--wide .two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}
.article-content .two-col figure,.article-content--wide .two-col figure{margin:0}

.article-content blockquote,.article-content--wide blockquote{border-left:4px solid var(--article-gold);background:rgba(255,255,255,.04);border-radius:0 12px 12px 0;margin:28px 0;padding:20px 24px;font-size:19px;line-height:1.6;font-style:italic;color:var(--article-ink)}
.article-content blockquote p,.article-content--wide blockquote p{margin:0;font-size:inherit;color:inherit}

/* ---------- FAQ ---------- */
.article-faq{margin:0 0 40px}
.article-faq h2{margin-top:0;color:var(--article-ink)}
.article-faq-item{border-top:1px solid var(--article-line);padding:18px 0}
.article-faq-item:first-of-type{border-top:none}
.article-faq-item h3{margin:0 0 8px;font-size:18px;font-weight:600;color:var(--article-ink)}
.article-faq-item p{margin:0;font-size:16px;line-height:1.6;color:var(--article-body)}

/* ---------- портфолио / примеры ---------- */
.article-portfolio{margin:0 0 40px}
.article-portfolio h2{margin-top:0;color:var(--article-ink)}
.article-portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.article-portfolio-card{border-radius:14px;overflow:hidden;background:var(--article-card-bg-2);border:1px solid var(--article-card-border)}
.article-portfolio-card img{display:block;width:100%;height:auto;object-fit:contain}
.article-portfolio-card span{display:block;padding:10px 14px;font-size:13.5px;color:var(--article-soft)}

/* ---------- читайте также ---------- */
.article-related{margin:0 0 10px}
.article-related h2{margin-top:0;color:var(--article-ink)}
.article-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.article-related-card{display:flex;flex-direction:column;border:1px solid var(--article-card-border);border-radius:14px;overflow:hidden;background:var(--article-card-bg);text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
.article-related-card:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.35);border-color:var(--article-gold)}
.article-related-media img{display:block;width:100%;height:120px;object-fit:cover;background:var(--article-card-bg-2)}
.article-related-copy{padding:12px 14px;flex:1}
.article-related-copy small{display:block;color:var(--article-soft);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 4px}
.article-related-copy strong{display:block;font-size:14.5px;color:var(--article-ink);font-weight:600;line-height:1.35}
.article-related-card b{align-self:flex-end;margin:0 14px 12px auto;color:var(--article-soft)}

/* ---------- нижний CTA ---------- */
.article-cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--article-navy);border:1px solid var(--article-card-border);color:#fff;border-radius:18px;padding:28px 32px;margin:10px 0 40px}
.article-cta-band strong{display:block;font-size:20px;font-weight:600;margin:0 0 6px;color:#fff}
.article-cta-band p{margin:0;color:#c3cfd6;font-size:15px}
.article-cta-band a{flex:0 0 auto;background:var(--article-gold);color:var(--article-navy);font-weight:700;font-size:15px;padding:13px 24px;border-radius:10px;text-decoration:none;white-space:nowrap}
.article-cta-band a:hover{background:#ffdb54}

/* ---------- адаптив ---------- */
@media (max-width:980px){
  .article-info-grid{grid-template-columns:1fr}
  .article-side{position:static}
  .article-hero-commercial{grid-template-columns:1fr}
  .article-hero-commercial-media{order:-1}
  .article-variants{grid-template-columns:repeat(2,1fr)}
  .article-consider ul{grid-template-columns:1fr}
  .article-portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .article-related-grid{grid-template-columns:repeat(2,1fr)}
  .article-h1{font-size:32px}
  .article-content h2,.article-content--wide h2{font-size:28px}
}
@media (max-width:620px){
  .article-page{padding:20px 16px 0}
  .article-h1{font-size:27px}
  .article-lead{font-size:17px}
  .article-hero img{max-height:260px}
  .article-variants{grid-template-columns:1fr}
  .article-portfolio-grid{grid-template-columns:1fr}
  .article-related-grid{grid-template-columns:1fr}
  .article-content .two-col,.article-content--wide .two-col{grid-template-columns:1fr}
  .article-cta-band{flex-direction:column;align-items:flex-start}
  .article-cta-band a{width:100%;text-align:center}
  .article-decision-row{flex-direction:column;gap:4px}
  .article-decision-row b{flex:none}
  .article-consider{padding:20px 20px}
  .article-cost-factors{padding:22px 20px}
}


/* ============================================================
   ДОПОЛНЕНИЕ v2 - редизайн по фидбэку клиента (сентябрь 2026):
   1) реальная ширина колонки статьи (была шире 1180px из-за
      более специфичного main{max-width:var(--max)} в styles.css);
   2) главное фото и фото в hero больше не растягиваются на всю
      ширину и не апскейлятся - показываем в реальном масштабе,
      с карточкой-подложкой вместо растянутой картинки;
   3) одноколоночный коммерческий hero без фото - убрана пустота
      справа декоративным акцентом + сужена колонка текста;
   4) FAQ оформлен как карточка (было прозрачным);
   5) короткий золотой акцент над H2 для визуального ритма;
   6) карточки портфолио - без агрессивной обрезки мелких фото.
   ============================================================ */

main.article-page{max-width:var(--article-max);margin:0 auto;padding:28px 22px 0}

.article-hero-commercial--single{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(135deg, rgba(255,209,56,.05), rgba(255,209,56,0) 55%)}
.article-hero-commercial--single>div{max-width:660px;position:relative;z-index:1}
.article-hero-commercial--single::before{content:'';position:absolute;top:50%;right:-140px;transform:translateY(-50%);width:460px;height:460px;border-radius:50%;background:radial-gradient(circle at center, rgba(255,209,56,.16) 0%, rgba(255,209,56,0) 70%);pointer-events:none}
.article-hero-commercial--single::after{content:'';position:absolute;top:18px;right:60px;width:180px;height:180px;border:2px solid rgba(255,209,56,.18);border-radius:50%;pointer-events:none}

.article-faq{background:var(--article-card-bg);border:1px solid var(--article-card-border);border-radius:16px;padding:6px 28px 10px;margin:0 0 40px}

.article-content h2,.article-content--wide h2{position:relative;padding-top:6px}
.article-content h2::before,.article-content--wide h2::before{content:'';display:block;width:44px;height:3px;border-radius:2px;background:var(--article-gold);margin:0 0 14px}

.article-content .two-col img,.article-content--wide .two-col img{height:220px;object-fit:cover}

.article-portfolio-card img{width:100%;height:auto;object-fit:contain}


/* ============================================================
   ДОПОЛНЕНИЕ v3 - структурные компоненты (сентябрь 2026, вторая
   волна фидбэка: "деревянно", "нет инфографики и динамики"):
   1) .article-process - реальные 4 шага работы, переиспользованы
      с страницы "О компании" (ничего не выдумано);
   2) .article-compare - парное сравнение двух реальных фото
      (бюджетное решение / сложная конструкция) - визуальный
      разбор без придуманных цифр;
   3) .article-callout - акцентная врезка для разбивки монотонного
      текста;
   4) аккуратные маркеры списка внутри .article-cost-factors.
   Компоненты общие (не привязаны к body-классам конкретных
   ресурсов), чтобы их можно было переиспользовать в остальных
   статьях при переносе на единый шаблон.
   ============================================================ */

.article-process{margin:0 0 40px;padding-top:6px;border-top:1px solid var(--article-line)}
.article-process h2{margin-top:0;color:var(--article-ink)}
.article-process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:20px}
.article-process-step{position:relative;padding-top:6px}
.article-process-step .num{font-family:Georgia,'Times New Roman',serif;font-size:24px;font-weight:700;color:var(--article-gold);line-height:1;margin-bottom:8px;display:block}
.article-process-step strong{display:block;color:var(--article-ink);font-size:16px;margin-bottom:6px}
.article-process-step p{margin:0;font-size:14px;line-height:1.55;color:var(--article-body)}
.article-process-step:not(:last-child)::after{content:'';position:absolute;top:16px;right:-13px;width:9px;height:9px;border-top:2px solid var(--article-gold);border-right:2px solid var(--article-gold);transform:rotate(45deg);opacity:.55}

.article-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 40px}
.article-compare-item{background:var(--article-card-bg);border:1px solid var(--article-card-border);border-radius:16px;overflow:hidden}
.article-compare-item .media{display:flex;align-items:center;justify-content:center;background:var(--article-card-bg-2);padding:10px;min-height:170px}
.article-compare-item .media img{width:auto;height:auto;max-width:100%;max-height:200px;object-fit:contain;border-radius:8px}
.article-compare-item .label{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin:14px 0 8px 16px}
.article-compare-item.budget .label{background:rgba(120,190,140,.16);color:#8fd6a6}
.article-compare-item.premium .label{background:rgba(255,209,56,.14);color:var(--article-gold)}
.article-compare-item .caption{margin:0 16px 16px;font-size:14px;line-height:1.5;color:var(--article-body)}




.article-cost-factors ul{list-style:none;padding-left:0}
.article-cost-factors li{position:relative;padding-left:22px}
.article-cost-factors li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:2px;background:var(--article-gold)}

@media(max-width:860px){
  .article-process-grid{grid-template-columns:1fr 1fr}
  .article-compare{grid-template-columns:1fr}
}
@media(max-width:560px){
  .article-process-grid{grid-template-columns:1fr}
  .article-process-step::after{display:none!important}
}


/* ============================================================
   ДОПОЛНЕНИЕ v4 - визуальный ритм и упрощение системы блоков
   (сентябрь 2026, третья волна фидбэка: "сплошная синяя стена",
   страницы выглядят как цепочка одинаковых тёмно-синих карточек).

   Что сделано:
   1) .article-consider / .article-decision / .article-cost-factors
      / .article-process больше НЕ тёмно-синие карточки поверх тёмной
      страницы - это обычный редакционный текст (внутренняя вёрстка
      списков/строк/шагов осталась, убран фон+рамка+паддинг карточки);
   2) .article-callout удалён как дублирующий уже существующий
      <blockquote> - используем родной blockquote и .callout--tip;
   3) добавлена НОВАЯ светлая секция .article-band-light - для
      чередования тёмный фон / светлый фон, чтобы страница не была
      одним сплошным цветом;
   4) .two-col получил зеркальный модификатор .two-col--reverse;
   5) фото в <figure> больше не растягивается на 100% принудительно;
   6) .article-visual-choice - модификатор для .article-variants:
      2 крупных варианта + компактные остальные, а не 4 одинаковых
      плитки;
   7) .article-faq переведён на нативный <details>/<summary> -
      компактный аккордеон без JS (разметка обновлена в сниппете
      articleLayout);
   8) удалён блок body.article-cost-sample / body.article-pharmacy-
      prototype (~4.2Кб) - это была вторая параллельная система
      поверх общей, теперь всё живёт в одних универсальных классах.
   ============================================================ */

:root{
  --article-light-bg: #eef3f9;
  --article-light-bg-2: #e2eaf3;
  --article-light-ink: #14232f;
  --article-light-soft: #4c5f70;
  --article-light-border: #d3dfeb;
}

/* светлая секция для чередования фона */
.article-band-light{background:var(--article-light-bg);color:var(--article-light-ink);border-radius:20px;padding:36px 34px;margin:40px 0}
.article-band-light h2,.article-band-light h3{color:var(--article-light-ink);margin-top:0}
.article-band-light h2::before{background:var(--article-navy)}
.article-band-light p{color:var(--article-light-soft)}
.article-band-light ul,.article-band-light ol{color:var(--article-light-soft)}
.article-band-light li::marker{color:var(--article-navy)}
.article-band-light strong{color:var(--article-light-ink)}
.article-band-light a{color:#0d5c94}
.article-band-light .article-decision-row{border-top-color:var(--article-light-border)}
.article-band-light .article-decision-row b{color:var(--article-light-ink)}
.article-band-light .article-decision-row span{color:var(--article-light-soft)}
.article-band-light .article-consider li{color:var(--article-light-soft)}
.article-band-light .article-consider li::before{background:var(--article-navy)}
.article-band-light .article-cost-factors ul{color:var(--article-light-soft)}
.article-band-light .article-cost-factors li::before{background:var(--article-navy)}

/* фото + текст: зеркальный вариант (текст слева / фото справа) */
.article-content .two-col--reverse,.article-content--wide .two-col--reverse{direction:rtl}
.article-content .two-col--reverse>*,.article-content--wide .two-col--reverse>*{direction:ltr}

/* визуальный выбор: 2 крупных + компактные, вместо одинаковых плиток */
.article-visual-choice{grid-template-columns:repeat(12,minmax(0,1fr))}
.article-visual-choice .article-variant-card{grid-column:span 6}
.article-visual-choice .article-variant-card img{height:170px}
.article-visual-choice .article-variant-card:nth-child(n+3){grid-column:span 4;display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center}
.article-visual-choice .article-variant-card:nth-child(n+3) img{width:88px;height:88px}
.article-visual-choice .article-variant-card:nth-child(n+3) div{padding:10px 12px}

/* FAQ - компактный нативный аккордеон (details/summary) */
.article-faq-item{border-top:1px solid var(--article-line);padding:0}
.article-faq-item:first-of-type{border-top:none}
.article-faq-item summary{padding:16px 4px;font-size:17px;font-weight:600;color:var(--article-ink);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.article-faq-item summary::-webkit-details-marker{display:none}
.article-faq-item summary::after{content:'+';font-size:22px;font-weight:400;color:var(--article-gold);flex:none;transition:transform .2s ease}
.article-faq-item[open] summary::after{transform:rotate(45deg)}
.article-faq-item .article-faq-answer{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--article-body);padding:0 4px}

@media(max-width:860px){
  .article-visual-choice{grid-template-columns:1fr 1fr}
  .article-visual-choice .article-variant-card:nth-child(n+3){grid-column:span 1}
}
@media(max-width:560px){
  .article-band-light{padding:26px 22px}
  .article-visual-choice{grid-template-columns:1fr}
  .article-visual-choice .article-variant-card:nth-child(n+3){grid-template-columns:72px minmax(0,1fr)}
}


/* ==============================================================
   ДОПОЛНЕНИЕ v5 - геометрия сетки и фоновые зоны (сентябрь 2026,
   четвёртая волна фидбэка: "узкий текст, пустота справа, разная
   ширина секций, сплошная синяя масса"):
   1) .article-info-grid (информационная страница) теперь настоящая
      CSS-сетка с subgrid: текст живёт в узкой читаемой колонке
      (760px), но .article-compare и .article-process пробивают
      обе колонки (текст+sidebar) и используют всю ширину -
      больше никакой пустой навязанной колонки под sidebar на всю
      высоту статьи;
   2) .article-content--wide (коммерческая страница) стала 12-колоночной
      сеткой на всю ширину контейнера (было узкое 900px по центру):
      обычный текст ограничен 780px читаемой ширины, структурные
      блоки (варианты, решение, этапы, стоимость) используют всю
      ширину, "этапы" и "от чего зависит стоимость" поставлены рядом;
   3) вторая светлая зона: примеры работ + FAQ теперь светлые
      (переиспользован токен --article-light-* из v4) - страница
      перестаёт быть одной сплошной тёмно-синей массой.
   ============================================================== */

.article-content>*{grid-column:1;max-width:760px;width:100%}
.article-content>.article-compare,
.article-content>.article-process{grid-column:1/-1;max-width:none;position:relative;z-index:2;background:var(--article-navy);padding:2px 2px 0}

@supports not (grid-template-columns:subgrid){
  .article-content{display:block;max-width:var(--article-content-w)}
  .article-content>*{max-width:none;width:auto}
}

@media (max-width:980px){
  .article-content{grid-column:1;grid-row:auto;display:block}
  .article-side{grid-column:1;grid-row:auto}
  .article-content>*{max-width:none}
}

.article-content--wide>*{grid-column:1/-1}
.article-content--wide>p,
.article-content--wide>ul,
.article-content--wide>ol,
.article-content--wide>h2,
.article-content--wide>h3,
.article-content--wide>blockquote{grid-column:1/span 9;max-width:780px}
.article-content--wide>.article-process,
.article-content--wide>.article-cost-factors{grid-column:span 6}
.article-content--wide>.article-process .article-process-grid{grid-template-columns:repeat(2,1fr)}

@supports not (display:grid){
  .article-content--wide{max-width:900px}
}

@media (max-width:980px){
  .article-content--wide{grid-template-columns:1fr}
  .article-content--wide>*,
  .article-content--wide>p,
  .article-content--wide>ul,
  .article-content--wide>ol,
  .article-content--wide>h2,
  .article-content--wide>h3,
  .article-content--wide>blockquote,
  .article-content--wide>.article-process,
  .article-content--wide>.article-cost-factors{grid-column:1;max-width:none}
  .article-content--wide>.article-process .article-process-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .article-content--wide>.article-process .article-process-grid{grid-template-columns:1fr}
}

/* вторая светлая зона: примеры работ + FAQ */
.article-portfolio,
.article-faq{
  --article-ink: var(--article-light-ink);
  --article-body: var(--article-light-soft);
  --article-soft: #5c7186;
  --article-line: var(--article-light-border);
  --article-card-bg: #ffffff;
  --article-card-bg-2: #ffffff;
  --article-card-border: var(--article-light-border);
  background: var(--article-light-bg);
  border-radius: 20px;
  padding: 32px 34px 36px;
}
@media (max-width:560px){
  .article-portfolio,.article-faq{padding:24px 20px 28px}
}


/* ==============================================================
   ДОПОЛНЕНИЕ v6 - конструктор блоков для статей (сентябрь 2026).
   Готовые "кирпичи", которые вставляются прямо в поле «Содержимое»
   ресурса обычным HTML. Префикс .ab- (article blocks) - специально,
   чтобы физически не могло конфликтовать с .article-* правилами.
   Набор: ab-trust (строка доверия), ab-cards (карточки с иконками),
   ab-quote (цитата), ab-callout (акцент), ab-note (доп. карточка),
   ab-split (2 колонки), ab-figure (фото с подписью), ab-accent
   (золотое слово в заголовке).
   ============================================================== */

.ab-accent{color:var(--article-gold)}

.ab-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,209,56,.10);border:1px solid rgba(255,209,56,.22);flex:0 0 auto;font-style:normal}
.ab-ico svg{width:21px;height:21px;fill:none;stroke:var(--article-gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* строка доверия */
.ab-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 30px}
.ab-trust>div{display:flex;align-items:center;gap:12px}
.ab-trust-t b{display:block;color:var(--article-ink);font-size:14.5px;font-weight:700;line-height:1.25}
.ab-trust-t span{display:block;color:var(--article-soft);font-size:13px;line-height:1.3;margin-top:2px}

/* карточки с иконками */
.ab-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin:26px 0 30px}
.ab-card{background:var(--article-card-bg);border:1px solid var(--article-card-border);border-radius:16px;padding:20px 18px 22px}
.ab-card .ab-ico{margin-bottom:14px}
.ab-card b{display:block;color:var(--article-ink);font-size:15.5px;font-weight:700;margin-bottom:7px;line-height:1.3}
.ab-card p{margin:0;color:var(--article-soft);font-size:14px;line-height:1.5}

/* цитата */
.ab-quote{background:var(--article-card-bg);border:1px solid var(--article-card-border);border-radius:16px;padding:24px 26px;margin:26px 0 30px;display:flex;gap:16px;align-items:flex-start}
.ab-quote>svg{width:26px;height:26px;flex:0 0 auto;fill:var(--article-gold);stroke:none;margin-top:2px}
.ab-quote i{display:block;font-style:italic;color:var(--article-ink);font-size:16.5px;line-height:1.55}
.ab-quote cite{display:block;font-style:normal;color:var(--article-link);font-size:13px;font-weight:700;letter-spacing:.02em;margin-top:12px;padding-top:12px;border-top:1px solid var(--article-line)}

/* акцентный блок */
.ab-callout{border-left:3px solid var(--article-gold);background:var(--article-card-bg);border-radius:0 16px 16px 0;padding:20px 24px 22px;margin:26px 0 30px;display:flex;gap:16px;align-items:flex-start}
.ab-callout b{display:block;color:var(--article-gold);font-size:16px;font-weight:700;margin-bottom:8px}
.ab-callout p{margin:0;color:var(--article-body);font-size:14.5px;line-height:1.55}

/* компактная доп. карточка */
.ab-note{background:var(--article-card-bg-2);border:1px solid var(--article-card-border);border-radius:16px;padding:18px 20px;margin:22px 0 26px;display:flex;gap:14px;align-items:flex-start}
.ab-note b{display:block;color:var(--article-gold);font-size:15px;font-weight:700;margin-bottom:6px}
.ab-note p{margin:0;color:var(--article-soft);font-size:14px;line-height:1.5}

/* две колонки */
.ab-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;align-items:start;margin:26px 0 30px}
.ab-split>*{margin-top:0;margin-bottom:0}

/* фото с подписью */
.ab-figure{margin:26px 0 30px;border-radius:16px;overflow:hidden;position:relative;border:1px solid var(--article-card-border);background:var(--article-card-bg-2)}
.ab-figure img{display:block;width:100%;height:auto;object-fit:contain}
.ab-figure figcaption{position:absolute;right:14px;bottom:14px;max-width:min(340px,72%);background:rgba(13,26,36,.88);border:1px solid var(--article-card-border);border-radius:12px;padding:10px 14px;color:var(--article-body);font-size:13px;line-height:1.4}

/* блоки на всю ширину сетки в информационной статье */
.article-content>.ab-cards,
.article-content>.ab-trust,
.article-content>.ab-split,
.article-content>.ab-figure,
.article-content>.ab-clearfix{grid-column:1/-1;max-width:none;position:relative;z-index:2;background:var(--article-navy)}

@media (max-width:900px){
  .ab-trust{grid-template-columns:1fr;gap:14px}
  .ab-split{grid-template-columns:1fr;gap:18px}
}
@media (max-width:560px){
  .ab-quote,.ab-callout,.ab-note{padding:18px 16px}
  .ab-figure img{height:220px}
}

/* кнопки в шапке коммерческой статьи */
.ab-hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:22px 0 4px}
.ab-cta2{display:inline-flex;align-items:center;gap:9px;color:var(--article-ink);text-decoration:none;font-size:14.5px;font-weight:600;border-bottom:1px solid rgba(255,209,56,.45);padding-bottom:2px;transition:color .15s,border-color .15s}
.ab-cta2::before{content:"";width:26px;height:26px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(255,209,56,.5);background:rgba(255,209,56,.12) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffd138'%3E%3Cpath d='M9 7.5v9l7.5-4.5z'/%3E%3C/svg%3E") center/13px no-repeat}
.ab-cta2:hover{color:var(--article-gold);border-color:var(--article-gold)}
.article-hero-commercial .ab-trust{margin:26px 0 0}
@media (max-width:560px){
  .ab-hero-actions{gap:14px}
}

/* модификаторы числа колонок для .ab-cards */
.ab-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ab-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){
  .ab-cards--2,.ab-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ab-cards--2,.ab-cards--3{grid-template-columns:1fr}
}


/* ==============================================================
   ДОПОЛНЕНИЕ v7 - опора для первого экрана, ровные карточки
   выбора и плавающая кнопка заказа (сентябрь 2026).
   ============================================================== */

/* первый экран: единая рамка + разделитель между текстом и фото */
.article-hero-commercial{background:var(--article-card-bg);border:1px solid var(--article-card-border);border-radius:22px;overflow:hidden;gap:0;align-items:stretch;padding-bottom:0;margin-bottom:34px}
.article-hero-commercial>div:first-child{padding:34px 34px 30px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--article-card-border)}
.article-hero-commercial .article-hero-commercial-media{border:0;border-radius:0;min-height:100%;background:var(--article-card-bg-2)}
.article-hero-commercial .article-hero-commercial-media img{height:100%;min-height:340px;border-radius:0}

/* пункты доверия - в своих коробках, чуть светлее фона */
.article-hero-commercial .ab-trust{margin:26px 0 0;padding-top:24px;border-top:1px solid var(--article-card-border);gap:12px}
.article-hero-commercial .ab-trust>div{background:var(--article-card-bg-2);border:1px solid var(--article-card-border);border-radius:12px;padding:12px 13px;gap:10px}
.article-hero-commercial .ab-trust .ab-ico{width:36px;height:36px;border-radius:10px}
.article-hero-commercial .ab-trust .ab-ico svg{width:18px;height:18px}

/* смысловая зона другого тона */
.ab-band{background:var(--article-card-bg-2);border:1px solid var(--article-card-border);border-radius:20px;padding:28px 30px 30px}
.ab-band>div:first-child h2{margin-top:0}

/* карточки выбора - все одинаковые, как в каталоге */
.article-visual-choice{grid-template-columns:repeat(4,minmax(0,1fr))}
.article-visual-choice .article-variant-card{grid-column:auto}
.article-visual-choice .article-variant-card img{height:186px;width:100%}
.article-visual-choice .article-variant-card:nth-child(n+3){grid-column:auto;display:block;grid-template-columns:none}
.article-visual-choice .article-variant-card:nth-child(n+3) img{width:100%;height:186px}
.article-visual-choice .article-variant-card:nth-child(n+3) div{padding:12px 14px}
.article-visual-choice .article-variant-card{transition:transform .15s,border-color .15s}
.article-visual-choice .article-variant-card:hover{transform:translateY(-2px);border-color:rgba(255,209,56,.45)}

/* плавающая кнопка заказа */
.ab-fab{position:fixed;right:22px;bottom:26px;z-index:60;display:inline-flex;align-items:center;gap:9px;background:var(--article-gold);color:#12202c;font-weight:700;font-size:14.5px;padding:13px 20px;border-radius:999px;text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.45);transition:transform .15s,box-shadow .15s}
.ab-fab svg{width:17px;height:17px;fill:none;stroke:#12202c;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ab-fab:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.55)}

@media (max-width:980px){
  .article-hero-commercial{grid-template-columns:1fr}
  .article-hero-commercial>div:first-child{border-right:0;border-bottom:1px solid var(--article-card-border);padding:26px 22px 24px}
  .article-hero-commercial .article-hero-commercial-media img{min-height:260px}
  .article-visual-choice{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ab-band{padding:22px 18px 24px}
  .article-visual-choice{grid-template-columns:1fr}
  .ab-fab{right:14px;bottom:16px;padding:12px 16px;font-size:13.5px}
}


/* ==============================================================
   ДОПОЛНЕНИЕ v8 - единая ширина всей статьи (сентябрь 2026).
   В styles.css есть глобальное main{max-width:var(--max)} (1720px),
   которое перебивало ширину статьи: контейнер получался 1585px,
   а блоки внутри - 1180px, отсюда ощущение "разной ширины".
   Фиксируем один контейнер для всего: шапка, зоны, карточки,
   форма и «читайте также» - строго по 1180px.
   ============================================================== */
/* ширина статьи: широкий контейнер, см. v10 ниже */


/* ==============================================================
   ДОПОЛНЕНИЕ v9 - настоящая форма заявки в статье, оформлена
   так же, как блок «Есть задача по вывеске?» на странице Статьи.
   ============================================================== */
.article-formband{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start;background:var(--article-card-bg);border:1px solid var(--article-card-border);border-radius:22px;padding:32px 34px 34px;margin:34px 0 30px}
.article-formband .fb-copy>span{display:block;color:var(--article-link);font-size:11.5px;font-weight:800;letter-spacing:.14em;margin-bottom:10px}
.article-formband .fb-copy h2{margin:0 0 12px;color:var(--article-ink);font-size:30px;line-height:1.15}
.article-formband .fb-copy p{margin:0;color:var(--article-body);font-size:15.5px;line-height:1.6}
.article-formband form{display:flex;flex-direction:column;gap:12px;margin:0}
.article-formband form>label{display:block;color:var(--article-soft);font-size:13px}
.article-formband input[type=text],
.article-formband input[type=tel],
.article-formband textarea{display:block;width:100%;margin-top:6px;background:var(--article-card-bg-2);border:1px solid var(--article-card-border);border-radius:10px;padding:11px 13px;color:var(--article-ink);font:inherit;font-size:14.5px;box-sizing:border-box}
.article-formband input[type=text]:focus,
.article-formband input[type=tel]:focus,
.article-formband textarea:focus{outline:none;border-color:rgba(255,209,56,.55)}
.article-formband textarea{resize:vertical;min-height:86px}
.article-formband .articles-consent{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--article-soft);margin-top:2px}
.article-formband .articles-consent input{margin-top:2px;flex:0 0 auto}
.article-formband .articles-consent a{color:var(--article-link)}
.article-formband button[type=submit]{align-self:flex-start;background:var(--article-gold);color:var(--article-navy);border:0;border-radius:11px;padding:13px 24px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:background .15s,transform .15s}
.article-formband button[type=submit]:hover{background:#ffdb54;transform:translateY(-1px)}
.article-formband .order-honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.article-formband .articles-form-status{color:var(--article-soft);font-size:13px}
@media (max-width:900px){
  .article-formband{grid-template-columns:1fr;gap:22px;padding:24px 20px 26px}
  .article-formband .fb-copy h2{font-size:25px}
}


/* ==============================================================
   ДОПОЛНЕНИЕ v10 - широкая единая ширина + воздух под шапкой
   и фото в блоке заявки (сентябрь 2026).
   ============================================================== */

/* всё содержимое статьи по одной, широкой ширине контейнера */
.article-content--wide{max-width:none}
.ab-band,.article-visual-choice{max-width:none}

/* хлебные крошки не липнут к шапке сайта */

.article-breadcrumbs{margin-top:6px;margin-bottom:22px}

/* фото в блоке «Есть задача по вывеске?» */
.article-formband .fb-copy figure{margin:0 0 18px;border-radius:14px;overflow:hidden;border:1px solid var(--article-card-border);background:var(--article-card-bg-2)}
.article-formband .fb-copy figure img{display:block;width:100%;height:190px;object-fit:cover}

@media (max-width:620px){
  .article-page{padding-top:24px}
  .article-formband .fb-copy figure img{height:150px}
}

/* отступ статьи от шапки сайта (перебиваем внешние правила padding) */
body main.article-page{padding-top:38px!important}
@media (max-width:620px){ body main.article-page{padding-top:26px!important} }

/* фото-блок в тексте: перебиваем общее правило figure img{height:auto} */
.article-content .ab-figure img,
.article-content--wide .ab-figure img{height:auto;object-fit:contain;width:100%}
@media (max-width:620px){
  .article-content .ab-figure img,
  .article-content--wide .ab-figure img{height:220px}
}


/* ==============================================================
   ДОПОЛНЕНИЕ v11 - ПРАВИЛО ПО ФОТО (сентябрь 2026).
   Фотографии показываем в их собственных пропорциях. Никаких
   фиксированных высот с обрезкой и никакой растяжки на всю
   ширину экрана: у большинства снимков формат 4:3, из широкой
   полосы они выглядят обрезанными. Поэтому: ширина ограничена,
   высота считается от пропорций самого файла.
   ============================================================== */

/* фото-блок в тексте */
.article-content .ab-figure,
.article-content--wide .ab-figure{max-width:680px;margin:28px auto 32px}
.article-content .ab-figure img,
.article-content--wide .ab-figure img{width:100%;height:auto!important;object-fit:contain;display:block}
.ab-figure figcaption{position:static;max-width:none;background:transparent;border:0;border-radius:0;padding:12px 4px 2px;color:var(--article-soft);font-size:13.5px;line-height:1.45;text-align:left}

/* фото в блоке заявки */
.article-formband .fb-copy figure{max-width:430px}
.article-formband .fb-copy figure img{width:100%;height:auto;object-fit:contain}

@media (max-width:620px){
  .article-content .ab-figure,
  .article-content--wide .ab-figure{max-width:none}
}

/* ссылка «Смотреть все работы» под галереей статьи */
.article-portfolio-all{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#1b2a36;background:var(--article-gold);border-radius:10px;padding:11px 20px;font-size:14.5px;font-weight:700;text-decoration:none;transition:background .15s,transform .15s}
.article-portfolio-all:hover{background:#ffdb54;transform:translateY(-1px)}


/* ============ ДОПОЛНЕНИЕ v12 ============
   1) вторичная CTA становится настоящей кнопкой
   2) фото в тексте, которое обтекается текстом
   3) цветовые варианты карточек, чтобы блоки не были одинаковыми
   4) форма заявки — два отдельных блока с рамками
   ======================================== */

/* --- 1. Кнопка «Посмотреть примеры работ» --- */
.ab-hero-actions .ab-cta2{
  border:1px solid rgba(255,209,56,.55);
  border-radius:11px;
  background:rgba(255,209,56,.08);
  padding:11px 20px 11px 14px;
  color:var(--article-ink);
  transition:background .15s,border-color .15s,transform .15s;
}
.ab-hero-actions .ab-cta2:hover{
  background:rgba(255,209,56,.18);
  border-color:var(--article-gold);
  transform:translateY(-1px);
}

/* --- 2. Фото с обтеканием текстом --- */
.article-content .ab-figure--float,
.article-content--wide .ab-figure--float{
  float:right;
  max-width:360px;
  margin:4px 0 18px 32px;
}
.article-content .ab-figure--float img,
.article-content--wide .ab-figure--float img{
  width:100%;height:auto!important;object-fit:contain;display:block;
}
.ab-clearfix::after{content:"";display:block;clear:both}
.article-content--wide > .ab-clearfix{
  grid-column: 1 / -1;
  max-width: none;
}
.ab-clearfix.ab-panel{
  background:#1c3140;
  border:1px solid var(--article-card-border);
  border-radius:18px;
  padding:28px clamp(20px,4vw,60px) 6px;
}
.ab-panel-inner{
  max-width:none;
}
.ab-panel-inner > h2:first-child{margin-top:0}
@media (max-width:780px){
  .ab-clearfix.ab-panel{padding:22px 20px 4px}
}
@media (max-width:780px){
  .article-content .ab-figure--float,
  .article-content--wide .ab-figure--float{
    float:none;max-width:100%;margin:22px auto 24px;
  }
}

/* --- 3. Синий вариант карточек --- */
.ab-cards--blue .ab-card{
  background:linear-gradient(158deg,#1f4d73 0%,#153650 100%);
  border-color:rgba(147,210,255,.45);
}
.ab-cards--blue .ab-card b{color:#ffffff}
.ab-cards--blue .ab-card p{color:rgba(223,238,252,.84)}
.ab-cards--blue .ab-ico{
  background:rgba(126,196,255,.15);
  border-color:rgba(126,196,255,.36);
}
.ab-cards--blue .ab-ico svg{stroke:#93d2ff}

/* --- 4. Форма заявки: две карточки с рамками --- */
.article-formband{
  background:transparent;
  border:0;
  padding:0;
  gap:24px;
}
.article-formband .fb-copy{
  background:linear-gradient(160deg,#183a55 0%,#102636 100%);
  border:1px solid rgba(126,196,255,.30);
  border-radius:20px;
  padding:26px 28px 30px;
}
.article-formband .fb-copy figure{margin:0 0 20px}
.article-formband .articles-form{
  background:var(--article-card-bg);
  border:1px solid rgba(255,209,56,.32);
  border-radius:20px;
  padding:26px 28px 30px;
}
@media (max-width:780px){
  .article-formband .fb-copy,
  .article-formband .articles-form{padding:22px 20px 24px}
}


/* ============================================================
   КОМПАКТНОСТЬ И ПЕРЕКРЫТИЯ — правки от 14.09.2026
   1) сайдбар больше не уезжает под широкие блоки
   2) фото с подписью — в две колонки, без пустых полей по бокам
   3) галерея — карточки ровные, без белых дыр, компактнее
   4) коммерческий хиро — текст поверх фото
   ============================================================ */

/* --- 1. Сайдбар всегда сверху и ничем не перекрыт --- */
.article-side{z-index:5}
.article-content>.ab-cards,
.article-content>.ab-trust,
.article-content>.ab-split,
.article-content>.ab-figure,
.article-content>.ab-clearfix{grid-column:1;max-width:none}

/* --- 2. Фото + подпись в две колонки --- */
.article-content .ab-figure,
.article-content--wide .ab-figure{
  max-width:none;
  width:100%;
  margin:24px 0 28px;
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(260px,1fr);
  gap:0;
  align-items:stretch;
  overflow:hidden;
}
.article-content .ab-figure img,
.article-content--wide .ab-figure img{
  width:auto;height:auto!important;max-height:400px;max-width:100%;
  object-fit:contain;display:block;align-self:center;
}
.article-content .ab-figure figcaption,
.article-content--wide .ab-figure figcaption{
  position:static;
  display:flex;align-items:center;
  margin:0;padding:20px 22px;
  max-width:none;border-radius:0;
  background:var(--article-card-bg);
  border:0;border-left:1px solid var(--article-card-border);
  color:var(--article-body);
  font-size:14.5px;line-height:1.55;text-align:left;
}
@media (max-width:820px){
  .article-content .ab-figure,
  .article-content--wide .ab-figure{grid-template-columns:1fr}
  .article-content .ab-figure figcaption,
  .article-content--wide .ab-figure figcaption{
    border-left:0;border-top:1px solid var(--article-card-border);padding:14px 16px;font-size:13.5px;
  }
}

/* --- 3. Галерея работ --- */
.article-portfolio-grid{
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  align-items:start;
}
.article-portfolio-card img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  background:transparent;
}
@media (max-width:900px){
  .article-portfolio-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  .article-portfolio-grid{grid-template-columns:1fr}
}

/* --- 4. Коммерческий хиро: текст поверх фото --- */
.article-hero-commercial:has(.article-hero-commercial-media){
  position:relative;
  display:flex;
  align-items:flex-end;
  grid-template-columns:none;
  gap:0;
  padding:0;
  margin:0 0 32px;
  min-height:clamp(360px,38vw,460px);
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--article-card-border);
}
.article-hero-commercial:has(.article-hero-commercial-media) .article-hero-commercial-media{
  position:absolute;inset:0;
  margin:0;padding:0;
  min-height:0;
  border:0;border-radius:0;
  background:none;
  z-index:0;
}
.article-hero-commercial:has(.article-hero-commercial-media) .article-hero-commercial-media img{
  width:100%;height:100%;
  object-fit:contain;object-position:center;
  display:block;
}
.article-hero-commercial:has(.article-hero-commercial-media)::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(9,19,28,.95) 0%,
    rgba(9,19,28,.90) 38%,
    rgba(9,19,28,.55) 62%,
    rgba(9,19,28,.20) 100%);
}
.article-hero-commercial:has(.article-hero-commercial-media) > div:not(.article-hero-commercial-media){
  position:relative;z-index:2;
  width:100%;max-width:none;
  padding:38px 40px 32px;
}
.article-hero-commercial:has(.article-hero-commercial-media) .article-h1{margin-bottom:10px}
.article-hero-commercial:has(.article-hero-commercial-media) .article-lead{
  margin-bottom:20px;max-width:640px;
}
.article-hero-commercial:has(.article-hero-commercial-media) .ab-trust{
  margin-top:22px;max-width:820px;
}
@media (max-width:820px){
  .article-hero-commercial:has(.article-hero-commercial-media){
    min-height:0;display:block;
  }
  .article-hero-commercial:has(.article-hero-commercial-media) .article-hero-commercial-media{
    position:relative;inset:auto;height:230px;
  }
  .article-hero-commercial:has(.article-hero-commercial-media)::after{display:none}
  .article-hero-commercial:has(.article-hero-commercial-media) > div:not(.article-hero-commercial-media){
    padding:22px 18px 20px;background:var(--article-navy);
  }
}


/* ==============================================================
   ФИКС КОНФЛИКТА ШИРИНЫ КОНТЕНТА — правка от 14.09.2026.
   В scene-v3.css есть правило main{max-width:1720px!important}
   (задумано для главной страницы), которое по !important
   перебивало правило этого файла .article-page/main.article-page
   {max-width:var(--article-max)} — из-за этого колонка статьи
   растягивалась на всю ширину экрана и прижималась влево вместо
   центрирования на 1180px. Восстанавливаем !important здесь же,
   этот файл подключается последним в <head>, поэтому побеждает.
   ============================================================== */
main.article-page,
.article-page{
  max-width:var(--article-max)!important;
  margin:0 auto!important;
  padding:28px 22px 0!important;
}
@media (max-width:620px){
  main.article-page,
  .article-page{
    padding:20px 16px 0!important;
  }
}


/* ==============================================================
   ФОТО-ПАРА: крупное фото с подписью поверх + блоки рядом.
   Правка от 14.09.2026 по запросу заказчика — фигура была мелкой,
   подпись сбоку узкой полоской. Теперь фото занимает половину
   ширины блока, подпись — оверлеем поверх фото (как в hero), а
   рядом — соседние карточки (.ab-split), которые раньше шли ниже.
   Фото НЕ обрезаем (правило проекта) — ширина 100%, высота auto,
   собственные пропорции картинки.
   ============================================================== */
.ab-figure-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin:26px 0 30px;
  align-items:start;
}
.ab-figure-row .ab-figure{
  margin:0;
  max-width:none;
  display:block;
  position:relative;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--article-card-border);
  background:var(--article-card-bg-2);
}
.ab-figure-row .ab-figure img{
  width:100%;
  height:auto;
  display:block;
}
.ab-figure-row .ab-figure figcaption{
  position:absolute;
  left:0;right:0;bottom:0;
  margin:0;
  max-width:none;
  padding:26px 20px 16px;
  background:linear-gradient(to top, rgba(9,19,28,.92) 15%, rgba(9,19,28,.6) 55%, rgba(9,19,28,0) 100%);
  color:#fff;
  font-size:14.5px;
  line-height:1.5;
  border:0;
  border-radius:0;
  text-align:left;
}
.ab-figure-row .ab-split{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  grid-template-columns:none;
}
.ab-figure-row .ab-split > div{
  margin:0;
}
@media (max-width:820px){
  .ab-figure-row{
    grid-template-columns:1fr;
  }
}


/* ============ ДОПОЛНЕНИЕ v30 ============
   .ab-split--stretch: модификатор для .ab-split, когда во второй
   колонке должна быть не карточка произвольной высоты, а фото —
   тянем колонки на всю высоту блока и вписываем фото без обрезки
   (та же логика letterbox, что и в .ab-figure-row).
   ============================================================ */
.ab-split--stretch{align-items:start}
.ab-split--stretch>.ab-media{border-radius:16px;overflow:hidden;background:var(--article-card-bg-2);border:1px solid var(--article-card-border);display:flex}
.ab-split--stretch>.ab-media img{width:100%;height:auto;display:block}


/* ============ ДОПОЛНЕНИЕ v31 ============
   Коммерческий хиро — на всю ширину страницы (как хедер), а не
   только по ширине контентной колонки (1180px). Фото внутри
   по-прежнему не обрезается (object-fit:contain, см. v29/30) —
   при узком по пропорциям фото по бокам будет виден фон блока,
   пока не заменим на панорамное фото на этапе с фотографиями.
   ============================================================ */
.article-hero-commercial:has(.article-hero-commercial-media){
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
}


/* ============ ДОПОЛНЕНИЕ v32 ============
   .ab-split по умолчанию тянет обе колонки на одинаковую высоту
   (было align-items:start — короткая карточка типа .ab-quote рядом
   с длинным текстом оставляла пустоту снизу справа, жалоба на
   "ебучую пустоту"). Карточка при этом не просто растягивается с
   пустым низом, а центрирует своё содержимое по всей высоте.
   Затрагивает статьи: id 70,69,68,76,71,63,39 (плюс любые новые
   с тем же паттерном ab-split + ab-quote).
   ============================================================ */
.ab-split{align-items:stretch}
.ab-split>.ab-quote{height:100%;align-items:center;box-sizing:border-box}



/* ============ ДОПОЛНЕНИЕ v33 ============
   Фаза 4: правки по фидбеку от 15.09.2026.
   1) Хиро для группы "useful" — раньше текст шёл над маленькой
      картинкой без оверлея. Теперь при наличии фото — тот же приём
      "фото на всю ширину экрана + текст поверх", что уже
      использовался для группы "solutions"
      (.article-hero-commercial:has(...)), но под отдельным классом
      .article-hero-useful, чтобы не задевать вёрстку commercial-хиро
      (там своя кнопка-CTA и строка доверия). Разметку генерирует
      снипет articleLayout (id=2), новая ветка при $hero !== ''.
      Фото не обрезается (object-fit:contain).
   2) "Читайте также" — редизайн карточек: раньше все статьи сайта
      использовали тот же серо-синий цвет карточек
      (--article-card-bg), из-за чего блок сливался с остальным
      контентом, плюс колонка-flex с прижатой к низу стрелкой
      оставляла пустоту под короткими заголовками. Теперь —
      компактная горизонтальная карточка (фото слева, текст справа,
      стрелка по центру по вертикали) в отдельной тёплой палитре
      (--article-related-*), без пустого места снизу. Количество
      карточек увеличено с 4 до 8 (limit в articleLayout).
      Правки затрагивают все статьи сайта (общий класс).
   3) .ab-cards--paper — светлый ("бумажный") вариант карточек с
      иконками, по аналогии с уже существующим .ab-cards--blue.
      Применяется точечно (пока только на странице
      "Согласование вывески", id 46).
   4) .ab-split>.ab-figure — аналогично v32 для .ab-quote: если
      .ab-split растянут по высоте (align-items:stretch), фото в
      колонке центрируется по вертикали, а не прилипает к верху с
      пустым фоном снизу.
   ============================================================ */

/* --- 1. Полноэкранный хиро для группы "useful" --- */
.article-hero-useful{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:clamp(320px,34vw,420px);
  overflow:hidden;
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:0;
  margin-bottom:32px;
  border-bottom:1px solid var(--article-card-border);
}
.article-hero-useful-media{position:absolute;inset:0;margin:0;padding:0;z-index:0;background:var(--article-card-bg-2)}
.article-hero-useful-media img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.article-hero-useful::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(9,19,28,.95) 0%,
    rgba(9,19,28,.90) 38%,
    rgba(9,19,28,.55) 62%,
    rgba(9,19,28,.20) 100%);
}
.article-hero-useful-copy{
  position:relative;z-index:2;
  width:100%;max-width:var(--article-max);
  margin:0 auto;
  padding:34px 22px 30px;
  box-sizing:border-box;
}
.article-hero-useful-copy .article-h1{margin-bottom:10px}
.article-hero-useful-copy .article-lead{margin-bottom:0;max-width:640px}
@media (max-width:820px){
  .article-hero-useful{min-height:0;display:block}
  .article-hero-useful-media{position:relative;inset:auto;height:220px}
  .article-hero-useful::after{display:none}
  .article-hero-useful-copy{padding:20px 16px 18px;background:var(--article-navy)}
}

/* --- 2. "Читайте также" — компактная карточка в тёплой палитре --- */
:root{
  --article-related-bg:#241d10;
  --article-related-bg-2:#2c2313;
  --article-related-border:#5a4a24;
  --article-related-soft:#c3ac82;
}
.article-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.article-related-card{
  display:flex;flex-direction:row;align-items:center;gap:12px;
  border:1px solid var(--article-related-border);
  border-radius:12px;overflow:hidden;
  background:var(--article-related-bg);
  text-decoration:none;padding:10px;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.article-related-card:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.35);border-color:var(--article-gold)}
.article-related-media{flex:0 0 auto;width:60px;height:60px;border-radius:9px;overflow:hidden;background:var(--article-related-bg-2)}
.article-related-media img{display:block;width:100%;height:100%;object-fit:cover}
.article-related-copy{flex:1;min-width:0;padding:0}
.article-related-copy small{display:block;color:var(--article-related-soft);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;margin:0 0 3px}
.article-related-copy strong{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13.5px;color:var(--article-ink);font-weight:600;line-height:1.3;
}
.article-related-card b{flex:0 0 auto;align-self:center;margin:0;color:var(--article-gold);font-size:17px;font-weight:400}
@media (max-width:640px){
  .article-related-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  .article-related-grid{grid-template-columns:1fr}
}

/* --- 3. .ab-cards--paper: светлый вариант карточек с иконками --- */
.ab-cards--paper .ab-card{
  background:linear-gradient(158deg,#f7f1e0 0%,#efe4c8 100%);
  border-color:rgba(21,38,51,.16);
}
.ab-cards--paper .ab-card b{color:#1c1305}
.ab-cards--paper .ab-card p{color:#5a4d34}
.ab-cards--paper .ab-ico{
  background:rgba(21,38,51,.08);
  border-color:rgba(21,38,51,.18);
}
.ab-cards--paper .ab-ico svg{stroke:#8a6a1f}

/* --- 4. фото в .ab-split по центру, если колонка растянута --- */
.ab-split>.ab-figure{height:100%;display:flex;align-items:center;box-sizing:border-box;margin:0}


/* Шаги расчёта в левой колонке верхней формы статьи. */
.article-formband--inline{align-items:stretch}
.article-formband--inline .fb-copy{
  display:flex;
  flex-direction:column;
  min-height:100%;
  box-sizing:border-box;
}
.article-form-steps{
  display:grid;
  gap:13px;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(153,195,220,.24);
}
.article-form-steps h3{
  margin:0 0 3px;
  color:#f3f6fa;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
}
.article-form-step{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:13px;
  align-items:start;
  padding:11px 0;
}
.article-form-step b{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid rgba(255,209,56,.36);
  border-radius:11px;
  background:rgba(255,209,56,.08);
  color:#ffd138;
  font-size:16px;
}
.article-form-step strong{
  display:block;
  margin:0 0 3px;
  color:#f3f6fa;
  font-size:16px;
  line-height:1.35;
}
.article-form-step span{
  display:block;
  color:#b9d0df;
  font-size:15px;
  line-height:1.45;
}
.article-formband--inline .article-form-hint{
  margin:auto 0 0;
  padding-top:16px;
  border-top:1px solid rgba(153,195,220,.24);
  color:#b9d0df;
  font-size:15px;
  line-height:1.45;
}
@media(max-width:780px){
  .article-formband--inline .fb-copy{min-height:0}
  .article-form-steps{margin-top:20px;padding-top:17px;gap:7px}
  .article-form-step{padding:8px 0}
  .article-formband--inline .article-form-hint{margin-top:13px}
}

/* Светлая цитата и только первый ряд карточек непосредственно после неё. */
main.article-page .ab-quote{
  background:linear-gradient(135deg,#eef3f6 0%,#e2eaf0 100%);
  border-color:#c8d6df;
  color:#1b3445;
}
main.article-page .ab-quote i{color:#1b3445}
main.article-page .ab-quote cite{color:#725b11;border-top-color:#c8d6df}
main.article-page :is(.article-content,.article-content--wide) .ab-quote ~ .ab-cards:not(.ab-quote ~ .ab-cards ~ .ab-cards) > .ab-card{
  background:#e9f0f4;
  border-color:#ccd9e1;
  color:#1b3445;
}
main.article-page :is(.article-content,.article-content--wide) .ab-quote ~ .ab-cards:not(.ab-quote ~ .ab-cards ~ .ab-cards) > .ab-card b{color:#173246}
main.article-page :is(.article-content,.article-content--wide) .ab-quote ~ .ab-cards:not(.ab-quote ~ .ab-cards ~ .ab-cards) > .ab-card p{color:#486375}
main.article-page :is(.article-content,.article-content--wide) .ab-quote ~ .ab-cards:not(.ab-quote ~ .ab-cards ~ .ab-cards) > .ab-card .ab-ico{background:#203c50;border-color:#203c50}

/* Информационные статьи без бокового оглавления: весь контент использует ширину страницы. */
main.article-page .article-content--expanded{
  display:block;
  width:100%;
  max-width:none;
}
main.article-page .article-content--expanded > *{
  width:auto;
  max-width:none;
}
main.article-page .article-content--expanded > :is(p,ul,ol,h2,h3,blockquote){
  max-width:860px;
}
/* Если у текстового блока нет второй колонки с фото, не оставляем пустое место. */
main.article-page .ab-split:has(> :only-child){
  grid-template-columns:minmax(0,1fr);
}
main.article-page .ab-split > :only-child{
  grid-column:1/-1;
  min-width:0;
}