/* ============================================================
   TABLOID — Яркий таблоид (Daily Mail / Sun-lite)
   Белый фон, красный + оранжевый, крупные заголовки
   ============================================================ */
:root {
    --bg:             #ffffff;
    --surface:        #f9f9f9;
    --surface2:       #f0f0f0;
    --border:         #e5e5e5;
    --text:           #111111;
    --text-muted:     #555555;
    --text-inv:       #ffffff;
    --accent:         #e4000f;
    --accent-h:       #b8000c;
    --accent-bg:      rgba(228,0,15,.07);
    --accent-cat:     #ffffff;
    --logo-color:     #ffffff;
    --nav-color:      rgba(255,255,255,.85);
    --nav-hover:      #ffffff;
    --link:           #c0001a;
    --link-hover:     #900012;

    --font-body:      Arial, Helvetica, sans-serif;
    --font-heading:   'Arial Black', 'Impact', Arial, sans-serif;
    --heading-weight: 900;
    --base-size:      15px;
    --line-height:    1.6;

    --radius:         3px;
    --radius-sm:      2px;
    --header-h:       56px;
    --grid-cols:      repeat(auto-fill, minmax(280px, 1fr));
    --card-gap:       1rem;

    --header-bg:      #e4000f;
    --header-border:  #b8000c;
    --footer-bg:      #1a1a1a;
    --footer-border:  #333;
    --footer-text:    #999;

    --card-bg:        #ffffff;
    --card-border:    #e5e5e5;
    --card-hover:     #e4000f;
    --card-h2-color:  #111111;
    --card-h2-hover:  #e4000f;

    --search-bg:      rgba(255,255,255,.15);
    --search-border:  rgba(255,255,255,.3);
    --search-text:    #ffffff;
    --search-btn-bg:  #ffffff;
    --search-btn-c:   #e4000f;

    --pag-bg:         transparent;
    --pag-border:     #ddd;
    --pag-text:       #333;
    --pag-active-bg:  #e4000f;
    --pag-active-c:   #ffffff;

    --hero-border:    2px solid #e5e5e5;
    --hero-text:      #555;
    --body-blockquote-border: #e4000f;
    --body-blockquote-text:   #555;
}

/* Header — solid red */
.site-header { border-bottom: none !important; }

.site-logo {
    font-family: 'Arial Black', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -0.01em;
    text-shadow: 1px 1px 0 rgba(0,0,0,.2);
}

/* Category badge — red pill on white bg */
.article-card-cat {
    background: #e4000f !important;
    color: #fff !important;
    border-radius: 2px !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
}

/* Cards — clean white with shadow */
.article-card {
    border-radius: var(--radius) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    border-color: transparent !important;
    transition: box-shadow .15s, transform .15s !important;
}
.article-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.14) !important;
    transform: translateY(-2px);
}

.article-card h2 {
    font-family: 'Arial Black', Arial, sans-serif !important;
    font-size: 1rem !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    color: #111 !important;
}
.article-card h2 a:hover { color: #e4000f !important; }

/* First card gets special treatment */
.articles-grid .article-card:first-child {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #e4000f 0%, #ff4400 100%);
    color: #fff;
    padding: 2rem !important;
    border-radius: 4px !important;
}
.articles-grid .article-card:first-child h2 a { color: #fff !important; font-size: 1.5rem !important; }
.articles-grid .article-card:first-child h2 a:hover { color: rgba(255,255,255,.85) !important; text-decoration: underline; }
.articles-grid .article-card:first-child .article-card-meta { color: rgba(255,255,255,.75) !important; }
.articles-grid .article-card:first-child .article-card-excerpt { color: rgba(255,255,255,.85) !important; font-size: 1rem !important; }
.articles-grid .article-card:first-child .article-card-cat { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.articles-grid .article-card:first-child > a[href]:last-child { color: rgba(255,255,255,.9) !important; font-weight: 700; }

/* Hero */
.hero {
    background: #f5f5f5;
    padding: 2rem !important;
    border-radius: 4px;
    border: none !important;
}
.hero h1 {
    font-family: 'Arial Black', sans-serif;
    font-size: 2rem;
    color: #111;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Article headline — huge tabloid style */
.article-header h1 {
    font-family: 'Arial Black', Arial, sans-serif;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.15;
    color: #111;
    text-transform: uppercase;
}
.article-body { font-family: Arial, sans-serif; font-size: 1rem; }

/* Page title */
.page-title {
    text-transform: uppercase;
    font-family: 'Arial Black', Arial, sans-serif;
    letter-spacing: -0.01em;
    border-bottom: 3px solid #e4000f !important;
}

/* Pagination */
.pagination .active { background: #e4000f !important; border-color: #e4000f !important; }

@media (max-width: 900px) { :root { --grid-cols: repeat(2, 1fr); } }
@media (max-width: 600px) { :root { --grid-cols: 1fr; } }