/*!
 * ADEEB - brand portrait placement & polish
 * Scope: only images served from /assets/adeeb/brand-portraits/
 * Loaded site-wide after app.min.css. CSS-only; safe to remove for rollback.
 * Palette is inherited from the live theme variables
 *   --primary #005070  --secondary #002848  --accent #e0b060
 */

/* Base: every approved portrait fills its frame, faces biased to the upper third */
img[src*="/assets/adeeb/brand-portraits/"] {
    object-fit: cover;
    object-position: center 30%;
}

/* ---- Home hero ---- */
img[src$="site-home-hero-right.webp"],
img[src$="site-home-hero-left.webp"] {
    object-position: center 26%;
}

img[src$="site-home-hero-mobile.webp"] {
    object-position: center 18%;
}

/* ---- About / Expertise (tall portraits): keep face and hands in frame ---- */
img[src$="site-home-about-main.webp"],
img[src$="site-home-expertise-main.webp"] {
    object-position: center 16%;
}

img[src$="site-home-about-overlay-1.webp"],
img[src$="site-home-about-overlay-2.webp"],
img[src$="site-home-expertise-overlay.webp"] {
    object-position: center 22%;
}

/* ---- Achievements (portrait crop to match the 440x717 slot) ---- */
img[src*="site-home-achievements.webp"] {
    object-position: center 30%;
}

/* The side-image wrapper is an auto-width flex item with only a max-width,
   so it collapses to 0 width (and a lazy <img> never gets a box to load in).
   Give it an explicit width so the portrait shows and lazy-loading fires. */
.two-sided-information-images-and-cards-section__side-img {
    width: 100%;
}

/* ---- Courses floating portraits ---- */
img[src$="site-home-courses-floating-1.webp"],
img[src$="site-home-courses-floating-2.webp"] {
    object-position: center 26%;
}

/* ---- Course cards ---- */
img[src*="site-course-card-"] {
    object-position: center 28%;
}

/* ---- Page header banners ---- */
img[src$="site-courses-header.webp"],
img[src$="site-blog-header.webp"],
img[src$="site-products-header.webp"] {
    object-position: center 36%;
}

img[src$="site-blog-post-cover.webp"] {
    object-position: center 30%;
}

/* ---- Profile ---- */
img[src$="site-profile-cover.webp"] {
    object-position: center 30%;
}

img[src$="site-profile-avatar.webp"] {
    object-position: center 22%;
}

/* ---- Contact & social ---- */
img[src$="site-contact-portrait.webp"] {
    object-position: center 20%;
}

/* ---- Mobile tuning: keep faces centred on small viewports ---- */
@media (max-width: 575px) {
    img[src$="site-home-about-main.webp"],
    img[src$="site-home-expertise-main.webp"] {
        object-position: center 12%;
    }

    img[src$="site-courses-header.webp"],
    img[src$="site-blog-header.webp"],
    img[src$="site-products-header.webp"] {
        object-position: center 30%;
    }
}