/* ==========================================================================
   MAIN STYLESHEET
   898A Website - Mobile-First Responsive Design
   ========================================================================== */

/* Base Layer - Foundation styles */
@import 'base/variables.css';
@import 'base/reset.css';
@import 'base/typography.css';

/* Layout Layer - Structural components */
@import 'layout/header.css';
@import 'layout/navigation.css';
@import 'layout/footer.css';

/* Component Layer - UI components */
@import 'components/hero.css';
@import 'components/games-grid.css';
@import 'components/feature-boxes.css';
@import 'components/bottom-banner.css';
@import 'components/pages.css';

/* ==========================================================================
   Main Container
   ========================================================================== */

main {
    min-height: 100vh;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container-mobile);
    margin: 0 auto;
    padding: 0 15px;
}

@media (min-width: 768px) {
    .container {
        max-width: var(--container-tablet);
        padding: 0 30px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: var(--container-desktop);
        padding: 0 40px;
    }
}

@media (min-width: 1440px) {
    .container {
        max-width: var(--container-large);
    }
}

/* Spacing utilities */
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Visibility utilities */
.hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block;
    }

    .hide-desktop {
        display: none;
    }
}