/**
 * Agenda Institucional - Estilos do Módulo
 *
 * @package ADSI_Core
 * @subpackage AgendaInstitucional
 */

.agenda-institucional-list {
    display: flex;
    flex-direction: column;
    gap: var(--ai-gap, var(--core-gap, 24px));
}

.agenda-institucional-grid {
    gap: var(--ai-gap, var(--core-gap, 24px));
}

/* adsicore.css ([class*="-cards-grid"]) fixa 2 colunas ≤768px e 1 coluna ≤480px para
   qualquer grid, ignorando colunas_tablet/colunas_movel. Repete a mesma especificidade
   (duas classes) para sobrepor esse breakpoint fixo com o valor configurável — esta
   folha carrega depois do adsicore.css (dependência explícita no enqueue). */
@media (max-width: 768px) {
    .agenda-institucional-grid.core-cards-grid {
        grid-template-columns: repeat(var(--ai-cols-tablet, 2), 1fr);
    }
}

@media (max-width: 480px) {
    .agenda-institucional-grid.core-cards-grid {
        grid-template-columns: repeat(var(--ai-cols-mobile, 1), 1fr);
    }
}

.agenda-institucional-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--ai-title-lines, 999);
    line-clamp: var(--ai-title-lines, 999);
    overflow: hidden;
}

/* Layouts I e E têm, em adsicore.css, regras de título com maior especificidade
   ([class*="-card--layout-x"] [class*="-card__title"]) que já definem o próprio
   line-clamp (Layout E usa --core-docs-title-line-clamp) ou forçam uma única linha
   (Layout I usa white-space:nowrap) — sem isto, --ai-title-lines é ignorado nesses
   dois layouts. Repete a mesma especificidade para ganhar o empate (esta folha
   carrega depois do adsicore.css). */
[class*="-card--layout-i"] .agenda-institucional-card__title {
    white-space: normal;
    -webkit-line-clamp: var(--ai-title-lines, 999);
    line-clamp: var(--ai-title-lines, 999);
}

[class*="-card--layout-e"] .agenda-institucional-card__title {
    -webkit-line-clamp: var(--ai-title-lines, 999);
    line-clamp: var(--ai-title-lines, 999);
}

/* Carrossel (Splide) — setas/paginação/track usam o CSS nativo do Splide,
   já carregado globalmente (splide.min.css). Só o essencial para o card
   ocupar bem o slide fica aqui. */
.agenda-institucional-splide {
    padding-bottom: 2.5rem; /* espaço para a paginação nativa por baixo */
}

.agenda-institucional-splide .splide__slide {
    height: auto;
}

/* Altura igual entre cards da mesma fileira do carrossel. ">" (filho direto)
   em vez de descendente: [class*="-card"] sem isso apanhava qualquer elemento
   com "-card" no nome — incluindo -card__body/-card__title internos — e não
   só o <article> de topo, que é o único que deve ter 100% (dar height:100%
   diretamente ao título/body ignora o -webkit-line-clamp e corta o texto). */
.agenda-institucional-splide .splide__slide > [class*="-card"] {
    height: 100%;
}

/* ── BARRA DE CONTROLOS (botão + setas + paginação, via CoreCarouselNav) ──── */
.agenda-institucional-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.agenda-institucional-controls .agenda-institucional-button-wrapper { margin-top: 0; }

/* ── FOOTER EM GRELHA DE 3 ZONAS INDEPENDENTES ──────────────────────────── */
.agenda-institucional-controls--zones {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:           center;
    gap:                   1rem;
}

.agenda-institucional-controls__left {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    justify-content: flex-start;
}

.agenda-institucional-controls__center {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    justify-content: center;
}

.agenda-institucional-controls__right {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    justify-content: flex-end;
}

/* Paginação nativa: anula position:absolute do Splide.
   !important necessário porque Splide carrega via CDN e pode chegar depois deste ficheiro. */
.agenda-institucional-splide .splide__pagination {
    position:   relative !important;
    bottom:     auto     !important;
    margin-top: 0.75rem;
    padding:    0;
}

/* Paginação relocada para uma zona de controlos */
.agenda-institucional-controls--zones .splide__pagination {
    position: static !important;
    margin:   0;
    padding:  0;
}

/* Dots modernos: nativo (dentro do .splide) ou relocado com classe is-pag-moderno. */
.agenda-institucional-slider--pag-moderno .splide__pagination__page,
.agenda-institucional-splide .splide__pagination.is-pag-moderno .splide__pagination__page {
    width:         10px;
    height:        10px;
    border-radius: 999px;
    opacity:       0.6;
    transform:     none;
    transition:    width 0.3s ease, background 0.3s ease, opacity 0.3s ease;
}

.agenda-institucional-slider--pag-moderno .splide__pagination__page.is-active,
.agenda-institucional-splide .splide__pagination.is-pag-moderno .splide__pagination__page.is-active {
    width:      26px;
    background: var(--core-carousel-accent, currentColor);
    opacity:    1;
    transform:  none;
}

/* ── PAGINAÇÃO NUMÉRICA (X/Y) ──────────────────────────────────────────── */
.agenda-institucional-numeric-pagination {
    display:        flex;
    align-items:    center;
    font-size:      0.8rem;
    font-weight:    600;
    line-height:    1;
    color:          currentColor;
    user-select:    none;
    pointer-events: none;
    min-width:      2.5em;
    justify-content: center;
}

.agenda-institucional-pag-separator {
    margin:  0 2px;
    opacity: 0.5;
}

/* ── BARRA DE PROGRESSO ────────────────────────────────────────────────── */
.agenda-institucional-progress-pagination {
    flex:          1;
    min-width:     80px;
    max-width:     220px;
    height:        4px;
    border-radius: 999px;
    background:    rgba(0, 0, 0, 0.12);
    overflow:      hidden;
}

.agenda-institucional-progress-pagination-fill {
    height:        100%;
    width:         0%;
    border-radius: 999px;
    background:    var(--core-carousel-accent);
    transition:    width 0.3s ease;
}

/* ── SETAS PERSONALIZADAS ──────────────────────────────────────────────── */
.agenda-institucional-arrow {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--splide-arrow-size, 2rem);
    height:          var(--splide-arrow-size, 2rem);
    padding:         var(--splide-arrow-padding, 0);
    border-width:    var(--splide-arrow-border-width, 1px);
    border-style:    solid;
    border-color:    var(--splide-arrow-border-color, currentColor);
    border-radius:   var(--splide-arrow-radius, 50%);
    background:      var(--splide-arrow-bg, transparent);
    cursor:          pointer;
    opacity:         var(--splide-arrow-opacity, 0.6);
    transition:      opacity 0.2s, background 0.2s, border-color 0.2s;
    flex-shrink:     0;
}

.agenda-institucional-arrow i {
    font-size:      var(--splide-arrow-icon-size, inherit);
    color:          var(--splide-arrow-color, currentColor);
    pointer-events: none;
}

.agenda-institucional-arrow:hover:not(:disabled) {
    opacity:      var(--splide-arrow-opacity-hover, 1);
    background:   var(--splide-arrow-bg-hover,           var(--splide-arrow-bg,           transparent));
    border-color: var(--splide-arrow-border-color-hover, var(--splide-arrow-border-color, currentColor));
}
.agenda-institucional-arrow:hover:not(:disabled) i {
    color: var(--splide-arrow-color-hover, var(--splide-arrow-color, currentColor));
}
.agenda-institucional-arrow:disabled {
    opacity: var(--splide-arrow-opacity-disabled, 0.25);
    cursor:  default;
}

/* Botão "Ver Todos" quando não há título do módulo (alinhamento simples, sem CoreCarouselNav) */
.agenda-institucional-button-wrapper {
    display: flex;
    margin-top: 1.5rem;
}

.agenda-institucional-button-wrapper--left   { justify-content: flex-start; }
.agenda-institucional-button-wrapper--center { justify-content: center; }
.agenda-institucional-button-wrapper--right  { justify-content: flex-end; }
.agenda-institucional-button-wrapper--full   { justify-content: stretch; }

.agenda-institucional-terminados-nav {
    margin: 0 0 1.5rem;
}

/* Metadados customizados (data de início / fim) */
.agenda-institucional-card__custom-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.agenda-institucional-card__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--core-color-text-muted, #6b7280);
}

/* ========================================
   BADGES DE ESTADO
   ======================================== */

.agi-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.agi-badge-agendado {
    background: #0284c7;
    color: #fff;
}

.agi-badge-a_decorrer {
    background: #198754;
    color: #fff;
}

.agi-badge-terminado {
    background: #dc3545;
    color: #fff;
}

/* ========================================
   LAYOUT I (AGENDA) — badge de data inline
   ======================================== */

.agi-mini-cal-wrap {
    display: flex;
    align-items: center;
}

.agi-mini-cal {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.agi-mini-cal__day {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--core-color-primary, #2c5f8d);
    line-height: 1;
}

.agi-mini-cal__month {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--core-color-gray-dark, #666);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Alert de item terminado na página de detalhe */
.agi-alert-terminado {
    background: #fff3cd;
    border-left: 4px solid #dc3545;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border-radius: 4px;
}

.agi-alert-terminado strong {
    color: #dc3545;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.5rem;
}

.agi-alert-terminado p {
    margin: 0.5rem 0 0;
    color: #856404;
}

/* ========================================
   RESPONSIVO
   ======================================== */

@media (max-width: 768px) {
    .agenda-institucional-card__custom-meta {
        gap: 0.5rem;
    }

    .agenda-institucional-card__meta-item {
        font-size: 0.8125rem;
    }

    .agi-alert-terminado {
        padding: 0.875rem 1rem;
    }

    .agi-alert-terminado strong {
        font-size: 1rem;
    }
}