/* ==========================================================================
   Layout
   ========================================================================== */

/* Content Wrapper */
.content-wrapper {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--container-padding);
}

/* Section Base */
.section {
    margin: var(--spacing-xl) auto;
    max-width: var(--container-max-width);
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    padding: var(--spacing-lg) var(--container-padding);
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Flex Utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }

/* Spacing Utilities */
.m-0 { margin: 0; }
.mt-md { margin-top: var(--spacing-md); }
.mb-md { margin-bottom: var(--spacing-md); }
.my-md { 
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.p-0 { padding: 0; }
.p-md { padding: var(--spacing-md); }
.px-md { 
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}
.py-md {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

/* Container Modifiers */
.container-sm { max-width: 640px; }
.container-md { max-width: 768px; }
.container-lg { max-width: 1024px; }
.container-xl { max-width: 1280px; }

/* Responsive Layout Adjustments */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .content-wrapper {
        padding: var(--spacing-lg) var(--container-padding);
    }

    .section {
        margin: var(--spacing-lg) auto;
        padding: var(--spacing-md);
    }

    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .content-wrapper {
        padding: var(--spacing-md) var(--container-padding);
    }

    .section {
        margin: var(--spacing-md) auto;
        padding: var(--spacing-sm);
    }

    .grid { gap: var(--spacing-sm); }
    .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* Visibility Utilities */
.hide-on-mobile {
    @media (max-width: 768px) {
        display: none !important;
    }
}

.show-on-mobile {
    display: none !important;
    @media (max-width: 768px) {
        display: block !important;
    }
}