/* ==========================================================================
CSS CUSTOMIZADO: PROGRAMAÇÃO SEBRAE SERRANA (CARDS E SANFONAS)
========================================================================== */

/* -----------------------------------------
0. Estrutura Principal (Container)
----------------------------------------- /
/ Adicione a classe  envolvendo todo o seu layout no arquivo PHP /
.programacao-container {
width: 90%;
margin: 0 auto; / Centraliza o container na tela /
max-width: 1440px; / Evita que estique excessivamente em monitores ultra-wide */
padding: 20px 0;
}

.rounded-circle-palestra {
    border-radius: 10% !important;
}


/* -----------------------------------------

Estilos Comuns (Abas de Dias)
----------------------------------------- /
.custom-event-tabs {
gap: 10px; / Espaçamento entre as abas caso seja display flex /
}
.custom-event-tabs .nav-link {
background-color: #f1f3f5;
color: #495057;
border-radius: 6px;
transition: all 0.2s ease-in-out;
font-size: 1rem;
white-space: nowrap; / Evita quebra de linha indesejada nos botões */
}
.custom-event-tabs .nav-link:hover {
background-color: #e2e6ea;
color: #212529;
}
.custom-event-tabs .nav-link.active {
background: linear-gradient(90deg, #b000b9 0%, #ff5722 100%) !important;
color: #ffffff !important;
box-shadow: 0 4px 10px rgba(255, 87, 34, 0.25);
}

/* Utilitários Gerais */
.bg-roxo { background-color: #b000b9; }
.text-laranja { color: #ff5722; }
.grayscale { filter: grayscale(100%); transition: filter 0.3s ease; }
.grayscale:hover { filter: grayscale(0%); }
.description-text p { line-height: 1.6; }
.description-text p:last-child { margin-bottom: 0; }

/* -----------------------------------------
2. Layout: PROGRAMAÇÃO CARDS (programacaocards.php)
----------------------------------------- /
/ Botões de Filtro /
.filtros-wrapper {
/ Sugestão de classe para envolver os filtros, útil no mobile */
margin-bottom: 20px;
}
.btn-filtro {
border-radius: 20px;
transition: all 0.3s ease;
white-space: nowrap;
}
.btn-filtro.active { background-color: #ff5722; border-color: #ff5722; color: #fff; }

/* Estrutura dos Cards /
.custom-agenda-card {
border: none;
border-left: 4px solid #b000b9;
transition: transform 0.3s, box-shadow 0.3s;
height: 100%; / Mantém os cards com a mesma altura no grid */
}
.custom-agenda-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}
.card-foto-wrapper img {
border: 3px solid #f8f9fa;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Cards de Eventos Encerrados */
.card-encerrado {
border-left-color: #ced4da;
background-color: #f8f9fa;
}
.card-encerrado:hover {
transform: none;
box-shadow: none !important;
}

/* -----------------------------------------
3. Layout: PROGRAMAÇÃO SANFONAS (programacao.php)
----------------------------------------- */
.custom-accordion-item {
border: 1px solid #f09433 !important;
border-radius: 8px !important;
overflow: hidden;
margin-bottom: 10px;
}
.custom-accordion-btn {
background-color: #ffffff;
color: #4a148c;
font-size: 1rem;
box-shadow: none !important;
}
.horario-badge { color: #8e24aa; }

/* Estado Expandido (Apenas para eventos ativos) */
.custom-accordion-item:not(.evento-encerrado) .custom-accordion-btn:not(.collapsed) {
background: linear-gradient(90deg, #b000b9 0%, #ff5722 100%) !important;
color: #ffffff !important;
border-bottom: none;
}
.custom-accordion-item:not(.evento-encerrado) .custom-accordion-btn:not(.collapsed) .titulo-palestra,
.custom-accordion-item:not(.evento-encerrado) .custom-accordion-btn:not(.collapsed) .horario-badge {
color: #ffffff !important;
}

/* Ícones de Abrir/Fechar a sanfona (+ e X) Coloridos */
.custom-accordion-item:not(.evento-encerrado) .custom-accordion-btn::after {
flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: auto; content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d84315'%3e%3cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3e%3c/svg%3e");
background-size: 100%; transition: transform .2s ease-in-out;
}
.custom-accordion-item:not(.evento-encerrado) .custom-accordion-btn:not(.collapsed):after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transform: none;
}

/* Sanfonas de Eventos Encerrados */
.evento-encerrado { border-color: #ced4da !important; }
.evento-encerrado .custom-accordion-btn { background-color: #f8f9fa; }
.evento-encerrado .horario-badge { color: #6c757d; }
.evento-encerrado .custom-accordion-btn:not(.collapsed) {
background: #e9ecef !important;
color: #495057 !important;
}
.evento-encerrado .custom-accordion-btn:not(.collapsed) .titulo-palestra,
.evento-encerrado .custom-accordion-btn:not(.collapsed) .horario-badge { color: #495057 !important; }

/* Ícones cinzas para sanfonas encerradas */
.evento-encerrado .custom-accordion-btn::after,
.evento-encerrado .custom-accordion-btn:not(.collapsed):after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3e%3c/svg%3e");
}
.evento-encerrado .custom-accordion-btn:not(.collapsed):after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* -----------------------------------------
4. Responsividade (Mobile e Tablets)
----------------------------------------- /
@media (max-width: 991px) {
/ Aumenta a largura em telas menores para melhor aproveitamento do espaço */
.programacao-container {
width: 95%;
  margin: 0px auto 0px auto;
}
}

@media (max-width: 768px) {
.programacao-container {
width: 98%; /* Quase ocupa tudo no mobile, deixando margem mínima */
padding: 10px 0;
}

/* Permite scroll horizontal (swipe) nas abas de datas se não couberem na tela */
.custom-event-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
    scrollbar-width: thin;
}

/* Permite scroll horizontal nos botões de filtro */
.filtros-wrapper form, /* Ajuste o seletor conforme seu HTML Joomla */
.filtros-wrapper .btn-group {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    gap: 5px;
}

.btn-filtro {
    font-size: 0.9rem;
    padding: 5px 12px;
}

/* Ajustes na tipografia dos cards para leitura em mobile */
.titulo-palestra {
    font-size: 1.1rem !important;
}

.description-text p {
    font-size: 0.95rem;
}


}