/* About Ògèrè Rẹ́mọ v2 refinement
 *
 * Scope discipline:
 * - page ID 20530 only
 * - retains the Build About page v1 Elementor/eGovenz structure
 * - does not restyle or replace the site header, menu or footer
 */

/* Remove the residual white gap above the native eGovenz page-title hero. */
body.page-id-20530 .site-content,
body.page-id-20530 .content-area,
body.page-id-20530 main.site-main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 1. Native eGovenz page-title hero, fixed requested height: 150px. */
body.page-id-20530 .page-title-wrap,
body.page-id-20530 .page-title-section,
body.page-id-20530 .page-title-wrapper {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    background-image:
        linear-gradient(rgba(6, 22, 47, 0.70), rgba(6, 22, 47, 0.70)),
        var(--ogere-about-hero-image) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

body.page-id-20530 .page-title-wrap > .container,
body.page-id-20530 .page-title-section > .container,
body.page-id-20530 .page-title-wrapper > .container {
    width: 100% !important;
}

body.page-id-20530 .page-title-wrap h1,
body.page-id-20530 .page-title-section h1,
body.page-id-20530 .page-title-wrapper h1,
body.page-id-20530 .page-title-wrap a,
body.page-id-20530 .page-title-wrap span,
body.page-id-20530 .page-title-section a,
body.page-id-20530 .page-title-section span,
body.page-id-20530 .page-title-wrapper a,
body.page-id-20530 .page-title-wrapper span {
    color: #ffffff !important;
}

/* 2. Build About v1 used 70px. Reduce only hero-to-first-section space by 50%. */
body.page-id-20530 .ogere-about-intro {
    padding-top: 35px !important;
}

/*
 * 4–6. Keep the original v1 two-column layouts. Only the three image widgets
 * requested in this pass are allowed to fill their paired text-column height.
 */
body.page-id-20530 .ogere-about-intro > .elementor-container,
body.page-id-20530 .ogere-about-location > .elementor-container,
body.page-id-20530 .ogere-about-today > .elementor-container {
    align-items: stretch !important;
}

body.page-id-20530 .ogere-about-intro > .elementor-container > .elementor-column,
body.page-id-20530 .ogere-about-location > .elementor-container > .elementor-column,
body.page-id-20530 .ogere-about-today > .elementor-container > .elementor-column {
    align-self: stretch !important;
}

body.page-id-20530 .elementor-element-ab10c02 > .elementor-widget-wrap,
body.page-id-20530 .elementor-element-ab40c02 > .elementor-widget-wrap,
body.page-id-20530 .elementor-element-ab50c01 > .elementor-widget-wrap {
    height: 100% !important;
    align-content: stretch !important;
}

body.page-id-20530 .elementor-element-ab10i01,
body.page-id-20530 .elementor-element-ab40i01,
body.page-id-20530 .elementor-element-ab50i01 {
    flex: 1 1 auto !important;
    height: 100% !important;
    margin: 0 !important;
}

body.page-id-20530 .elementor-element-ab10i01 .elementor-widget-container,
body.page-id-20530 .elementor-element-ab40i01 .elementor-widget-container,
body.page-id-20530 .elementor-element-ab50i01 .elementor-widget-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 330px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 5px !important;
}

body.page-id-20530 .elementor-element-ab10i01 img,
body.page-id-20530 .elementor-element-ab40i01 img,
body.page-id-20530 .elementor-element-ab50i01 img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 330px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* 9. Collapse only genuinely empty About body containers before the footer. */
body.page-id-20530 .entry-content:empty,
body.page-id-20530 .post-content:empty,
body.page-id-20530 .elementor > .elementor-section:empty,
body.page-id-20530 .elementor > .elementor-element:empty {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-id-20530 .entry-content,
body.page-id-20530 .post-content {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

@media (max-width: 1024px) {
    /* Build About v1 tablet top spacing was 56px. */
    body.page-id-20530 .ogere-about-intro {
        padding-top: 28px !important;
    }

    body.page-id-20530 .elementor-element-ab10i01 .elementor-widget-container,
    body.page-id-20530 .elementor-element-ab40i01 .elementor-widget-container,
    body.page-id-20530 .elementor-element-ab50i01 .elementor-widget-container,
    body.page-id-20530 .elementor-element-ab10i01 img,
    body.page-id-20530 .elementor-element-ab40i01 img,
    body.page-id-20530 .elementor-element-ab50i01 img {
        min-height: 300px !important;
    }
}

@media (max-width: 767px) {
    /* The hero remains exactly 150px on mobile unless a later review requests otherwise. */
    body.page-id-20530 .page-title-wrap,
    body.page-id-20530 .page-title-section,
    body.page-id-20530 .page-title-wrapper {
        height: 150px !important;
        min-height: 150px !important;
        max-height: 150px !important;
    }

    /* Build About v1 mobile top spacing was 44px. */
    body.page-id-20530 .ogere-about-intro {
        padding-top: 22px !important;
    }

    /*
     * Preserve v1 mobile stacking. The requested images become controlled,
     * responsive panels rather than very tall stretched columns.
     */
    body.page-id-20530 .elementor-element-ab10i01,
    body.page-id-20530 .elementor-element-ab40i01,
    body.page-id-20530 .elementor-element-ab50i01 {
        height: auto !important;
        margin-top: 24px !important;
    }

    body.page-id-20530 .elementor-element-ab10i01 .elementor-widget-container,
    body.page-id-20530 .elementor-element-ab40i01 .elementor-widget-container,
    body.page-id-20530 .elementor-element-ab50i01 .elementor-widget-container,
    body.page-id-20530 .elementor-element-ab10i01 img,
    body.page-id-20530 .elementor-element-ab40i01 img,
    body.page-id-20530 .elementor-element-ab50i01 img {
        height: 260px !important;
        min-height: 260px !important;
    }
}