/* --- Estilos Comunes para Galerías y Blog --- */
body {
    padding-top: 70px; /* Ajuste para el navbar fijo */    
}

.title-block {
    text-align: center;
    margin-bottom: 2rem;
}

.title-block h1 {
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 0;
    line-height: 1;
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

h1 {    
    color: #2c3e50 !important;
    margin-bottom: 50px !important;
}

h1 span {
    color: #e74c3c !important;
}

.container {
    margin-top: 20px;
}

/* --- Estilos para CSS Grid Masonry (como en la galería de fotos) --- */
.blog-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 columna en móvil */
    gap: 2rem;
    grid-auto-rows: 1px; /* Clave para el efecto masonry */        
}

@media (min-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en escritorio */
    }
}

.blog-card {
    /* La tarjeta ocupa el espacio que le asigna el grid */
    align-self: start;
    /* Estilos visuales */
    padding: 1.5rem;
    border: 1px solid #eee;
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    box-sizing: border-box;
    background-color: #FFFFFF;
}

/* --- Estilos para la cuadrícula de medios dentro de un post --- */
.media-grid {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
    grid-auto-rows: 1px; /* Clave para el efecto masonry */
    grid-template-columns: 1fr; /* 1 columna por defecto (móvil) */
}
.media-item {
    align-self: start; /* Clave para que el item se alinee al inicio de su celda */
}

.blog-card-title { 
    margin-top: 0; 
    margin-bottom: 
    0.5rem; 
    color: #bd5d38;
}

.blog-card-meta { 
    color: #999; 
    margin-bottom: 1.5rem; 
}

.meta-icon {
    color: #8fd1da;
}

.blog-card-content { 
    word-wrap: break-word; 
}

/* 
 * Estilo para los párrafos dentro del contenido de la receta.
 * El `display: block` es el comportamiento por defecto de <p>, pero lo
 * mantenemos por claridad. El margen añade el espaciado deseado.
 */
.blog-card-content > p, 
.blog-card-content > b {
    margin-bottom: 0.5rem; /* Espacio entre líneas */
}

/* Añadir un espacio extra antes de los títulos de sección */
.blog-card-content > p:has(> b:only-child),
.blog-card-content > p:has(> b:first-child) {
    margin-top: 2rem;
}

/* Estilo para medios que NO están en una cuadrícula (ocupan todo el ancho) */
.blog-card-content > .media-item-wrapper .media-item img {
    width: 100%;
    height: auto; 
    border-radius: 6px; 
    margin: 2rem 0 0 0;
}

/* Estilo para imágenes DENTRO de una cuadrícula (se ajustan a su celda) */
.media-grid .media-item img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Estilos para superponer el icono de expandir sobre las imágenes (ahora en el enlace) */
a[data-fancybox] {
    position: relative;
    cursor: pointer;
    display: block;
}

.map-wrapper {
    position: relative;
}

@media (max-width: 990px) {
    .title-block h1 {
        font-size: 3rem;
        font-weight: 600;
    }
}

@media (max-width: 450px) {
    .title-block h1 {
        font-size: 2.5rem;
        font-weight: 600;
    }
}