
/* =========================================================
   REALDEEN MOBILE TOPICS V5
   EXACTLY FOUR TOPICS + READ MORE
   ========================================================= */

@media (max-width: 767.98px) {


    /* -----------------------------------------------------
       TOPICS SECTION ITSELF MUST HAVE NO RESERVED HEIGHT
       ----------------------------------------------------- */

    #home_quran_topics {

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            visible !important;
    }


    #home_quran_topics
    #qgj-widget {

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        margin:
            0 !important;

        padding:
            17px 17px 13px !important;

        box-sizing:
            border-box !important;

        overflow:
            visible !important;
    }


    #home_quran_topics
    .QuranGrowthJourneySection_wrapper__OhnGO {

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;
    }


    /* -----------------------------------------------------
       TITLE
       ----------------------------------------------------- */

    #home_quran_topics
    .QuranGrowthJourneySection_header__YzSYn {

        height:
            auto !important;

        min-height:
            0 !important;

        margin:
            0 0 14px !important;

        padding:
            0 !important;
    }


    /* -----------------------------------------------------
       GRID = EXACTLY 2 COLUMNS
       ----------------------------------------------------- */

    #home_quran_topics
    .CallToActionButtons_buttonsContainer__V05v8.holy_quran_topic {

        width:
            100% !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        display:
            grid !important;

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

        grid-template-rows:
            auto auto auto !important;

        grid-auto-rows:
            auto !important;

        grid-auto-flow:
            row !important;

        column-gap:
            10px !important;

        row-gap:
            10px !important;

        margin:
            0 !important;

        padding:
            0 !important;

        overflow:
            visible !important;

        box-sizing:
            border-box !important;
    }


    /* -----------------------------------------------------
       FIRST FOUR = ALWAYS VISIBLE
       ----------------------------------------------------- */

    #home_quran_topics
    .holy_quran_topic
    > a:not(.rd-home-topics-view-more-grid-v2):nth-of-type(1),

    #home_quran_topics
    .holy_quran_topic
    > a:not(.rd-home-topics-view-more-grid-v2):nth-of-type(2),

    #home_quran_topics
    .holy_quran_topic
    > a:not(.rd-home-topics-view-more-grid-v2):nth-of-type(3),

    #home_quran_topics
    .holy_quran_topic
    > a:not(.rd-home-topics-view-more-grid-v2):nth-of-type(4) {

        display:
            inline-flex !important;

        visibility:
            visible !important;

        position:
            relative !important;

        width:
            100% !important;

        min-width:
            0 !important;

        height:
            56px !important;

        min-height:
            56px !important;

        max-height:
            56px !important;

        margin:
            0 !important;

        padding:
            8px !important;

        box-sizing:
            border-box !important;

        align-items:
            center !important;

        justify-content:
            center !important;
    }


    /* -----------------------------------------------------
       TOPIC 5+ = COMPLETELY REMOVED FROM MOBILE LAYOUT
       No height, no gap, no hidden grid rows.
       ----------------------------------------------------- */

    #home_quran_topics
    .holy_quran_topic
    > a:not(.rd-home-topics-view-more-grid-v2):nth-of-type(n+5) {

        display:
            none !important;

        visibility:
            hidden !important;

        position:
            absolute !important;

        width:
            0 !important;

        height:
            0 !important;

        min-width:
            0 !important;

        min-height:
            0 !important;

        max-width:
            0 !important;

        max-height:
            0 !important;

        margin:
            0 !important;

        padding:
            0 !important;

        border:
            0 !important;

        overflow:
            hidden !important;
    }


    /* -----------------------------------------------------
       READ MORE — THIRD GRID ROW, RIGHT SIDE
       ----------------------------------------------------- */

    #home_quran_topics
    .holy_quran_topic
    > .rd-home-topics-view-more-grid-v2 {

        grid-column:
            1 / -1 !important;

        grid-row:
            3 !important;

        justify-self:
            end !important;

        align-self:
            center !important;

        width:
            auto !important;

        min-width:
            0 !important;

        max-width:
            none !important;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        display:
            inline-flex !important;

        align-items:
            center !important;

        justify-content:
            flex-end !important;

        gap:
            6px !important;

        margin:
            1px 0 0 !important;

        padding:
            7px 1px 1px 12px !important;

        color:
            #7bd8de !important;

        background:
            transparent !important;

        border:
            0 !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;

        font-size:
            13px !important;

        font-weight:
            750 !important;

        line-height:
            1.2 !important;

        text-decoration:
            none !important;

        transform:
            none !important;
    }


    #home_quran_topics
    .rd-home-topics-view-more-grid-v2
    span {

        font-size:
            13px !important;

        font-weight:
            750 !important;
    }


    #home_quran_topics
    .rd-home-topics-view-more-grid-v2
    svg {

        width:
            13px !important;

        height:
            13px !important;

        flex:
            0 0 13px !important;
    }


    /* -----------------------------------------------------
       IMPORTANT:
       COLLAPSE PARENT FLOW ITEM
       Otherwise old CSS can leave large empty space.
       ----------------------------------------------------- */

    .index_flowItem__GnXWz:has(#home_quran_topics) {

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        margin-top:
            0 !important;

        margin-bottom:
            14px !important;

        padding-top:
            0 !important;

        padding-bottom:
            0 !important;

        overflow:
            visible !important;
    }


    .index_flowItem__GnXWz:has(#home_quran_topics)
    > div {

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;
    }


    /* -----------------------------------------------------
       NEXT SECTION STARTS IMMEDIATELY
       ----------------------------------------------------- */

    #home_surah_index {

        margin-top:
            0 !important;

        padding-top:
            0 !important;
    }


    .index_flowItem__GnXWz:has(#home_quran_topics)
    + .index_flowItem__GnXWz {

        margin-top:
            0 !important;

        padding-top:
            0 !important;
    }

}

