/* ==========================================================================
   CRDGAME — MATERIAL STABILITY FIX
   version: 20260923_3

   V3:
   - текст -> одиночное изображение: 8px;
   - изображение -> изображение: 6px;
   - последнее изображение -> следующий H2: 12px;
   - усилены селекторы текста перед media, чтобы работать и при дополнительной
     uCoz-обёртке между <p> и .news-image-wrap;
   - внутренние uCoz-обёртки не получают собственные вертикальные margin;
   - gallery / pair / figure / overlay / cards / crd-vulkk-media-text
     сохраняют собственную геометрию.
   ========================================================================== */

:root {
  --crd-material-text-media-gap: 8px;
  --crd-material-media-media-gap: 6px;
  --crd-material-media-bottom-gap: 10px;
  --crd-material-media-heading-gap: 12px;
}


/* ==========================================================================
   1. ВНЕШНЯЯ ОБОЛОЧКА ОДИНОЧНОГО UCOZ-ИЗОБРАЖЕНИЯ

   Реальная структура часто такая:

   .about-section
     > .crd-article-img
       > .news-image-wrap
         > .crd-article-img
           > a
             > img

   Вертикальный ритм должен быть только у САМОЙ ВНЕШНЕЙ оболочки.
   ========================================================================== */

.pa-entry-content
.about-section
> .crd-article-img:has(> .news-image-wrap) {
  margin-top: var(--crd-material-text-media-gap) !important;
  margin-bottom: var(--crd-material-media-bottom-gap) !important;
}

.pa-entry-content
.about-section
> .news-image-wrap {
  margin-top: var(--crd-material-text-media-gap) !important;
  margin-bottom: var(--crd-material-media-bottom-gap) !important;
}


/* ==========================================================================
   2. ВНУТРЕННИЕ UCOZ-ОБЁРТКИ — БЕЗ ВЕРТИКАЛЬНЫХ ОТСТУПОВ
   ========================================================================== */

.pa-entry-content
.about-section
> .crd-article-img
> .news-image-wrap,

.pa-entry-content
.about-section
> .crd-article-img
> .news-image-wrap
> .crd-article-img {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* Owner JS добавляет этот класс на .news-image-wrap.
   Старое правило 30px/32px не должно возвращать большой отступ. */

.pa-entry-content
.about-section
> .crd-article-img
> .news-image-wrap.crd-vk-standalone-media {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* Если .news-image-wrap реально является внешним элементом секции,
   owner-класс получает компактную геометрию. */

.pa-entry-content
.about-section
> .news-image-wrap.crd-vk-standalone-media,
.pa-entry-content
> .news-image-wrap.crd-vk-standalone-media {
  margin-top: var(--crd-material-text-media-gap) !important;
  margin-bottom: var(--crd-material-media-bottom-gap) !important;
}


/* ==========================================================================
   3. ТЕКСТ -> ИЗОБРАЖЕНИЕ

   В основном material CSS у абзаца есть margin-bottom:1.5em.
   На скрине именно он оставлял большую пустоту над первой картинкой.

   Обнуляем нижний margin ТОЛЬКО если следующим содержательным блоком
   идёт изображение. Сам зазор затем задаётся margin-top media = 8px.
   ========================================================================== */

/* Прямая структура. */
.pa-entry-content
.about-section
> p:has(+ .crd-article-img:has(.news-image-wrap)),

.pa-entry-content
.about-section
> .about-paragraph:has(+ .crd-article-img:has(.news-image-wrap)),

.pa-entry-content
.about-section
> p:has(+ .news-image-wrap),

.pa-entry-content
.about-section
> .about-paragraph:has(+ .news-image-wrap) {
  margin-bottom: 0 !important;
}


/* Более общий uCoz-вариант с дополнительной оболочкой. */
.pa-entry-content
.about-section
> p:has(+ * .news-image-wrap),

.pa-entry-content
.about-section
> .about-paragraph:has(+ * .news-image-wrap),

.pa-entry-content
.about-section
> p:has(+ * .crd-article-img img),

.pa-entry-content
.about-section
> .about-paragraph:has(+ * .crd-article-img img) {
  margin-bottom: 0 !important;
}


/* Гарантированный верхний зазор после текста. */
.pa-entry-content
.about-section
> p
+ .crd-article-img:has(.news-image-wrap),

.pa-entry-content
.about-section
> .about-paragraph
+ .crd-article-img:has(.news-image-wrap),

.pa-entry-content
.about-section
> p
+ .news-image-wrap,

.pa-entry-content
.about-section
> .about-paragraph
+ .news-image-wrap {
  margin-top: var(--crd-material-text-media-gap) !important;
}


/* ==========================================================================
   4. ИЗОБРАЖЕНИЕ -> ИЗОБРАЖЕНИЕ

   Ровно 6px между соседними standalone-media:
   у первого bottom = 0, у второго top = 6px.
   ========================================================================== */

/* .crd-article-img -> .crd-article-img */
.pa-entry-content
.about-section
> .crd-article-img:has(> .news-image-wrap):has(+ .crd-article-img:has(> .news-image-wrap)) {
  margin-bottom: 0 !important;
}

.pa-entry-content
.about-section
> .crd-article-img:has(> .news-image-wrap)
+ .crd-article-img:has(> .news-image-wrap) {
  margin-top: var(--crd-material-media-media-gap) !important;
}


/* .news-image-wrap -> .news-image-wrap */
.pa-entry-content
.about-section
> .news-image-wrap:has(+ .news-image-wrap) {
  margin-bottom: 0 !important;
}

.pa-entry-content
.about-section
> .news-image-wrap
+ .news-image-wrap {
  margin-top: var(--crd-material-media-media-gap) !important;
}


/* Смешанная структура. */
.pa-entry-content
.about-section
> .crd-article-img:has(> .news-image-wrap):has(+ .news-image-wrap),

.pa-entry-content
.about-section
> .news-image-wrap:has(+ .crd-article-img:has(> .news-image-wrap)) {
  margin-bottom: 0 !important;
}

.pa-entry-content
.about-section
> .crd-article-img:has(> .news-image-wrap)
+ .news-image-wrap,

.pa-entry-content
.about-section
> .news-image-wrap
+ .crd-article-img:has(> .news-image-wrap) {
  margin-top: var(--crd-material-media-media-gap) !important;
}


/* ==========================================================================
   5. ПОСЛЕДНЕЕ ИЗОБРАЖЕНИЕ -> СЛЕДУЮЩИЙ H2

   Основной material CSS даёт H2 margin-top:64px.
   После media этот отступ уменьшаем до 12px.
   ========================================================================== */

/* H2 в той же секции. */
.pa-entry-content
.about-section
> .crd-article-img:has(> .news-image-wrap)
+ h2,

.pa-entry-content
.about-section
> .crd-article-img:has(> .news-image-wrap)
+ .about-section-title,

.pa-entry-content
.about-section
> .news-image-wrap
+ h2,

.pa-entry-content
.about-section
> .news-image-wrap
+ .about-section-title {
  margin-top: var(--crd-material-media-heading-gap) !important;
}


/* H2 в следующей .about-section. */
.pa-entry-content
.about-section:has(> .crd-article-img:last-child > .news-image-wrap)
+ .about-section
> h2:first-child,

.pa-entry-content
.about-section:has(> .crd-article-img:last-child > .news-image-wrap)
+ .about-section
> .about-section-title:first-child,

.pa-entry-content
.about-section:has(> .news-image-wrap:last-child)
+ .about-section
> h2:first-child,

.pa-entry-content
.about-section:has(> .news-image-wrap:last-child)
+ .about-section
> .about-section-title:first-child {
  margin-top: var(--crd-material-media-heading-gap) !important;
}


/* ==========================================================================
   6. COMPOSITE MEDIA

   Галереи, пары, figure/overlay, item cards и armor grid имеют собственный
   ритм. Standalone-правила внутрь не переносим.
   ========================================================================== */

.pa-entry-content .crd-media-gallery .news-image-wrap,
.pa-entry-content .crd-image-pair .news-image-wrap,
.pa-entry-content .crd-item-table .news-image-wrap,
.pa-entry-content .crd-item-card .news-image-wrap,
.pa-entry-content .cd-armor-grid .news-image-wrap,
.pa-entry-content .cd-wide-card .news-image-wrap,
.pa-entry-content figure .news-image-wrap,
.pa-entry-content .crd-image-overlay .news-image-wrap,

.pa-entry-content .crd-media-gallery .crd-article-img,
.pa-entry-content .crd-image-pair .crd-article-img,
.pa-entry-content .crd-item-table .crd-article-img,
.pa-entry-content .crd-item-card .crd-article-img,
.pa-entry-content .cd-armor-grid .crd-article-img,
.pa-entry-content .cd-wide-card .crd-article-img,
.pa-entry-content figure .crd-article-img,
.pa-entry-content .crd-image-overlay .crd-article-img {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ==========================================================================
   7. VULKK IMAGE + TEXT

   HTML не меняем. Внутри figure standalone spacing запрещён.
   ========================================================================== */

.pa-entry-content .crd-vulkk-media-text__media,
.pa-entry-content .crd-vulkk-media-text__figure,
.pa-entry-content .crd-vulkk-media-text__figure .news-image-wrap,
.pa-entry-content .crd-vulkk-media-text__figure .crd-article-img {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* ==========================================================================
   8. БЕЗОПАСНАЯ ГЕОМЕТРИЯ ИЗОБРАЖЕНИЙ
   ========================================================================== */

.pa-entry-content .news-image-wrap img,
.pa-entry-content .crd-article-img img {
  display: block;
  max-width: 100%;
  height: auto;
}