/* =========================================
   ESTILOS REFACTORIZADOS DEL BLOG
   ========================================= */

/* Margen inferior del post destacado */
.blog-featured-spacing {
    margin-bottom: 3.5rem;
}

/* Base para las imágenes de portada (dinámicas en HTML) */
.blog-featured-thumb,
.blog-thumb {
    background-size: cover !important;
    background-position: center !important;
}

/* Capas de gradiente oscuro sobre las imágenes */
.blog-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.4));
}

.blog-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.35));
}

/* Etiqueta de categoría flotante en las imágenes */
.blog-thumb-cat {
    position: relative;
    z-index: 1;
}

/* Título del post destacado */
.blog-featured-title {
    font-family: var(--fd);
    color: var(--navy);
    margin: 0.75rem 0 1rem;
    font-size: 1.45rem;
}

/* Extracto secundario del post destacado */
.blog-featured-excerpt {
    margin-top: 0.75rem;
}

/* Contenedor del botón y tiempo de lectura (Destacado) */
.blog-featured-footer {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

/* Tiempos de lectura (Destacado y Normal) */
.blog-read-time {
    font-size: 0.8rem;
    color: var(--slate-lt);
}

.blog-meta-time {
    font-size: 0.75rem;
    color: var(--slate-lt);
}

/* Asegurar que los contenedores de imagen sean la referencia de posición */
.blog-featured-thumb, 
.blog-thumb {
    position: relative; 
    overflow: hidden;
}

/* Estilar la nueva etiqueta <img> para que actúe como un background-cover */
.blog-thumb-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Subir el z-index de los elementos superpuestos para que la imagen no los tape */
.blog-featured-overlay, 
.blog-card-overlay, 
.blog-thumb-cat {
    position: relative;
    z-index: 2; 
}