/**
 * Gallery Grid Standardization CSS
 * Ensures consistent 3-2-1 column layout across all pages
 */

/* Reset all grid-related properties */
.atf-tour-grid * {
    box-sizing: border-box !important;
}

/* Container standardization */
.atf-tour-grid .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    align-items: stretch !important;
}

/* Item standardization */
.atf-tour-grid .grid-item {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-bottom: 30px !important;
}

/* Override any conflicting Bootstrap classes */
.atf-tour-grid [class*="col-"] {
    position: relative !important;
    width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
}

/* STANDARDIZED BREAKPOINTS */

/* Extra Large screens (≥1200px) - 3 columns */
@media (min-width: 1200px) {
    .atf-tour-grid .grid-item,
    .atf-tour-grid .col-lg-4,
    .atf-tour-grid .col-md-6,
    .atf-tour-grid .col-12 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* Large screens (992px - 1199px) - 3 columns */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .atf-tour-grid .grid-item,
    .atf-tour-grid .col-lg-4,
    .atf-tour-grid .col-md-6,
    .atf-tour-grid .col-12 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* Medium screens (768px - 991px) - 2 columns */
@media (min-width: 768px) and (max-width: 991.98px) {
    .atf-tour-grid .grid-item,
    .atf-tour-grid .col-lg-4,
    .atf-tour-grid .col-md-6,
    .atf-tour-grid .col-12 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

/* Small screens (<768px) - 1 column */
@media (max-width: 767.98px) {
    .atf-tour-grid .grid-item,
    .atf-tour-grid .col-lg-4,
    .atf-tour-grid .col-md-6,
    .atf-tour-grid .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Force consistent heights */
.atf-tour-grid .atf-single-portfolio {
    height: 320px !important;
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

/* Responsive height adjustments */
@media (max-width: 1199.98px) {
    .atf-tour-grid .atf-single-portfolio {
        height: 280px !important;
    }
}

@media (max-width: 991.98px) {
    .atf-tour-grid .atf-single-portfolio {
        height: 260px !important;
    }
}

@media (max-width: 767.98px) {
    .atf-tour-grid .atf-single-portfolio {
        height: 300px !important;
    }
}

@media (max-width: 575.98px) {
    .atf-tour-grid .atf-single-portfolio {
        height: 250px !important;
    }
}

/* Debug helper - remove in production */
.debug-grid .grid-item {
    border: 2px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

.debug-grid .grid-item::before {
    content: attr(class);
    position: absolute;
    top: 0;
    left: 0;
    background: red;
    color: white;
    font-size: 10px;
    padding: 2px;
    z-index: 1000;
}