/* Базовая адаптивная сетка страницы (опционально) */
:root {
  --gap: 16px;
  --item-min: 220px; /* минимальная ширина карточки/элемента */
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.5;
  color: #222;
  background: #fff;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gap);
}

header, footer {
  padding: 16px 0;
}

.brand__text {
  font-weight: 700;
  font-size: 20px;
}

/* Заголовок */
article h1 {
  font-size: 1.25rem;
  margin: 16px 0;
}

/* Горизонтальная лента */
.latest-list {
  display: grid;
  grid-auto-flow: column;          /* Строим колонками в одну строку */
  grid-auto-columns: max(45%, var(--item-min));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 8px 0;

  overflow-x: auto;
  overflow-y: hidden;

  -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
  overscroll-behavior-x: contain;    /* без «скачков» при достижении края */

  scroll-snap-type: x proximity;     /* мягкое прилипающее пролистывание */
  scrollbar-width: thin;             /* Firefox */
}

/* Полосы прокрутки — аккуратные (WebKit) */
.latest-list::-webkit-scrollbar {
  height: 8px;
}
.latest-list::-webkit-scrollbar-track {
  background: transparent;
}
.latest-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 4px;
}

/* Элемент списка */
.latest-list > li {
  scroll-snap-align: start; /* «прилипаем» по началу элемента */
  min-width: 0;             /* важно для text-overflow внутри */
}

/* Ссылка как «карточка» */
.latest-list a {
  display: block;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  color: inherit;
  text-decoration: none;

  /* Обрезка длинных заголовков в одну строку */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.latest-list a:hover,
.latest-list a:focus-visible {
  background: #fff;
  border-color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  outline: none;
}

/* Адаптация ширины «карточек» под экран */
@media (min-width: 480px) {
  .latest-list {
    grid-auto-columns: max(35%, var(--item-min));
  }
}
@media (min-width: 768px) {
  .latest-list {
    grid-auto-columns: max(28%, calc(var(--item-min) + 40px));
  }
}
@media (min-width: 1024px) {
  .latest-list {
    grid-auto-columns: max(22%, 280px);
  }
}


:root {
  --gap: 16px;
  --gap-lg: 20px;
  --block-bg: #fafafa;
  --block-border: #ececec;
  --radius: 12px;

  /* для горизонтальной ленты */
  --lane-item-min: 220px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #222;
  line-height: 1.6;
  background: #fff;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gap);
}

header, footer {
  padding: 16px 0;
}

.brand__link {
  color: inherit;
  text-decoration: none;
}
.brand__text {
  font-weight: 700;
  font-size: 20px;
}

/* Заголовки страницы */
article h1 {
  font-size: 1.5rem;
  margin: 16px 0 12px;
}
article h2 {
  font-size: 1.125rem;
  margin: 24px 0 10px;
  line-height: 1.3;
}

/* Визуальные блоки: от каждого h2 до следующего h2 (или конца article) */
article h2 {
  /* сам заголовок будет входной точкой блока */
  position: relative;
}

/* Оборачиваем H2+контент до следующего H2 в визуальную «карточку»
   Приём: добавляем декоративный фон через ::before у h2
   и задаём общие отступы для всех следующих соседей до следующего h2. */
article h2::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: -12px;
  right: -12px;
  top: -12px;
  bottom: calc(100% - 12px); /* изначально только за заголовком; расширим ниже */
  background: var(--block-bg);
  border: 1px solid var(--block-border);
  border-radius: var(--radius);
}

/* Все элементы после h2 до следующего h2 — часть блока:
   задаём им относительное позиционирование и отступы,
   а также расширяем фон ::before до низа последнего элемента. */
article h2,
article h2 ~ :not(h2) {
  position: relative;
  z-index: 1; /* поверх фонового ::before */
}

/* Внутренние отступы блока (вокруг h2 и его содержимого) */
article h2 {
  padding: 10px 12px 0;
}
article h2 ~ :not(h2) {
  margin: 0;
  padding: 6px 12px;
}

/* Вертикальные интервалы внутри блока: абзацы, списки, навигация */
article p + p,
article p + nav,
article nav + p,
article ul + p,
article p + ul {
  margin-top: 4px;
}

/* Внешний отступ между блоками (между h2-блоками) */
article h2 {
  margin-top: 22px; /* отступ сверху между блоками */
}
article h2:last-of-type {
  margin-bottom: 16px;
}

/* Растягиваем фон блока до низа его контента.
   Трюк: последний элемент перед следующим h2 создаёт нижнее поле у ::before. */
article h2::before {
  /* baseline уже задан выше; теперь гибко расширим: */
}
article h2:has(~ h2) {
  /* когда есть следующий h2 — целимся в элемент перед ним */
}
@supports(selector(:has(+ *))) {
  /* Если поддерживается :has (Chrome/Edge/Safari), аккуратно растянем фон */
  article h2:has(+ *)::before {
    bottom: auto; /* разрешим динамику */
  }
  /* Берём последний элемент в диапазоне до следующего h2
     и добавим ему нижний внутренний отступ, чтобы фон округлялся красиво */
  article h2:has(~ h2) ~ :not(h2):not(:has(~ h2)) {
    /* ничего — это слишком сложная форма; применим более простой способ ниже */
  }
  /* Проще: добавим нижний паддинг на контейнер через псевдохвост.
     Используем последний элемент перед следующим h2 с :has */
  article h2:has(~ h2) {
    /* на промежуточных блоках фон закончится до следующего h2 за счёт следующего правила */
  }
  /* При отсутствии следующего h2 (последний блок) фон тянется до конца article */
  article h2:last-of-type::before {
    bottom: -12px;
  }
}

/* Кросс-браузерно, без :has:
   Добавим «нижнюю кромку» блоку через отступ у ближайших элементов */
article h2 + * {
  margin-top: 6px;
}
article h2 + *:last-child,
article h2 + *:last-child *:last-child {
  /* защитный случай, если блок пустой — не требуется особая обработка */
}

/* Небольшая типографика внутри блоков */
article p {
  color: #333;
}
article ul {
  padding-left: 1.1em;
}
article nav.also {
  padding-top: 4px;
}

/* Горизонтальная лента для «Смотрите также» (.lat-list) */
.lat-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max(60%, var(--lane-item-min));
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 8px 0;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.lat-list::-webkit-scrollbar { height: 8px; }
.lat-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2);
  border-radius: 4px;
}
.lat-list > li {
  scroll-snap-align: start;
  min-width: 0;
}
.lat-list a {
  display: block;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lat-list a:hover,
.lat-list a:focus-visible {
  background: #fff;
  border-color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  outline: none;
}
@media (min-width: 480px) {
  .lat-list { grid-auto-columns: max(45%, var(--lane-item-min)); }
}
@media (min-width: 768px) {
  .lat-list { grid-auto-columns: max(30%, calc(var(--lane-item-min) + 40px)); }
}
@media (min-width: 1024px) {
  .lat-list { grid-auto-columns: max(24%, 280px); }
}

/* Адаптивные «воздух» и радиусы на больших экранах */
@media (min-width: 768px) {
  :root { --gap: 18px; --radius: 14px; }
  article h2 { padding-top: 12px; }
}

:root{
  --brand-fg: #155e75;   /* основной цвет текста (тихий бирюзовый) */
  --brand-ac: #22d3ee;   /* акцентная подсветка (cyan) */
  --brand-bg: #ecfeff;   /* нежный фоновой блик */
  --brand-shadow: rgba(0,0,0,.12);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  position: relative;
  isolation: isolate; /* чтобы внутренние тени не проливали наружу */
}

/* фоновая «плашка-блик» */
.brand::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 140% at 0% 100%, rgba(34,211,238,.10) 0%, rgba(34,211,238,0) 60%),
    radial-gradient(120% 120% at 100% 0%, rgba(20,184,166,.10) 0%, rgba(20,184,166,0) 55%),
    var(--brand-bg);
  border: 1px solid rgba(34,211,238,.25);
  box-shadow:
    0 6px 18px var(--brand-shadow),
    inset 0 0 0 1px rgba(255,255,255,.6);
  border-radius: 14px;
  z-index: -1;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* иконка-цветок из CSS (без картинок) */
.brand__icon {
  width: 28px;
  height: 28px;
  position: relative;
  flex: 0 0 28px;
  filter: drop-shadow(0 2px 6px rgba(34,211,238,.35));
}
.brand__icon::before,
.brand__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--brand-ac) 0%, rgba(34,211,238,.0) 60%);
  opacity: .9;
}
.brand__icon::after {
  inset: 6px;
  background:
    radial-gradient(circle at 60% 40%, #0ea5a5 0%, rgba(14,165,165,0) 70%);
  opacity: .7;
}
/* лепестки */
.brand__icon span {
  position: absolute;
  inset: 0;
  display: block;
}
.brand__icon span::before,
.brand__icon span::after {
  content: "";
  position: absolute;
  width: 56%;
  height: 56%;
  left: 22%;
  top: -6%;
  background: radial-gradient(65% 65% at 50% 50%, rgba(34,211,238,.9), rgba(34,211,238,0) 70%);
  border-radius: 60% 40% 60% 40%;
  transform-origin: 50% 100%;
}
.brand__icon span::after {
  top: auto;
  bottom: -6%;
  transform: rotate(180deg);
}
.brand__icon span + span::before,
.brand__icon span + span::after {
  transform: rotate(90deg);
}

/* текст логотипа */
.brand__text {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .3px;
  color: var(--brand-fg);
  text-shadow:
    0 1px 0 rgba(255,255,255,.9),
    0 2px 8px rgba(34,211,238,.35);
  white-space: nowrap;
  line-height: 1;
}

/* ссылка/не ссылка — единый вид */
.brand__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* ховер/фокус эффекты */
.brand:hover::before,
.brand:has(.brand__link:hover)::before,
.brand:has(.brand__link:focus-visible)::before {
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.7);
  border-color: rgba(34,211,238,.45);
}
.brand:has(.brand__link:focus-visible) { outline: none; }
.brand .brand__link:focus-visible {
  outline: 2px solid rgba(34,211,238,.6);
  outline-offset: 3px;
  border-radius: 10px;
}

/* легкая анимация «дыхания» для иконки */
@media (prefers-reduced-motion: no-preference) {
  .brand__icon { animation: breathe 3.6s ease-in-out infinite; }
  @keyframes breathe {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 2px 6px rgba(34,211,238,.35)); }
    50% { transform: scale(1.04); filter: drop-shadow(0 4px 10px rgba(34,211,238,.45)); }
  }
}

/* адаптив */
@media (min-width: 768px){
  .brand { padding: 10px 14px; border-radius: 16px; }
  .brand::before { border-radius: 16px; }
  .brand__text { font-size: 24px; letter-spacing: .4px; }
  .brand__icon { width: 30px; height: 30px; flex-basis: 30px; }
}

/* Картинки не шире контента и не выходят за пределы блока */
article img {
  display: block;          /* убирает «лишние» зазоры как у inline-элементов */
  max-width: 100%;         /* ограничение по ширине контейнера */
  height: auto;            /* сохраняет пропорции */
  margin: 8px 0;           /* базовые вертикальные отступы */
  border-radius: 8px;      /* опционально: слегка скруглим */
}

/* Если у картинок задан фиксированный width/height в разметке — пусть это не ломает адаптив */
article img[width] { width: auto; }   /* игнорируем жёсткий width из атрибутов */
article img[height] { height: auto; } /* и жёсткий height */

/* Для очень широких элементов внутри article (подстраховка) */
article, article * {
  overflow-wrap: anywhere;
}

/* 1. Глобальное ограничение ширины для всех элементов внутри статьи */
article > * {
  max-width: 100%;
  box-sizing: border-box;
}

/* 2. Исправление для картинок, видео и iframe */
article img, 
article video, 
article iframe {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
}

/* 3. Ограничение для списков (чтобы маркеры не уходили за край) */
article ul, 
article ol {
  padding-left: 1.5rem; /* обеспечиваем место для точек/цифр */
  margin-right: 0;
  overflow-x: hidden; /* предотвращаем горизонтальный скролл от длинных строк */
}

/* 4. Безопасный перенос длинных слов (ссылки, технический текст) */
article p, 
article li, 
article h1, 
article h2 {
  overflow-wrap: break-word; /* переносит длинные слова */
  word-wrap: break-word;
  hyphens: auto;             /* добавляет дефисы при переносе (где поддерживается) */
}

/* 5. Важное исправление для ваших фоновых карточек (h2::before) */
/* Чтобы фон не вылезал за границы .wrap, убедитесь, что у article или h2 есть четкие границы */
article {
  width: 100%;
  overflow: hidden; /* обрезает всё, что пытается вылезти за пределы статьи */
  padding-bottom: 20px; /* запас снизу */
}

/* 6. Адаптивность для таблиц (если появятся) */
article table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}