/*
 * banner-hero.css
 * Shared hero banner styles for all pages with .banner_man2.
 * Loaded via index1.php and index2.php so it applies to every banner page.
 *
 * Desktop (≥ 992px): hero image absolutely positioned at top-right corner of
 *   the banner, touching both the top and right edges. Capped at 42% width
 *   (= col-lg-5 space) so the image never overlaps the text column.
 * All sizes: banner text guaranteed white.
 */

/* Clip overflow, provide positioning context for absolute image */
.banner_man2 {
    overflow: hidden;
    position: relative;
}

/* ============================================================
   DESKTOP (≥ 992px) — image at top-right corner
   ============================================================ */
@media (min-width: 992px) {

    /* Row fills full banner height so vertically-centred text has room */
    .banner_man2 .container > .row {
        min-height: 520px;
    }

    /* Remove Bootstrap y-gutter gap at top of image column */
    .banner_man2 .hero-img {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-right: 0 !important;
    }

    /* ── Old structure: .hero-img > .hero2 > img ── */
    .banner_man2 .hero-img .hero2 {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        /* cap at col-lg-5 width (41.67%) so image never covers the text */
        width: 42% !important;
        max-width: 42% !important;
        height: auto !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
    }

    .banner_man2 .hero-img .hero2 img,
    .banner_man2 .hero-img img.hero2 {
        height: 100% !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        display: block !important;
        flex-shrink: 0 !important;
    }

    /* ── New structure: .hero-img > .hero2-wrapper > img.hero2-img ── */
    .banner_man2 .hero-img .hero2-wrapper {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 42% !important;
        max-width: 42% !important;
        height: auto !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
    }

    .banner_man2 .hero-img .hero2-img {
        height: 100% !important;
        width: auto !important;
        max-width: none !important;
        max-height: none !important;
        display: block !important;
        flex-shrink: 0 !important;
    }
}

/* ============================================================
   WHITE TEXT — all .huruf_banner / .huruf_banner_contact variants
   ============================================================ */
.banner_man2 .huruf_banner h1,
.banner_man2 .huruf_banner h2,
.banner_man2 .huruf_banner h3,
.banner_man2 .huruf_banner h4,
.banner_man2 .huruf_banner p,
.banner_man2 .huruf_banner_contact h1,
.banner_man2 .huruf_banner_contact h2,
.banner_man2 .huruf_banner_contact h3,
.banner_man2 .huruf_banner_contact p {
    color: #ffffff;
}