/* ==================== CATEGORIES ==================== */

.categories {
    display: flex;
    width: 100vw;
    flex-direction: column;
    align-items: start;
    gap: 2rem;
}

.categories-header {
    width: 100%;
    margin: 0 auto;
    max-width: 1280px;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    /* padding: 0 2rem; */
}

.categories-header-btn {
    display: flex;
    gap: 1rem;
}

/* Wrapper for overflow control */
.categories-row-wrapper {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    overflow: hidden;
    /* padding: 0 2rem; */
}

/* Carousel row */
.categories-row {
    display: flex;
    gap: 1rem;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

/* Each card takes 25% width on desktop (4 cards) */
.categories-section {
    display: flex;
    flex-direction: column;
    align-items: start;
    flex: 0 0 calc(25% - 0.75rem);
    min-width: 0;
}

.categories-section-header {
    color: #8E95A2;
    font-size: 3rem;
    margin-left: 0.6rem;
    line-height: 2.3rem;
}

.categories-section-data {
    width: 100%;
    height: 392px;
    border-radius: 12px;
    overflow: hidden;
}

.categories-section-container {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: start;
    gap: 1.5rem;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgb(0, 0, 0));
}

.categories-section-container-title {
    font-size: 1.5rem;
    color: #FFFFFF;
    margin: 0;
}

/* ==================== RESPONSIVE ==================== */

/* Tablet - 768px to 1020px */
@media (max-width: 1020px) {
    .categories-header-btn {
        display: none;
    }

    .categories-header {
        padding: 0 1.5rem;
    }

    .categories-row-wrapper {
        padding: 0 1.5rem;
        overflow: visible;
    }

    .categories-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        width: 100%;
        transform: none !important;
    }

    .categories-section {
        flex: none;
        width: 100%;
    }

    .categories-section-data {
        width: 100%;
    }
}

/* Mobile - 767px and below */
@media (max-width: 767px) {
    .categories-header {
        padding: 0 1rem;
    }

    .categories-row-wrapper {
        padding: 0 1rem;
    }

    .categories {
        width: 100%;
    }

    .categories-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
        width: 100%;
        transform: none !important;
    }

    .categories-section {
        width: 100%;
    }

    .categories-section-data {
        width: 100%;
    }

    .categories-section-container {
        max-width: 320px;
        margin: 0 auto;
    }
}

/* Desktop Large - 1280px and above */
/* @media (min-width: 1281px) {
    .categories-header {
        padding: 0 4rem;
    }

    .categories-row-wrapper {
        padding: 0 4rem;
    }
} */