/* ==========================================================================
   AI Narratives
   Layout System
   Version: 1.0

   Developed by
   Zytrix Core Systems Enterprise
   ========================================================================== */

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

.container{

    width:min(92%,1280px);

    margin:auto;

}

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

.section{

    padding:80px 0;

}

.section-sm{

    padding:50px 0;

}

.section-lg{

    padding:120px 0;

}

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

.grid{

    display:grid;

    gap:32px;

}

.grid-2{

    display:grid;

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

    gap:32px;

}

.grid-3{

    display:grid;

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

    gap:32px;

}

.grid-4{

    display:grid;

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

    gap:32px;

}

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

.flex{

    display:flex;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-column{

    display:flex;

    flex-direction:column;

}

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

.hero{

    min-height:65vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:100px 20px;

}

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

.page-header{

    padding:70px 0;

    text-align:center;

}

/* ==========================================================================
   ARTICLE
   ========================================================================== */

.article-layout{

    display:grid;

    grid-template-columns:280px 1fr;

    gap:50px;

}

.article-content{

    min-width:0;

}

.article-sidebar{

    position:sticky;

    top:30px;

    height:max-content;

}

/* ==========================================================================
   RESEARCH PAPER
   ========================================================================== */

.paper-layout{

    display:grid;

    grid-template-columns:1fr 320px;

    gap:40px;

}

.paper-content{

    max-width:850px;

}

.paper-sidebar{

    position:sticky;

    top:20px;

}

/* ==========================================================================
   VIDEO
   ========================================================================== */

.video-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

}

/* ==========================================================================
   PODCAST
   ========================================================================== */

.podcast-layout{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:40px;

}

/* ==========================================================================
   PRODUCT
   ========================================================================== */

.product-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:start;

}

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

.sidebar{

    display:flex;

    flex-direction:column;

    gap:25px;

}

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

.main{

    width:100%;

}

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

.gap-sm{

    gap:16px;

}

.gap{

    gap:24px;

}

.gap-lg{

    gap:40px;

}

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

.w-100{

    width:100%;

}

.max-720{

    max-width:720px;

}

.max-960{

    max-width:960px;

}

.max-1200{

    max-width:1200px;

}

/* ==========================================================================
   ALIGNMENT
   ========================================================================== */

.center{

    text-align:center;

}

.left{

    text-align:left;

}

.right{

    text-align:right;

}

/* ==========================================================================
   MARGINS
   ========================================================================== */

.mx-auto{

    margin-left:auto;

    margin-right:auto;

}

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:60px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:60px;}

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

@media(max-width:1024px){

.grid-4{

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

}

.grid-3{

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

}

.article-layout,
.paper-layout,
.video-layout,
.product-layout,
.podcast-layout{

grid-template-columns:1fr;

}

.article-sidebar,
.paper-sidebar{

position:relative;

top:auto;

}

}

@media(max-width:768px){

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

grid-template-columns:1fr;

}

.hero{

padding:70px 20px;

min-height:auto;

}

.section{

padding:60px 0;

}

.flex-between{

flex-direction:column;

gap:20px;

}

.container{

width:94%;

}

}

/* ==========================================================================
   END
   ========================================================================== */