/* ==========================================================================
   COLOSIAN MARKETS — LAYOUT
   ========================================================================== */

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

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

.site-header {
    position: relative;
    z-index: 50;

    width: 100%;

    margin: 0;
    padding: 16px 0 0;
}

.site-header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 48px;

    margin: 0 auto;
    padding: 0;

    gap: 1rem;
}

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

.home-page {
    padding-top: 0;
    padding-bottom: 7rem;
}

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

.hero-grid {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;

    align-items: center;

    gap: 4rem;

    min-height: 68vh;

    padding: 2rem 0 5rem;
}

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

.site-footer {
    border-top: 1px solid var(--color-border);

    padding: 2.5rem 0;

    color: var(--color-text-muted);

    font-size: 0.92rem;
}

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

    gap: var(--space-6);
}

.footer-links {
    display: flex;
    align-items: center;

    gap: 1rem;
}

/* ==========================================================================
   TABLET
   ========================================================================== */

@media (max-width: 980px) {
    .site-header {
        padding-top: 14px;
    }

    .site-header .nav {
        min-height: 46px;
    }

    .hero-grid {
        grid-template-columns: 1fr;

        gap: 2.5rem;

        min-height: auto;

        padding: 2rem 0 4rem;
    }

    .footer-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 720px) {
    .container {
        width: min(calc(100% - 1.25rem),
                var(--container-width));
    }

    .site-header {
        padding-top: 12px;
    }

    .site-header .nav {
        min-height: 44px;
    }

    .hero-grid {
        padding: 1.75rem 0 4rem;
    }

    .site-footer {
        padding: 2rem 0;
    }

    .home-page {
        padding-bottom: 5rem;
    }
}