/*==================================================
  layout.css
  LinksHub UI v2
==================================================*/

/*==============================
  App Wrapper
==============================*/

.app{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    background:var(--bg);

}

.main{

    flex:1;

    width:100%;

}

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

.section{

    padding:70px 0;

}

.section-sm{

    padding:40px 0;

}

.section-lg{

    padding:100px 0;

}

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

.grid{

    display:grid;

    gap:24px;

}

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

}

.grid-auto{

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

}

/*==============================
  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;

}

.flex-wrap{

    flex-wrap:wrap;

}

.gap-1{

    gap:8px;

}

.gap-2{

    gap:16px;

}

.gap-3{

    gap:24px;

}

.gap-4{

    gap:32px;

}

.gap-5{

    gap:48px;

}

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

.hero{

    position:relative;

    overflow:hidden;

    padding:90px 0;

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-title{

    font-size:54px;

    line-height:1.1;

    margin-bottom:20px;

}

.hero-subtitle{

    max-width:700px;

    font-size:18px;

    color:var(--muted);

    margin-bottom:35px;

}

.hero-actions{

    display:flex;

    align-items:center;

    gap:16px;

    flex-wrap:wrap;

}

/*==============================
  Background Blobs
==============================*/

.hero::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(79,70,229,.12);

    top:-180px;

    left:-120px;

    filter:blur(20px);

}

.hero::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    border-radius:50%;

    background:rgba(6,182,212,.10);

    right:-120px;

    bottom:-160px;

    filter:blur(20px);

}

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

.page-header{

    margin-bottom:40px;

}

.page-title{

    margin-bottom:12px;

}

.page-description{

    color:var(--muted);

    max-width:760px;

}

/*==============================
  Content Wrapper
==============================*/

.content{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.content-row{

    display:flex;

    gap:24px;

    align-items:flex-start;

}

.content-sidebar{

    width:320px;

    flex-shrink:0;

}

.content-main{

    flex:1;

    min-width:0;

}

/*==============================
  Empty State
==============================*/

.empty-state{

    text-align:center;

    padding:70px 25px;

    border:1px dashed var(--border);

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

    background:var(--surface);

}

.empty-state i{

    font-size:48px;

    margin-bottom:18px;

    color:var(--primary);

}

.empty-title{

    margin-bottom:10px;

}

.empty-text{

    color:var(--muted);

}

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

@media(max-width:992px){

.grid-4{

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

}

.content-row{

    flex-direction:column;

}

.content-sidebar{

    width:100%;

}

.hero-title{

    font-size:42px;

}

}

@media(max-width:768px){

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

    grid-template-columns:1fr;

}

.hero{

    padding:70px 0;

}

.hero-title{

    font-size:34px;

}

.hero-actions{

    flex-direction:column;

    align-items:stretch;

}

}

@media(max-width:576px){

.section{

    padding:50px 0;

}

.hero{

    padding:55px 0;

}

.hero-subtitle{

    font-size:16px;

}

}