/* ==========================================================
   AD LIFESTYLE V2
   LAYOUT.CSS
   Responsive Layout & Grid System
   ========================================================== */

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

#root{
    min-height:100vh;

    display:flex;
    flex-direction:column;
}

#app{
    flex:1;
    position:relative;
}

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

.container{
    width:min(var(--container), calc(100% - 64px));
    margin-inline:auto;
}

.container-lg{
    width:min(var(--container-lg), calc(100% - 64px));
    margin-inline:auto;
}

.container-sm{
    width:min(var(--container-sm), calc(100% - 48px));
    margin-inline:auto;
}

.container-fluid{
    width:100%;
    padding-inline:32px;
}

/* ==========================================================
   SECTION SYSTEM
   ========================================================== */

.section{
    position:relative;
    padding:120px 0;
}

.section-sm{
    position:relative;
    padding:84px 0;
}

.section-lg{
    position:relative;
    padding:180px 0;
}

.section-center{
    max-width:760px;
    margin-inline:auto;
    text-align:center;
}

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:32px;
    margin-bottom:64px;
}

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

.grid{
    display:grid;
    gap:32px;
}

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

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

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

.grid-auto{
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}

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

.bento{
    display:grid;

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

    gap:24px;
}

.span-3{grid-column:span 3;}
.span-4{grid-column:span 4;}
.span-5{grid-column:span 5;}
.span-6{grid-column:span 6;}
.span-7{grid-column:span 7;}
.span-8{grid-column:span 8;}
.span-9{grid-column:span 9;}
.span-12{grid-column:span 12;}

.row-2{grid-row:span 2;}

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

.flex{
    display:flex;
}

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

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

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

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

.align-center{align-items:center;}
.align-start{align-items:flex-start;}
.align-end{align-items:flex-end;}

.justify-center{justify-content:center;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}

.wrap{flex-wrap:wrap;}

.gap-1{gap:8px;}
.gap-2{gap:16px;}
.gap-3{gap:24px;}
.gap-4{gap:32px;}
.gap-5{gap:48px;}
.gap-6{gap:64px;}

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

.hero{
    position:relative;

    min-height:100vh;

    display:flex;
    align-items:center;

    overflow:hidden;

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

.hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    gap:72px;
}

.hero-content{
    position:relative;
    z-index:2;
}

.hero-visual{
    position:relative;

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

/* ==========================================================
   SPLIT LAYOUT
   ========================================================== */

.split{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:72px;
    align-items:center;
}

.split.reverse .split-content{
    order:2;
}

.split.reverse .split-image{
    order:1;
}

.split-image{
    position:relative;
}

.split-image img{
    width:100%;
    border-radius:var(--radius-xl);
}

/* ==========================================================
   CARD LAYOUT
   ========================================================== */

.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:28px;
}

/* ==========================================================
   METRICS
   ========================================================== */

.metrics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:32px;
    margin-top:56px;
}

/* ==========================================================
   ICON LIST
   ========================================================== */

.icon-list{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.icon-item{
    display:flex;
    align-items:flex-start;
    gap:16px;
}

/* ==========================================================
   TIMELINE
   ========================================================== */

.timeline{
    display:flex;
    flex-direction:column;
    gap:28px;
}

/* ==========================================================
   SHOWCASE
   ========================================================== */

.showcase-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:48px;
    align-items:center;
}

/* ==========================================================
   TESTIMONIALS
   ========================================================== */

.testimonial-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
}

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

.social-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

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

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:48px;
}

/* ==========================================================
   SPACING UTILITIES
   ========================================================== */

.mt-0{margin-top:0;}
.mt-1{margin-top:8px;}
.mt-2{margin-top:16px;}
.mt-3{margin-top:24px;}
.mt-4{margin-top:32px;}
.mt-5{margin-top:48px;}
.mt-6{margin-top:64px;}
.mt-7{margin-top:96px;}

.mb-0{margin-bottom:0;}
.mb-1{margin-bottom:8px;}
.mb-2{margin-bottom:16px;}
.mb-3{margin-bottom:24px;}
.mb-4{margin-bottom:32px;}
.mb-5{margin-bottom:48px;}
.mb-6{margin-bottom:64px;}

.pt-1{padding-top:8px;}
.pt-2{padding-top:16px;}
.pt-3{padding-top:24px;}
.pt-4{padding-top:32px;}
.pt-5{padding-top:48px;}

.pb-1{padding-bottom:8px;}
.pb-2{padding-bottom:16px;}
.pb-3{padding-bottom:24px;}
.pb-4{padding-bottom:32px;}
.pb-5{padding-bottom:48px;}

/* ==========================================================
   WIDTH UTILITIES
   ========================================================== */

.w-full{width:100%;}
.h-full{height:100%;}

.max-480{max-width:480px;}
.max-560{max-width:560px;}
.max-640{max-width:640px;}
.max-720{max-width:720px;}
.max-820{max-width:820px;}

/* ==========================================================
   POSITION
   ========================================================== */

.relative{position:relative;}
.absolute{position:absolute;}
.sticky{position:sticky;}

.top-0{top:0;}
.left-0{left:0;}
.right-0{right:0;}
.bottom-0{bottom:0;}

.overflow-hidden{overflow:hidden;}

/* ==========================================================
   DIVIDER
   ========================================================== */

.divider{
    width:100%;
    height:1px;
    background:var(--border);
    margin:56px 0;
}

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

@media (max-width:1200px){

    .container,
    .container-lg{
        width:min(100%, calc(100% - 48px));
    }

    .hero-grid,
    .split,
    .showcase-grid{
        gap:56px;
    }

}

@media (max-width:992px){

    .hero-grid,
    .split,
    .showcase-grid,
    .footer-grid{
        grid-template-columns:1fr;
    }

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

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

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

    .testimonial-grid{
        grid-template-columns:1fr;
    }

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

    .section-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .bento{
        grid-template-columns:repeat(6,1fr);
    }

    .span-7,
    .span-8,
    .span-9{
        grid-column:span 6;
    }

    .span-5,
    .span-4,
    .span-3{
        grid-column:span 3;
    }

}

@media (max-width:768px){

    .container,
    .container-lg,
    .container-sm{
        width:min(100%, calc(100% - 28px));
    }

    .container-fluid{
        padding-inline:18px;
    }

    .section{
        padding:84px 0;
    }

    .section-lg{
        padding:120px 0;
    }

    .section-sm{
        padding:64px 0;
    }

    .hero{
        min-height:auto;
        padding-top:120px;
        padding-bottom:72px;
    }

    .hero-grid{
        grid-template-columns:1fr;
        gap:48px;
    }

    .grid-2,
    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
    }

    .metrics{
        grid-template-columns:1fr;
        gap:28px;
    }

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

    .bento{
        grid-template-columns:1fr;
    }

    .span-3,
    .span-4,
    .span-5,
    .span-6,
    .span-7,
    .span-8,
    .span-9,
    .span-12{
        grid-column:1;
    }

}

@media (max-width:480px){

    .container,
    .container-lg,
    .container-sm{
        width:calc(100% - 20px);
    }

    .social-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .gap-6{gap:40px;}
    .gap-5{gap:32px;}

}