/* ==========================================================================
   "আরও দেখুন" (view all) homepage-section pages — mentors, success
   stories, why-us. Reuses the same card markup/classes already shipped in
   mentor-custom-sections.css (mentor-teacher-card, mentor-story-card,
   mentor-whyus-item / mentor-video-card) so cards look identical to the
   homepage carousel versions; this file only adds the static grid wrapper
   and the load-more button, both new, so it can't affect any existing page.
   ========================================================================== */

.mentor-listing-wrapper {
    padding: 36px 0 56px;
}

.mentor-listing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 19px;
}

.mentor-listing-grid.mentor-listing-grid-stories {
    gap: 20px;
}

/* Homepage carousel cards use `flex: 0 0 ...` for their carousel-track
   parent; inside this grid that flex-basis is simply inert, and the grid
   column width takes over — so the card look stays pixel-identical. */

.mentor-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 34px;
}

.mentor-loadmore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #C7002B;
    color: #fff;
    border: none;
    padding: 13px 34px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    font-family: "Baloo Da 2", var(--font-family);
    cursor: pointer;
    transition: .2s ease;
    text-decoration: none;
}

.mentor-loadmore-btn:hover {
    background: var(--mentor-primary-dark, #3F001F);
    color: #fff;
}

.mentor-loadmore-btn:disabled,
.mentor-loadmore-btn.is-loading {
    opacity: .7;
    cursor: default;
}

.mentor-loadmore-btn .fa-spinner {
    display: none;
}

.mentor-loadmore-btn.is-loading .fa-spinner {
    display: inline-block;
}

.mentor-loadmore-btn.is-loading .fa-chevron-down {
    display: none;
}

/* ---------------------------- "আরও দেখুন" section button ----------------------------
   Added under each of the 4 homepage sections in custom_sections.blade.php,
   below the existing carousel/grid — same red pill as above. */
.mentor-section-viewall {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.mentor-section-viewall-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #C7002B;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    font-family: "Baloo Da 2", var(--font-family);
    text-decoration: none;
    transition: .2s ease;
}

.mentor-section-viewall-btn:hover {
    background: var(--mentor-primary-dark, #3F001F);
    color: #fff;
}

.mentor-section-dark .mentor-section-viewall-btn {
    background: #fff;
    color: var(--mentor-primary-dark, #3F001F);
}

.mentor-section-dark .mentor-section-viewall-btn:hover {
    background: #C7002B;
    color: #fff;
}

@media (max-width: 991px) {
    .mentor-listing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .mentor-listing-grid { grid-template-columns: 1fr; gap: 14px; }
    .mentor-listing-wrapper { padding: 24px 0 40px; }
}

/* ==========================================================================
   Dynamic homepage popup
   ========================================================================== */
#mentorHomepagePopup .modal-dialog {
    max-width: 520px;
}

#mentorHomepagePopup .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

#mentorHomepagePopup .mentor-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    z-index: 2;
    cursor: pointer;
    color: #1c1c26;
    font-size: 16px;
}

#mentorHomepagePopup .mentor-popup-close:hover {
    background: #C7002B;
    color: #fff;
}

#mentorHomepagePopup .mentor-popup-body {
    position: relative;
}

#mentorHomepagePopup .mentor-popup-img-link,
#mentorHomepagePopup img {
    display: block;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

@media (max-width: 575px) {
    /* Bootstrap's base .modal-dialog only gets `margin: auto` (true
       horizontal centering) from its own @media(min-width:576px) rule;
       below that it's a fixed `margin: .5rem` on every side. That's normally
       invisible because the dialog naturally fills the available width, but
       here we cap it with `max-width: 92vw`, so the box no longer fills the
       screen. With margin-left/right no longer "auto", the browser can't
       redistribute the leftover space evenly — it collapses onto one side,
       which is what pushes the popup off toward the left. Setting the
       horizontal margins to auto here keeps our 92vw cap while restoring
       true centering. Scoped to #mentorHomepagePopup, so nothing else is
       touched. */
    #mentorHomepagePopup .modal-dialog {
        max-width: 92vw;
        margin-left: auto;
        margin-right: auto;
    }
    #mentorHomepagePopup .mentor-popup-close {
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
}