/* ============================================================
   WC Gallery Slider — gallery.css
   Responsivo por CSS puro; JS só inicializa o Swiper.
   ============================================================ */

/* ── Variáveis padrão ──────────────────────────────────────── */
.wcgs-wrapper {
    --wcgs-nav-color:   #1a1a1a;
    --wcgs-thumb-gap:   6px;
    --wcgs-thumb-size:  72px;
    --wcgs-radius:      8px;
    --wcgs-ratio:       1/1;
    --wcgs-trans:       0.22s ease;
}

/* ── Reset picture/img ─────────────────────────────────────── */
.wcgs-wrapper picture,
.wcgs-wrapper img {
    display:   block;
    width:     100%;
    height:    auto;
}

/* ── Wrapper raiz ──────────────────────────────────────────── */
.wcgs-wrapper {
    width: 100%;
}

/* ── Layout: thumbs abaixo (padrão) ───────────────────────── */
.wcgs-layout--thumbs-bottom {
    display:        flex;
    flex-direction: column;
    gap:            var(--wcgs-thumb-gap);
}

/* ── Layout: thumbs à esquerda ────────────────────────────── */
.wcgs-layout--thumbs-left {
    display:               grid;
    grid-template-columns: var(--wcgs-thumb-size) 1fr;
    gap:                   var(--wcgs-thumb-gap);
    align-items:           start;
}

.wcgs-layout--thumbs-left .wcgs-thumbs {
    order: -1;
}

/* ── Layout: thumbs à direita ─────────────────────────────── */
.wcgs-layout--thumbs-right {
    display:               grid;
    grid-template-columns: 1fr var(--wcgs-thumb-size);
    gap:                   var(--wcgs-thumb-gap);
    align-items:           start;
}

/* ── Slider principal ──────────────────────────────────────── */
.wcgs-main {
    width:         100%;
    
    overflow:      hidden;
   
    /* autoHeight no Swiper controla a altura — sem aspect-ratio fixo */
}

.wcgs-main .swiper-wrapper {
    align-items: flex-start;
}

.wcgs-main .swiper-slide {
    display:     block;
    width:       100%;
    height:      auto;
    font-size:   0;    /* previne gap de descender em elementos inline */
    line-height: 0;
}

/* Imagem 100% de largura, altura proporcional — sem corte, sem espaço */
.wcgs-img {
    display:        block;
    width:          100%;
    height:         auto;
    vertical-align: bottom; /* elimina espaço inline fantasma */
    transition:     transform var(--wcgs-trans);
}

/* <picture> sem espaçamento residual de linha */
.wcgs-main .swiper-slide picture {
    display:   block;
    width:     100%;
    font-size: 0;    /* anula line-height herdado que cria espaço embaixo */
    line-height: 0;
}

/* img dentro de picture fluida e sem espaço */
.wcgs-main .swiper-slide picture img {
    display:        block;
    width:          100%;
    height:         auto;
    vertical-align: bottom;
    font-size:      initial;
}

/* ── Zoom container ────────────────────────────────────────── */
.swiper-zoom-container {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
}

/* ── Navegação (setas) — Font Awesome ──────────────────────── */

/* Oculta o ::after padrão do Swiper (ícone SVG inline) */
.wcgs-nav::after {
    content:  none !important;
    display:  none !important;
}

.wcgs-nav {
    width:           38px !important;
    height:          38px !important;
    border-radius:   50% !important;
    background:      rgba(255,255,255,0.88) !important;
    backdrop-filter: blur(4px);
    box-shadow:      0 1px 4px rgba(0,0,0,.12);
    transition:      opacity var(--wcgs-trans), transform var(--wcgs-trans);
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    overflow:        visible !important;
}

/* SVG chevron inline dentro do botão */
.wcgs-nav-icon {
    width:          16px;
    height:         16px;
    display:        block;
    flex-shrink:    0;
    color:          var(--wcgs-nav-color);
    pointer-events: none;
}

/*.wcgs-nav:hover {
    opacity:   .85;
    transform: translateY(-50%) scale(1.06);
}*/

/* ── Paginação por pontos ──────────────────────────────────── */
.wcgs-pagination {
    --swiper-pagination-color:         var(--wcgs-nav-color);
    --swiper-pagination-bullet-size:   7px;
    --swiper-pagination-bullet-inactive-color: #ccc;
    bottom: 10px !important;
}

/* ── Contador ──────────────────────────────────────────────── */
.wcgs-counter {
    position:      absolute;
    bottom:        10px;
    right:         12px;
    z-index:       10;
    font-size:     12px;
    line-height:   1;
    padding:       4px 9px;
    border-radius: 20px;
    background:    rgba(255,255,255,0.82);
    backdrop-filter: blur(4px);
    color:         #1a1a1a;
    pointer-events: none;
    user-select:   none;
}

/* ── Thumbs ────────────────────────────────────────────────── */
.wcgs-thumbs {
    width: 100%;
}

/* Thumbs verticais (left / right) */
.wcgs-layout--thumbs-left  .wcgs-thumbs,
.wcgs-layout--thumbs-right .wcgs-thumbs {
    height: 100%;
}

.wcgs-thumb-slide {
    cursor:        pointer;
    border-radius: 4px;
    overflow:      hidden;
    border:        1.5px solid transparent;
    transition:    border-color var(--wcgs-trans), opacity var(--wcgs-trans);
    opacity:       0.6;
}

.wcgs-thumb-slide.swiper-slide-thumb-active {
    border-color: var(--wcgs-nav-color);
    opacity:      1;
}

.wcgs-thumb-slide:hover {
    opacity: 0.85;
}

.wcgs-thumb-img,
.wcgs-thumb-slide picture {
    width:       100%;
    height:      100%;
    object-fit:  cover;
    display:     block;
    pointer-events: none;
}

/* Garante que <picture> nas thumbs preencha o slide */
.wcgs-thumb-slide picture img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ── Responsividade ────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Thumbs laterais colapsam para baixo em telas pequenas */
    .wcgs-layout--thumbs-left,
    .wcgs-layout--thumbs-right {
        grid-template-columns: 1fr;
    }

    .wcgs-layout--thumbs-left  .wcgs-thumbs,
    .wcgs-layout--thumbs-right .wcgs-thumbs {
        order: 1;
        height: auto;
    }

    /* Setas menores em mobile */
    .wcgs-nav {
        width:  30px !important;
        height: 30px !important;
    }

    .wcgs-nav-icon {
        width:  13px;
        height: 13px;
    }
}

@media (max-width: 400px) {
    .wcgs-nav--prev { left:  4px !important; }
    .wcgs-nav--next { right: 4px !important; }
}