/* ==========================================================
   TriSaar Consulting Design System
   Layout
========================================================== */

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

.container {
    width: min(100% - 2rem, var(--container-width));
    margin-inline: auto;
}


.container-wide {
    width: min(100% - 2rem, var(--container-wide-width));
    margin-inline: auto;
}

/* ==========================================================
   Flex Utilities
========================================================== */

.flex {
    display: flex;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/* ==========================================================
   Footer
========================================================== */

.site-footer {
    padding: var(--space-8) 0;

    border-top: 1px solid var(--color-border);

    background: var(--color-surface);
}

/* ==========================================================
   Grid Utilities
========================================================== */

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-10);
    align-items: center;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.case-study-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

/* ==========================================================
   Header
========================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-navbar);

    background: rgba(255,255,255,0.92);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border-bottom: 1px solid var(--color-border);
}

/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 992px) {

    /* Hero stacks vertically (homepage also defines this) */
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

}

@media (max-width: 768px) {

    /* Hero spacing */
    .hero-grid {
        gap: var(--space-6);
    }

}

@media (max-width: 576px) {

    .section {
        padding-block: var(--space-8);
    }

    .container,
    .container-wide {
        width: min(100% - 1.5rem, var(--container-width));
    }

}

/* ==========================================================
   Navigation (legacy helpers — primary styles in components.css)
========================================================== */

.nav-logo {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-heading);
}

/* ==========================================================
   Sections
========================================================== */

.section {
    padding-block: var(--space-10);

    scroll-snap-align: start;
}

.section-sm {
    padding-block: var(--space-8);
}

.section-lg {
    padding-block: calc(var(--space-10) + 2rem);
}

/* ==========================================
   Homepage — no hash/snap scrolling
========================================== */

html.page-home {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

html.page-home .section {
    scroll-snap-align: none;
}

/* ==========================================
   Standalone Landing Page
========================================== */

body {

    margin: 0;

    overflow-x: hidden;

}

main {

    width: 100%;

}