/* =========================================================
BGG LOFT — LAYOUT
Global Structure & Page Layout
========================================================= */

/* =========================================================
APP SHELL
========================================================= */

.app-shell {

width: 100%;
min-height: 100vh;

display: flex;
flex-direction: column;

}


/* =========================================================
GLOBAL CONTAINERS
========================================================= */

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

width: 100%;
margin-inline: auto;

padding-inline: var(--layout-padding);

}

.container-narrow {
max-width: var(--layout-narrow);
}

.container-normal {
max-width: var(--layout-normal);
}

.container-wide {
max-width: var(--layout-wide);
}


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

main {

width: 100%;
flex: 1;

}

.main-content {

width: 100%;

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

}


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

.grid {

display: grid;
gap: var(--space-lg);

}

.grid-2 {

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

}

.grid-3 {

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

}

.grid-4 {

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

}

.flex {

display: flex;

}

.flex-center {

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

}

.flex-between {

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

}

.section-spacing {

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

}



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

.vault-header {

position: sticky;
top: 0;

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

}


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

.header-wrap {

display: grid;
grid-template-columns: 1fr auto 1fr;

padding-left: var(--space-xl);
padding-right: var(--space-xl);

align-items: center;

gap: var(--space-lg);

min-height: 60px;

}


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

.vault-toolbar {

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

gap: var(--space-md);

min-width: 0;

}

.utility-controls {

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

gap: var(--space-sm);

}


/* =========================================================
SORTING
========================================================= */

.sort-control {

display: flex;
align-items: center;

gap: var(--space-sm);

min-width: 0;

}


/* =========================================================
LOGO
========================================================= */

.logo {

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

}

.vault-logo {

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

text-align: center;

}


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

.mobile-logo {

display: none;

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

padding-top: var(--space-lg);
padding-bottom: var(--space-xs);

}

.mobile-logo .logo-link {

text-align: center;

}


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

footer {

margin-top: auto;

}

.footer-controls {

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

gap: var(--space-sm);

}

.footer-meta {

text-align: center;

}


/* =========================================================
RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1200px) {

.header-wrap {

    grid-template-columns: 1fr auto 1fr;

    min-height: 60px;

}

.vault-toolbar {

    width: 100%;

    justify-content: flex-start;

}

.sort-control {

    flex: 1;

}

.utility-controls {

    flex-shrink: 0;

}

.grid-4 { 

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

}

}


/* =========================================================
RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 768px) {

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

    padding-inline: var(--space-md);

}

.header-wrap {

    grid-template-columns: auto auto auto;
    gap: var(--space-xs);

    padding-left: var(--space-sm);
    padding-right: var(--space-sm);

    min-height: 68px;

}

.sort-label {
    font-size: 12px;
}

.logo {
    display: none;
}

.mobile-logo {

    display: flex;

}

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

    grid-template-columns: 1fr;

}

}