/* Page: Sumario (Table of Contents)
   Se maqueta como el índice de la revista impresa, no como una lista de enlaces: titulares en
   serif y en tinta (el enlace lo marca el hover, no un subrayado dorado en cada línea), mucho
   aire entre piezas y una jerarquía de tres escalones bien separados — titular, entradilla y
   ficha — en lugar de tres líneas de tamaño parecido. */
.sumario-page {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-2xl);
    counter-reset: sumario-seccion;
}

/* Más calle entre el índice y la portada que el gap genérico de la rejilla */
@media (min-width: 1024px) {
    .sumario-page .grid--sidebar-right {
        column-gap: var(--space-2xl);
    }
}

/* --- Cabecera ------------------------------------------------------------- */
.sumario-head {
    position: relative;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-l);
}

/* Filete dorado corto: la firma de la mancheta, en pequeño. Sin filete fino a todo el ancho,
   que ya lo pone el rótulo de la primera sección justo debajo. */
.sumario-head::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4rem;
    height: 2px;
    background: var(--accent-soft);
}

.sumario-head__issue {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-s);
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--link);
}

.sumario-head__issue::before {
    content: '';
    width: 2rem;
    height: 1px;
    background: currentColor;
}

.sumario-head__title {
    margin: 0;
    font-size: clamp(3rem, 2.4rem + 3vw, 5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
}

.sumario-head__date {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-lg);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--text-dim);
}

/* --- Secciones ------------------------------------------------------------ */
.sumario-section {
    counter-increment: sumario-seccion;
    margin-bottom: var(--space-xl);
}

/* Rótulo de sección como en el índice impreso: numeral en serif dorado, nombre en versalitas
   espaciadas y un filete que corre hasta el margen. El numeral sale de un contador CSS (es
   orden de lectura, no un dato), así que no hay que mantenerlo en el template. */
.sumario-section__title {
    display: flex;
    align-items: baseline;
    gap: var(--space-s);
    margin: 0 0 var(--space-xs);
    font-family: var(--font-family-sans);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: var(--line-height-base);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-strong);
}

.sumario-section__title::before {
    content: counter(sumario-seccion, decimal-leading-zero);
    font-family: var(--font-family-serif);
    font-size: 1.6rem;
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    color: var(--link);
}

.sumario-section__title::after {
    content: '';
    flex: 1;
    height: 1px;
    align-self: center;
    background: var(--border-hair);
}

/* Los tratamientos .sumario-entry (fila con nº de página y autor) y .sumario-featured
   (tarjeta horizontal con foto) del mock se han retirado con él: el WS del sumario no da
   página, ni autor, ni marca de destacado, así que no había con qué pintarlos. Si el DTO
   gana esos campos, vuelven desde el histórico de este fichero. */

/* --- Piezas --------------------------------------------------------------- */
.sumario-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sumario-list__item {
    position: relative;
    padding: var(--space-m) 0;
    border-bottom: 1px solid var(--border-hair-soft);
}

.sumario-list__item:last-child {
    border-bottom: 0;
}

/* Barra dorada que asoma por el margen al pasar por encima: la fila entera es el blanco */
.sumario-list__item::before {
    content: '';
    position: absolute;
    left: calc(-1 * var(--space-s));
    top: var(--space-m);
    bottom: var(--space-m);
    width: 2px;
    background: var(--accent-soft);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.25s ease;
}

.sumario-list__item:hover::before {
    transform: scaleY(1);
}

.sumario-list__title {
    display: block;
    font-family: var(--font-family-serif);
    font-size: clamp(1.4rem, 1.25rem + 0.6vw, 1.7rem);
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-strong);
    text-decoration: none;
    text-wrap: pretty;
}

/* Enlace estirado: toda la fila responde al clic, no solo las letras del titular */
a.sumario-list__title::after {
    content: '';
    position: absolute;
    inset: 0;
}

.sumario-list__item:hover .sumario-list__title {
    color: var(--link);
}

.sumario-list__subtitle {
    display: block;
    max-width: 60ch;
    margin-top: var(--space-xs);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-body-soft);
}

/* Ficha del contenido (autor · tipo · sector): un escalón por debajo de la entradilla, que es
   la que debe leerse primero. */
.sumario-list__meta {
    display: block;
    margin-top: var(--space-s);
    font-family: var(--font-family-sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-dim);
}

@media (prefers-reduced-motion: reduce) {
    .sumario-list__item::before {
        transition: none;
    }
}

/* --- Sidebar: sticky cover + actions -------------------------------------- */
.sumario-sidebar {
    position: sticky;
    /* Por debajo de la cabecera sticky: la misma cifra que índice y anclas del detalle. */
    top: var(--header-offset);
}

/* Hueco más grande del diseño para la portada (373px de ancho en desktop): es el que fija
   el tamaño del fichero que se pide a maquetación, 800×1132 (A4). La proporción es la del
   fichero para que object-fit: cover no recorte la mancheta. Ver .mp-issue__cover.
   El marco dorado separado (outline con offset) la presenta como pieza, no como miniatura. */
.sumario-cover {
    box-shadow: var(--shadow-lg);
    margin: var(--space-xs) var(--space-xs) var(--space-l);
    border-radius: var(--radius-sm);
    overflow: hidden;
    aspect-ratio: 800 / 1132;
    outline: 1px solid var(--border-accent-soft);
    outline-offset: var(--space-xs);
}

.sumario-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sumario-sidebar .btn {
    width: 100%;
    margin-bottom: var(--space-xs);
}

/* Estado vacío: la edición todavía no tiene contenidos vinculados (el WS responde 404
   cuando la edición no tiene ninguno) o el WS no ha respondido. */
.sumario-empty {
    padding: var(--space-m);
    border: 1px dashed var(--border-accent-soft);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    color: var(--text-dim);
}

/* Navegación entre números. Solo aparece cuando hay edición anterior o siguiente, así que
   con una sola edición (el arranque de la revista) no ocupa nada. */
.sumario-nav {
    display: flex;
    gap: var(--space-s);
    margin-top: var(--space-xl);
    padding-top: var(--space-m);
    border-top: 1px solid var(--border-hair);
}

.sumario-nav__next {
    margin-left: auto;
}