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

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

.article-hero{
    
    max-width:820px;

    margin:80px auto 72px;

}

.article-category{

    display:inline-block;

    margin:0 0 18px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#2563eb;

}

.article-title{

    margin:0;

    font-size:54px;

    font-weight:800;

    line-height:1.08;

    letter-spacing:-.03em;

    color:#111827;

}

.article-excerpt{

    margin:28px 0;

    font-size:22px;

    line-height:1.75;

    color:#4b5563;

    max-width:760px;

}

.article-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    align-items:center;

    margin-bottom:42px;

    font-size:15px;

    font-weight:600;

    color:#6b7280;

}

.article-hero-image{

    margin-top:24px;

}

.article-hero-image img{

    width:100%;

    height:auto;

    display:block;

    border-radius:18px;

}

/* ==========================================================
   SHARED ARTICLE CARD
========================================================== */

.article-card{

    display:flex;

    flex-direction:column;

    background:#ffffff;

    border:1px solid #e5e7eb;

    border-radius:24px;

    overflow:hidden;

    transition:.25s ease;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

}

.article-card:hover{

    transform:translateY(-4px);

    border-color:#d1d5db;

    box-shadow:0 18px 45px rgba(15,23,42,.08);

}

.article-card-image{

    display:block;

    overflow:hidden;

}

.article-card-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    display:block;

    transition:.35s ease;

}

.article-card:hover .article-card-image img{

    transform:scale(1.03);

}

.article-card-content{

    display:flex;

    flex-direction:column;

    padding:28px;

}

.article-card-category{

    margin:0 0 12px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#2563eb;

}

.article-card-title{

    margin:0 0 16px;

    font-size:28px;

    font-weight:700;

    line-height:1.3;

}

.article-card-title a{

    color:#111827;

    text-decoration:none;

}

.article-card-title a:hover{

    color:#2563eb;

}

.article-card-excerpt{

    margin:0 0 22px;

    font-size:17px;

    line-height:1.8;

    color:#4b5563;

}

.article-card-meta{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    align-items:center;

    margin-bottom:22px;

    font-size:14px;

    font-weight:600;

    color:#6b7280;

}

.article-card-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    width:fit-content;

    font-size:15px;

    font-weight:700;

    color:#1d4ed8;

    text-decoration:none;

    transition:.25s ease;

}

.article-card-link:hover{

    gap:14px;

    color:#1d4ed8;

    text-decoration:underline;

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .article-hero{

        margin:48px auto;

    }

    .article-title{

        font-size:36px;

    }

    .article-excerpt{

        font-size:18px;

        line-height:1.8;

    }

    .article-meta{

        font-size:14px;

    }

    .article-card-title{

        font-size:22px;

    }

    .article-card-image img{

        height:200px;

    }

    .article-card-content{

        padding:22px;

    }

}


/* ==========================================================
   CLARAUS INSIGHT EDITORIAL LAYOUT
========================================================== */


.claraus-single-insight {

    width: 100%;

    padding-top: 60px;

    padding-bottom: 80px;

}


.claraus-insight-container {

    max-width: 860px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 40px;
    padding-right: 40px;

}


.insight-title {

    font-size: clamp(36px, 5vw, 56px);

    line-height: 1.1;

    letter-spacing: -0.03em;

    margin-bottom: 32px;

}


.insight-excerpt {

    font-size: 21px;

    line-height: 1.65;

    color: #555;

    margin-bottom: 32px;

}


.insight-meta {

    display: flex;

    gap: 12px;

    margin-bottom: 40px;

    color: #777;

    font-size: 15px;

}


.insight-content {

    max-width: 760px;

    margin: 0 auto;

    font-size: 1.15rem;

    line-height: 1.9;

    color: #1f2937;

}

.insight-content p {

    margin-bottom: 1.6rem;

}


.insight-content h2,
.insight-content h3 {

    margin-top: 50px;

    margin-bottom: 20px;

}


.insight-featured-image {

    margin-bottom: 45px;

}


.insight-featured-image img {

    width: 100%;

    height: auto;

    border-radius: 8px;

}


@media (max-width: 768px) {


    .claraus-insight-container {

        padding-left: 20px;

        padding-right: 20px;

    }


    .insight-content {

        font-size: 17px;

        line-height: 1.75;

    }


}