/* Blog article text section (Figma 22307:17750). */
.article-body { display: grid; grid-template-columns: minmax(220px, 596fr) minmax(0, 1176fr); padding: 120px 64px; background: #fff; color: #111827; font-family: 'Inter', sans-serif; }
.article-body *, .article-body *::before, .article-body *::after { box-sizing: border-box; }
.article-body__label { padding-top: 16px; }
.article-body__tag { display: inline-flex; padding: 5px 12px; border: 1px solid #2e3444; border-radius: 6px; font: 500 15px/22px 'Inter', sans-serif; }
.article-body__content { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.article-body__blocks { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.article-body + .article-body { padding-top: 0; }
.article-body .article-body__heading { margin: 0; padding: 0; font: 500 clamp(40px, 3.37vw, 64px)/1 'Inter', sans-serif; color: #111827; }
.article-body .article-body__heading::before, .article-body .article-body__heading::after { content: none; display: none; }

/* text */
.article-text { font: 400 18px/1.56 'Inter', sans-serif; color: #111827; }
.article-text > * { margin: 0 0 24px; }
.article-text > *:last-child { margin-bottom: 0; }
.article-text p { margin: 0 0 24px; font: inherit; }
.article-text h2, .article-text h3 { margin: 64px 0 24px; padding: 0; font: 500 40px/1.1 'Inter', sans-serif; color: #111827; }
.article-text h3 { font-size: 32px; }
.article-text > h2:first-child, .article-text > h3:first-child { margin-top: 16px; }
.article-text h2::before, .article-text h2::after, .article-text h3::before, .article-text h3::after { content: none; display: none; }
.article-text ul, .article-text ol { margin: 0 0 24px; padding: 0 0 0 24px; }
.article-text ul { list-style: disc; }
.article-text ol { list-style: decimal; }
.article-text li { margin: 0 0 4px; padding: 0; font: inherit; }
.article-text li::before { content: none; }
.article-text a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.article-text img { max-width: 100%; height: auto; border-radius: 16px; }
.article-text blockquote { margin: 0 0 24px; padding: 24px; border-radius: 16px; background: #f5f6fb; }

/* expert quote */
.article-quote { display: flex; gap: 16px; margin: 16px 0; padding: 21px; border-radius: 20px; background: #f5f6fb; }
.article-quote__author { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 0 0 261px; padding: 16px; }
.article-quote__avatars { display: flex; align-items: center; margin-bottom: 16px; }
.article-quote__mark, .article-quote__photo { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; }
.article-quote__mark { background: #dfe2ea; color: #2e3444; }
.article-quote__photo { margin: 0 0 0 -15px; object-fit: cover; border: 3px solid #fff; background: #fff; }
.article-quote__name { font: 400 18px/1.33 'Inter', sans-serif; }
.article-quote__role { font: 400 14px/1.4 'Inter', sans-serif; color: #5a616c; }
.article-quote .article-quote__text { flex: 1; margin: 0; padding: 32px; border: 0; border-radius: 16px; background: #fff; font: 400 32px/1.38 'Inter', sans-serif; color: #111827; }
.article-quote .article-quote__text::before, .article-quote .article-quote__text::after { content: none; }

/* cards: 3 per row, then 2, repeating */
.article-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.article-cards__item { grid-column: span 2; padding: 24px; border-radius: 16px; background: #f5f6fb; }
.article-cards__item:nth-child(5n+4), .article-cards__item:nth-child(5n+5) { grid-column: span 3; }
.article-cards .article-cards__item h3 { margin: 0 0 12px; padding: 0; font: 400 24px/1.33 'Inter', sans-serif; color: #111827; }
.article-cards .article-cards__item h3::before, .article-cards .article-cards__item h3::after { content: none; display: none; }
.article-cards .article-cards__item p { margin: 0; font: 400 16px/1.5 'Inter', sans-serif; color: #5a616c; }

/* note */
.article-note { display: flex; align-items: center; gap: 16px; padding: 24px; border-radius: 16px; background: #f5f6fb; }
.article-note__icon { display: inline-flex; flex-shrink: 0; color: #5a616c; }
.article-note p { margin: 0; font: 400 18px/1.56 'Inter', sans-serif; color: #111827; }

@media (max-width: 1100px) {
    .article-body { grid-template-columns: 1fr; padding: 80px 32px; gap: 32px; }
    .article-body__label { padding-top: 0; }
    .article-quote { flex-direction: column; }
    .article-quote__author { flex-basis: auto; }
    .article-quote .article-quote__text { font-size: 26px; }
    .article-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .article-cards__item, .article-cards__item:nth-child(5n+4), .article-cards__item:nth-child(5n+5) { grid-column: auto; }
}
@media (max-width: 700px) {
    .article-body { padding: 48px 16px 64px; }
    .article-body__content { gap: 32px; }
    .article-body__blocks { gap: 32px; }
    .article-text { font-size: 16px; }
    .article-text h2 { font-size: 28px; margin-top: 40px; }
    .article-text h3 { font-size: 24px; }
    .article-quote { padding: 12px; }
    .article-quote .article-quote__text { padding: 20px; font-size: 20px; }
    .article-cards { grid-template-columns: 1fr; }
    .article-cards .article-cards__item h3 { font-size: 20px; }
}

/* перебиваем старые глобальные стили списков (.content-inner ul li) */
.article-body .article-text ul, .article-body .article-text ol { margin: 0 0 24px; padding: 0 0 0 24px; }
.article-body .article-text ol { margin-left: 0; }
.article-body .article-text ul li, .article-body .article-text ol li { position: static; margin: 0 0 4px; line-height: 1.56; list-style: inherit; }
.article-body .article-text ul li::before { content: none; display: none; }

/* features: icon cards in a row */
.article-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.article-features__item { display: flex; flex-direction: column; gap: 40px; padding: 24px; border-radius: 16px; background: #f5f6fb; }
.article-features__icon { display: inline-flex; color: #111827; }
.article-body .article-features__item p { margin: 0; max-width: 220px; font: 400 18px/1.33 'Inter', sans-serif; color: #111827; }

/* images: 1 = full width, 2+ = two columns */
.article-images { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.article-images--multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.article-images__item { margin: 0; overflow: hidden; border-radius: 20px; background: #d9d9d9; aspect-ratio: 580 / 403; }
.article-images--single .article-images__item { aspect-ratio: 1176 / 403; }
.article-body .article-images__item img { display: block; width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }

/* pros and cons */
.article-proscons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.article-body .article-proscons__title { margin: 0 0 24px; padding: 0; font: 500 32px/1.25 'Inter', sans-serif; color: #111827; }
.article-body .article-proscons__title::before, .article-body .article-proscons__title::after { content: none; display: none; }
.article-body .article-proscons__list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.article-body .article-proscons__item { position: static; display: flex; flex-direction: column; gap: 40px; margin: 0; padding: 32px; border-radius: 16px; background: #f5f6fb; line-height: 1.56; list-style: none; }
.article-body .article-proscons__item::before { content: none; display: none; }
.article-proscons__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: #111827; }
.article-body .article-proscons__item p { margin: 0; font: 400 18px/1.56 'Inter', sans-serif; color: #111827; }

@media (max-width: 1100px) {
    .article-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
    .article-proscons { grid-template-columns: 1fr; gap: 32px; }
    .article-images--multi { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .article-features { grid-template-columns: 1fr; }
    .article-features__item { gap: 24px; }
    .article-body .article-proscons__title { font-size: 24px; margin-bottom: 16px; }
    .article-body .article-proscons__item { padding: 20px; gap: 24px; }
    .article-body .article-proscons__item p, .article-body .article-features__item p { font-size: 16px; }
    .article-images--single .article-images__item { aspect-ratio: 16 / 9; }
}

/* numbered cards: 3 per row */
.article-body .article-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.article-body .article-steps__item { position: static; display: flex; flex-direction: column; gap: 40px; margin: 0; padding: 32px; border-radius: 16px; background: #f5f6fb; line-height: 1.56; list-style: none; }
.article-body .article-steps__item::before { content: none; display: none; }
.article-steps__num { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #fff; font: 600 24px/1.33 'Inter', sans-serif; color: #111827; }
.article-body .article-steps__item p { margin: 0; font: 400 18px/1.56 'Inter', sans-serif; color: #111827; }
@media (max-width: 1100px) { .article-body .article-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
    .article-body .article-steps { grid-template-columns: 1fr; }
    .article-body .article-steps__item { padding: 20px; gap: 24px; }
    .article-steps__num { width: 56px; height: 56px; font-size: 20px; }
    .article-body .article-steps__item p { font-size: 16px; }
}

/* «Также может быть интересно»: секция главной в статье, отступ сверху как в макете (120px) */
.single-blog .home-blog { padding-top: calc(120 * var(--hu)); }