/* ============================================
   MAIN CSS - Atomic Design Pattern
   ============================================ */

/* ATOMS */
@import url('atoms/variables.css');
@import url('atoms/reset.css');
@import url('atoms/typography.css');
@import url('atoms/buttons.css');
@import url('atoms/icons.css');
@import url('atoms/media-loader.css');
@import url('atoms/mobile-ui-scale.css');

/* MOLECULES */
@import url('molecules/cards.css');
@import url('molecules/nav-items.css');

/* ORGANISMS */
@import url('organisms/header.css?v=20251217_2');
@import url('organisms/sections.css');
@import url('organisms/footer.css');
@import url('organisms/modals.css');
@import url('organisms/grids.css');
@import url('organisms/cookie-banner.css');
@import url('organisms/portfolio-specific.css');

/* Override grids.css contact-container - must be after grids.css */
.contact-container {
    max-width: 600px !important;
    margin: 0 auto !important;
    display: block !important;
    grid: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 0 !important;
}

@media (max-width: 768px) {
    footer .social-links {
        gap: var(--spacing-sm) !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}