/* ======================================
   ARTÍCULOS – ESTILO EDITORIAL SIMPLE
   Compatible con GitHub Pages
====================================== */

.blog-article {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 1rem;
}

.blog-article h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.blog-article .meta {
    font-size: .85rem;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.blog-article img {
    width: 100%;
    height: auto;
    margin: 1.5rem 0;
}

.blog-article p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

.blog-article h2 {
    font-size: 1.35rem;
    margin: 2rem 0 .75rem;
    font-weight: 600;
}

.blog-article blockquote {
    border-left: 3px solid #ccc;
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: #555;
    font-style: italic;
}

/* Estilos para las migas de pan */
.breadcrumb {
    background-color: transparent; /* Quita el fondo gris por defecto */
    padding: 0;
    font-size: 0.9rem;
}

.breadcrumb-item a {
    color: var(--color-accent); /* Usa el azul #2093cc que ya tienes */
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: #6c757d; /* Color gris para el texto de la página actual */
}

/* Separador (el / entre links) */
.breadcrumb-item + .breadcrumb-item::before {
    color: #eee7d5; /* Color del texto principal */
}
/* Unificar las tarjetas del blog con el estilo global */
.blog-card, .topic-card {
    background-color: var(--color-bg) !important; /* Fondo #0e1722 */
    border: 1px solid #1a2633 !important;
    padding: 0 !important; /* Para que la imagen llegue al borde */
    overflow: hidden;
}

.blog-card .card-body {
    padding: 1.5rem;
}

/* Ajuste para el hover */
.blog-card:hover {
    border-color: var(--color-accent) !important;
    transform: translateY(-6px);
}