/* ============================================================
   LAYER OVERRIDE: Foto Artikel Homepage Square 1:1 + Tidak Di-Crop
   Berlaku GLOBAL untuk semua website (semua theme home).
   Kata kunci: bungkus foto artikel dibuat persegi 1:1, foto tampil
   utuh (object-fit: contain). Bila artikel tidak punya foto, kotak
   kosong menampilkan LOGO WEBSITE (via CSS variable --wa-artikel-ph-logo
   yang di-set inline oleh includes/layout/homepage_articles.php).

   File dimuat PALING AKHIR (setelah theme CSS) lewat homepage_head.php;
   memakai `!important` agar menang atas gaya theme mana pun.

   Cakupan section artikel:
     - #artikel-terbaru .homepage-article-thumb   (semua theme standar)
     - #artikel .zb-artikel-img-wrap              (zatra)
     - .ubj-articles .ubj-article-media           (ubjfoods)
     - body.theme-homepage-rokkafinest .rf-recipe-card__img (rokkafinest)
   ============================================================ */

/* 1) Bungkus foto artikel → persegi 1:1 */
#artikel-terbaru .homepage-article-thumb,
#artikel .zb-artikel-img-wrap,
.ubj-articles .ubj-article-media,
body.theme-homepage-rokkafinest .rf-recipe-card__img {
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    background: var(--linen-dk, #EFE8E2) !important;
}

/* 2) Foto artikel → utuh, tidak di-crop, tengah */
#artikel-terbaru .homepage-article-thumb img,
#artikel .zb-artikel-img-wrap img,
.ubj-articles .ubj-article-media img,
body.theme-homepage-rokkafinest .rf-recipe-card__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* 3) Placeholder artikel (tanpa foto) → logo website, contain, tengah.
      Jika logo tidak tersedia, back to background lembut default. */
#artikel-terbaru .homepage-article-thumb-ph {
    background-image: var(--wa-artikel-ph-logo, none) !important;
    background-size: 40% auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 3b) Placeholder artikel zatra → logo website (fallback emoji oleh PHP
      ketika logo tidak ada; var di-set inline di homepage_zatra.php) */
#artikel .zb-artikel-img-placeholder {
    background-image: var(--zb-artikel-ph-logo, none) !important;
    background-size: 40% auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}