/**
 * Estilos Base para Noticias — Radiocanal
 *
 * REGLA OBLIGATORIA: Todos los selectores deben estar bajo un contexto.
 * Ninguna declaración CSS puede ser global sin prefijo de contexto.
 *
 * Contextos definidos:
 *   .bloque-noticias              → Bloques de portada (modulo_noticias_bloques)
 *   .contenedor-listado-noticias  → Listado por categoría/ámbito
 *
 * Cada contexto puede sobrescribir en su propio archivo CSS.
 * Ver: bloques-noticias.css, listado_noticias.css (ambos en css/framework/)
 *
 * Variables requeridas (branding.css):
 *   --rc-font-primary, --rc-dark, --rc-primary, --rc-accent,
 *   --rc-tag-fondo, --rc-tag-color
 * Variables requeridas (formato-basico.css):
 *   --blanco, --grisclaro
 *
 * @version 3.0.0
 * @date 2026-04-14
 */

/* ==========================================================================
   NOTICIA-CARD — Estructura base
   Aplica a AMBOS contextos: portada y listado.
   ========================================================================== */

.bloque-noticias .noticia-card,
.contenedor-listado-noticias .noticia-card {
    background: var(--blanco);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: 0;
    word-wrap: break-word;
}

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

/* ==========================================================================
   IMAGEN
   ========================================================================== */

.bloque-noticias .noticia-card-img-wrapper,
.contenedor-listado-noticias .noticia-card-img-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.bloque-noticias .noticia-card-img,
.contenedor-listado-noticias .noticia-card-img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
    border-radius: 0;
}

.bloque-noticias .noticia-card:hover .noticia-card-img,
.contenedor-listado-noticias .noticia-card:hover .noticia-card-img {
    transform: scale(1.05);
}

/* ==========================================================================
   CUERPO
   ========================================================================== */

.bloque-noticias .noticia-card-body,
.contenedor-listado-noticias .noticia-card-body {
    padding: 1.25rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   TÍTULOS — Mobile first
   ========================================================================== */

.bloque-noticias .noticia-card-titulo,
.contenedor-listado-noticias .noticia-card-titulo {
    font-family: var(--rc-font-primary);
    font-weight: 600;
    line-height: 1.4;
    color: var(--rc-dark);
    margin-bottom: 0.75rem;
}

/* Mobile (default) */
.bloque-noticias h2.noticia-card-titulo,
.contenedor-listado-noticias h2.noticia-card-titulo { font-size: 2.2rem; }

.bloque-noticias h3.noticia-card-titulo,
.contenedor-listado-noticias h3.noticia-card-titulo { font-size: 1.9rem; }

/* Tablet ≥577px */
@media (min-width: 577px) {
    .bloque-noticias h2.noticia-card-titulo,
    .contenedor-listado-noticias h2.noticia-card-titulo { font-size: 2.2rem; }

    .bloque-noticias h3.noticia-card-titulo,
    .contenedor-listado-noticias h3.noticia-card-titulo { font-size: 1.9rem; }
}

/* Desktop ≥769px */
@media (min-width: 769px) {
    .bloque-noticias h2.noticia-card-titulo,
    .contenedor-listado-noticias h2.noticia-card-titulo { font-size: 3rem; }

    .bloque-noticias h3.noticia-card-titulo,
    .contenedor-listado-noticias h3.noticia-card-titulo { font-size: 2rem; }
}

/* ==========================================================================
   LINKS — Los 5 estados
   ========================================================================== */

.bloque-noticias .noticia-card-titulo a:link,
.bloque-noticias .noticia-card-titulo a:visited,
.contenedor-listado-noticias .noticia-card-titulo a:link,
.contenedor-listado-noticias .noticia-card-titulo a:visited {
    color: var(--rc-dark);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bloque-noticias .noticia-card-titulo a:hover,
.bloque-noticias .noticia-card:hover .noticia-card-titulo a,
.contenedor-listado-noticias .noticia-card-titulo a:hover,
.contenedor-listado-noticias .noticia-card:hover .noticia-card-titulo a {
    color: var(--rc-azul-logo);
    text-decoration: none;
}

.bloque-noticias .noticia-card-titulo a:focus-visible,
.contenedor-listado-noticias .noticia-card-titulo a:focus-visible {
    outline: 2px solid var(--rc-azul-logo);
    outline-offset: 2px;
}

.bloque-noticias .noticia-card-titulo a:active,
.contenedor-listado-noticias .noticia-card-titulo a:active {
    color: var(--rc-accent);
}

/* ==========================================================================
   LINK DE IMAGEN — Portada (imagen envuelta en <a> en los layouts de portada)
   ========================================================================== */

.bloque-noticias .noticia-card > a {
    display: block;
    text-decoration: none;
}

/* ==========================================================================
   OUTLINE — Suprimir en click de mouse, mantener para navegación teclado
   ========================================================================== */

.bloque-noticias .noticia-card a:focus:not(:focus-visible),
.contenedor-listado-noticias .noticia-card a:focus:not(:focus-visible) {
    outline: none;
}

/* ==========================================================================
   RESUMEN — Mobile first
   ========================================================================== */

.bloque-noticias .noticia-card-resumen,
.contenedor-listado-noticias .noticia-card-resumen {
    font-family: var(--rc-font-primary);
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--rc-secondary);
    margin-bottom: 0;
}

@media (min-width: 577px) {
    .bloque-noticias .noticia-card-resumen,
    .contenedor-listado-noticias .noticia-card-resumen { font-size: 1.8rem; }
}

@media (min-width: 769px) {
    .bloque-noticias .noticia-card-resumen,
    .contenedor-listado-noticias .noticia-card-resumen { font-size: 1.8rem; }

    .bloque-noticias h2.noticia-card-titulo ~ .noticia-card-resumen,
    .contenedor-listado-noticias h2.noticia-card-titulo ~ .noticia-card-resumen {
        font-size: 1.8rem;
    }
}