/* =====================================================
   Vice City Vibe
   layout.css

   Page structure and layout systems
===================================================== */


/* =====================================================
   CONTAINER
===================================================== */


.container {

    width: min(90%, var(--max-width));

    margin-inline: auto;

}





/* =====================================================
   SITE HEADER
===================================================== */


.site-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

}





.main-navigation {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1.2rem 0;

}





/* =====================================================
   NAVIGATION LINKS
===================================================== */


.navigation-links {

    display: flex;

    align-items: center;

    gap: 1.8rem;

}





/* =====================================================
   MAIN CONTENT
===================================================== */


main {

    min-height: 70vh;

}





/* =====================================================
   HERO SECTION
===================================================== */


.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    position: relative;

    overflow: hidden;

}





.hero-content {

    position: relative;

    z-index: 2;

    text-align: center;

}





/* =====================================================
   HERO CONTENT SPACING
===================================================== */


.hero-tagline {

    margin-top: 1.5rem;

}





.hero-description {

    margin-top: 1rem;

}





.hero-button {

    margin-top: 2.5rem;

}





/* =====================================================
   SECTIONS
===================================================== */


section {

    padding: 5rem 0;

}





/* =====================================================
   CATEGORY GRID
===================================================== */


.category-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1.5rem;

}





/* =====================================================
   FEATURE SECTIONS
===================================================== */


.feature-section {

    padding: 2rem 0;

}





/* =====================================================
   FOOTER
===================================================== */


.site-footer {

    padding: 4rem 0;

    text-align: center;

}





/* =====================================================
   FOOTER CONTENT
===================================================== */


.site-footer p {

    max-width: 600px;

    margin: 1rem auto;

}