/**
 * Bloques de Noticias Configurables
 * 
 * Sistema de estilos base para bloques de noticias con templates intercambiables.
 * Usa CSS variables para propiedades personalizables (color, tipografía).
 * Mantiene estilos heredados (espaciados, bordes, hover) para homogeneidad.
 * 
 * @version 1.0.0
 * @date 2026-04-05
 */

/* ==========================================================================
   BLOQUE BASE - Variables CSS y estilos fundamentales
   ========================================================================== */

.bloque-noticias {
    /* Variables por defecto (se sobrescriben con inline styles) */
    --bloque-bg: #ffffff;
    --bloque-titulo: #111827;
    --bloque-texto: #6b7280;
    --bloque-font: 'Roboto Condensed', sans-serif;
    
    /* Estilos base */
    background: var(--bloque-bg);
    padding: 4rem 0;
    margin-bottom: 2rem;
    position: relative;
}

/* Garantizar que el container no herede overrides de width externos (ej. banner_flotante.css) */
.bloque-noticias > .container {
    width: 100%;
    max-width: none;
}

/* Bloque con fondo visible: radius + overflow para recortar esquinas redondeadas */
.bloque-noticias--con-fondo {
    border-radius: 12px;
    overflow: hidden;
    margin-top: 2rem;
}

/* ===========================================================
   GRADIENTE DE ILUMINACIÓN — Overlay sobre el fondo sólido
   Funciona con cualquier color de fondo definido desde BD.
   Efecto: centro luminoso → bordes levemente más oscuros.
   =========================================================== */

/* Variante por defecto: radial — iluminación central sobre fondo oscuro */
.bloque-noticias--con-fondo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 35%,
        rgba(255, 255, 255, 0.32) 0%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(0, 0, 0, 0.42) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Variante para testing: radial intenso
   Activar agregando clase .bloque-noticias--grad-fuerte al section */
.bloque-noticias--grad-fuerte.bloque-noticias--con-fondo::before {
    background: radial-gradient(
        ellipse at 50% 38%,
        rgba(255, 255, 255, 0.28) 0%,
        rgba(255, 255, 255, 0.06) 45%,
        rgba(0, 0, 0, 0.45) 100%
    );
}

/* Variante para testing: gradiente lineal suave
   Activar agregando clase .bloque-noticias--grad-lineal al section */
.bloque-noticias--grad-lineal.bloque-noticias--con-fondo::before {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(0, 0, 0, 0.30) 100%
    );
}

/* Contenido siempre por encima del overlay */
.bloque-noticias--con-fondo > .container {
    position: relative;
    z-index: 1;
}

/* Eliminar negative margins del row Bootstrap para spacing uniforme en extremos */
.bloque-noticias--con-fondo > .container .row {
    margin-left: 0;
    margin-right: 0;
}

/* Header del bloque */
.bloque-noticias .bloque-header {
    text-align: center;
    margin-bottom: 3rem;
}

.bloque-noticias .bloque-header h2 {
    color: var(--bloque-titulo);
    font-family: var(--bloque-font);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.bloque-noticias .bloque-header h2::after {
    content: none;
}

/* ============================================================
   TÍTULO CON FONDO: glassmorphism pill con Oswald
   Solo se aplica a bloques con color_fondo definido en BD.
   ============================================================ */
.bloque-noticias--con-fondo .bloque-header {
    margin-bottom: 2.8rem;
}

.bloque-noticias--con-fondo .bloque-header h2 {
    font-family: 'Oswald', 'Roboto Condensed', sans-serif;
    font-size: 2.2rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    display: inline-block;
    padding: 0.35em 2em;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   CARDS DE NOTICIAS - Estilos HEREDADOS (NO modificables por instancia)
   ========================================================================== */

.bloque-noticias .noticia-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
    background: #ffffff;
    height: 100%;
}

.bloque-noticias .noticia-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

/* Imagen de la card — aspect-ratio y object-fit heredados de noticias-base.css */
.bloque-noticias .noticia-card-img {
    width: 100%;
}

/* Body de la card */
.bloque-noticias .noticia-card-body {
    padding: 1.5rem;
}

/* ==========================================================================
   ETIQUETAS DE ÁMBITO Y CATEGORÍA — solo portada, estilo simple sin fondo
   ========================================================================== */

.bloque-noticias .noticia-tags-meta {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
    line-height: 1.4;
}

.bloque-noticias .ambito-tag {
    display: inline;
    font-weight: 400;
    color: var(--rc-secondary);
}

.bloque-noticias .tags-separador {
    display: inline;
    color: var(--rc-secondary);
    margin: 0 0.25rem;
}

.bloque-noticias .categoria-tag {
    display: inline;
    font-weight: 400;
    color: var(--rc-secondary);
}

/* Títulos y resúmenes: tamaños y colores heredados de noticias-base.css */
.bloque-noticias .noticia-card-resumen {
    color: var(--bloque-texto);
}

/* ==========================================================================
   TEMPLATES ESPECÍFICOS - Ajustes por layout
   ========================================================================== */

/* Template: Grid 3x3 - tamaños heredados de noticias-base.css */

/* ==========================================================================
   RESPONSIVE - Ajustes por breakpoint
   ========================================================================== */

@media (max-width: 767px) {
    .bloque-noticias {
        padding: 3rem 0;
    }
    
    .bloque-noticias .bloque-header h2 {
        font-size: 2rem;
    }
}

@media (max-width: 575px) {
    .bloque-noticias {
        padding: 2rem 0;
    }
    
    .bloque-noticias .bloque-header {
        margin-bottom: 2rem;
    }
    
    .bloque-noticias .bloque-header h2 {
        font-size: 1.75rem;
    }
}

/* ==========================================================================
   UTILIDADES - Estados y helpers
   ========================================================================== */

/* Loading state */
.bloque-noticias.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Empty state */
.bloque-noticias .text-muted {
    color: #9ca3af;
    font-size: 1rem;
    padding: 3rem 0;
}

/* Alert dentro de bloques */
.bloque-noticias .alert {
    margin: 2rem 0;
}

/* ==========================================================================
   TEMPLATE: Grid 3col-2-1-2 (2 izq + 1 centro + 2 der)
   ========================================================================== */

/* Todas las cards tienen altura fija para bloque homogéneo */
.bloque-noticias--grid-3col-2-1-2 .noticia-card {
    height: 330px;
    display: flex;
    flex-direction: column;
}

.bloque-noticias--grid-3col-2-1-2 .noticia-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Noticias laterales - tamaños heredados de noticias-base.css */

/* Noticia destacada (centro): llena el alto de la columna.
   - flex: 1      → crece para igualar la altura de las columnas laterales
   - height: auto → cancela height: 330px heredado de .noticia-card
   display:flex + flex-direction:column → heredado de .noticia-card
   aspect-ratio: 16/9 en imagen     → heredado de noticias-base.css
   flex: 1 en .noticia-card-body    → heredado de regla superior */
.bloque-noticias--grid-3col-2-1-2 .noticia-destacada {
    flex: 1;
    height: auto;
}


/* Responsive: Tablet - solo heights, tamaños heredados */
@media (max-width: 991px) {
    .bloque-noticias--grid-3col-2-1-2 .noticia-card {
        height: 330px;
    }
    
}

/* Responsive: Mobile - solo heights, tamaños heredados */
@media (max-width: 767px) {
    .bloque-noticias--grid-3col-2-1-2 .noticia-card {
        height: auto;
    }
    
    .bloque-noticias--grid-3col-2-1-2 .noticia-destacada {
        height: auto;
    }
}

/* ==========================================================================
   TEMPLATE: Grid 2col-1-2 (Hero + 2 secundarias)
   Layout: 1 noticia destacada grande (66%) + 2 secundarias (33%)
   ========================================================================== */

/* Noticia destacada: altura variable según contenido */
.bloque-noticias--grid-2col-1-2 .noticia-destacada {
    display: flex;
    flex-direction: column;
}

.bloque-noticias--grid-2col-1-2 .noticia-destacada .noticia-card-img {
    aspect-ratio: 16 / 9;
}

/* Noticias laterales: altura fija para stack uniforme */
.bloque-noticias--grid-2col-1-2 .noticia-lateral {
    height: auto;
    min-height: 200px;
}

/* Responsive: Mobile */
@media (max-width: 991px) {
    .bloque-noticias--grid-2col-1-2 .noticia-lateral {
        height: auto;
        min-height: auto;
    }
}