/* ============================================
   GALLERY SPACING FIX - COMPACT LAYOUT
   Vision Global School
   Removes excessive vertical gaps between sections
   ============================================ */

/* Reduce section padding on Gallery and Activities pages */
.campus-carousel-section {
    padding: var(--space-xl) 0 !important;
}

/* Compact section header spacing */
.campus-carousel-section .section-header {
    margin-bottom: 24px !important;
}

.campus-carousel-section .section-header h2 {
    margin-bottom: var(--space-sm) !important;
}

.campus-carousel-section .section-header p {
    margin-bottom: 0 !important;
}

/* Reduce carousel wrapper spacing */
.carousel-wrapper {
    margin-bottom: 0 !important;
}

/* Compact indicators spacing */
.carousel-indicators {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
}

/* Remove extra padding from carousel track container */
.carousel-track-container {
    margin: 0 !important;
}

/* Ensure no min-height causing gaps */
.campus-carousel-section,
.carousel-wrapper,
.carousel-track-container {
    min-height: auto !important;
    height: auto !important;
}

/* Remove any spacer divs if present */
.section-divider {
    display: none !important;
}

/* Compact page header */
.page-header {
    padding: var(--space-2xl) 0 var(--space-lg) !important;
    margin-bottom: 0 !important;
}

/* First section after header - reduce top padding */
.page-header+section,
.page-header+.campus-carousel-section {
    padding-top: var(--space-lg) !important;
}

/* Last section before footer - reduce bottom padding */
.campus-carousel-section:last-of-type {
    padding-bottom: var(--space-xl) !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .campus-carousel-section {
        padding: var(--space-lg) 0 !important;
    }

    .campus-carousel-section .section-header {
        margin-bottom: 16px !important;
    }

    .carousel-indicators {
        margin-top: 8px !important;
    }

    .page-header {
        padding: var(--space-xl) 0 var(--space-md) !important;
    }
}