/* ═══════════════════════════════════════════════════════════════════════
   ROSBOTANIC — blog image fix (2026-07-14)
   Проблема: разные пропорции фото → белые полосы (letterbox) в квадратном
   контейнере сайдбара + отсутствие object-fit → искажение формы.
   Решение: aspect-ratio + object-fit: cover — фото заполняет контейнер
   с центральной обрезкой без полос.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Сайдбар «Последние статьи» / «Рекомендуемые» ── */
#column-left .latest-blogs .blog-image,
#column-right .latest-blogs .blog-image,
#column-left .blog-featured .blog-image,
#column-right .blog-featured .blog-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  flex-shrink: 0;
}

#column-left .latest-blogs .blog-image img,
#column-right .latest-blogs .blog-image img,
#column-left .blog-featured .blog-image img,
#column-right .blog-featured .blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ── Основной блок (главная страница, content_bottom) — 4:3 landscape ── */
.latest-blogs:not(#column-left *):not(#column-right *) .blog-list .blog-image,
.blog-featured:not(#column-left *):not(#column-right *) .blog-list .blog-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.latest-blogs .blog-list .blog-image img,
.blog-featured .blog-list .blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ── Hero-фото на странице самой статьи (blog/article.twig) ── */
.blog-article-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center center;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

/* ── Category page (list of articles) ── */
.blog-list-wrapper .blog-list .blog-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.blog-list-wrapper .blog-list .blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}