и
сделали бы
разметку невалидной. Отсюда span-ы с display:block — тот же приём,
что в карточках специалистов.
Для отката удалить всё до маркера «ARTICLES 2026 — конец».
========================================================================= */
.articles{
padding: 56px 0 0;
background: #FFFFFF;
}
.articles__container{
padding-bottom: 56px;
border-bottom: 1px solid #E9EFF6;
}
/* Глобальное h2{color:#0073aa} в теме перебивается явно, как в остальных блоках. */
.articles__title{
margin: 0 0 10px;
font-family: inherit;
font-size: clamp(24px, 1.9vw, 31px);
line-height: 1.22;
font-weight: 600;
color: #1B2A3D;
letter-spacing: -.01em;
text-align: left;
text-transform: none;
}
.articles__note{
max-width: 760px;
margin: 0 0 26px;
font-size: 15.5px;
line-height: 1.55;
color: #4F5D73;
}
.articles__title:last-child{ margin-bottom: 30px; }
.articles__grid{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.articles__item{
margin: 0;
padding: 0;
color: inherit; /* в теме есть глобальное li{color:#566ED0} */
list-style: none;
}
/* Глобальное a{display:inline-block;width:fit-content} в теме — ширину и
тип отображения задаём явно, иначе карточка сожмётся по содержимому. */
.articles__card{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border: 1px solid #E4EAF1;
border-radius: 14px;
background: #FFFFFF;
overflow: hidden;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.articles__card:hover{
transform: translateY(-2px);
border-color: #B9D4EC;
box-shadow: 0 8px 20px rgba(27, 42, 61, .12);
}
.articles__card:focus-visible{
outline: 3px solid #9CC9EE;
outline-offset: 2px;
}
.articles__thumb{
display: block;
aspect-ratio: 16 / 10;
background: #E9EFF6;
overflow: hidden;
}
.articles__img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.articles__body{
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 6px;
padding: 14px 16px 16px;
}
.articles__date{
font-size: 13px;
line-height: 1.3;
color: #4F5D73;
}
.articles__name{
display: block;
font-size: 16px;
line-height: 1.35;
font-weight: 600;
color: #1B2A3D;
}
.articles__card:hover .articles__name{ color: #2A72B0; }
.articles__more{ margin-top: 26px; }
.articles__more-link{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border: 1px solid #B9D4EC;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
line-height: 1.2;
color: #2A72B0;
text-decoration: none;
transition: background .18s ease, border-color .18s ease;
}
.articles__more-link:hover{ background: #F5F8FB; border-color: #2A72B0; }
.articles__more-link:focus-visible{ outline: 3px solid #9CC9EE; outline-offset: 2px; }
/* ----------------------------- адаптив ---------------------------------- */
/* Две колонки с 1023px, а не три: заголовки статей длинные, и в трети
ширины на планшете они уходят в пять-шесть строк, ломая высоту ряда. */
@media (max-width: 1023px){
.articles__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
.articles{ padding: 40px 0 0; }
.articles__container{ padding-bottom: 40px; }
.articles__name{ font-size: 15.5px; }
}
/* Одна колонка с 559px: при двух карточка уже 165px, а под картинкой
ещё дата, заголовок и анонс — читать нечего. */
@media (max-width: 559px){
.articles__grid{ grid-template-columns: minmax(0, 1fr); gap: 14px; }
/* В столбик картинка на всю ширину экрана перетягивает на себя всё
внимание — приземляем пропорцию. */
.articles__thumb{ aspect-ratio: 16 / 9; }
}
/* ====================== ARTICLES 2026 — конец ============================ */
/* =========================================================================
SEOTEXT 2026 — оформление блока SEO-текста под общую систему.
Только стили: ни одного слова текста и ни одного тега в post_content
не тронуто — переработка содержимого ждёт выгруз Search Console
(открытый вопрос 20).
Всё под .seotext2026: класс заведён специально для этого блока, потому
что .content — слишком общее имя и правила утекли бы на другие шаблоны.
Для отката удалить всё до маркера «SEOTEXT 2026 — конец».
========================================================================= */
.seotext2026{
padding: 56px 0;
background: #FFFFFF;
}
/* Ширина строки. На 1210px строка выходит около 160 знаков — глаз теряет
начало следующей при переносе. 880px дают примерно 100.
Колонка по центру, а не по левому краю: при выравнивании влево справа
оставалось 330px пустоты и блок читался как оборванный. Теперь пустота
симметрична, по 165px с каждой стороны. */
.seotext2026 .read-more-12{
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
/* Глобальное h2{color:#0073aa} (style.css:13) перебивается явно —
тот же приём, что в .inside__title и остальных блоках 2026. */
.seotext2026 h2{
margin: 34px 0 12px;
font-family: inherit;
font-size: clamp(21px, 1.5vw, 26px);
line-height: 1.25;
font-weight: 600;
color: #1B2A3D;
letter-spacing: -.01em;
text-align: left;
text-transform: none;
}
/* Первый заголовок стоит вплотную к границе секции — верхний отступ ему
не нужен, его даёт padding самой секции. */
.seotext2026 .read-more-12__visible > h2:first-child{ margin-top: 0; }
.seotext2026 h3{
margin: 24px 0 10px;
font-family: inherit;
font-size: 18px;
line-height: 1.3;
font-weight: 600;
color: #1B2A3D;
text-align: left;
text-transform: none;
}
.seotext2026 p,
.seotext2026 li{
font-size: 16px;
line-height: 1.62;
color: #243447;
}
.seotext2026 p{ margin: 0 0 14px; }
.seotext2026 ul,
.seotext2026 ol{ margin: 0 0 16px; padding-left: 22px; }
.seotext2026 li{ margin-bottom: 6px; color: #243447; } /* глобальное li{color:#566ED0} */
.seotext2026 a{
display: inline; /* в теме глобальное a{display:inline-block;width:fit-content} */
color: #2A72B0;
text-decoration: underline;
}
.seotext2026 a:hover{ color: #245F93; }
/* Таблица шире 880px не влезет — даём ей прокрутку внутри себя, чтобы
страница целиком не начала ездить вбок. */
.seotext2026 table{
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
border-collapse: collapse;
font-size: 15px;
}
.seotext2026 table td,
.seotext2026 table th{
padding: 9px 12px;
border: 1px solid #E4EAF1;
vertical-align: top;
}
.seotext2026 img{ max-width: 100%; height: auto; border-radius: 14px; }
/* Кнопка «Показать ещё». Была таблеткой в 50px радиуса цвета #4396D9 —
единственная такая на странице. Приводим к кнопкам 2026. */
.seotext2026 .read-more-12__button-wrap{
margin-top: 22px;
text-align: left; /* было по центру; у остальных блоков всё по левому краю */
}
.seotext2026 .read-more-12__btn{
/* Кнопка — это