/*
 * ===================================================================
 * My Scientific Journal - Hoja de estilos para artículos
 * ===================================================================
 */

/* === ESTILO GENERAL DEL ARTÍCULO === */
/*
 * Ajusta el texto del artículo para que esté justificado,
 * mejorando la legibilidad en columnas de texto anchas.
 */
.prose {
    text-align: justify;
}

/*
 * Estilo para la letra capital (Drop Cap) al inicio del artículo.
 * Usa el color azul primario.
 */
.prose .drop-cap::first-letter,
.prose>p:first-of-type::first-letter {
    font-size: 4.5rem;
    /* 72px */
    font-weight: 800;
    color: #0A2D4D;
    /* Color Azul Primario (en lugar de rojo) */
    float: left;
    line-height: 0.8;
    margin-right: 0.5rem;
    /* 8px */
    margin-top: 0.25rem;
    /* 4px */
}


/* === BLOQUE DE INTRODUCCIÓN === */
/*
 * Contenedor principal para el bloque de cabecera del artículo
 * (título de entrevista, nombre y foto).
 */
.intro-block {
    display: flex;
    flex-direction: column;
    /* Apilado en móvil por defecto */
    gap: 1.5rem;
    /* 24px de espacio */
    margin-bottom: 2rem;
    /* 32px de margen inferior */
    align-items: flex-start;
}

/* Contenedor del texto en el bloque de cabecera */
.intro-text {
    flex: 2;
    /* Ocupa más espacio que la imagen */
    /* Color azul para los títulos de la entrevista */
    color: #0A2D4D;
    /* Color Azul Primario (en lugar de rojo) */
}

.intro-text h2 {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 600;
    line-height: 1.75rem;
}

.intro-text p {
    font-size: 1rem;
    /* 16px */
    font-weight: 500;
    color: #4b5563;
    /* text-gray-600 */
}

/* Cita destacada dentro del bloque de cabecera (ej. Connecting Food) */
.intro-quote {
    position: relative;
    padding-left: 3rem;
    /* Espacio para las comillas */
    margin-top: 1rem;
}

.intro-quote svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 2.5rem;
    /* 40px */
    height: 2.5rem;
    color: #0A2D4D;
    /* Color Azul Primario */
    opacity: 0.3;
    /* Más sutil */
}

.intro-quote p {
    font-size: 1.125rem;
    /* 18px */
    font-style: italic;
    color: #374151;
    /* text-gray-700 */
}

/* Contenedor de la imagen en el bloque de cabecera */
.intro-image {
    flex: 1;
    /* Ocupa menos espacio */
    width: 100%;
    /* Ancho completo en móvil */
}

/* Layout para pantallas medianas y grandes (PC) */
@media (min-width: 768px) {
    .intro-block {
        flex-direction: row;
        /* Lado a lado */
    }

    .intro-image {
        max-width: 250px;
        /* Ancho máximo para la imagen */
        width: auto;
    }
}


/* === ESTILOS DE ENTREVISTA === */
/*
 * Estilo base para las etiquetas de quién habla (MSCJ, JMG, IB, etc.)
 */
.speaker-base {
    font-family: monospace;
    background-color: #f3f4f6;
    /* bg-gray-100 */
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
}

/* Entrevistador (MSCJ) - Usa el color azul primario */
.speaker-interviewer {
    color: #0A2D4D;
    /* Color Azul Primario */
}

/* Entrevistado (JMG, IB, etc.) - Usa un azul secundario para diferenciar */
.speaker-interviewee {
    color: #1d4ed8;
    /* text-blue-700 */
}


/* === ESTILOS DE REFERENCIAS === */
/*
 * Estilos para la lista de referencias al final del artículo.
 */
.references-list {
    list-style: none;
    /* Quitamos los números por defecto */
    padding-left: 0;
}

.references-list li {
    position: relative;
    margin-bottom: 0.75em;
    font-size: 0.875rem;
    /* text-sm */
    color: #4b5563;
    /* text-gray-600 */
}

/* Estilo para los enlaces dentro de las referencias */
.references-list a {
    color: #2563eb;
    /* text-blue-600 */
    text-decoration: none;
    word-break: break-all;
    /* Evita que URLs largas rompan el diseño */
}

.references-list a:hover {
    text-decoration: underline;
}


/* === UTILIDADES === */
/*
 * Limpia el 'float' de las imágenes flotantes.
 */
.clear-float {
    clear: both;
}

/*
 * Estilo para el icono de PDF (usado en la intro y en la sección de autor).
 */
.pdf-icon-link {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5rem;
    transition: transform 0.2s;
}

.pdf-icon-link:hover {
    transform: scale(1.1);
}
/*
 * ===================================================================
 * Estilos para la Barra Lateral (Sidebar)
 * ===================================================================
 */

/* Contenedor principal que divide el artículo de la barra lateral */
.article-container {
    display: grid;
    grid-template-columns: 1fr;
    /* Una columna en móvil */
    gap: 2rem;
    /* 32px */
}

/* En pantallas grandes (desktop) */
@media (min-width: 1024px) {

    /* lg breakpoint */
    .article-container {
        /* 3 partes para el artículo, 1 parte para la sidebar */
        grid-template-columns: 3fr 1fr;
        gap: 3rem;
        /* 48px */
    }
}

/* La barra lateral en sí */
.article-sidebar {
    /* La hacemos "pegajosa" para que acompañe en el scroll */
    position: sticky;
    top: 8rem;
    /* 64px (nav) + 32px (espacio) */
    align-self: start;
    /* Se pega arriba */
}

.article-sidebar h3 {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    color: #0A2D4D;
    /* Color primario */
    padding-bottom: 0.75rem;
    /* 12px */
    border-bottom: 2px solid #e5e7eb;
    /* border-gray-200 */
    margin-bottom: 1rem;
    /* 16px */
}

/* Estilos para cada artículo en la barra lateral */
.sidebar-article {
    display: flex;
    gap: 0.75rem;
    /* 12px */
    margin-bottom: 1.25rem;
    /* 20px */
}

.sidebar-article img {
    width: 80px;
    height: 56px;
    object-fit: cover;
    border-radius: 0.375rem;
    /* rounded-md */
    flex-shrink: 0;
}

.sidebar-article div {
    flex-grow: 1;
}

.sidebar-article a {
    font-size: 0.9rem;
    /* 14.4px */
    font-weight: 600;
    line-height: 1.3;
    color: #1f2937;
    /* text-gray-800 */
    text-decoration: none;
    transition: color 0.2s;
}

.sidebar-article a:hover {
    color: #0A2D4D;
    /* Color primario */
    text-decoration: underline;
}