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

.article-container{

    max-width:1400px;

    margin:40px auto;

    padding:0 24px;

}


/* ===========================================================
   BREADCRUMB
=========================================================== */

.breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:24px;

    font-size:14px;

    color:var(--text-light);

}

.breadcrumb a{

    color:var(--primary);

    text-decoration:none;

}

.breadcrumb a:hover{

    text-decoration:underline;

}


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

.article-hero{

    margin-bottom:32px;

}

.article-category{

    display:inline-block;

    padding:6px 12px;

    border-radius:20px;

    background:var(--primary-light);

    color:var(--primary);

    font-size:13px;

    font-weight:600;

    margin-bottom:16px;

}

.article-hero h1{

    font-size:42px;

    line-height:1.3;

    margin-bottom:20px;

}

.article-description{

    font-size:18px;

    color:var(--text-light);

    max-width:900px;

    margin-bottom:24px;

}

.article-hero img{

    width:100%;

    border-radius:12px;

    display:block;

}


/* ===========================================================
   META
=========================================================== */

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:40px;

    padding:16px 0;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

    font-size:14px;

    color:var(--text-light);

}


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

.article-layout{

    display:grid;

    grid-template-columns:1fr 300px;

    gap:48px;

    margin-bottom:60px;

}


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

.article-content{

    min-width:0;

}

.article-content h2{

    margin-top:48px;

    margin-bottom:18px;

    font-size:32px;

}

.article-content h3{

    margin-top:32px;

    margin-bottom:16px;

    font-size:24px;

}

.article-content p{

    margin-bottom:20px;

    line-height:1.8;

}

.article-content ul,

.article-content ol{

    margin-bottom:20px;

    padding-left:24px;

}

.article-content li{

    margin-bottom:8px;

}


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

.article-content figure{

    margin:32px 0;

}

.article-content img{

    width:100%;

    border-radius:10px;

}

.article-content figcaption{

    margin-top:10px;

    text-align:center;

    font-size:14px;

    color:var(--text-light);

}


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

.article-content table{

    width:100%;

    border-collapse:collapse;

    margin:32px 0;

}

.article-content th,

.article-content td{

    padding:12px;

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

}

.article-content th{

    background:#f5f5f5;

}


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

.article-navigation{

    display:flex;

    justify-content:space-between;

    margin:64px 0;

    padding-top:32px;

    border-top:1px solid var(--border);

}

.article-navigation a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}


/* ===========================================================
   RELATED ARTICLES
=========================================================== */

.related-articles{

    margin:80px 0;

}

.related-articles h2{

    margin-bottom:24px;

}


/* ===========================================================
   AUTHOR
=========================================================== */

.author-box{

    margin-top:60px;

}


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

@media(max-width:992px){

.article-layout{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.article-container{

    padding:0 16px;

}

.article-hero h1{

    font-size:32px;

}

.article-description{

    font-size:16px;

}

.article-meta{

    flex-direction:column;

    gap:8px;

}

}