/* ===== Blog — listado y artículo ===== */

#blog-listado,
#blog-post{
    padding:clamp(7rem,18vw,10rem) 1rem clamp(3.75rem,7.82vw,6.25rem);
    box-sizing:border-box;
    background-color:#fff;
}
body.dark-mode #blog-listado,
body.dark-mode #blog-post{
    background-color:#0b1220;
}

#blog-listado .cs-container,
#blog-post .cs-container{
    width:100%;
    max-width:80rem;
    margin:0 auto;
}
#blog-post .cs-container--narrow{
    max-width:42rem;
}

#blog-listado .cs-content{
    text-align:center;
    width:100%;
    max-width:40.625rem;
    margin:0 auto clamp(2rem,4vw,3rem);
    display:flex;
    flex-direction:column;
    align-items:center;
}
#blog-listado .cs-topper,
#blog-post .cs-topper{
    font-size:var(--topperFontSize);
    text-transform:uppercase;
    letter-spacing:.1em;
    font-weight:700;
    color:var(--primary);
    margin-bottom:.25rem;
    display:block;
}
#blog-listado .cs-title,
#blog-post .cs-title{
    font-size:var(--headerFontSize);
    font-weight:900;
    line-height:1.2em;
    margin:0 0 1rem;
    color:var(--headerColor);
}
#blog-listado .cs-text,
#blog-post .blog-post__date{
    font-size:var(--bodyFontSize);
    line-height:1.5em;
    color:var(--bodyTextColor);
    margin:0;
}
body.dark-mode #blog-listado .cs-title,
body.dark-mode #blog-post .cs-title{color:var(--bodyTextColorWhite)}
body.dark-mode #blog-listado .cs-text,
body.dark-mode #blog-post .blog-post__date{color:#94a3b8}

/* Listado en tarjetas */
.blog-list{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr;
    gap:1.5rem;
}
@media only screen and (min-width:48rem){
    .blog-list{grid-template-columns:repeat(2,1fr)}
}
@media only screen and (min-width:64rem){
    .blog-list{grid-template-columns:repeat(3,1fr)}
}
.blog-list__item{
    background-color:#f7f7f7;
    border:1px solid #e8e8e8;
    border-radius:1rem;
    overflow:hidden;
    transition:transform .2s,box-shadow .2s;
}
.blog-list__item:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 24px rgba(15,23,42,.08);
}
body.dark-mode .blog-list__item{
    background-color:#111827;
    border-color:#1f2937;
}
.blog-list__item a{
    display:block;
    padding:1.5rem;
    text-decoration:none;
    color:inherit;
}
.blog-list__item img{
    width:100%;
    height:12rem;
    object-fit:cover;
    display:block;
    margin:-1.5rem -1.5rem 1rem;
    width:calc(100% + 3rem);
    position:relative;
    filter:grayscale(0.55) contrast(1.05);
}
.blog-list__item a{position:relative}
.blog-list__item a::before{
    content:"";
    position:absolute;
    top:-1.5rem; left:-1.5rem; right:-1.5rem;
    height:12rem;
    background:linear-gradient(160deg, rgba(124,58,237,.55), rgba(6,182,212,.35));
    mix-blend-mode:multiply;
    pointer-events:none;
}
body.dark-mode .blog-list__item a::before{
    mix-blend-mode:color;
    opacity:.7;
}
.blog-list__item .cs-h3{
    font-size:1.15rem;
    line-height:1.3em;
    font-weight:700;
    margin:0 0 .5rem;
    color:var(--headerColor);
}
body.dark-mode .blog-list__item .cs-h3{color:var(--bodyTextColorWhite)}
.blog-list__item .cs-item-text{
    font-size:.9rem;
    line-height:1.5em;
    color:var(--bodyTextColor);
    margin:0 0 .75rem;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
body.dark-mode .blog-list__item .cs-item-text{color:#94a3b8}
.blog-list__date{
    font-size:.8rem;
    color:var(--primary);
    font-weight:600;
}

/* Paginación */
.blog-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;
    margin-top:clamp(2rem,4vw,3rem);
    font-size:.9rem;
    color:var(--bodyTextColor);
}
body.dark-mode .blog-pagination{color:#94a3b8}

/* Botón reutilizado en listado/artículo */
#blog-listado .cs-button-solid,
#blog-post .cs-button-solid{
    font-size:1rem;
    line-height:3.5rem;
    text-decoration:none;
    font-weight:700;
    margin-top:1.5rem;
    color:#fff;
    padding:0 2rem;
    border-radius:2rem;
    background-color:var(--primary);
    display:inline-block;
    transition:background-color .3s;
}
#blog-listado .cs-button-solid:hover,
#blog-post .cs-button-solid:hover{
    background-color:var(--primaryLight);
}

/* Artículo individual */
.blog-post__back{
    display:inline-block;
    margin-bottom:1rem;
    font-size:.9rem;
    color:var(--primary);
    text-decoration:none;
    font-weight:600;
}
.blog-post__back:hover{text-decoration:underline}
.blog-post__date{
    display:block;
    margin-bottom:1.5rem;
    font-size:.85rem;
}
.blog-post__cover{
    width:100%;
    height:auto;
    border-radius:1rem;
    margin-bottom:2rem;
    display:block;
    filter:grayscale(0.4) contrast(1.05);
}
.blog-post__content{
    font-size:1.05rem;
    line-height:1.7em;
    color:var(--bodyTextColor);
}
body.dark-mode .blog-post__content{color:#cbd5e1}
.blog-post__content h2{
    font-size:1.4rem;
    font-weight:700;
    color:var(--headerColor);
    margin:2rem 0 1rem;
}
body.dark-mode .blog-post__content h2{color:var(--bodyTextColorWhite)}
.blog-post__content p{margin:0 0 1.25rem}
.blog-post__content a{color:var(--primary);text-decoration:underline}
.blog-post__content ul,
.blog-post__content ol{margin:0 0 1.25rem;padding-left:1.5rem}

/* Artículos relacionados (al final del post) */
.blog-related{
    margin-top:clamp(3rem,6vw,4rem);
    padding-top:clamp(2rem,4vw,2.5rem);
    border-top:1px solid #e8e8e8;
}
body.dark-mode .blog-related{border-color:#1f2937}
.blog-related__title{
    font-size:1.3rem;
    font-weight:800;
    color:var(--headerColor);
    margin:0 0 1.25rem;
}
body.dark-mode .blog-related__title{color:var(--bodyTextColorWhite)}
/* Dentro del artículo el contenedor es estrecho (42rem), así que aquí como mucho 2 columnas, nunca 3 */
.blog-related .blog-list{
    grid-template-columns:1fr;
}
@media only screen and (min-width:40rem){
    .blog-related .blog-list{grid-template-columns:repeat(2,1fr)}
}
.blog-related .blog-list__item img{
    height:9rem;
}
.blog-related .blog-list__item .cs-h3{
    font-size:1rem;
}