/*==============================================================
  Lunar Logic v2.0
  Layout
  File: layout.css
==============================================================*/

/*==============================================================
  Global Layout
==============================================================*/

main {
    position: relative;
    display: block;
    width: 100%;
}

section {
    position: relative;
    width: 100%;
}

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

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

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

/*==============================================================
  Vertical Rhythm
==============================================================*/

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

.section--large {
    padding-block: calc(var(--space-32) + var(--space-12));
}

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

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

.site-header {
    position: fixed;
    inset: 0 0 auto 0;

    height: var(--header-height);

    z-index: var(--z-header);
}

body {
    padding-top: var(--header-height);
}

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

.flex {
    display: flex;
}

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

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

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

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

.grid {
    display: grid;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-16);
}

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

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

/*==============================================================
  Hero Layout
==============================================================*/

.hero {
    position: relative;

    display: flex;
    align-items: center;

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

    overflow: hidden;

    isolation: isolate;
}

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(47,111,255,.12),
            transparent 38%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(108,229,255,.08),
            transparent 40%
        );

    z-index: -2;
}

.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,17,31,.20),
            rgba(7,17,31,.85)
        );

    z-index: -1;
}

.hero__grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    align-items: center;

    gap: clamp(4rem, 6vw, 8rem);

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

    padding-block: clamp(4rem, 8vw, 8rem);

}

.hero__content {
    position: relative;
    z-index: 5;
}

.hero__visual {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 720px;
}

/*==============================================================
  Content Width
==============================================================*/

.hero__lead {
    max-width: 640px;
}

.hero__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);

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

    flex-wrap: wrap;
}

.hero__metrics {
    display: grid;

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

    gap: var(--space-8);

    margin-top: var(--space-20);
}

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

@media (max-width: 1200px) {

    .hero__grid {

        gap: var(--space-20);

        grid-template-columns:
            1fr
            .9fr;

    }

}

@media (max-width: 992px) {

    .container,
    .container--wide,
    .container--narrow {

        width: min(100% - 2.5rem, var(--container-width));

    }

    .hero {

        min-height: auto;

    }

    .hero__grid {

        grid-template-columns: 1fr;

        gap: var(--space-20);

        text-align: center;

        min-height: auto;

        padding-block: var(--space-24);

    }

    .hero__content {

        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .hero__lead {

        max-width: 720px;

    }

    .hero__actions {

        justify-content: center;

    }

    .hero__metrics {

        width: 100%;
        max-width: 720px;

    }

    .hero__visual {

        order: -1;

        min-height: 500px;

    }

}

@media (max-width: 768px) {

    .container,
    .container--wide,
    .container--narrow {

        width: min(100% - 2rem, var(--container-width));

    }

    .section {

        padding-block: var(--space-20);

    }

    .hero__actions {

        width: 100%;

        flex-direction: column;

        align-items: stretch;

    }

    .hero__actions .button {

        width: 100%;

    }

    .hero__metrics {

        grid-template-columns: 1fr;

        gap: var(--space-6);

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

    }

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

        grid-template-columns: 1fr;

    }

}

@media (max-width: 480px) {

    body {

        padding-top: 72px;

    }

    .hero__visual {

        min-height: 360px;

    }

}