/* Organization carousel */

/* Bootstrap doesn't ship ratio-3x4 by default */
.ratio-3x4 {
    --bs-aspect-ratio: 133.3333%;
}

.org-carousel {
    /* Horizontal scroll container */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Nice feel on touch devices */
    -webkit-overflow-scrolling: touch;

    /* Keep it visually clean */
    padding-bottom: .25rem;
}

/* Hide scrollbar (optional). Keep accessible: still scrollable. */
.org-carousel::-webkit-scrollbar { height: 8px; }
.org-carousel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 999px; }
.org-carousel::-webkit-scrollbar-track { background: transparent; }

.org-track {
    display: flex;
    gap: 1rem;
}

/* Each item has a fixed width so the carousel "slides" nicely */
.org-item {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 220px;
}

/* Responsive card widths */
@media (min-width: 576px) {
    .org-item { width: 240px; }
}
@media (min-width: 992px) {
    .org-item { width: 260px; }
}

.org-card {
    height: 100%;
}

.org-poster {
    border-radius: var(--bs-border-radius);
    position: relative;
    overflow: hidden;
    background-color: #e9ecef;
}
.org-poster:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
}

.org-poster > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optional: slightly reduce button size alignment */
.org-nav {
    line-height: 1;
}

/* Mobile: force 1 card per "page" (no 1.5 cards visible) */
@media (max-width: 576px) {

    /* Remove the gap so the next card does not "peek" */
    .org-track {
        gap: 0 !important;
    }

    /* Each item takes the full width of the carousel viewport */
    .org-item {
        width: 100% !important;
        flex: 0 0 100% !important;   /* do not shrink/grow; exactly one per viewport */
        max-width: 100% !important;
        scroll-snap-align: start;
        scroll-snap-stop: always;    /* optional: feels better on mobile */
    }

    /* Make sure the card fills the item width */
    .org-card {
        width: 100%;
    }

    /* Ensure poster + image fully cover the available area */
    .org-poster {
        width: 100%;
    }

    .org-poster > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}