/* static/css/layout.css */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
    max-width: 1200px;
    /* Force Hardware Acceleration to fix blurry text */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Sections */
.section {
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
}

/* Grids */
.grid {
    display: grid;
    gap: var(--spacing-xl);
}

.properties-grid {
    grid-template-columns: 1fr;
    max-width: 1000px;
    margin: 0 auto;
}

/* Carousel Additions */
.carousel-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #EAB308 #f1f1f1;
}

/* Custom Scrollbar for Carousel Webkit */
.carousel-row::-webkit-scrollbar {
    height: 8px;
}
.carousel-row::-webkit-scrollbar-track {
    background: transparent;
}
.carousel-row::-webkit-scrollbar-thumb {
    background: #EAB308;
    border-radius: 10px;
}

.carousel-row > * {
    scroll-snap-align: start;
    flex: 0 0 85%; /* Mobile */
    max-width: 1000px; /* Removes strict width enforcement */
}

@media (min-width: 768px) {
    .carousel-row > * {
        flex: 0 0 calc((100% - var(--spacing-xl)) / 2); /* Exact width for 2 cards without scroll */
    }
}

@media (min-width: 1024px) {
    .carousel-row > * {
        flex: 0 0 calc((100% - (2 * var(--spacing-xl))) / 3); /* Exact width to fit 3 cards perfectly without scroll */
    }
}

.properties-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

@media (min-width: 768px) {
    .properties-layout {
        grid-template-columns: 250px 1fr; /* Fixed sidebar, fluid properties */
    }
}