/**
 * CSS para aproveitar toda a largura da tela
 * Especialmente para monitores grandes
 * 
 * Este arquivo sobrescreve as limitações de largura do style.css
 */

/* ===== CONTAINERS - LARGURA TOTAL ===== */

/* Header - Largura total */
.header-container {
    max-width: 100% !important;
    padding: 0 2rem !important;
}

/* Container Principal - Largura total */
.container {
    max-width: 100% !important;
    padding: 0 2rem !important;
}

/* Footer - Largura total */
.footer-container {
    max-width: 100% !important;
    padding: 0 2rem !important;
}

/* ===== AJUSTES RESPONSIVOS ===== */

/* Telas grandes (monitores widescreen) */
@media (min-width: 1920px) {
    .header-container,
    .container,
    .footer-container {
        padding: 0 3rem !important;
    }
    
    /* Ajustar grid de posts para aproveitar largura */
    .news-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
        gap: 1.5rem !important;
    }
}

/* Telas muito grandes (4K e ultra-wide) */
@media (min-width: 2560px) {
    .header-container,
    .container,
    .footer-container {
        padding: 0 4rem !important;
    }
    
    .news-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
        gap: 2rem !important;
    }
}

/* Desktop grande (1440px - 1920px) */
@media (min-width: 1440px) and (max-width: 1919px) {
    .header-container,
    .container,
    .footer-container {
        padding: 0 2.5rem !important;
    }
}

/* Tablet e desktop pequeno - Manter padding adequado */
@media (max-width: 1024px) {
    .header-container,
    .container,
    .footer-container {
        padding: 0 1.5rem !important;
    }
}

/* Mobile - Padding reduzido */
@media (max-width: 768px) {
    .header-container,
    .container,
    .footer-container {
        padding: 0 1rem !important;
    }
}

/* Mobile pequeno */
@media (max-width: 480px) {
    .header-container,
    .container,
    .footer-container {
        padding: 0 0.75rem !important;
    }
}

/* ===== OTIMIZAÇÕES PARA TELAS GRANDES ===== */

/* Grid de notícias - Aproveitar largura */
@media (min-width: 1600px) {
    .featured-grid {
        grid-template-columns: 2fr 1fr !important;
        gap: 2rem !important;
    }
    
    .news-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
    
    /* Sidebar mais larga em telas grandes */
    .sidebar {
        max-width: 400px !important;
    }
}

/* Layout flex para aproveitar espaço */
@media (min-width: 1920px) {
    .main-content {
        display: flex !important;
        gap: 2rem !important;
        align-items: flex-start !important;
    }
    
    .content-area {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    
    .sidebar {
        flex: 0 0 420px !important;
        position: sticky !important;
        top: 80px !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
    }
}

/* ===== MELHORIAS VISUAIS PARA TELAS GRANDES ===== */

/* Aumentar tamanho de fonte em telas grandes */
@media (min-width: 1920px) {
    body {
        font-size: 0.9375rem !important; /* 15px */
    }
    
    h1 {
        font-size: 2.5rem !important;
    }
    
    h2 {
        font-size: 2rem !important;
    }
    
    h3 {
        font-size: 1.5rem !important;
    }
    
    /* Títulos dos posts maiores */
    .story-title {
        font-size: 1.75rem !important;
    }
    
    .news-title {
        font-size: 1.25rem !important;
    }
}

/* Imagens responsivas para telas grandes */
@media (min-width: 1920px) {
    .story-image img,
    .news-image img {
        object-fit: cover !important;
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
    }
}

/* ===== PREVENIR OVERFLOW HORIZONTAL ===== */
html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.header-moderno,
.main-wrapper,
.footer-moderno {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* ===== SMOOTH SCROLL ===== */
html {
    scroll-behavior: smooth !important;
}

/* ===== AJUSTE DO SLIDER PARA TELAS GRANDES ===== */
@media (min-width: 1600px) {
    .featured-stories {
        min-height: 500px !important;
    }
    
    .featured-story {
        min-height: 500px !important;
    }
}

/* ===== ANIMAÇÕES SUAVES ===== */
.header-container,
.container,
.footer-container {
    transition: padding 0.3s ease !important;
}

/* ===== ACESSIBILIDADE - CONTRASTE ===== */
@media (prefers-contrast: high) {
    .header-container,
    .container,
    .footer-container {
        border-left: 2px solid #e2e8f0;
        border-right: 2px solid #e2e8f0;
    }
}

/* ===== MODO ESCURO (se implementado futuramente) ===== */
@media (prefers-color-scheme: dark) {
    /* Preparado para modo escuro */
}

/* ===== PRINT - Otimizar para impressão ===== */
@media print {
    .header-container,
    .container,
    .footer-container {
        max-width: 100% !important;
        padding: 0 !important;
    }
}