/* ================================
   css/carrossel.css
   Estilos do carrossel de notícias
   ================================ */

/* Container principal do carrossel */
.carrossel-container {
    position: relative;              /* Permite posicionar elementos filhos de forma absoluta */
    width: 100%;                     /* Ocupa toda a largura disponível */
    height: 500px;                   /* Altura fixa do carrossel */
    overflow: hidden;                /* Esconde partes fora da área visível */
    margin-bottom: 40px;             /* Espaço abaixo do carrossel */
    cursor: grab;                    /* Cursor de “arrastar” */
    border-radius: 10px;             /* Bordas arredondadas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* Sombra para profundidade */
}

/* Cursor enquanto o usuário está arrastando */
.carrossel-container:active {
    cursor: grabbing;                /* Cursor muda para “segurando” */
}

/* Slide individual */
.carrossel-slide {
    position: absolute;              /* Fica sobreposto aos outros slides */
    top: 0;
    left: 0;
    width: 100%;                     /* Largura total */
    height: 100%;                    /* Altura total */
    opacity: 0;                      /* Começa invisível */
    transition: opacity 1s ease-in-out; /* Animação suave de fade */
    background-size: cover;          /* Imagem cobre todo o slide */
    background-position: center;     /* Centraliza a imagem */
    background-repeat: no-repeat;    /* Evita repetição da imagem */
    pointer-events: none;            /* Impede clique em slides invisíveis */
}

/* Slide visível (ativo) */
.carrossel-slide.active {
    opacity: 1;                      /* Torna o slide visível */
    pointer-events: auto;            /* Permite interação */
}

/* Overlay escuro sobre a imagem */
.carrossel-overlay {
    position: absolute;              /* Fica sobre a imagem */
    bottom: 0;                       /* Alinha na parte inferior */
    left: 0;
    right: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.8),              /* Preto forte embaixo */
        transparent                  /* Transparente em cima */
    );
    padding: 40px 60px;              /* Espaçamento interno */
    color: #FFFFFF;                  /* Texto branco */
}

/* Título da notícia */
.carrossel-titulo {
    font-size: 36px;                 /* Tamanho grande do título */
    font-weight: bold;               /* Texto em negrito */
    margin-bottom: 15px;             /* Espaço abaixo */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* Sombra para leitura */
    max-width: 80%;                  /* Limita largura do texto */
}

/* Link do título */
.carrossel-titulo a {
    color: #FFFFFF;                  /* Link branco */
    text-decoration: none;           /* Remove sublinhado */
}

/* Cor do link ao passar o mouse */
.carrossel-titulo a:hover {
    color: #B65DB9;                  /* Roxo principal */
}

/* Informações da notícia (data, autor, etc.) */
.carrossel-info {
    font-size: 14px;                 /* Texto menor */
    opacity: 0.9;                    /* Leve transparência */
    margin-bottom: 10px;             /* Espaço inferior */
}

/* Badge de categoria */
.carrossel-categoria {
    display: inline-block;           /* Permite padding e borda */
    background: #B65DB9;              /* Cor principal */
    color: #FFFFFF;                  /* Texto branco */
    padding: 5px 15px;               /* Espaçamento interno */
    border-radius: 20px;             /* Formato arredondado */
    font-size: 12px;                 /* Texto pequeno */
    font-weight: bold;               /* Negrito */
    text-transform: uppercase;       /* Texto em maiúsculas */
    margin-bottom: 10px;             /* Espaço inferior */
}

/* Área dos bullets (indicadores) */
.carrossel-controles {
    position: absolute;              /* Posicionado sobre o carrossel */
    bottom: 20px;                    /* Distância do fundo */
    right: 20px;                     /* Distância da direita */
    display: flex;                   /* Organiza os bullets em linha */
    gap: 10px;                       /* Espaço entre eles */
    z-index: 20;                     /* Fica acima das imagens */
}

/* Bullet individual */
.carrossel-bullet {
    width: 12px;                     /* Largura */
    height: 12px;                    /* Altura */
    border-radius: 50%;              /* Formato circular */
    background: rgba(255,255,255,0.5); /* Branco semi-transparente */
    cursor: pointer;                 /* Cursor clicável */
    transition: background 0.3s;     /* Animação suave */
    z-index: 20;
}

/* Bullet ativo */
.carrossel-bullet.active {
    background: #FFFFFF;             /* Branco sólido */
}

/* Container das setas */
.carrossel-setas {
    position: absolute;              /* Sobre o carrossel */
    top: 50%;                        /* Centraliza verticalmente */
    width: 100%;
    display: flex;                   /* Alinha esquerda/direita */
    justify-content: space-between;  /* Uma seta em cada lado */
    padding: 0 20px;                 /* Espaço lateral */
    transform: translateY(-50%);     /* Ajuste de centralização */
    z-index: 20;
}

/* Seta individual */
.carrossel-seta {
    background: rgba(182, 93, 185, 0.7); /* Roxo principal com transparência */
    color: #FFFFFF;                  /* Ícone branco */
    border: 2px solid #FFFFFF;       /* Borda branca */
    width: 50px;                     /* Largura */
    height: 50px;                    /* Altura */
    border-radius: 50%;              /* Formato circular */
    cursor: pointer;                 /* Cursor clicável */
    font-size: 20px;                 /* Tamanho do ícone */
    display: flex;                   /* Centraliza o ícone */
    align-items: center;
    justify-content: center;
    transition: all 0.3s;            /* Animações suaves */
    z-index: 20;
}

/* Hover das setas */
.carrossel-seta:hover {
    background: #B65DB9;              /* Roxo sólido */
    transform: scale(1.1);           /* Leve aumento */
}

/* ================================
   RESPONSIVIDADE
   ================================ */

/* Tablets e telas médias */
@media (max-width: 768px) {
    .carrossel-container {
        height: 400px;               /* Reduz altura */
    }

    .carrossel-titulo {
        font-size: 24px;             /* Reduz título */
        max-width: 100%;
    }

    .carrossel-overlay {
        padding: 20px;               /* Menos padding */
    }

    .carrossel-seta {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Celulares */
@media (max-width: 480px) {
    .carrossel-container {
        height: 300px;               /* Altura menor */
    }

    .carrossel-titulo {
        font-size: 20px;             /* Título menor */
    }

    .carrossel-overlay {
        padding: 15px;               /* Padding reduzido */
    }
}