/* =========================================================
LAYOUT SYSTEM
MBVUMBO
========================================================= */

/* =========================================================
BODY
========================================================= */

body {

    position:
        relative;

    background:
        var(--cream);

    overflow-x:
        hidden;
}

/* =========================================================
CONTAINER
========================================================= */

.container,
.container-fluid {

    position:
        relative;

    z-index:
        2;
}

.container {

    width:
        100%;

    max-width:
        1320px;

    margin:
        0 auto;

    padding-left:
        24px;

    padding-right:
        24px;
}

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

section {

    position:
        relative;

    padding:
        var(--space-xxl) 0;

    overflow:
        hidden;
}

/* =========================================================
SECTION TITLE
========================================================= */

.section-title {

    position:
        relative;

    margin-bottom:
        80px;
}

.section-title span {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        var(--gold);

    text-transform:
        uppercase;

    letter-spacing:
        2px;

    font-size:
        .85rem;

    font-weight:
        700;
}

.section-title h2 {

    margin-bottom:
        25px;

    max-width:
        850px;
}

.section-title p {

    max-width:
        760px;

    margin:
        0 auto;

    font-size:
        1.1rem;
}

/* =========================================================
TEXT ALIGN
========================================================= */

.text-center {

    text-align:
        center;
}

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

.content-grid {

    display:
        grid;

    gap:
        40px;
}

.grid-2 {

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

.grid-3 {

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

.grid-4 {

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

/* =========================================================
FLEX
========================================================= */

.flex-center {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}

.flex-between {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}

/* =========================================================
SPACING HELPERS
========================================================= */

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

.mt-sm {margin-top:var(--space-sm);}
.mt-md {margin-top:var(--space-md);}
.mt-lg {margin-top:var(--space-lg);}
.mt-xl {margin-top:var(--space-xl);}

.mb-sm {margin-bottom:var(--space-sm);}
.mb-md {margin-bottom:var(--space-md);}
.mb-lg {margin-bottom:var(--space-lg);}
.mb-xl {margin-bottom:var(--space-xl);}

/* =========================================================
PADDING HELPERS
========================================================= */

.pt-0 {padding-top:0;}
.pb-0 {padding-bottom:0;}

.pt-lg {padding-top:var(--space-lg);}
.pb-lg {padding-bottom:var(--space-lg);}

/* =========================================================
GLASS PANEL
========================================================= */

.glass-panel {

    position:
        relative;

    background:
        rgba(255,255,255,.55);

    backdrop-filter:
        blur(20px);

    border:
        1px solid rgba(255,255,255,.18);

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

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

/* =========================================================
OVERLAYS
========================================================= */

.overlay-dark {

    position:
        absolute;

    inset:
        0;

    background:
        rgba(0,0,0,.65);

    z-index:
        1;
}

.overlay-gradient {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.2),
            rgba(0,0,0,.82)
        );

    z-index:
        1;
}

/* =========================================================
DIVIDERS
========================================================= */

.section-divider {

    width:
        120px;

    height:
        4px;

    margin:
        30px auto;

    border-radius:
        20px;

    background:
        var(--gradient-gold);
}

/* =========================================================
MEDIA WRAPPERS
========================================================= */

.media-cover {

    position:
        relative;

    overflow:
        hidden;

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

.media-cover img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform var(--transition-slow);
}

.media-cover:hover img {

    transform:
        scale(1.06);
}

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

.page-hero {

    position:
        relative;

    min-height:
        75vh;

    display:
        flex;

    align-items:
        center;

    color:
        white;

    overflow:
        hidden;
}

.page-hero-background {

    position:
        absolute;

    inset:
        0;
}

.page-hero-background img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.page-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        var(--gradient-dark);
}

.page-hero-content {

    position:
        relative;

    z-index:
        3;

    max-width:
        900px;
}

.page-hero-content h1 {

    color:
        white;

    margin-bottom:
        30px;
}

.page-hero-content p {

    color:
        rgba(255,255,255,.82);

    font-size:
        1.2rem;

    max-width:
        760px;
}

/* =========================================================
SIDEBAR LAYOUT
========================================================= */

.sidebar-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr) 360px;

    gap:
        60px;
}

.sidebar-main {

    min-width:
        0;
}

.sidebar-column {

    position:
        relative;
}

/* =========================================================
EMPTY STATE
========================================================= */

.empty-state {

    text-align:
        center;

    padding:
        100px 40px;

    background:
        white;

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

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

.empty-state h2 {

    margin-bottom:
        20px;
}

.empty-state p {

    margin:
        0 auto;

    max-width:
        500px;
}

/* =========================================================
BACKGROUND TEXTURES
========================================================= */

.texture-bg::before {

    content:'';

    position:
        absolute;

    inset:
        0;

    opacity:
        .05;

    background-image:
        url('../img/texture.webp');

    background-size:
        cover;

    pointer-events:
        none;
}

/* =========================================================
Z-INDEX
========================================================= */

.z-1 {z-index:1;}
.z-2 {z-index:2;}
.z-3 {z-index:3;}

/* =========================================================
ANIMATED BACKGROUND LIGHT
========================================================= */

.light-orb {

    position:
        absolute;

    width:
        400px;

    height:
        400px;

    border-radius:
        50%;

    filter:
        blur(120px);

    opacity:
        .12;

    background:
        var(--gold);

    pointer-events:
        none;
}

/* =========================================================
RESPONSIVE GRID
========================================================= */

@media(max-width:1200px){

.grid-4 {

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

.sidebar-layout {

grid-template-columns:
1fr;
}

}

@media(max-width:991px){

.grid-3,
.grid-2 {

grid-template-columns:
1fr;
}

section {

padding:
100px 0;
}

.section-title {

margin-bottom:
60px;
}

}

@media(max-width:768px){

.container {

padding-left:
20px;

padding-right:
20px;
}

section {

padding:
80px 0;
}

.page-hero {

min-height:
90vh;
}

.page-hero-content p {

font-size:
1rem;
}

}