@charset "utf-8";

.entry-header {
    text-align: center;
    margin-bottom: 20px;
}

.entry-content {
    width: 100%;
    max-width: 100%;
    padding: 0; /* Elimina cualquier padding si es necesario */
    margin: 0 auto; /* Centra el contenido si hay un contenedor padre con un ancho específico */
    box-sizing: border-box; /* Asegura que el padding y el borde no afecten el ancho total */
}

.post-thumbnail.full-width {
    width: 100%;
    max-width: 100%;
    margin: 0 auto; /* Centra la imagen */
}

img {
    max-width: 800px;
    height:auto;
  object-fit: cover;
  flex-basis: 60%;
}

/* Ajustes específicos para el título */
.header-h1-post {
    margin-top: 0; /* Ajusta el margen superior si es necesario */
    text-align: center; /* Centra el texto si es necesario */
    width: 100%; /* Asegúrate de que el título ocupe el 100% del ancho */
    margin-top: 30px;
    margin-bottom: 30px;
    font-size: 4em;
    font-weight: 900;
}

.container-single-post {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2 fracciones para el contenido, 1 fracción para el sidebar */
    gap: 100px; /* Espacio entre el contenido y el sidebar */
    max-width: 1400px; /* Ajusta según tus necesidades */
    margin: 0 auto; /* Centra el grid en la página */
    padding: 20px;
}

.header-h2-post {
    font-size: 3em;
    margin-top: 25px; 
    margin-bottom: 10px;
}

.header-h3-post{
    margin-top: 50px; 
    font-size: 2em;
    font-weight: 700;
}

.ul-post {
    margin-top: 25px;
    margin-left: 50px;
}

.content-area-single-post {
    width: 100%;        
    max-width: 100%; 
    margin: 0 auto;    
    padding: 50px;
    overflow: hidden;
}

.entry-footer {
    margin-top: 20px;
    background-color: #f5f5f5;
    padding: 20px;
}





/*AQUÍ EL SIDEBAR RELATED POST DE LAS ENTRADAS (DERECHA DEL CONTENIDO)*/

.sidebar-single-post {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    list-style: none; /* Remueve los estilos de lista */
    padding: 0; /* Remueve el padding por defecto */
    margin-top: 20px; /* Espacio arriba de la lista */
    margin-bottom: 10px;
}

.header-h3-related-post {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 700;
}

.related-posts {
    padding: 20px;
    background-color: #f4f4f4; /* color de fondo ligero */
    border: 1px solid #ddd; /* borde sutil */
}

.related-posts-list {
    list-style-type: none; /* quita los bullets de la lista */
    padding: 0;
}

.related-post-item {
    display: flex;
    align-items: center; /* centra los items verticalmente */
    margin-bottom: 15px; /* espacio entre posts */
}

.related-post-thumbnail img {
    width: 150px;
    height: 150px;
    margin-right: 10px; /* espacio entre la imagen y el texto */
}

.related-post-info p {
    font-size: 0.8rem; /* tamaño de fuente pequeño para el excerpt */
    color: #666; /* color de texto gris */
}



@media (max-width: 768px) {
    .container-single-post {
        grid-template-columns: 1fr; /* Cambia a una sola columna */
    }

    .sidebar-single-post {
        order: 2; /* Mueve el sidebar debajo del contenido */
    }

    .content-area-single-post {
        order: 1; /* Asegura que el contenido principal esté primero */
    }
    
    img {
    max-width: 768px;
    height:auto;
  object-fit: cover;
  flex-basis: 60%;
}

}