/* ==========================================================
   SONARIA Layout System
   ========================================================== */


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

.container {

    width: min(var(--container-width), calc(100% - (var(--container-padding) * 2)));

    margin-inline: auto;

}


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

.section {

    padding-block: var(--section-spacing);

}

.section:first-of-type {

    padding-top: 0

}


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

.hero {

    min-height: calc(100vh - var(--navbar-height));

    margin-top: var(--navbar-height);

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    background: var(--color-primary);

}

.hero-content.stack {

    max-width: 650px;

    position: relative;

    z-index: 2;

    color: var(--color-background);

}

.hero-image {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.hero-container {

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: var(--space-3xl);

}

.hero-media{

    min-height:500px;

}


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

.grid {

    display: grid;

    gap: var(--space-xl);

}

.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
   ========================================================== */

.flex {

    display: flex;

}

.flex-center {

    display: flex;

    align-items: center;

    justify-content: center;

}

.flex-between {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


/* ==========================================================
   STACK
   Vertical spacing helper
   ========================================================== */

.stack > * + * {

    margin-top: var(--space-md);

}


/* ==========================================================
   CONTENT WIDTH
   ========================================================== */

.content {

    max-width: 760px;

}

.content-wide {

    max-width: 960px;

}

.content-narrow {

    max-width: 520px;

}


/* ==========================================================
   DIVIDERS
   ========================================================== */

.divider {

    width: 100%;

    height: 1px;

    background: var(--color-border);

}


/* ==========================================================
   SPACING HELPERS
   ========================================================== */

.mt-sm { margin-top: var(--space-sm); }

.mt-md { margin-top: var(--space-md); }

.mt-lg { margin-top: var(--space-lg); }

.mt-xl { margin-top: var(--space-xl); }


.mb-sm { margin-bottom: var(--space-sm); }

.mb-md { margin-bottom: var(--space-md); }

.mb-lg { margin-bottom: var(--space-lg); }

.mb-xl { margin-bottom: var(--space-xl); }


/* ==========================================================
    SPLIT LAYOUT 
   ========================================================== */

.split-layout {

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:var(--space-3xl);

}


.split-content {

    max-width:600px;

}


.split-media {

    min-height:500px;

    border-radius:var(--radius-lg);

    background:var(--color-surface);

    overflow:hidden;

}

.split-media img {

    width:100%;

    height:100%;

    object-fit:cover;

}

.about-layout .split-media {

    order: 1;

}

.about-layout .split-content {

    order: 2;

}

/* ==========================================================
   PROJECT FEATURE
   ========================================================== */


.project-feature {

    display:grid;

    grid-template-columns: 1.4fr 1fr;

    gap:var(--space-3xl);

    align-items:center;

}


.project-feature-content {

    max-width:480px;

}


/* ==========================================================
   CONTACT CTA
   ========================================================== */


.contact-cta {

    padding-block:
        var(--space-4xl);

    background:
        var(--color-primary);

    color:
        var(--color-background);

}


.contact-cta-content {

    max-width:
        760px;

}


.contact-cta h2 {

    margin-top:
        var(--space-sm);

}


.contact-cta p {

    max-width:
        620px;

    margin-top:
        var(--space-md);

    color:
        rgba(245,243,239,.72);

}


.contact-cta .btn {

    margin-top:
        var(--space-xl);

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 992px) {

    .grid-4 {

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

    }

}

@media (max-width: 768px) {

    .container {

        width: calc(100% - (var(--space-md) * 2));

    }

    .section {

        padding-block: 80px;

    }

    .grid-2,
    .grid-3,
    .grid-4 {

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


    }


    .hero {

        min-height: auto;

        padding-block: 140px 100px;

    }

    .hero-content {

        max-width: 100%;

    }

    .hero-container {

        grid-template-columns: 1fr;

    }
    
    .split-layout {

        grid-template-columns: 1fr;

    }

    .split-media {

        min-height: 350px;

    }

    .project-feature {

        grid-template-columns: 1fr;

    }

}

body {
    background-color: var(--color-background);

    background-image:
        radial-gradient(
            rgba(0, 0, 0, var(--texture-light-opacity)) 1px,
            transparent 1px
        );

    background-size: var(--texture-size) var(--texture-size);
}