![]()
------- */
.blog-page .article-prose > p:has(> img) {
display: block;
overflow: hidden;
margin-top: calc(var(--mar-s) - var(--mar-16));
border-radius: 12px;
}
.blog-page .article-prose > p:has(> img) img {
display: block;
width: 100%;
border-radius: 12px;
object-fit: cover;
}
/* --- 2. Маркированный список -> строки с зелёной галочкой --------- */
/* Точка абсолютом, а не flex-элементом: иначе
и текст
после него разъезжаются в разные строки (та же грабля, что в .bss-list). */
.blog-page .article-prose > ul:not([class]) > li {
position: relative;
display: block;
margin-left: 0;
padding-left: 26px;
color: #2c2c2c;
font-size: 16px;
}
.blog-page .article-prose > ul:not([class]) > li::before {
content: "";
position: absolute;
top: 4px;
left: 0;
width: 16px;
height: 16px;
transform: none; /* глобальный `section ul:not([class])>li:before` сдвигает на -18px */
background: var(--nature-green);
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M6.3668%2010.1L12.0168%204.45C12.1501%204.31667%2012.3057%204.25%2012.4835%204.25C12.6612%204.25%2012.8168%204.31667%2012.9501%204.45C13.0835%204.58333%2013.1501%204.74178%2013.1501%204.92533C13.1501%205.10889%2013.0835%205.26711%2012.9501%205.4L6.83347%2011.5333C6.70013%2011.6667%206.54458%2011.7333%206.3668%2011.7333C6.18902%2011.7333%206.03347%2011.6667%205.90013%2011.5333L3.03347%208.66667C2.90013%208.53333%202.83613%208.37511%202.84147%208.192C2.8468%208.00889%202.91635%207.85044%203.05013%207.71667C3.18391%207.58289%203.34235%207.51622%203.52547%207.51667C3.70858%207.51711%203.8668%207.58378%204.00013%207.71667L6.3668%2010.1Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M13.0501%204.92578C13.0501%204.76955%2012.9944%204.63566%2012.8792%204.52051C12.7635%204.40487%2012.6331%204.34968%2012.4837%204.34961C12.3342%204.34961%2012.2031%204.40467%2012.0873%204.52051L6.43784%2010.1709L6.36655%2010.2412L6.29624%2010.1709L3.92905%207.78711C3.81391%207.67256%203.68047%207.61659%203.52475%207.61621C3.36942%207.61595%203.236%207.67156%203.12045%207.78711C3.0041%207.90349%202.94631%208.03864%202.94174%208.19531C2.93734%208.34971%202.98964%208.48136%203.10385%208.5957L5.97104%2011.4629C6.08676%2011.5785%206.21723%2011.6337%206.36655%2011.6338C6.51607%2011.6338%206.64719%2011.5787%206.76303%2011.4629L12.8792%205.3291C12.9942%205.21455%2013.05%205.08181%2013.0501%204.92578ZM13.2503%204.92578C13.2503%205.0838%2013.2063%205.22642%2013.1205%205.35156L13.0208%205.4707L6.90463%2011.6035C6.75381%2011.7543%206.57258%2011.833%206.36655%2011.833C6.16073%2011.8329%205.98016%2011.7551%205.82944%2011.6045L2.96323%208.7373C2.81116%208.58523%202.73548%208.40083%202.74155%208.18945C2.74765%207.97993%202.82867%207.79667%202.97983%207.64551C3.13164%207.4939%203.31524%207.41648%203.52573%207.41699C3.73593%207.41751%203.91926%207.49472%204.07065%207.64551L6.36655%209.95801L11.9457%204.37891C12.0965%204.22808%2012.2777%204.15039%2012.4837%204.15039C12.6896%204.15046%2012.8701%204.22827%2013.0208%204.37891C13.1724%204.53042%2013.2503%204.7149%2013.2503%204.92578Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M6.3668%2010.1L12.0168%204.45C12.1501%204.31667%2012.3057%204.25%2012.4835%204.25C12.6612%204.25%2012.8168%204.31667%2012.9501%204.45C13.0835%204.58333%2013.1501%204.74178%2013.1501%204.92533C13.1501%205.10889%2013.0835%205.26711%2012.9501%205.4L6.83347%2011.5333C6.70013%2011.6667%206.54458%2011.7333%206.3668%2011.7333C6.18902%2011.7333%206.03347%2011.6667%205.90013%2011.5333L3.03347%208.66667C2.90013%208.53333%202.83613%208.37511%202.84147%208.192C2.8468%208.00889%202.91635%207.85044%203.05013%207.71667C3.18391%207.58289%203.34235%207.51622%203.52547%207.51667C3.70858%207.51711%203.8668%207.58378%204.00013%207.71667L6.3668%2010.1Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M13.0501%204.92578C13.0501%204.76955%2012.9944%204.63566%2012.8792%204.52051C12.7635%204.40487%2012.6331%204.34968%2012.4837%204.34961C12.3342%204.34961%2012.2031%204.40467%2012.0873%204.52051L6.43784%2010.1709L6.36655%2010.2412L6.29624%2010.1709L3.92905%207.78711C3.81391%207.67256%203.68047%207.61659%203.52475%207.61621C3.36942%207.61595%203.236%207.67156%203.12045%207.78711C3.0041%207.90349%202.94631%208.03864%202.94174%208.19531C2.93734%208.34971%202.98964%208.48136%203.10385%208.5957L5.97104%2011.4629C6.08676%2011.5785%206.21723%2011.6337%206.36655%2011.6338C6.51607%2011.6338%206.64719%2011.5787%206.76303%2011.4629L12.8792%205.3291C12.9942%205.21455%2013.05%205.08181%2013.0501%204.92578ZM13.2503%204.92578C13.2503%205.0838%2013.2063%205.22642%2013.1205%205.35156L13.0208%205.4707L6.90463%2011.6035C6.75381%2011.7543%206.57258%2011.833%206.36655%2011.833C6.16073%2011.8329%205.98016%2011.7551%205.82944%2011.6045L2.96323%208.7373C2.81116%208.58523%202.73548%208.40083%202.74155%208.18945C2.74765%207.97993%202.82867%207.79667%202.97983%207.64551C3.13164%207.4939%203.31524%207.41648%203.52573%207.41699C3.73593%207.41751%203.91926%207.49472%204.07065%207.64551L6.36655%209.95801L11.9457%204.37891C12.0965%204.22808%2012.2777%204.15039%2012.4837%204.15039C12.6896%204.15046%2012.8701%204.22827%2013.0208%204.37891C13.1724%204.53042%2013.2503%204.7149%2013.2503%204.92578Z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}
/* --- 3. Нумерованный список -> карточки 01 / 02 / 03 -------------- */
.blog-page .article-prose > ol:not([class]) {
counter-reset: card;
gap: var(--mar-s);
}
.blog-page .article-prose > ol:not([class]) > li {
counter-increment: card;
position: relative;
display: block;
color: #2c2c2c;
/* margin-left:44px ставит глобальный `ol li` с !important — не воюем, переиспользуем */
}
.blog-page .article-prose > ol:not([class]) > li::before {
content: counter(card, decimal-leading-zero);
position: absolute;
top: -2px;
left: -44px;
width: auto;
height: auto;
/* глобальный `ol li:before` рисует зелёный кружок 32px — гасим, иначе цифра тонет в нём */
background: none;
border-radius: 0;
color: var(--nature-green);
font-family: var(--font-heading);
font-size: 24px;
font-weight: 500;
line-height: 1.3;
}
.blog-page .article-prose > ol:not([class]) > li::after { content: none; }
.blog-page .article-prose > ol:not([class]) > li > strong {
display: block;
margin-bottom: 4px;
color: #050505;
font-family: var(--font-heading);
font-size: 18px;
font-weight: 500;
}
/* --- 4. Таблица --------------------------------------------------- */
/* Значения взяты из .cmp-table в blog.css — там та же таблица, но собранная
гридом из div-ов. md() отдаёт настоящий , поэтому переносим токены:
рамка, радиус, тёмная шапка и первая колонка, чередование строк, 80px
высоты, padding 10/32, 16px/600.
Обёртку .cmp-table-md ставит blog_post.twig фильтром replace: overflow
не применяется к display:table, без обёртки скролла на мобилке не будет,
и таблица просто рвёт вёрстку.
В .article-prose фоновый цвет текста БЕЛЫЙ (см. шапку файла) — ячейки
красим явно. */
/* .article-body и .article-prose — flex-элементы, у них min-width:auto, поэтому
они раздуваются под ширину таблицы и горизонтально скроллится ВСЯ страница
вместо таблицы. Разрешаем сжатие по всей цепочке до обёртки.
Без таблицы правило ничего не меняет: эти блоки и так не шире контейнера. */
.blog-page .article-body,
.blog-page .article-prose,
.blog-page .article-prose .cmp-table-md {
min-width: 0;
max-width: 100%;
}
.blog-page .article-prose .cmp-table-md {
max-width: 100%; /* иначе обёртка раздувается под таблицу и скроллится вся страница */
margin-top: calc(var(--mar-s) - var(--mar-16));
overflow-x: auto;
border: 1px solid #e0e0e0;
border-radius: 12px;
-webkit-overflow-scrolling: touch;
}
.blog-page .article-prose .cmp-table-md table {
width: 100%;
min-width: 600px; /* иначе на узком экране колонки схлопываются в кашу вместо скролла */
border-collapse: collapse;
}
.blog-page .article-prose .cmp-table-md th,
.blog-page .article-prose .cmp-table-md td {
height: 80px;
padding: 10px 32px;
color: #2c2c2c;
font-size: 16px;
font-weight: 600;
text-align: center;
vertical-align: middle;
}
.blog-page .article-prose .cmp-table-md thead th,
.blog-page .article-prose .cmp-table-md td:first-child {
background: #2c2c2c; /* .cmp-table__cell--head / --featured */
color: #fff;
}
.blog-page .article-prose .cmp-table-md tbody tr:nth-child(2n) td:not(:first-child) {
background: #f9f8f4; /* .cmp-table__cell--alt */
}
.blog-page .article-prose .cmp-table-md td:empty::after {
content: "\2014";
color: #c4c4c4;
}
@media (max-width: 768px) {
.blog-page .article-prose .cmp-table-md th,
.blog-page .article-prose .cmp-table-md td {
padding: 10px 12px; /* как в .cmp-table__cell на 768 */
}
}
/* --- 5. Мелочи, которых у md() тоже нет --------------------------- */
.blog-page .article-prose > blockquote {
margin: calc(var(--mar-s) - var(--mar-16)) 0 0;
padding: 4px 0 4px 20px;
border-left: 3px solid var(--nature-green);
color: #191b23;
font-size: 18px;
}
.blog-page .article-prose > blockquote p { margin: 0 !important; }
.blog-page .article-prose a { color: var(--nature-green); text-decoration: underline; }