/**
 * Critical Gallery Layout Fix for 2Morocco
 * Ensures perfect image display across all browsers and devices
 */

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

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

/* Portfolio container height fix */
.atf-single-portfolio {
    height: 320px !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.3s ease !important;
}

/* Image positioning fix */
.atf-single-portfolio img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border: none !important;
    outline: none !important;
    transition: transform 0.4s ease !important;
}

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

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

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

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

/* Bootstrap column fixes */
@media (min-width: 992px) {
    .atf-tour-grid .col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .atf-tour-grid .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    /* Ensure lg-4 becomes md-6 on medium screens */
    .atf-tour-grid .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767.98px) {
    .atf-tour-grid .col-12,
    .atf-tour-grid .col-lg-4,
    .atf-tour-grid .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Hover effects */
.atf-single-portfolio:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2) !important;
}

.atf-single-portfolio:hover img {
    transform: scale(1.05) !important;
}

/* Content overlay positioning */
.atf-portfolio-content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)) !important;
    color: white !important;
    padding: 25px 20px !important;
    transform: translateY(100%) !important;
    opacity: 0 !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border-radius: 0 0 12px 12px !important;
}

.atf-single-portfolio:hover .atf-portfolio-content {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Filter buttons spacing */
.filter-menu {
    margin-bottom: 40px !important;
    text-align: center !important;
}

.filter-button {
    margin: 5px !important;
    border-radius: 25px !important;
}

/* Loading states */
.atf-tour-grid.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

/* Animation for filtered items */
.grid-item {
    transition: all 0.5s ease !important;
}

.grid-item.hidden {
    opacity: 0 !important;
    transform: scale(0.8) !important;
    pointer-events: none !important;
}

.grid-item.visible {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto !important;
}

/* Universal Grid System Override */
.atf-tour-grid .grid-item {
    /* Force consistent column behavior */
    box-sizing: border-box !important;
}

/* Force 3 columns on large screens */
@media (min-width: 1200px) {
    .atf-tour-grid .grid-item {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .atf-tour-grid .grid-item {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        width: 33.333333% !important;
    }
}

/* Force 2 columns on medium screens */
@media (min-width: 768px) and (max-width: 991.98px) {
    .atf-tour-grid .grid-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

/* Force 1 column on small screens */
@media (max-width: 767.98px) {
    .atf-tour-grid .grid-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Additional fixes for grid consistency */
.atf-tour-grid .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.atf-tour-grid .grid-item {
    display: flex !important;
    flex-direction: column !important;
}