/*
 * ==========================================================
 * RIC HOMEPAGE J.15.6
 * UNIFIED MOBILE/TABLET HERO
 * ==========================================================
 *
 * The desktop hero continues using the existing system.
 *
 * <= 1180px:
 * ONE hero renderer owns the presentation.
 *
 * No:
 * - duplicate default hero
 * - overlapping promo text
 * - cropped admin banners
 * - competing Qur'an card layers
 */

.ric-j156-stage {
    display: none;
}


/*
 * ==========================================================
 * TABLET + MOBILE
 * ==========================================================
 */

@media (max-width: 1180px) {

    .ric-hero-grid.ric-pad.ric-j156-active {
        display: block !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;

        background: #063c31 !important;

        box-sizing: border-box !important;
    }


    /*
     * CRITICAL:
     * Hide every legacy/default Hero child.
     * Only the new unified stage remains visible.
     */
    .ric-hero-grid.ric-pad.ric-j156-active
    > *:not(.ric-j156-stage) {
        display: none !important;
    }


    .ric-hero-grid.ric-pad.ric-j156-active
    > .ric-j156-stage {
        display: block !important;

        position: relative !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /*
     * ------------------------------------------------------
     * IMAGE PROMOTION
     * ------------------------------------------------------
     */

    .ric-j156-image-wrap {
        display: block;

        width: 100%;

        background:
            linear-gradient(
                135deg,
                #063d31,
                #031f1a
            );

        overflow: hidden;
    }


    .ric-j156-image {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        max-height: none !important;

        margin: 0 auto !important;

        object-fit: contain !important;
        object-position: center center !important;

        transform: none !important;
        clip-path: none !important;
    }


    /*
     * ------------------------------------------------------
     * TEXT-ONLY PROMOTION
     * ------------------------------------------------------
     */

    .ric-j156-copy-slide {
        position: relative;

        display: flex;

        flex-direction: column;

        justify-content: center;

        min-height:
            clamp(
                390px,
                58vw,
                590px
            );

        padding:
            clamp(
                38px,
                6vw,
                72px
            )
            clamp(
                28px,
                6vw,
                72px
            );

        color: #fff;

        overflow: hidden;

        box-sizing: border-box;

        isolation: isolate;
    }


    .ric-j156-copy-slide::before {
        content: "";

        position: absolute;
        inset: 0;

        z-index: -2;

        background:
            radial-gradient(
                circle at 85% 20%,
                rgba(218, 174, 75, .24),
                transparent 34%
            ),
            linear-gradient(
                135deg,
                #074c3b 0%,
                #06382f 52%,
                #031f1a 100%
            );
    }


    .ric-j156-copy-slide::after {
        content: "";

        position: absolute;

        width: 360px;
        height: 360px;

        right: -125px;
        bottom: -170px;

        z-index: -1;

        border:
            1px solid
            rgba(221, 183, 89, .22);

        border-radius: 50%;
    }


    .ric-j156-copy-slide[data-theme="gold"]::before {
        background:
            radial-gradient(
                circle at 85% 20%,
                rgba(232, 192, 91, .33),
                transparent 32%
            ),
            linear-gradient(
                135deg,
                #084637 0%,
                #06352c 58%,
                #171b17 100%
            );
    }


    .ric-j156-copy-slide[data-theme="night"]::before {
        background:
            radial-gradient(
                circle at 82% 20%,
                rgba(85, 126, 172, .32),
                transparent 32%
            ),
            linear-gradient(
                135deg,
                #092e3b,
                #082734 52%,
                #04161d
            );
    }


    .ric-j156-eyebrow {
        display: inline-flex;

        align-items: center;

        align-self: flex-start;

        width: fit-content;

        max-width: 100%;

        margin: 0 0 18px;

        padding: 8px 14px;

        border:
            1px solid
            rgba(230, 192, 93, .55);

        border-radius: 999px;

        background:
            rgba(0, 0, 0, .14);

        color: #f1ce6c;

        font-size:
            clamp(
                12px,
                1.8vw,
                15px
            );

        font-weight: 800;

        letter-spacing: .02em;
    }


    .ric-j156-title {
        margin: 0;

        max-width: 900px;

        color: #fff;

        font-family:
            Georgia,
            "Times New Roman",
            serif;

        font-size:
            clamp(
                38px,
                7vw,
                72px
            );

        line-height: .99;

        letter-spacing: -.035em;
    }


    .ric-j156-meta {
        margin: 18px 0 0;

        color: #f1ce6c;

        font-size:
            clamp(
                15px,
                2.2vw,
                20px
            );

        font-weight: 800;

        line-height: 1.35;
    }


    .ric-j156-description {
        max-width: 820px;

        margin: 18px 0 0;

        color:
            rgba(
                255,
                255,
                255,
                .91
            );

        font-size:
            clamp(
                16px,
                2.1vw,
                20px
            );

        line-height: 1.55;
    }


    /*
     * ------------------------------------------------------
     * BUTTON BAR
     * ------------------------------------------------------
     */

    .ric-j156-actions {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        width: 100%;

        gap: 9px;

        padding: 13px 15px 17px;

        background: #063c31;

        box-sizing: border-box;
    }


    .ric-j156-action {
        min-width: 0;

        min-height: 48px;

        display: flex;

        align-items: center;
        justify-content: center;

        padding: 11px 13px;

        border:
            1px solid
            rgba(255,255,255,.18);

        border-radius: 12px;

        text-decoration: none;

        text-align: center;

        font-size: 14px;

        line-height: 1.18;

        font-weight: 800;

        box-sizing: border-box;
    }


    .ric-j156-action--primary {
        background: #fff;
        color: #06412f;
    }


    .ric-j156-action--gold {
        background: #ddb756;
        color: #153128;
        border-color: #ddb756;
    }


    .ric-j156-action--light {
        background:
            rgba(
                255,
                255,
                255,
                .12
            );

        color: #fff;
    }


    .ric-j156-action--outline {
        background: transparent;

        color: #fff;

        border-color:
            rgba(
                255,
                255,
                255,
                .38
            );
    }


    /*
     * Rotation indicator.
     */
    .ric-j156-dots {
        display: flex;

        justify-content: center;

        align-items: center;

        gap: 7px;

        padding: 0 0 13px;

        background: #063c31;
    }


    .ric-j156-dot {
        width: 7px;
        height: 7px;

        padding: 0;

        border: 0;

        border-radius: 999px;

        background:
            rgba(
                255,
                255,
                255,
                .34
            );
    }


    .ric-j156-dot.is-active {
        width: 20px;

        background: #e2bd5b;
    }

}


/*
 * ==========================================================
 * IPHONE / SMALL ANDROID
 * ==========================================================
 */

@media (max-width: 767px) {

    .ric-j156-copy-slide {
        min-height: 430px;

        padding:
            42px
            max(
                24px,
                env(safe-area-inset-right)
            )
            38px
            max(
                24px,
                env(safe-area-inset-left)
            );
    }


    .ric-j156-title {
        font-size:
            clamp(
                38px,
                12vw,
                58px
            );

        line-height: .98;
    }


    .ric-j156-description {
        font-size: 16px;
    }


    .ric-j156-actions {
        padding-left:
            max(
                12px,
                env(safe-area-inset-left)
            );

        padding-right:
            max(
                12px,
                env(safe-area-inset-right)
            );
    }

}


/*
 * Narrow phones.
 */
@media (max-width: 390px) {

    .ric-j156-actions {
        grid-template-columns: 1fr;
    }

}


/*
 * ==========================================================
 * DESKTOP
 * Existing J.15 remains authoritative.
 * ==========================================================
 */

@media (min-width: 1181px) {

    .ric-j156-stage {
        display: none !important;
    }

}