/* ==========================================================
   HerGame Phoenix
   Layout
   File: layout.css
   ========================================================== */


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

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


/* ==========================================================
   Main
   ========================================================== */

main {
    display: block;
}




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

.site-header {

    position: sticky;
    top: 0;

    z-index: 1000;

    background: rgba(255,253,243,.90);

    backdrop-filter: blur(18px);

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

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

}

.header{

    min-height:84px;

    display:grid;

    grid-template-columns:auto 1fr auto;

    align-items:center;

    column-gap:3rem;

}


/* ==========================================================
   Generic Grid Helpers
   ========================================================== */

.grid {
    display: grid;
}

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

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

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


/* ==========================================================
   Generic Flex Helpers
   ========================================================== */

.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;
}


/* ==========================================================
   Section Width
   ========================================================== */

.section-content {
    max-width: 760px;
}

.section-wide {
    max-width: 100%;
}

.section-narrow {
    max-width: 640px;
}


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

.stack-xs>*+* {
    margin-top: var(--space-2);
}

.stack-sm>*+* {
    margin-top: var(--space-3);
}

.stack-md>*+* {
    margin-top: var(--space-4);
}

.stack-lg>*+* {
    margin-top: var(--space-6);
}

.stack-xl>*+* {
    margin-top: var(--space-8);
}


/* ==========================================================
   Spacing Helpers
   ========================================================== */

.mt-0 {
    margin-top: 0;
}

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

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

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

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

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

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

.mb-0 {
    margin-bottom: 0;
}

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

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

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

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


/* ==========================================================
   Cards
   ========================================================== */

.card {
    background: var(--color-surface);

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

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

    overflow: hidden;

    box-shadow: var(--shadow-sm);
}


/* ==========================================================
   Media Helpers
   ========================================================== */

.aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.aspect-4-3 {
    aspect-ratio: 4 / 3;
}

.aspect-1-1 {
    aspect-ratio: 1;
}

.cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


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

.site-footer {
    margin-top: var(--space-10);
}