/**
 * article.css
 * Estilos para artículos individuales de Joomla
 */

.article {
    margin: var(--spacing-xl) 0;
}

.article > * {
    max-width: 78ch;
    margin-inline: auto;
}

/* Portada: landing a ancho completo del contenedor, no al límite de lectura.
   Las utilidades .content-wide / .content-full siguen funcionando dentro. */
.article.article--home > *,
.article.article--home .content-body {
    max-width: none;
}

/* Portada pegada a la cabecera: el héroe full-bleed arranca a ras (sin el
   margen superior que sí mantienen los artículos de prosa). */
.article.article--home {
    margin-top: 0;
}

.article-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text);
    text-wrap: balance;
    text-align: center;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-md);
}

.article-meta-date,
.article-meta-modified {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.article-meta-date::before {
    content: "📅 ";
}

.article-meta-modified::before {
    content: "🔄 ";
}

.article-image {
    margin: var(--spacing-xl) 0;
    text-align: center;
}

.article-image img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.article-image figcaption {
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    font-style: italic;
}

.article-content {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-loose);
    color: var(--color-text);
}

.article-edit-link {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* ── Índice de hijos / secciones (mod_menu @index-children / @index-sections) ── */
.index-children {
    list-style: none;
    margin: 0 0 var(--spacing-xl);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.index-children__item:last-child .index-children__link {
    border-bottom: none;
}

.index-children__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    padding-inline-start: calc(var(--spacing-md) + 3px);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    /* Divisor y barra de acento en el mismo elemento que el fondo de hover:
       una sola caja pintada de una vez, sin costura entre bordes ajenos */
    border-bottom: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.index-children__link::after {
    content: '›';
    flex-shrink: 0;
    font-size: 1.4em;
    line-height: 1;
    color: var(--color-text-light);
    transition: transform var(--transition-fast), color var(--transition-fast);
}

.index-children__link:hover,
.index-children__link:focus-visible {
    background-color: var(--color-surface-tint);
    border-left-color: var(--color-primary);
}

.index-children__link:hover::after,
.index-children__link:focus-visible::after {
    transform: translateX(4px);
    color: var(--color-primary);
}

/* ── Responsive (mobile-first) ── */

@media (max-width: 47.99rem) {
    .article-content {
        padding-inline: var(--spacing-sm);
    }
}