/*
 * ==========================================================
 * ROCKAWAY ISLAMIC CENTER
 * HOMEPAGE J.15.6
 *
 * SINGLE RESPONSIVE ADMIN HERO ENGINE
 * ==========================================================
 *
 * Desktop:
 * Keep existing RIC hero.
 *
 * <= 1180px:
 * When an Admin Homepage Feature is active:
 *
 * - show admin feature
 * - show admin feature image
 * - show admin buttons
 * - hide original hero copy
 * - hide original Qur'an card
 * - never crop promotional artwork
 */


/* ----------------------------------------------------------
   MOBILE / TABLET ADMIN FEATURE MODE
   ---------------------------------------------------------- */

@media (max-width: 1180px) {

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

        width: 100% !important;

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

        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        grid-auto-rows: auto !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /*
     * THESE are the old permanent homepage hero layers.
     *
     * They are what we can see underneath Jumu'ah
     * in the iPhone/iPad photographs.
     */
    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    > .ric-hero-copy,

    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    > .ric-quran-card {
        display: none !important;
    }


    /*
     * Admin promotional artwork.
     *
     * Full image always visible.
     * Never crop text, logo, times or buttons embedded
     * inside the image.
     */
    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    .ric-j15-promo-image {
        display: block !important;

        position: relative !important;

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

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

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

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

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


    /*
     * Remove fixed heights that may have been inherited
     * from the desktop hero layout.
     */
    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    :is(
        .ric-j15-promo,
        .ric-j15-promo-card,
        .ric-j15-feature,
        .ric-j15-feature-card,
        .ric-j15-media,
        .ric-j15-image,
        .ric-j15-content
    ) {
        position: relative !important;

        width: 100% !important;

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

        inset: auto !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    /*
     * ADMIN CTA BUTTONS
     *
     * These remain available below the active feature.
     */
    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    .ric-j2-actions {
        position: relative !important;

        inset: auto !important;

        display: grid !important;

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

        width: 100% !important;

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

        margin: 0 !important;

        padding: 10px 12px 14px !important;

        gap: 8px !important;

        transform: none !important;

        z-index: 10 !important;

        box-sizing: border-box !important;
    }


    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    .ric-j2-actions
    :is(
        a,
        button
    ) {
        position: relative !important;

        width: 100% !important;

        min-width: 0 !important;
        min-height: 46px !important;

        margin: 0 !important;

        display: flex !important;

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

        text-align: center !important;

        white-space: normal !important;

        line-height: 1.2 !important;

        box-sizing: border-box !important;
    }

}


/* ----------------------------------------------------------
   IPHONE
   ---------------------------------------------------------- */

@media (max-width: 767px) {

    .ric-hero-grid.ric-pad.ric-j15-responsive-active {
        padding-left:
            max(
                0px,
                env(safe-area-inset-left)
            ) !important;

        padding-right:
            max(
                0px,
                env(safe-area-inset-right)
            ) !important;
    }


    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    .ric-j15-promo-image {
        width: 100% !important;

        height: auto !important;

        aspect-ratio: auto !important;
    }


    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    .ric-j2-actions {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

}


/* ----------------------------------------------------------
   VERY NARROW PHONE
   ---------------------------------------------------------- */

@media (max-width: 380px) {

    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    .ric-j2-actions {
        grid-template-columns:
            1fr !important;
    }

}


/* ----------------------------------------------------------
   IPAD PORTRAIT / TABLET PORTRAIT
   ---------------------------------------------------------- */

@media
    (min-width: 768px)
    and
    (max-width: 1024px)
    and
    (orientation: portrait) {

    .ric-hero-grid.ric-pad.ric-j15-responsive-active {
        width: 100% !important;
    }


    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    .ric-j15-promo-image {
        width: 100% !important;

        height: auto !important;

        object-fit: contain !important;
    }

}


/* ----------------------------------------------------------
   IPAD LANDSCAPE / TABLET LANDSCAPE
   ---------------------------------------------------------- */

@media
    (min-width: 768px)
    and
    (max-width: 1180px)
    and
    (orientation: landscape) {

    .ric-hero-grid.ric-pad.ric-j15-responsive-active
    .ric-j15-promo-image {
        width: 100% !important;

        height: auto !important;

        object-fit: contain !important;
    }

}


/* ----------------------------------------------------------
   DESKTOP
   ---------------------------------------------------------- */

@media (min-width: 1181px) {

    /*
     * Explicitly leave the existing desktop hero alone.
     */
    .ric-hero-grid.ric-pad {
        --ric-j15-mobile-engine:
            desktop-preserved;
    }

}