/* =========================
   SEED BLOG PAGE
========================= */


.seed-blog-page {
    background:#faf9ff;
    color:#17113f;
}


/* Hero */

.seed-blog-hero {
    padding:90px 0 50px;
    text-align:center;
}


.seed-container {
    width:min(1200px,90%);
    margin:auto;
}


.seed-blog-eyebrow {
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 18px;

    background:#e9fbfa;
    color:#0ca79d;

    border-radius:50px;

    font-size:14px;
    font-weight:800;
}


.seed-blog-eyebrow:before {
    content:"";
    width:8px;
    height:8px;
    background:#0ca79d;
    border-radius:50%;
}



.seed-blog-hero h1 {

    margin-top:25px;

    font-size:clamp(38px,5vw,62px);

    font-weight:950;

    line-height:1.5;
}


.seed-blog-hero h1 span {

    color:#7928d8;

}



.seed-blog-hero p {

    max-width:700px;

    margin:20px auto;

    color:#77718a;

    font-size:18px;

    line-height:2;

}




/* Categories */


.seed-blog-category {

    padding:20px 0 50px;

}


.seed-blog-category .seed-container {

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;

}



.seed-blog-category button {

    border:none;

    background:white;

    padding:12px 25px;

    border-radius:30px;

    color:#4c4665;

    font-weight:700;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(50,20,100,.05);

}



.seed-blog-category button.active {

    background:#7928d8;

    color:white;

}




/* Cards */


.seed-blog-list {

    padding:30px 0 100px;

}



.seed-blog-grid {

    display:grid;

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

    gap:30px;

}



.seed-blog-card {

    background:white;

    border-radius:28px;

    overflow:hidden;

    border:1px solid #eee9f8;

    transition:.3s;

}



.seed-blog-card:hover {

    transform:translateY(-8px);

    box-shadow:0 20px 50px rgba(80,30,150,.12);

}



.seed-blog-image img {

    width:100%;

    height:230px;

    object-fit:cover;

}




.seed-blog-content {

    padding:25px;

}



.seed-blog-content span {

    color:#0ca79d;

    font-size:14px;

    font-weight:800;

}



.seed-blog-content h2 {

    font-size:22px;

    line-height:1.8;

    margin:15px 0;

}



.seed-blog-content p {

    color:#77718a;

    line-height:2;

}




.seed-blog-meta {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:25px;

}



.seed-blog-meta a {

    color:#7928d8;

    font-weight:800;

    text-decoration:none;

}




@media(max-width:900px){

.seed-blog-grid{

grid-template-columns:1fr;

}


}


.article-box{

background:white;
border-radius:30px;
padding:40px;
box-shadow:0 10px 40px rgba(0,0,0,.05);

}



.category{

color:#12aaa5;
font-weight:bold;
margin-bottom:20px;

}



.excerpt{

font-size:20px;
color:#777;
line-height:2;

}



.article-image{

width:100%;
border-radius:25px;
margin:30px 0;

}



.content{

font-size:18px;
line-height:2.2;
text-align:justify;
white-space:pre-line;

}
.article-image{

width:100%;
max-height:500px;
object-fit:cover;
border-radius:25px;
margin:30px 0;

}


.placeholder{

height:400px;
background:#f3f1fb;
display:flex;
align-items:center;
justify-content:center;
color:#999;
font-size:18px;

}

.blog-container{

    max-width:1000px;
    margin:80px auto;
    padding:20px;

}


.article-image{

    width:100%;
    max-height:500px;
    object-fit:cover;
    border-radius:25px;
    margin:30px 0;

}


.category{

    color:#12aaa5;
    font-weight:bold;
    margin-bottom:20px;

}


.article-box h1{

    font-size:42px;
    line-height:1.7;

}


.excerpt{

    font-size:20px;
    color:#777;
    line-height:2;

}


.content{

    font-size:18px;
    line-height:2.2;
    text-align:justify;
    white-space:pre-line;

}
/* BLOG ONLY */

.seed-blog-page{
    background:#faf9ff;
    color:#25224a;
}

.blog-container{
    max-width:1000px;
    margin:80px auto;
    padding:20px;
}

.blog-container .article-box{
    background:#fff;
    border-radius:30px;
    padding:40px;
    box-shadow:0 10px 40px rgba(0,0,0,.05);
}

.blog-container h1{
    font-size:42px;
    line-height:1.7;
}

.blog-container a{
    color:#6328df;
}