/* responsive.css - Additional responsive utilities */

/* ===== CONTAINER ADJUSTMENTS ===== */
@media screen and (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media screen and (max-width: 992px) {
    .container {
        max-width: 720px;
    }
}

@media screen and (max-width: 768px) {
    .container {
        max-width: 540px;
    }
}

@media screen and (max-width: 576px) {
    .container {
        padding: 0 15px;
    }
}

/* ===== GRID UTILITIES ===== */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

@media screen and (max-width: 992px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ===== SPACING UTILITIES ===== */
.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }
.mt-4 { margin-top: 40px; }
.mt-5 { margin-top: 50px; }

.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }
.mb-4 { margin-bottom: 40px; }
.mb-5 { margin-bottom: 50px; }

/* ===== TEXT UTILITIES ===== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* ===== FLEX UTILITIES ===== */
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 10px; }
.gap-2 { gap: 20px; }
.gap-3 { gap: 30px; }

/* ===== VISIBILITY UTILITIES ===== */
.hide-desktop {
    display: none;
}

@media screen and (max-width: 900px) {
    .hide-mobile {
        display: none;
    }
    
    .hide-desktop {
        display: block;
    }
}