/*
 * Este archivo contiene los estilos específicos para el diseño de dos columnas
 * de la página de detalle de la noticia. Por favor, asegúrate de vincularlo
 * DESPUÉS de tu archivo style.css principal.
 */

/*
 * Contenedor principal para la estructura de dos columnas.
 * Usamos Flexbox para organizar el texto y la imagen/redes sociales.
 */
.article-layout-container {
    display: flex;
    flex-wrap: wrap; /* Permite que las columnas se apilen en pantallas pequeñas */
    gap: 30px; /* Espacio entre las columnas */
    margin-top: 30px; /* Añade espacio sobre el contenedor de columnas (debajo de la sección) */
    /* Nueva propiedad para invertir el orden de las columnas
     * Esto coloca la columna de medios (imagen) a la DERECHA en desktop. */
    flex-direction: row-reverse !important;
    /* Asegura que las columnas se alineen desde la parte superior */
    align-items: flex-start; 
}

/*
 * Columna izquierda: el texto del artículo.
 * Ocupa 3/5 del ancho disponible (más espacio para el texto).
 */
.article-body-column {
    flex: 3; /* Proporción 3 */
    min-width: 300px; /* Asegura que la columna de texto no sea demasiado pequeña */
}

/* * NUEVO ESTILO: Ajusta el encabezado (donde está la línea roja) 
 * para que el párrafo que le sigue se alinee con el inicio de la imagen.
 * Si el h2 tiene un margen inferior grande y la imagen no, esto ayuda a igualar el desfase.
 */
.article-body-column h2 {
    margin-bottom: 20px; /* Mantener el espacio inferior */
}

/*
 * Columna derecha: la imagen y los íconos de redes sociales.
 * Ocupa 2/5 del ancho disponible (la imagen es más grande).
 */
.article-media-column {
    flex: 2; /* Proporción 2 */
    min-width: 250px; /* Asegura que la columna de medios no sea demasiado pequeña */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra la imagen y los íconos horizontalmente */
    gap: 15px; /* Espacio entre la imagen y los íconos */
    /* MODIFICADO: Aumentamos el margen superior para empujar la imagen más hacia abajo
       y alinearla con el inicio del primer párrafo, justo después del h2 y la línea. */
    margin-top: 85px; /* VALOR CLAVE: Aumentado de 70px a 85px. */
}

/* Estilos de la imagen del artículo */
.article-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Estilos de los íconos de redes sociales */
.article-social-media {
    display: flex;
    gap: 20px;
}

.article-social-media a {
    color: var(--color-santa-sede-brown-dark); /* Color de los íconos */
    font-size: 2.5rem; /* Tamaño de los íconos */
    transition: color 0.3s ease;
}

.article-social-media a:hover {
    color: var(--color-magisterium-gold); /* Color al pasar el ratón */
}

/* Media Query para pantallas pequeñas */
@media (max-width: 768px) {
    .article-layout-container {
        flex-direction: column !important; /* Apila las columnas verticalmente */
    }

    /* En pantallas pequeñas, ambas columnas ocupan todo el ancho */
    .article-body-column,
    .article-media-column {
        width: 100%;
        flex: auto;
        margin-top: 0; /* Asegura que no haya margen extra en móviles */
    }
}