/* ════════════════════════════════════════════════════════════════
   NEWS HUB HUB STYLES (Extracted from news.html)
════════════════════════════════════════════════════════════════ */

body {
    background-color: #000;
    color: #fff;
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
}

.news-hero {
    padding: 4rem 1rem 2rem;
    text-align: center;
    background: linear-gradient(to bottom, #111, #000);
    border-bottom: 1px solid #222;
}

.tactical-label {
    display: inline-block;
    background: #FFCD00;
    color: #000;
    padding: 4px 12px;
    font-weight: 900;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.news-hero h1 {
    font-family: 'Anton', sans-serif;
    font-size: 3rem;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin: 0;
    color: #fff;
}

.news-hero h1 span {
    color: #FFCD00;
}

.news-hero p {
    color: #888;
    max-width: 600px;
    margin: 1rem auto 0;
    font-size: 1rem;
}

.news-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 1rem 5rem;
}

/* Override news.css grid for current view */
#news-grid-live {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

@media (min-width: 1100px) {
    #news-grid-live {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ════════════════════════════════════════════════════════════════
   INTELLIGENCE VIEW MODAL (Page Modal)
════════════════════════════════════════════════════════════════ */

#page-modal {
    display: none; /* Controlled by JS but good fallback */
    transition: opacity 0.3s ease;
}

#page-modal.active {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto;
}

#page-modal-content {
    transition: transform 0.3s ease;
}

#page-modal.active #page-modal-content {
    transform: scale(1);
}