/*==================================================
NEWS
==================================================*/

#news{

    padding:120px 0;

}

/* Necesita más especificidad que .psa-modal-card a secas para ganarle pase lo que pase el
   orden de carga de las hojas de estilo (mismo motivo que .player-modal-card). */
.psa-modal-card.news-modal-card{
    max-width:1160px;
    width:94%;
    max-height:90vh;
    overflow-y:auto;
    padding:0;
}

.news-modal-card #newsModalEmpty{
    padding:40px;
}

/* Con padding:0 el cierre queda encima de la foto (que llega hasta el borde) — le damos
   fondo propio y z-index para que se vea y se pueda pulsar por encima de la imagen. */
.news-modal-card .psa-modal-close{
    z-index:5;
    background:rgba(5,16,26,0.65);
    width:36px;
    height:36px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    top:12px;
    right:12px;
}

.news-modal-card .news-content{
    padding:30px;
}

.news-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.news-card{

    display:block;

    background:#0E2436;

    border-radius:22px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    transition:.30s;

    color:inherit;

    text-decoration:none;

    cursor:pointer;

}

.news-card:hover{

    transform:translateY(-8px);

    border-color:#C78C32;

}

.news-card img{

    width:100%;

    height:320px;

    object-fit:contain;

    background:#0E2436;

}

.news-card-noimage {
    width: 100%;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d2340, #16324a);
    font-size: 2.4rem;
    opacity: 0.5;
}

.news-content{

    padding:25px;

}

.news-date{

    color:#C78C32;

    font-size:.85rem;

    margin-bottom:12px;

}

.news-content h3{

    margin-bottom:15px;

}

.news-content p{

    color:#BFC9D2;

    line-height:1.6;

}

/* El cuerpo del artículo completo (news.html, #newsPageBody.news-content-body, que vive
   dentro de .news-content) trae su propio HTML con su propio <style> — normalmente un
   contenedor tipo .news-wrapper con sus colores ya definidos (fondo blanco, texto #0d2340,
   tarjetas de marcador, etc.). La regla .news-content p de arriba es solo para el resumen
   gris claro de las tarjetas de la lista; sin este reset, también pintaría de gris claro el
   texto de la noticia completa, aunque el artículo defina su color explícitamente, porque el
   navegador aplica cualquier regla que encuentre una coincidencia por encima de la herencia
   normal (que es lo que el HTML de la noticia da por hecho).
   `.news-content p` tiene especificidad (1 clase + 1 etiqueta); un simple
   `.news-content-body *` (1 clase) NO basta para ganarle — hace falta iguales o más clases,
   por eso el selector de "p" repite `.news-content` explícitamente. El resto de etiquetas
   (h1-h3, strong, a, li...) no tienen ninguna regla global que las toque, así que ahí sí basta
   el reset de baja especificidad. Cualquier selector propio del artículo (una sola clase ya
   vale) sigue ganando a todo esto sin necesitar !important, ni aquí ni en cada noticia nueva
   que se publique. */
.news-content-body,
.news-content-body * {
    color: inherit;
}

.news-content .news-content-body p {
    color: inherit;
}

/* Mismo problema que el color, pero con el recorte de imagen: .news-card img fuerza
   height:240px + object-fit:cover para la miniatura de la tarjeta de la lista, y
   #newsPageArticle (el artículo completo) también es .news-card — así que cualquier <img>
   insertada dentro del artículo (portada, o las que se suben con el botón "Subir imagen")
   se recortaba a esa caja de 240px en vez de verse entera.
   El !important de aquí en adelante es aposta: las imágenes ya insertadas en noticias
   publicadas antes de este arreglo llevan width:100% fijo en su propio style="" (más
   específico que cualquier regla externa sin !important), y así se veían a la altura
   natural completa de la foto — el objetivo es una foto de tamaño normal para verla, no
   que ocupe toda la página. Con esto se limita el tamaño tanto de las fotos ya publicadas
   como de las que se inserten a partir de ahora. */
.news-content .news-content-body img {
    max-width: 100% !important;
    max-height: 480px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 15px auto !important;
}

@media (max-width: 992px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    #news {
        padding: 50px 0;
    }

    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .news-card {
        border-radius: 14px;
    }

    .news-card img,
    .news-card-noimage {
        height: 175px;
    }

    .news-content {
        padding: 12px 14px;
    }

    .news-date {
        font-size: 0.75rem;
        margin-bottom: 4px;
    }

    .news-grid .news-content h3 {
        font-size: 0.98rem;
        margin-bottom: 6px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-grid .news-content p {
        font-size: 0.82rem;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .news-content .btn-news,
    .news-card .news-content a,
    .news-card .news-content span.btn-primary {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .news-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .news-card img,
    .news-card-noimage {
        height: 150px;
    }

    .news-content {
        padding: 10px;
    }

    .news-grid .news-content h3 {
        font-size: 0.88rem;
        margin-bottom: 4px;
    }

    .news-grid .news-content p {
        display: none;
    }
}

/* Full uncropped image view when reading a news article */
.news-detail-gallery {
    width: 100%;
    padding: 20px;
    background: rgba(4, 12, 20, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-sizing: border-box;
}

.news-detail-gallery img {
    width: 100% !important;
    height: auto !important;
    max-height: 75vh !important;
    object-fit: contain !important; /* Foto completa sin recortar */
    border-radius: 14px;
    background: #06101a;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    margin-bottom: 16px;
}

.news-detail-gallery img:last-child {
    margin-bottom: 0;
}

.news-share-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.news-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    background: #C78C32;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.news-share-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.news-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}