/* --- 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;
}

/* Estilo para el subtítulo del blog */
.blog-subtitle {
    max-width: 90%;
    padding: 0 20px; /* Reemplaza padding-left y padding-right */
    margin: 0 auto; /* Centra el bloque del párrafo */
    color: #bd5d38;
    text-align: center;
}

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

h1 {    
    color: #2c3e50 !important;
    margin-bottom: 30px !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 medios que NO están en una cuadrícula (ocupan todo el ancho) */
.blog-card-content > div:not(.media-grid) .media-item img,
.blog-card-content > div:not(.media-grid) .media-item video {
    width: 100%;
    height: auto; 
    border-radius: 6px; 
    margin: 1rem 0;
}

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

/* Estilos para superponer el icono de play sobre los vídeos */
.video-wrapper, a[data-fancybox] > video {
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.video-wrapper::after, a[data-fancybox] > video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    /* Centramos el triángulo correctamente */
    transform: translate(-40%, -50%);
    /* Creamos el triángulo con bordes */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 40px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.85);
    text-shadow: 0 0 15px rgba(0,0,0,0.5);
    pointer-events: none; /* Permite hacer clic en el vídeo a través del icono */
}
.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;
    }
}