/* assets/css/style.css */

/* CSS RESET E VARIÁVEIS */
:root {
    --primary: #c20000;
    --dark: #111827;
    --text: #334155;
    --gray: #64748b;
    --border: #e2e8f0;
    --bg: #ffffff;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; transition: 0.2s; }
a:hover { color: var(--primary); }
img { max-width: 100%; height: auto; display: block; object-fit: cover; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* HEADER E NAVEGAÇÃO */
.site-header { border-bottom: 1px solid var(--border); padding: 25px 0; }
.header-inner { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 38px; font-weight: 900; font-family: 'Merriweather', serif; letter-spacing: -2px; color: var(--dark); }
.logo span { color: var(--primary); }

.main-nav { border-bottom: 2px solid var(--dark); position: sticky; top: 0; background: rgba(255,255,255,0.98); z-index: 100; backdrop-filter: blur(5px); }
.main-nav ul { display: flex; list-style: none; margin: 0; padding: 0; overflow-x: auto; justify-content: center; }
.main-nav li a { display: block; padding: 16px 15px; font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--dark); white-space: nowrap; border-bottom: 3px solid transparent; }
.main-nav li a:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* URGENTE */
.breaking-news { background: var(--primary); color: #fff; padding: 10px 0; font-size: 13px; font-weight: 600; }
.breaking-news span { background: #fff; color: var(--primary); padding: 2px 8px; border-radius: 2px; font-weight: 900; margin-right: 10px; text-transform: uppercase; font-size: 11px; }

/* BLOCOS DINÂMICOS */
.home-block { margin: 50px 0; border-bottom: 1px solid var(--border); padding-bottom: 40px; }
.home-block:last-child { border-bottom: none; }

.block-header { border-top: 4px solid var(--dark); padding-top: 10px; margin-bottom: 25px; display: flex; justify-content: space-between; align-items: baseline; }
.block-title { font-size: 20px; font-weight: 900; color: var(--dark); text-transform: uppercase; margin: 0; letter-spacing: -0.5px; }
.block-link { font-size: 12px; font-weight: 700; color: var(--primary); text-transform: uppercase; }

/* COMPONENTES DE NOTÍCIA PREDOMINANTES */
.news-card { display: flex; flex-direction: column; gap: 12px; }
.news-title { font-size: 20px; font-weight: 800; line-height: 1.25; margin: 0; color: var(--dark); font-family: 'Merriweather', serif; letter-spacing: -0.5px; }
.news-card:hover .news-title { color: var(--primary); text-decoration: underline; }
.news-excerpt { font-size: 15px; color: var(--text); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-image { width: 100%; aspect-ratio: 16/10; background: #f1f5f9; position: relative; overflow: hidden; border-radius: 4px; }
.news-image img { width: 100%; height: 100%; transition: transform 0.4s; }
.news-card:hover .news-image img { transform: scale(1.05); }

/* ========================================= */
/* LAYOUTS DA CAPA (OS 7 TIPOS) */
/* ========================================= */

/* 1. HERO (EBC) */
.layout-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: stretch; }
.hero-left { width: 100%; } 
.hero-left .news-image { display: block; width: 100%; height: 100%; border-radius: 6px; overflow: hidden; border-bottom: 4px solid var(--primary); }
.hero-left .news-image img { width: 100%; height: 100%; object-fit: cover; }
.hero-right { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 5px; }
.hero-badge { background: #d9f99d; color: #166534; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; display: inline-block; align-self: flex-start; margin-bottom: 15px; }
.hero-main-title { font-size: 38px; font-weight: 900; color: var(--dark); margin: 0 0 15px 0; line-height: 1.15; letter-spacing: -1px; }
.hero-main-title a:hover { color: var(--primary); text-decoration: none; }
.hero-related-section { border-top: 1px solid var(--border); padding-top: 20px; margin-top: auto; }
.hero-related-label { font-size: 13px; font-weight: 800; color: var(--dark); text-transform: uppercase; margin-bottom: 15px; border-left: 4px solid #84cc16; padding-left: 8px; }
.related-item { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }
.related-item:last-child { margin-bottom: 0; }
.related-image { width: 120px; aspect-ratio: 16/10; border-radius: 4px; overflow: hidden; flex-shrink: 0; background: #f1f5f9; }
.related-image img { width: 100%; height: 100%; object-fit: cover; }
.related-title { font-size: 16px; font-weight: 700; color: var(--dark); margin: 0; line-height: 1.3; }
.related-item:hover .related-title { color: var(--primary); text-decoration: underline; }

/* 2. GRID 4 COLUNAS */
.layout-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.layout-grid .news-title { font-size: 16px; }

/* 2A. FEATURE SPLIT (1 grande + lista lateral) */
.layout-feature-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 28px; align-items: start; }
.feature-main .news-title { font-size: 28px; margin-top: 10px; }
.feature-main .news-excerpt { margin-top: 10px; }
.feature-side-list { display: flex; flex-direction: column; gap: 18px; }
.feature-side-item { flex-direction: row; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.feature-side-item:last-child { border-bottom: none; padding-bottom: 0; }
.feature-side-item .news-image { width: 150px; flex-shrink: 0; }
.feature-side-item .news-title { font-size: 17px; }

/* 2B. MOSAICO EDITORIAL (1 destaque + 3 cards equilibrados) */
.layout-mosaic-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 28px; align-items: start; }
.mosaic-main { gap: 14px; }
.mosaic-main .news-image { aspect-ratio: 16/10; border-radius: 6px; }
.mosaic-main .news-title { font-size: 30px; line-height: 1.18; }
.mosaic-main .news-excerpt { font-size: 15px; color: var(--text); }
.mosaic-main-content { display: flex; flex-direction: column; gap: 10px; }
.mosaic-side-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.mosaic-side-card { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.mosaic-side-card:last-child { border-bottom: none; padding-bottom: 0; }
.mosaic-side-card .news-image { width: 130px; aspect-ratio: 4/3; }
.mosaic-side-card .news-title { font-size: 18px; line-height: 1.28; margin-top: 2px; }

/* 3. GRID 3 COLUNAS */
.layout-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.layout-grid-3 .news-title { font-size: 20px; }

/* 4. GRID 2 COLUNAS (Destaques) */
.layout-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.layout-grid-2 .news-title { font-size: 24px; }
.layout-grid-2 .news-excerpt { font-size: 16px; margin-top: 10px; }

/* 5. LISTA VERTICAL (C/ Foto Esquerda) */
.layout-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.layout-list .news-card { flex-direction: row; align-items: flex-start; gap: 20px; border-bottom: 1px solid var(--border); padding-bottom: 20px; }
.layout-list .news-image { width: 180px; flex-shrink: 0; }
.layout-list .news-title { font-size: 18px; }

/* 6. MAGAZINE (1 Maior Esquerda, 2 Menores Direita) */
.layout-magazine { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; }
.mag-main .news-title { font-size: 28px; margin-top: 10px; }
.mag-side { display: flex; flex-direction: column; gap: 20px; }
.mag-side .news-card { flex-direction: row; gap: 15px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.mag-side .news-card:last-child { border-bottom: none; padding-bottom: 0; }
.mag-side .news-image { width: 140px; flex-shrink: 0; }
.mag-side .news-title { font-size: 16px; }

/* 7. GIRO DE NOTÍCIAS (Só Texto) */
.layout-text-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.layout-text-list .news-card { border-top: 1px solid var(--dark); padding-top: 15px; }
.layout-text-list .news-card:first-child { border-top: 4px solid var(--primary); }
.layout-text-list .news-title { font-size: 18px; }
.layout-text-list .news-excerpt { font-size: 14px; margin-top: 8px; }

/* RESPONSIVO GLOBAL */
@media (max-width: 900px) {
    .layout-hero { grid-template-columns: 1fr; gap: 20px; }
    .hero-left .news-image { height: auto; aspect-ratio: 16/9; }
    .hero-main-title { font-size: 30px; }
    .layout-list, .layout-magazine, .layout-grid-2, .layout-grid-3, .layout-text-list, .layout-feature-split { grid-template-columns: 1fr; }
    .layout-grid { grid-template-columns: repeat(2, 1fr); }
    .layout-mosaic-feature { grid-template-columns: 1fr; }
    .mosaic-side-card { grid-template-columns: 140px 1fr; }
    .feature-side-item { flex-direction: row; }
    .main-nav ul { justify-content: flex-start; }
}
@media (max-width: 600px) {
    .layout-grid, .layout-mosaic-feature { grid-template-columns: 1fr; }
    .layout-list .news-card, .mag-side .news-card, .feature-side-item { flex-direction: column; }
    .mosaic-side-card { grid-template-columns: 1fr; }
    .layout-list .news-image, .mag-side .news-image, .feature-side-item .news-image, .mosaic-side-card .news-image { width: 100%; aspect-ratio: 16/9; }
}

/* RODAPÉ */
.site-footer { background: var(--dark); color: #fff; padding: 60px 0 40px; margin-top: 50px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 30px; margin-bottom: 30px; }
.footer-logo { color: #fff; font-size: 30px; font-weight: 900; font-family: 'Merriweather', serif; letter-spacing: -1px; }
.footer-logo span { color: var(--primary); }
.footer-copy { text-align: center; color: #94a3b8; font-size: 13px; }

/* HOME COM SIDEBAR APÓS O DESTAQUE */
.home-block-hero-top { margin-top: 0; }
.homepage-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.homepage-main { min-width: 0; }
.homepage-sidebar { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 22px; }
.sidebar-widget { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.sidebar-widget-title { margin: 0; padding: 18px 18px 0; font-size: 30px; line-height: 1; font-weight: 900; color: var(--primary); letter-spacing: -0.8px; }
.sidebar-widget-body { padding: 16px 18px 18px; }
.sidebar-ad-label { font-size: 10px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
.sidebar-ad-box { display: block; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.sidebar-ad-box img { width: 100%; height: auto; border-radius: 6px; }
.sidebar-popular-list { display: flex; flex-direction: column; gap: 16px; }
.sidebar-popular-item { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.sidebar-popular-item:last-child { padding-bottom: 0; border-bottom: none; }
.sidebar-popular-title { font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--dark); margin: 0 0 6px 0; }
.sidebar-popular-date { font-size: 12px; color: var(--gray); }

@media (max-width: 1100px) {
    .homepage-layout { grid-template-columns: 1fr; }
    .homepage-sidebar { position: static; }
}