/* Quicklinks Grid Layout */
.quicklinks-grid {
    width: 100%;
    margin: 0 auto;
}

.quicklinks-grid__container {
    display: grid;
    grid-template-columns: repeat(var(--ql-columns, 4), 1fr);
    gap: var(--ql-gap, var(--core-gap, 1.5rem));
    padding: 1rem 0;
}

.quicklinks-grid__item {
    position: relative;
}

.quicklinks-grid__item .ql-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 1.5rem;
    border-radius: var(--core-radius, 8px);
    height: 100%;
}

.quicklinks-grid__item .ql-link-image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    width: 120px;
    height: 120px;
    max-width: 100%;
}

.quicklinks-grid__item .ql-link-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.quicklinks-grid__item .ql-link-image i {
    font-size: calc(var(--ql-icon-size, 48px) * 0.6);
}

.quicklinks-grid__item .ql-link-title {
    text-align: center;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.4;
}

/* Responsive Grid */
/* --ql-cols-* / --ql-gap-* só existem quando o setor ou o shortcode os definem
   (ql_resolve_layout); sem eles fica o comportamento de sempre */
@media (max-width: 1024px) {
    .quicklinks-grid__container {
        grid-template-columns: repeat(var(--ql-cols-1024, min(var(--ql-columns, 4), 3)), 1fr);
        gap: var(--ql-gap-1024, var(--ql-gap, var(--core-gap, 1.5rem)));
    }
}

@media (max-width: 767px) {
    .quicklinks-grid__container {
        grid-template-columns: repeat(var(--ql-cols-767, min(var(--ql-columns, 4), 2)), 1fr);
        gap: var(--ql-gap-767, var(--ql-gap, var(--core-gap, 1.5rem)));
    }
    
    .quicklinks-grid__item .ql-link {
        padding: 1rem;
    }
    
    .quicklinks-grid__item .ql-link-image {
        max-width: 80px;
    }
    
    .quicklinks-grid__item .ql-link-image i {
        font-size: 2.5rem;
    }
}

@media (max-width: 640px) {
    .quicklinks-grid__container {
        grid-template-columns: repeat(var(--ql-cols-640, min(var(--ql-columns, 4), 2)), 1fr);
        gap: var(--ql-gap-640, var(--ql-gap, var(--core-gap, 1.5rem)));
    }
}

@media (max-width: 480px) {
    .quicklinks-grid__container {
        grid-template-columns: repeat(var(--ql-cols-640, 2), 1fr);
    }
    
    .quicklinks-grid__item .ql-link-title {
        font-size: max(var(--core-font-min, 0px), 0.875rem);
    }
}

/* FontAwesome Icon Styles */
.ql-icon-fa {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.ql-icon-fa i {
    font-size: 3rem;
    line-height: 1;
}

.ql-link-image i.fa-solid,
.ql-link-image i.fa-regular,
.ql-link-image i.fa-brands,
.ql-link-image i.fa-light {
    display: block;
}

.quicklinks-slider .ql-icon-fa i {
    font-size: 2.5rem;
}

/* Slider estático: menos itens do que o perPage — sem carrossel */
.quicklinks-slider.ql-slider-static .splide__track {
    overflow: visible;
}

.quicklinks-slider.ql-slider-static .splide__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--core-gap, 1.5rem);
    transform: none !important;
}

.quicklinks-slider.ql-slider-static .splide__slide {
    width: auto;
    flex: 1 1 0;
}

/* Slider Layout */
.quicklinks-slider .splide__slide a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0.5rem;
    border-radius: var(--core-radius, 8px);
}

.quicklinks-slider .ql-link-image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    width: 80px;
    height: 80px;
    max-width: 100%;
}

.quicklinks-slider .ql-link-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.quicklinks-slider .ql-link-image i {
    font-size: calc(var(--ql-icon-size, 48px) * 0.6);
}

.quicklinks-slider .ql-link-title {
    text-align: center;
    font-size: max(var(--core-font-min, 0px), 0.875rem);
}

/* Pausar/Retomar a rotação automática (WCAG 2.2.2) — botão nativo do Splide
   (.splide__toggle; .is-active = a rodar → mostra "pausa") */
.quicklinks-slider {
    position: relative;
}
.ql-toggle-mount .ql-toggle,
.quicklinks-slider .ql-toggle {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: #fff;
    color: var(--core-color-primary, #1d2327);
    cursor: pointer;
}
.ql-toggle-mount .ql-toggle svg,
.quicklinks-slider .ql-toggle svg {
    width: 20px;
    height: 20px;
}
.ql-toggle-mount .ql-toggle .splide__toggle__pause,
.quicklinks-slider .ql-toggle .splide__toggle__pause,
.ql-toggle-mount .ql-toggle.is-active .splide__toggle__play,
.quicklinks-slider .ql-toggle.is-active .splide__toggle__play {
    display: none;
}
.ql-toggle-mount .ql-toggle.is-active .splide__toggle__pause,
.quicklinks-slider .ql-toggle.is-active .splide__toggle__pause {
    display: block;
}
.ql-toggle-mount .ql-toggle:focus-visible,
.quicklinks-slider .ql-toggle:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}
/* Espaço para o botão não tapar os títulos */
.quicklinks-slider:has(> .ql-toggle) .splide__track {
    padding-bottom: 52px !important;
}

/* Setas Font Awesome (o fundo, o tamanho e a forma vêm de .splide__arrow).
   :where() = especificidade mínima: a cor do tema (ex.: .splide__arrow i) vence. */
:where(.quicklinks-slider .ql-arrows .splide__arrow) i {
    font-size: var(--splide-arrow-icon-size, 1.2em);
    line-height: 1;
    color: var(--splide-arrow-color, currentColor);
    pointer-events: none;
}
:where(.quicklinks-slider .ql-arrows .splide__arrow:hover:not(:disabled)) i {
    color: var(--splide-arrow-color-hover, var(--splide-arrow-color, currentColor));
}

/* ------------------------------------------------------------------
   Cores: sem cores definidas no setor, herdam Apresentação → Cores
   (--core-color-primary no ícone, --core-color-link / -link-hover no
   título). As cores do setor saem inline e vencem; o CSS do tema
   (ex.: .ql-sector-88) também.
   ------------------------------------------------------------------ */
.quicklinks-slider,
.quicklinks-grid {
    --ql-icon-color:       var(--core-color-primary, currentColor);
    --ql-text-color:       var(--core-color-link, var(--core-color-primary, inherit));
    --ql-text-color-hover: var(--core-color-link-hover, var(--ql-text-color));
}
.quicklinks-slider a.ql-link,
.quicklinks-grid a.ql-link {
    color: var(--ql-text-color);
}
.quicklinks-slider a.ql-link:is(:hover, :focus-visible),
.quicklinks-grid a.ql-link:is(:hover, :focus-visible) {
    color: var(--ql-text-color-hover);
}
.quicklinks-slider .ql-icon-fa i,
.quicklinks-grid .ql-icon-fa i {
    color: var(--ql-icon-color);
}

/* ------------------------------------------------------------------
   Sublinhado dos links (setor qls_sublinhado / bloco / shortcode
   sublinhado). Classe dobrada + !important: o tema pode ter
   a{text-decoration:underline!important}; a correção de acessibilidade
   do Astra já exclui .ql-link.
   ------------------------------------------------------------------ */
.ql-sublinhado--none.ql-sublinhado--none a.ql-link,
.ql-sublinhado--hover.ql-sublinhado--hover a.ql-link {
    text-decoration: none !important;
}
.ql-sublinhado--always.ql-sublinhado--always a.ql-link,
.ql-sublinhado--hover.ql-sublinhado--hover a.ql-link:is(:hover, :focus-visible) {
    text-decoration: underline !important;
    text-underline-offset: 0.15em;
}

/* ------------------------------------------------------------------
   Setas e paginação fora da pista (CoreCarouselNav: cabeçalho, rodapé
   de 3 zonas ou faixa por baixo dos ícones sem título do módulo)
   ------------------------------------------------------------------ */
.ql-carousel__footer-nav {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    margin-top:      1rem;
}
.ql-carousel__arrow {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--splide-arrow-size, 3rem);
    height:          var(--splide-arrow-size, 3rem);
    min-width:       44px;
    min-height:      44px;
    padding:         var(--splide-arrow-padding, 0);
    border-width:    var(--splide-arrow-border-width, 0);
    border-style:    solid;
    border-color:    var(--splide-arrow-border-color, transparent);
    border-radius:   var(--splide-arrow-radius, 50%);
    background:      var(--splide-arrow-bg, var(--core-btn-color, var(--core-color-primary, #1d2327)));
    opacity:         var(--splide-arrow-opacity, 1);
    cursor:          pointer;
    transition:      background 0.2s, opacity 0.2s;
}
.ql-carousel__arrow i {
    font-size: var(--splide-arrow-icon-size, 1rem);
    color:     var(--splide-arrow-color, #fff);
}
.ql-carousel__arrow:hover:not(:disabled) {
    opacity:      var(--splide-arrow-opacity-hover, 1);
    background:   var(--splide-arrow-bg-hover, var(--splide-arrow-bg, var(--core-color-link-hover, #000)));
    border-color: var(--splide-arrow-border-color-hover, var(--splide-arrow-border-color, transparent));
}
.ql-carousel__arrow:hover:not(:disabled) i {
    color: var(--splide-arrow-color-hover, var(--splide-arrow-color, #fff));
}
.ql-carousel__arrow:disabled {
    opacity: var(--splide-arrow-opacity-disabled, 0.3);
    cursor:  default;
}
.ql-carousel__arrow:focus-visible {
    outline:        3px solid var(--core-color-link, #1d2327);
    outline-offset: 2px;
}
.ql-carousel__pag-numeric {
    font-size:   1rem;
    font-weight: 600;
    min-width:   3rem;
    text-align:  center;
}
.ql-carousel__pag-progress {
    flex:          1;
    min-width:     80px;
    max-width:     220px;
    height:        4px;
    border-radius: 999px;
    background:    rgba(0, 0, 0, 0.12);
    overflow:      hidden;
}
.ql-carousel__pag-progress-fill {
    height:        100%;
    width:         0%;
    border-radius: 999px;
    background:    var(--core-carousel-accent, var(--core-color-primary, #1d2327));
    transition:    width 0.3s ease;
}
.ql-controls--zones {
    display:               grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:           center;
    gap:                   1rem;
}
.ql-controls__left,
.ql-controls__center,
.ql-controls__right {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}
.ql-controls__left   { justify-content: flex-start; }
.ql-controls__center { justify-content: center; }
.ql-controls__right  { justify-content: flex-end; }
.ql-controls--zones .splide__pagination,
.ql-carousel__footer-nav .splide__pagination {
    position: static;
    margin:   0;
    padding:  0;
}

/* Dots nativos por baixo dos ícones */
.quicklinks-slider > .splide__pagination {
    position:   relative;
    bottom:     auto;
    margin-top: 1rem;
    padding:    0;
}
.quicklinks-slider .splide__pagination__page:focus-visible {
    outline:        2px solid var(--core-color-link, #2271b1);
    outline-offset: 2px;
}

/* Dots modernos (como nos Destaques): alvo 44×44px com o ponto no ::before;
   inativo = anel #4b5563 (7,6:1), ativo = cheio e mais largo (não só cor) */
.ql-slider--pag-moderno .splide__pagination__page,
.splide__pagination.is-pag-moderno .splide__pagination__page {
    position:        relative;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    box-sizing:      border-box;
    width:           44px;
    height:          44px;
    margin:          0;
    padding:         0;
    border:          0;
    border-radius:   999px;
    background:      transparent;
    opacity:         1;
    transform:       none !important;
}
.ql-slider--pag-moderno .splide__pagination__page::before,
.splide__pagination.is-pag-moderno .splide__pagination__page::before {
    content:       "";
    display:       block;
    box-sizing:    border-box;
    width:         10px;
    height:        10px;
    border:        2px solid #4b5563;
    border-radius: 999px;
    background:    transparent;
    transition:    width 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.ql-slider--pag-moderno .splide__pagination__page.is-active::before,
.splide__pagination.is-pag-moderno .splide__pagination__page.is-active::before {
    width:        26px;
    border-color: var(--core-carousel-accent, var(--core-color-primary, #2563eb));
    background:   var(--core-carousel-accent, var(--core-color-primary, #2563eb));
}
@media (prefers-reduced-motion: reduce) {
    .ql-slider--pag-moderno .splide__pagination__page::before,
    .splide__pagination.is-pag-moderno .splide__pagination__page::before,
    .ql-carousel__pag-progress-fill { transition: none; }
}

/* Pausa fora do slider: o botão nativo é movido para o slot escolhido. */
.ql-toggle-mount .ql-toggle {
    position: static;
    flex-shrink: 0;
}
.ql-pause-strip {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}
.ql-pause-strip:has(.ql-toggle-mount[hidden]) {
    display: none;
}
.ql-pause-strip--footer-left { justify-content: flex-start; }
.ql-pause-strip--footer-center { justify-content: center; }