/* ============================================================
   ЕДИНЫЙ КОМПОНЕНТ КАРТИНОК БЛОГА (.okna-blog-img)
   Одна рамка для ВСЕХ картинок: hero, в тексте, обложка карточки.

   ПРИЧИНА бывшей пустоты (Э2): рамка держала пропорцию через aspect-ratio,
   а <img> внутри не дотягивался до её высоты (percentage-height и aspect-ratio
   НА самом <img> + width:100% давали высоту ≈ ширина×4/9 → img ложился на ~2/3,
   снизу просвечивал фон рамки).

   ФИКС: картинки генерятся 3:2 (gpt-image 1536×1024) — для hero и тела показываем
   их в НАТУРАЛЬНОМ 3:2 (width:100%; height:auto), без aspect-ratio/object-fit:
   img сам задаёт высоту рамки → пустот нет, надёжно с первой отрисовки.
   Обложку карточки кадрируем 3:2→4:3 надёжным padding-hack + object-fit:cover.
   ============================================================ */
.okna-blog-img{ margin:24px 0; }
.okna-blog-img__frame{
  display:block; width:100%; overflow:hidden;
  border-radius:14px; background:#eef3fc;
}
.okna-blog-img--hero .okna-blog-img__frame{ border-radius:18px; }
.okna-blog-img__cap{ margin:8px 2px 0; font-size:13px; line-height:1.45; color:#6b7280; }

/* hero статьи + картинки в тексте — натуральное 3:2, без пустот */
.okna-blog-hero__img{ margin:0; overflow:hidden; border-radius:18px; background:#eef3fc; }
.okna-blog-hero__img > img,
.okna-blog-img__frame > img{
  display:block; width:100%; height:auto; max-height:none;
}

/* обложка карточки листинга — кроп 3:2 через padding-hack: высота рамки от
   padding-bottom (определённая сразу, не зависит от aspect-ratio/загрузки),
   img абсолютно заполняет её — height:100% резолвится корректно с первой
   отрисовки (в отличие от aspect-ratio-контейнера, дававшего ⅔-баг). */
.okna-bcard__img{ position:relative; height:0; padding-bottom:66.667%; overflow:hidden; background:#eef3fc; } /* 3:2 */
.okna-bcard__img > img{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; max-height:none !important;
  object-fit:cover !important; display:block !important;
}
.okna-bcard__img--ph svg{ position:absolute; inset:0; margin:auto; }

.okna-st-body .okna-blog-img img{ max-width:none; }

@media (max-width:600px){
  .okna-blog-img{ margin:18px 0; }   /* мобайл: та же натуральная пропорция, на всю ширину колонки */
}