/* ==========================================================================
   Main home page of the institute (/ar), used by client/home.blade.php
   Loaded after custom.css (through the CSScripts section of the layout).
   Shared site styles stay in style.css and custom.css; this file has only what is specific to the home page.

   TABLE OF CONTENTS, in page order (search for the number and title in the section comments below)
    1. Headings and spacing
    2. Hadith
    3. News carousel
    4. Events and prayer times
    5. Imam section (icons)
    6. Questions and opinions
    7. Selected lessons
    8. Photo album
    9. App download banner
   10. Taqi and Majid banners
   11. Related sites (Dar al-Ilm)
   ========================================================================== */


/* ==========================================================================
   1. Headings and spacing
   The section titles are <h2>. They keep the spacing the old <h1> had (normalize.css gave <h1> its margin).
   ========================================================================== */
h2.H1 {
    margin: 0.67em 0;
}

.row.mb-2.VCenter > h2.H1 {
    margin-top: 0;
}

/* Title row of a section (icon + title) */
.HomeTitleRow {
    padding: 0 15px;
}

.HomeTitleRowBetween {
    justify-content: space-between;
}

/* Rows that fill the full width without Bootstrap's negative margin */
.CoverFirst.row,
.CoverSecond.row,
.ShahidRow.row {
    margin: 0;
}

.RtlBox {
    direction: rtl;
}

.InlineBlock {
    display: inline-block;
}

.HomeBtnLeft {
    float: left;
}


/* ==========================================================================
   2. Hadith
   ========================================================================== */
.HadisWrap {
    background-color: white;
    position: sticky;
}


/* ==========================================================================
   3. News carousel
   Phone: one slide, swipe. Desktop (>= 992px): three columns.
   ========================================================================== */
.news-carousel-container {
    position: relative;
    overflow: hidden;
    padding: 0 15px;
}

.news-carousel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    scroll-padding: 15px;
    padding-bottom: 1.5rem;
}

.news-slide {
    flex: 0 0 95%;
    max-width: 360px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Dots */
.carousel-dots {
    transform: translateX(-50%);
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
}

.dot.active,
.dot-input:checked + .dot {
    background: #007bff;
    transform: scale(1.3);
}

.dot-input {
    display: none;
}

/* Desktop: three columns, no dots */
/* Tablet and desktop >= 992px */
@media (min-width: 992px) {
    .news-carousel {
        flex-wrap: wrap;
        overflow-x: visible;
        scroll-snap-type: none;
        gap: 1.5rem;
        scroll-padding: 0;
    }

    .news-slide {
        flex: 0 0 32%;
        max-width: none;
        scroll-snap-align: none;
        scroll-snap-stop: none;
    }

    .carousel-dots {
        display: none;
    }
}


/* ==========================================================================
   4. Events and prayer times
   ========================================================================== */
.Monasebat p.EventItem {
    color: #FFFFFF;
    margin-right: 15px;
}

.PrayBox {
    padding-top: 10px;
}

.PrayLocation {
    margin-top: 30px;
}

.PrayNext {
    margin-top: 49px;
}

.OghateShareeeeTime {
    padding-top: 29px;
}

.PrayItem {
    margin-right: 25px;
}


/* ==========================================================================
   5. Imam section (icons)
   ========================================================================== */
.imam-section-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    transition: transform 0.3s ease;
    height: 100%;
}

.imam-section-item:hover {
    transform: translateY(-5px);
    text-decoration: none;
}

.imam-icon-container {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.imam-section-item:hover .imam-icon-container {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.imam-section-item h5 {
    color: #2c5aa0;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
    text-align: center;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imam-section-item:hover h5 {
    color: #1e4080;
}


/* ==========================================================================
   6. Questions and opinions
   ========================================================================== */
.Questions-scrollable-div.QuestionsList {
    margin: 15px 0;
    max-height: 255px;
    overflow-y: auto;
}

.AnswerLabel {
    margin-top: 10px;
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
}

.AnswerText {
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
}

.button-container {
    position: absolute !important;
    bottom: 30px !important;
    left: 123px !important;
}

.esteftatBtn.BtnLightGray {
    background-color: var(--LightGray);
    border-color: var(--DarkGray);
}

.esteftatBtn.BtnBlue {
    background-color: var(--Blue);
    border-color: var(--Blue);
    color: white;
}

.OpinionsRow {
    margin: 15px 0;
}

.FirstOpinion {
    background-color: #539ba5;
}

.OpinionsFooter {
    justify-content: end;
    align-items: center;
}

.btn_home_archive {
    position: absolute;
    bottom: 30px;
}


/* ==========================================================================
   7. Selected lessons
   ========================================================================== */
.SoundBtn > div.downloadIcon > i.PlayIcon {
    margin-top: 1px;
    margin-left: 7px;
}


/* ==========================================================================
   8. Photo album
   ========================================================================== */
.AlbumLink {
    margin: 0 1px;
}

.AlbumImg {
    height: 188px !important;
    width: 300px !important;
}


/* ==========================================================================
   9. App download banner
   ========================================================================== */
.downloadAppLg,
.downloadAppSm {
    height: 100%;
    width: 100%;
}

.DwAndroid {
    position: absolute;
    bottom: 20px;
    right: 50px;
}

.DwIOS {
    position: absolute;
    bottom: 20px;
    right: 260px;
}


/* ==========================================================================
   10. Taqi and Majid banners
   ========================================================================== */
.ShahidCol {
    position: relative;
    padding: 0;
}

.ShahidRight {
    position: absolute;
    right: 20px;
    bottom: 20px;
    opacity: .7;
}

.ShahidLeft {
    position: absolute;
    left: 20px;
    bottom: 20px;
    opacity: .7;
}


/* ==========================================================================
   11. Related sites (Dar al-Ilm)
   ========================================================================== */
.SitesSection {
    margin: 0 !important;
}

.SitesRow {
    background-image: url('/assets/imgs/bg_3st.jpg');
    background-size: cover;
    background-position: center;
    min-height: 300px;
    align-items: center;
    justify-content: space-between;
}

h2.SitesTitle {
    margin-top: 50px;
    font-size: 32px;
    margin-bottom: 0.67em;
}

.img_logo_daralelm_gray_element {
    height: 240px;
}

@media (min-width: 992px) {
    .custom-desktop-padding {
        padding-right: 102px !important;
    }

    .custom-desktop-margin {
        margin-left: -40px;
    }
}

@media only screen and (max-width: 768px) {
    .custom-mobile-margin {
        margin-right: -45px;
        margin-top: -18px;
    }

    .mob-layout {
        text-align: right !important;
    }
}


/* ==========================================================================
   Phone <= 768px (rules that change the sections above)
   ========================================================================== */
@media (max-width: 768px) {
    .imam-icon-container {
        width: 200px;
    }

    .imam-icon {
        width: 170px !important;
    }

    .title_ImamKhoei_Opinions_About {
        margin-top: 50px !important;
    }

    .btn_home_archive {
        bottom: 10px !important;
    }

    .img_logo_daralelm_gray_element {
        height: 140px !important;
    }

    .button-container {
        position: unset !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }

    .ra-khoei,
    .esteftat {
        padding-top: 20px !important;
        padding-bottom: 60px !important;
    }
}