/* css/pages/article.css */
.page-article {
  --home-blue: #3494d1;
  --home-slate: #384b60;
  --home-muted: #737e8d;
  --home-panel: #f5f7fb;
  --home-footer: #838f9e;
  --home-green: #29ce90;
  --home-cyan: #1caee5;
  --home-radius: 18px;
  --catalog-text: #384b60;
  --catalog-muted: #6b7280;
  --catalog-line: #e6e8ee;
  --catalog-green: #29ce90;
  --catalog-blue: #1da1f2;
  --catalog-shadow: 0 8px 24px rgb(17 24 39 / 6%), inset 0 1px 0 rgb(255 255 255 / 10%);
  background: #fff;
  color: var(--home-slate);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

.page-article main { min-height: 0; padding-top: 80px; }
.page-article .container { width: min(calc(100% - 30px), 1170px); margin-inline: auto; }
.page-article h1,
.page-article h2,
.page-article h3,
.page-article h4 { color: var(--home-slate); }
.page-article .button { min-height: 52px; border-radius: 13px; font-size: 15px; }
.page-article .button--primary { background: linear-gradient(100deg, var(--home-green), var(--home-cyan)); }
.page-article a:focus-visible,
.page-article button:focus-visible { border-radius: 8px; outline: 3px solid #3483ca; outline-offset: 3px; }

.article-breadcrumbs { padding-block: 17px 22px; color: #7b8795; font-size: 14px; }
.article-breadcrumbs ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.article-breadcrumbs li { display: flex; align-items: center; }
.article-breadcrumbs li + li::before { padding-inline: 9px; color: #a8afb8; content: "/"; }
.article-breadcrumbs a { color: #667587; text-decoration: none; }
.article-breadcrumbs a:hover { text-decoration: underline; }

.article-control__header h1 { margin: 0 0 32px; font-size: 24px; font-weight: 700; line-height: 1.25; }
.article-control { padding-bottom: 72px; }
.article-control__tip { margin: 0 0 30px; }
.article-control__tip-title { margin: 0 0 15px; padding-left: 38px; }
.article-control__tip-title li { padding-left: 2px; font-size: 24px; line-height: 1.45; }
.article-control__tip:first-child .article-control__tip-title { padding-top: 23px; border-top: 1px solid #dfe3e7; }
.article-control__tip p { margin: 0 0 14px; color: #4c5663; font-size: 18.6667px; line-height: 1.55; text-align: justify; }
.article-control__image { width: min(100%, 954px); margin: 13px auto 22px; }
.article-control__image picture,
.article-control__image img { display: block; width: 100%; height: auto; }
.article-control__image figcaption { margin-top: 8px; color: var(--home-muted); font-size: 14px; text-align: center; }

.article-control[data-layout="prose"] { padding-top: 23px; border-top: 1px solid #dfe3e7; }
.article-control[data-layout="prose"] p { margin: 0 0 17px; color: #4c5663; font-size: 18.6667px; line-height: 1.55; text-align: justify; }
.article-control[data-layout="prose"] .article-control__paragraph--highlight { padding: 12px 16px; background: #ffdb73; color: #000; text-align: center; }
.article-control[data-layout="prose"] .article-control__paragraph--danger { padding: 12px 16px; background: #fe7279; color: #fff; text-align: center; }
.article-control[data-layout="prose"] .article-control__paragraph--display { margin-top: 28px; font-size: 24px; line-height: 1.3; }
.article-control[data-layout="prose"] h1,
.article-control[data-layout="prose"] h2,
.article-control[data-layout="prose"] h3,
.article-control[data-layout="prose"] h4 { margin: 28px 0 16px; color: #007495; font-weight: 700; line-height: 1.3; }
.article-control[data-layout="prose"] h1,
.article-control[data-layout="prose"] h2 { font-size: 26px; }
.article-control[data-layout="prose"] h3 { font-size: 24px; }
.article-control[data-layout="prose"] h4 { font-size: 22px; }
.article-control[data-layout="prose"] a { color: #007495; text-decoration: underline; text-underline-offset: 3px; }
.article-control__list { display: grid; gap: 14px; margin: 0 0 22px; padding-left: 31px; color: #4c5663; font-size: 18.6667px; line-height: 1.55; }
.article-control__list li::marker { font-weight: 700; }
.article-control__list--nested { margin: 12px 0 0; }
.article-video { width: 100%; margin: 18px auto 28px; }
.article-video__player,
.article-video__image,
.article-video__image img { display: block; width: 100%; height: auto; }
.article-video__player { max-height: 680px; background: #111; border-radius: 10px; }
.article-video--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.article-video--split .article-video__image img,
.article-video--split .article-video__player { aspect-ratio: 1; object-fit: cover; }
.article-video figcaption { grid-column: 1 / -1; color: var(--home-muted); font-size: 14px; text-align: center; }

.page-article .home-section { padding-block: 72px; }
.page-article .home-heading { display: grid; gap: 8px; margin-bottom: 26px; }
.page-article .home-heading h2 { font-size: 28px; font-weight: 900; }
.page-article .home-heading p { max-width: 760px; color: var(--home-muted); line-height: 1.48; }
.page-article .home-heading p + p { margin-top: -3px; }
.page-article .catalog-section { padding-block: 64px; }
.page-article .catalog-section h2,
.page-article .catalog-cta h2,
.page-article .catalog-promotion h2 { margin: 0 0 12px; color: var(--catalog-text); font-size: 28px; font-weight: 800; line-height: 1.2; }
.page-article .catalog-section p,
.page-article .catalog-cta p,
.page-article .catalog-promotion p { color: var(--catalog-muted); }
.page-article .catalog-cta { padding-block: 64px; }
.page-article .catalog-price { padding-block: 64px; }
.page-article .catalog-video { padding-block: 64px; }
.page-article .service-articles { padding-bottom: 105px; }
.article-index-cta { padding: 0 0 88px; }
.article-index-cta__panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; border-radius: 18px; background: #f5f7fb; }
.article-index-cta h2 { margin: 0 0 8px; font-size: 28px; }
.article-index-cta p { max-width: 640px; margin: 0; color: var(--home-muted); }
.article-index-cta .button { flex: 0 0 auto; }
.page-article .home-footer { padding-top: 35px; }
.page-article .floating-actions { bottom: 150px; }
.page-article[data-stitch-fragment] .floating-actions,
.page-article[data-stitch-fragment] .cookie-banner { display: none; }
.page-article[data-stitch-fragment] .home-header { position: absolute; }

@media (max-width: 991px) {
  .page-article main { padding-top: 72px; }
  .article-control__header h1 { font-size: 22px; }
  .article-control__tip-title li { font-size: 22px; }
  .article-control__tip p { font-size: 17px; }
  .article-control[data-layout="prose"] p,
  .article-control__list { font-size: 17px; }
  .page-article .home-footer__grid { grid-template-columns: 1fr; }
  .page-article .home-footer__card { width: min(100%, 350px); justify-self: center; }
}

@media (max-width: 768px) {
  .article-video--split { grid-template-columns: 1fr; }
  .article-video--split .article-video__image img,
  .article-video--split .article-video__player { aspect-ratio: auto; }
}

@media (max-width: 600px) {
  .page-article { font-size: 14px; }
  .page-article main { padding-top: 64px; }
  .page-article .container { width: calc(100% - 10px); }
  .article-breadcrumbs { padding-block: 12px 18px; font-size: 12px; }
  .article-control__header h1 { margin-bottom: 25px; font-size: 19px; }
  .article-control { padding-bottom: 48px; }
  .article-control__tip { margin-bottom: 24px; }
  .article-control__tip-title { margin-bottom: 10px; padding-left: 28px; }
  .article-control__tip-title li { font-size: 18px; line-height: 1.42; }
  .article-control__tip p { margin-bottom: 10px; font-size: 15px; line-height: 1.53; }
  .article-control[data-layout="prose"] { padding-top: 18px; }
  .article-control[data-layout="prose"] p,
  .article-control__list { margin-bottom: 14px; font-size: 15px; line-height: 1.53; }
  .article-control[data-layout="prose"] .article-control__paragraph--highlight,
  .article-control[data-layout="prose"] .article-control__paragraph--danger { padding: 10px 12px; }
  .article-control[data-layout="prose"] .article-control__paragraph--display { margin-top: 22px; font-size: 21px; }
  .article-control[data-layout="prose"] h2,
  .article-control[data-layout="prose"] h3,
  .article-control[data-layout="prose"] h4 { margin: 22px 0 12px; }
  .article-control[data-layout="prose"] h2 { font-size: 21px; }
  .article-control[data-layout="prose"] h3 { font-size: 20px; }
  .article-control[data-layout="prose"] h4 { font-size: 19px; }
  .article-control__list { gap: 10px; padding-left: 26px; }
  .article-control__image { margin-block: 10px 17px; }
  .article-video { margin-block: 14px 20px; }
  .page-article .home-section,
  .page-article .catalog-section,
  .page-article .catalog-cta,
  .page-article .catalog-price,
  .page-article .catalog-video { padding-block: 40px; }
  .page-article .service-articles { padding-bottom: 55px; }
  .article-index-cta { padding-bottom: 55px; }
  .article-index-cta__panel { align-items: stretch; flex-direction: column; padding: 20px; }
  .page-article .home-footer .container { width: calc(100% - 10px); }
  .page-article .floating-actions { right: 9px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .page-article *,
  .page-article *::before,
  .page-article *::after { scroll-behavior: auto; transition: none; }
}