/* Shared responsive fixes: detail heroes, org/mosque event cards, detail layouts */

/* --- Detail entity hero (org, mosque, leader, school, etc.) --- */
@media (max-width: 991.98px) {
    .detail-entity-hero--org-gallery .detail-hero__content-zone,
    .detail-entity-hero--camp-gallery .detail-hero__content-zone {
        max-width: 100% !important;
        padding-right: 0 !important;
    }

    .detail-entity-hero .common-hero__title {
        font-size: clamp(26px, 6vw, 40px);
        word-break: break-word;
    }

    .detail-entity-hero .common-hero__desc {
        max-width: 100%;
    }

    .detail-hero__host-org-badge {
        max-width: 100%;
        white-space: normal;
    }
}

@media (max-width: 767.98px) {
    .detail-entity-hero .common-hero {
        padding: 40px 0 56px;
        min-height: 0;
    }

    .detail-entity-hero .common-hero__breadcrumb {
        font-size: 12px;
        gap: 6px;
    }

    .detail-hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Leader detail: portrait beside name, clear action stack below */
    .detail-entity-hero--face-focus .common-hero {
        padding: 28px 0 36px;
        align-items: flex-start;
    }

    .detail-entity-hero--face-focus .detail-hero__content-zone {
        width: 100%;
    }

    .detail-hero__leader-photo-inline {
        width: 100px;
        max-width: 30vw;
    }

    .detail-entity-hero--face-focus .common-hero__desc {
        margin-top: 8px;
        font-size: 14px;
    }

    .detail-entity-hero--face-focus .detail-hero__social {
        margin-top: 12px;
        justify-content: flex-start;
    }

    .detail-entity-hero--face-focus .detail-hero__actions {
        margin-top: 14px;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .detail-entity-hero--face-focus .detail-hero__actions .btn-hero-primary,
    .detail-entity-hero--face-focus .detail-hero__actions .btn-hero-outline,
    .detail-entity-hero--face-focus .detail-hero__actions .common-hero__action,
    .detail-entity-hero--face-focus .detail-hero__actions > form,
    .detail-entity-hero--face-focus .detail-hero__actions .detail-hero__action-form,
    .detail-entity-hero--face-focus .detail-hero__follower-stat {
        width: 100%;
        justify-content: center;
    }

    /* Organization detail: logo beside name, actions stacked below */
    .detail-entity-hero--org-gallery .common-hero {
        padding: 28px 0 36px;
        align-items: flex-start;
    }

    .detail-entity-hero--org-gallery .detail-hero__content-zone {
        width: 100%;
    }

    .detail-entity-hero--org-gallery .detail-hero__leader-photo-inline {
        width: 92px;
        max-width: 28vw;
    }

    .detail-entity-hero--org-gallery .common-hero__desc {
        margin-top: 8px;
        font-size: 14px;
    }

    .detail-entity-hero--org-gallery .detail-hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .detail-entity-hero--org-gallery .detail-hero__actions {
        margin-top: 14px;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .detail-entity-hero--org-gallery .detail-hero__actions .btn-hero-primary,
    .detail-entity-hero--org-gallery .detail-hero__actions .btn-hero-outline,
    .detail-entity-hero--org-gallery .detail-hero__actions .common-hero__action,
    .detail-entity-hero--org-gallery .detail-hero__actions > form,
    .detail-entity-hero--org-gallery .detail-hero__actions .detail-hero__action-form,
    .detail-entity-hero--org-gallery .detail-hero__follower-stat,
    .detail-entity-hero--org-gallery .detail-hero__actions button {
        width: 100%;
        justify-content: center;
    }
}

/* --- Organization detail: event swiper cards --- */
@media (max-width: 767.98px) {
    .eventSwiper .org-event-card-inner,
    .eventSwiperPast .org-event-card-inner {
        grid-template-columns: 1fr !important;
    }

    .eventSwiper .org-event-media,
    .eventSwiperPast .org-event-media {
        height: 180px !important;
        min-height: 180px !important;
    }

    .eventSwiper .org-event-body,
    .eventSwiperPast .org-event-body {
        padding: 14px 16px !important;
    }

    .eventSwiper .org-card-action,
    .eventSwiperPast .org-card-action {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .event-prev,
    .eventPast-prev {
        left: 4px !important;
    }

    .event-next,
    .eventPast-next {
        right: 4px !important;
    }

    .slider-container {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (max-width: 575.98px) {
    .org-event-card-inner,
    .org-donation-card {
        grid-template-columns: 1fr !important;
    }

    .org-support-layout {
        grid-template-columns: 1fr !important;
    }

    .org-support-actions {
        grid-template-columns: 1fr !important;
    }
}

/* --- Mosque / masjid detail: legacy event swiper cards --- */
@media (max-width: 767.98px) {
    .eventSwiper .card_container .row_btn {
        flex-direction: column;
    }

    .eventSwiper .card_container .row_btn > [class*="col-"] {
        width: 100%;
        max-width: 100%;
    }

    .eventSwiper .card_container .image-wrapper,
    .eventSwiper .card_container .card_img {
        width: 100%;
        max-height: 200px;
        object-fit: cover;
    }

    .eventSwiper .card_container h4 {
        font-size: 1.05rem;
        padding: 0 8px;
    }

    .eventSwiper .date-group {
        flex-wrap: wrap;
        justify-content: center !important;
        gap: 8px !important;
    }
}

/* --- Mosque detail: main two-column layout --- */
@media (max-width: 991.98px) {
    .header-border > .container > .row > .col-lg-8,
    .header-border > .container > .row > .col-lg-4 {
        width: 100%;
        max-width: 100%;
    }

    .header-border .mob-img-gallery {
        display: block !important;
    }
}

/* --- Organization detail: vertical tabs + content overflow --- */
@media (max-width: 991.98px) {
    .vertical-tabs-container {
        flex-direction: column;
    }

    .vertical-tab-content {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    .vertical-tab-content img,
    .vertical-tab-content table,
    .vertical-tab-content iframe {
        max-width: 100%;
        height: auto;
    }
}

/* --- Leader detail page --- */
@media (max-width: 991.98px) {
    .leader-detail-page .ld-content-shell {
        padding-left: 12px;
        padding-right: 12px;
    }

    .leader-detail-page .ld-profile-white {
        border-radius: 0 0 18px 18px;
    }
}

@media (max-width: 767.98px) {
    .leader-detail-page .consultation-packages-grid {
        padding-left: 4px;
        padding-right: 4px;
    }

    .leader-detail-page .ld-about-card__body {
        gap: 16px;
    }

    .leader-detail-v2 .ld-sticky-cta {
        padding: 10px 12px;
    }

    .leader-detail-v2 .ld-sticky-cta .ld-btn {
        font-size: 13px;
        padding: 10px 14px;
    }
}