/* =================================================================
   LAYOUT PRINCIPAL (Arregla el solapamiento)
   ================================================================= */

/* Contenedor Flex: Separa Contenido (Izq) y Sidebar (Der) */
.archive-layout-grid {
    display: flex;
    flex-wrap: wrap;       /* Permite que caiga en móvil */
    align-items: flex-start; /* IMPORTANTE: Evita que el sidebar se estire al alto del contenido */
    gap: 40px;             /* Espacio entre columnas */
    width: 100%;
    margin-bottom: 60px;   /* Empuja el footer hacia abajo */
    position: relative;    /* Contexto de apilamiento seguro */
}

/* Columna Izquierda: Contenido */
.content-area {
    flex: 1;               /* Ocupa todo el espacio posible */
    min-width: 0;          /* Evita desbordamientos en flex */
}

/* Columna Derecha: Sidebar */
.sidebar-area {
    width: 400px;          /* Ancho fijo desktop (según maqueta) */
    flex-shrink: 0;        /* Que no se encoja */
}


/* =================================================================
   CABECERA DE LA SECCIÓN (Desde página inyectada)
   ================================================================= */


/* 2. Imagen Destacada */
.archive-hero-figure {
    margin: 0 0 25px 0;
    width: 100%;
}
.archive-hero-figure img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.libros-hero-figure img {
    width: 100%;
    height: auto;
    display: block;
}


/* =================================================================
   LOOP / LISTADO DE TÉCNICAS
   ================================================================= */

/* Título "Últimas técnicas..." */
.loop-heading {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #000;
}

/* Lista limpia */
.tecnicas-list-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.tecnica-item, .libro-item, .historia-item {
    padding-top: 15px;
}

/* A. Formato (Pequeño: "Formato video") */
.tecnica-format, .ano-libro {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    color: #666;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 2px;
}
/* B. Título (Times Italic + Azul) */
.tecnica-title {
    margin: 0;
    line-height: 1;
}
.tecnica-title a, .libro-title a, .historia-title a {
    font-family: "Times New Roman", serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--sohah-teal-dark); /* Enlace azul/turquesa */
    text-decoration: none;
    font-weight: normal;
}
.tecnica-title a:hover, .libro-title a,:hover .historia-title a:hover {
    text-decoration: underline;
}

.historia-title {
    font-family: "Times New Roman", serif;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--sohah-teal-dark); /* Enlace azul/turquesa */
    text-decoration: none;
    font-weight: normal;
    line-height: 1;
    padding: 0 0 0 25px;
}
h3.historia-section {
    font-family: var(--font-primary);
    color: #000;
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}
h3.historia-title, h4.historia-title {
    margin-bottom: 5px;
}
ul {
    margin-bottom: 15px;
}
/* C. Autor */
.tecnica-author {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    color: #444;
    margin-top: 2px;
}

/* GRID NOTICIAS 2 COLUMNAS */
.noticias-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    column-gap: 40px;               /* Espacio hueco vertical entre columnas */
    row-gap: 0;                     /* Sin hueco extra, usamos padding para la línea */
    border-top: 2px solid var(--sohah-teal-dark);
    border-bottom: 2px solid var(--sohah-teal-dark);
    
    padding: 30px 0; /* Aire arriba y abajo dentro de las líneas */
    margin-bottom: 40px;
}
.noticia-item:nth-last-child(-n+2) {
    border-bottom: none;
}

.noticia-item {
    padding-bottom: 30px;           /* Espacio antes de la línea */
    margin-bottom: 30px;            /* Espacio después de la línea */
    border-bottom: 1px solid #ddd;  /* LA LÍNEA FINA */
}

/* Estilos de texto según tu imagen */
.noticia-date {
    font-size: 0.85rem;
    font-family: var(--font-primary);
    color: #666;
    margin-bottom: 5px;
}

.noticia-title {
    margin: 0 0 10px 0;
    font-size: 1.15rem;
    font-family: "Times New Roman", serif;
    line-height: 1;
    font-weight: normal;
}

.noticia-title a {
    color: var(--sohah-teal-dark); /* El azul verdoso de SoHaH */
    text-decoration: none;
}

.noticia-excerpt {
    font-size: 0.95rem;
    font-family: var(--font-primary);
    color: #000;
    line-height: 1;
}

/* RESPONSIVE: En móviles, volver a 1 columna */
@media (max-width: 768px) {
    .noticias-grid-container {
        grid-template-columns: 1fr; /* 1 columna */
    }
}

.nav-links {
    display: flex;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    gap: 20px;
}

/* =================================================================
   RESPONSIVE (MÓVIL < 900px)
   ================================================================= */
@media (max-width: 768px) {
    .archive-layout-grid {
        flex-direction: column; /* Contenido arriba, sidebar abajo */
        gap: 30px;
    }

    .content-area {
        width: 100%;
    }

    .sidebar-area {
        width: 100%; /* Sidebar ocupa todo el ancho */
    }
    .noticias-grid-container {
        grid-template-columns: 1fr;
    }
    /* En móvil, solo quitamos la línea gris al ÚLTIMO elemento absoluto */
    .noticia-item:nth-last-child(-n+2) {
        border-bottom: 1px solid #ddd; /* Restauramos al penúltimo */
    }
    .noticia-item:last-child {
        border-bottom: none;
    }
}