/* ==========================================================================
   CASIES - PÁGINA INICIAL (HOME) MODERNA (Usando Variáveis Globais)
   ========================================================================== */

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

/* --- Títulos das Secções na Home --- */
.titulo-secao-home {
    text-align: center;
    margin: 60px 0 30px 0;
}
.titulo-secao-home h2 {
    display: inline-block;
    color: var(--texto-titulo);
    font-size: 2rem;
    border-bottom: 4px solid var(--casies-amarelo);
    padding-bottom: 10px;
    margin: 0;
}

/* ==========================================================================
   1. DESTAQUES (SLIDER + NOTÍCIAS)
   ========================================================================== */
.destaques-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

/* Carrossel (Slider) */
.slider-container {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border-suave);
}
.slides { position: relative; width: 100%; height: 100%; }
.slide { 
    position: absolute; width: 100%; height: 100%; 
    opacity: 0; transition: opacity 0.8s ease-in-out; 
}
.slide.active { opacity: 1; z-index: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

/* Overlay do Slider (Cores fixas para garantir legibilidade sobre imagens) */
.overlay { 
    position: absolute; bottom: 0; left: 0; width: 100%; height: auto;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 70%, transparent 100%);
    color: #f8fafc; display: flex; flex-direction: column; justify-content: flex-end; 
    padding: 40px 60px 30px 60px; font-size: 1.05rem; line-height: 1.6;
    opacity: 0; transform: translateY(15px); transition: all 0.8s ease-out; box-sizing: border-box;
}
.slide.active .overlay { opacity: 1; transform: translateY(0); }
.overlay strong { font-size: 1.8rem; color: var(--casies-amarelo); margin-bottom: 10px; line-height: 1.2; display: block; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.overlay br { display: none; }

.prev, .next { 
    position: absolute; top: 50%; transform: translateY(-50%); 
    background: rgba(0, 0, 0, 0.2); color: white; border-radius: 0;
    width: 35px; height: 60px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; z-index: 2; transition: all 0.3s; font-size: 1rem;
}
.prev:hover, .next:hover { background: rgba(0, 0, 0, 0.7); color: #fff; }
.prev { left: 0; } .next { right: 0; }

/* Barra Lateral (Sidebar) de Notícias */
.news-sidebar {
    background-color: var(--bg-cartao);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid var(--border-suave);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.news-sidebar h2 {
    color: var(--texto-titulo); font-size: 1.5rem; margin: 0 0 10px 0;
    display: flex; align-items: center; gap: 10px;
}
.news-sidebar h2 i { color: var(--casies-amarelo); }

.news-item {
    display: flex; align-items: flex-start; gap: 15px; padding-bottom: 15px;
    border-bottom: 1px solid var(--border-suave);
}
.news-item:last-of-type { border-bottom: none; }
.date-badge {
    background-color: var(--cor-destaque); color: var(--bg-fundo); font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; padding: 8px 10px; border-radius: 6px; text-align: center;
    min-width: 65px; line-height: 1.2;
}
.news-item p { margin: 0; font-size: 0.95rem; line-height: 1.5; font-weight: 500; }
.news-item a { color: var(--texto-corpo); text-decoration: none; transition: color 0.3s ease; }
.news-item a:hover { color: var(--cor-hover); }

.ver-mais {
    display: block; text-align: center; background-color: var(--bg-caixa); color: var(--cor-destaque);
    padding: 12px; border-radius: 6px; border: 1px solid var(--border-forte);
    text-decoration: none; font-weight: 600; margin-top: auto; transition: all 0.3s ease;
}
.ver-mais:hover { background-color: var(--cor-hover); color: var(--bg-fundo); border-color: var(--cor-hover); }

/* ==========================================================================
   2. GALERIA Mosaico (Ações e Atendimentos)
   ========================================================================== */
.gallery-mosaic {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 250px);
    gap: 15px;
}
.gallery-item {
    position: relative; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer;
}
.gallery-item img {
    width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;
}
.gallery-item:not(.video-mode):hover img { transform: scale(1.08); }

/* Textos da Galeria (Cores fixas para legibilidade sobre imagens escuras) */
.gallery-text {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 30px 15px 15px 15px; box-sizing: border-box;
}
.gallery-text a {
    color: #ffffff; text-decoration: none; font-size: 0.95rem; font-weight: 500; line-height: 1.4; display: block;
}

/* Posições do Mosaico */
.item-large { grid-column: 1 / 3; grid-row: 1 / 3; } 
.item-top-right { grid-column: 3 / 5; grid-row: 1 / 2; } 
.item-bottom-1 { grid-column: 3 / 4; grid-row: 2 / 3; } 
.item-bottom-2 { grid-column: 4 / 5; grid-row: 2 / 3; } 

.item-large .gallery-text a { font-size: 1.2rem; }

/* ===== MODO VÍDEO NO MOSAICO ===== */
.gallery-item.video-mode {
    display: flex;
    flex-direction: column;
    background: var(--casies-azul-01); /* Fundo sólido de marca para manter contraste com o mosaico de imagens */
    cursor: default; 
}
.gallery-item.video-mode iframe {
    width: 100%;
    flex: 1; 
    border: none;
}
.gallery-item.video-mode .gallery-text {
    position: relative; 
    background: none; 
    padding: 10px 15px; 
    pointer-events: auto !important; 
}
.gallery-item.video-mode .gallery-text a { font-size: 0.9rem; }
.item-large.video-mode .gallery-text a { font-size: 1rem; }

/* ==========================================================================
   3. RESPONSIVO
   ========================================================================== */
@media (max-width: 992px) {
    .destaques-grid { grid-template-columns: 1fr; }
    .gallery-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
    .item-large { grid-column: 1 / 3; grid-row: 1; height: 350px; }
    .item-top-right { grid-column: 1 / 3; grid-row: 2; height: 250px; }
    .item-bottom-1 { grid-column: 1 / 2; grid-row: 3; height: 200px; }
    .item-bottom-2 { grid-column: 2 / 3; grid-row: 3; height: 200px; }
}
@media (max-width: 600px) {
    .overlay strong { font-size: 1.3rem; }
    .overlay { padding: 20px 45px; font-size: 0.9rem; }
    .titulo-secao-home h2 { font-size: 1.6rem; }
    .gallery-mosaic { grid-template-columns: 1fr; }
    .item-large, .item-top-right, .item-bottom-1, .item-bottom-2 { grid-column: 1; height: 250px; }
}

/* ==========================================================================
   4. ELEMENTOS DIVERSOS DA HOME
   ========================================================================== */

/* --- Caixas de Estado Vazio (Sidebar e Mosaico) --- */
.empty-sidebar {
    padding: 15px; text-align: center; color: var(--texto-discreto);
    font-size: 0.95rem; background: var(--bg-caixa);
    border-radius: 6px; border: 1px dashed var(--border-forte);
}

.empty-state-box {
    grid-column: 1 / -1; text-align: center; padding: 40px;
    background: var(--bg-caixa); border-radius: 8px;
    border: 1px dashed var(--border-forte); color: var(--texto-discreto);
}
.empty-state-box i {
    font-size: 2.5rem; color: var(--border-forte); margin-bottom: 15px; display: block;
}

/* --- Botão de Ação (Ver Galeria) --- */
.home-cta-container {
    text-align: center; margin-top: 40px; margin-bottom: 60px;
}

.btn-ver-galeria {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 1.15rem; padding: 15px 35px;
    background-color: var(--cor-destaque);
    color: var(--bg-fundo); border-radius: 50px;
    text-decoration: none; font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.btn-ver-galeria:hover {
    background-color: var(--casies-amarelo);
    color: var(--casies-azul-01);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.btn-ver-galeria i { font-size: 1.3rem; }