/* ============================================================================
   GALLERY SLIDER — galeria de fotos do veículo, vanilla (sem jQuery/slick/fancybox).
   Par de partials/gallery_slider.php + gallery-slider.js.
   Dois layouts: .gsl--thumbs_bottom (thumbs abaixo) e .gsl--thumbs_side (thumbs
   verticais ao lado). Themeável via --gsl-accent (default = cor primária do site).
   ========================================================================== */
.gsl {
    --gsl-aspect: 4 / 3;
    --gsl-accent: var(--main-primary-color, #242e66);
    --gsl-thumb-w: 96px;
    --gsl-gap: 10px;
    width: 100%;
}

/* ---- Palco (stage) ---- */
.gsl__stage { display: flex; flex-direction: column; gap: var(--gsl-gap); }

/* ---- Foto principal ---- */
.gsl__main { position: relative; }
.gsl__viewport {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--gsl-aspect);
    background: #f2f2f4;
    border-radius: 8px;
    cursor: zoom-in;
    outline: none;
}
.gsl__track { display: flex; height: 100%; transition: transform .35s ease; }
.gsl__slide { flex: 0 0 100%; min-width: 100%; height: 100%; }
.gsl__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Setas */
.gsl__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border: 0; border-radius: 50%;
    background: rgba(20, 20, 22, .5); color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s; z-index: 3;
}
.gsl__arrow:hover { background: rgba(20, 20, 22, .8); }
.gsl__arrow--prev { left: 10px; }
.gsl__arrow--next { right: 10px; }

/* Botão de ampliar + contador */
.gsl__zoom {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    width: 38px; height: 38px; border: 0; border-radius: 8px;
    background: rgba(20, 20, 22, .5); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.gsl__zoom:hover { background: rgba(20, 20, 22, .8); }
.gsl__counter {
    position: absolute; left: 10px; bottom: 10px; z-index: 3;
    background: rgba(20, 20, 22, .55); color: #fff; font-size: 12px; font-weight: 600;
    padding: 3px 9px; border-radius: 20px; letter-spacing: .3px;
}

/* ---- Miniaturas ---- */
.gsl__thumbs { display: flex; gap: 8px; }
.gsl__thumb {
    flex: 0 0 auto; width: var(--gsl-thumb-w); aspect-ratio: var(--gsl-aspect);
    padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden;
    background: #f2f2f4; cursor: pointer; opacity: .7; transition: opacity .2s, border-color .2s;
}
.gsl__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gsl__thumb:hover { opacity: 1; }
.gsl__thumb.is-active { opacity: 1; border-color: var(--gsl-accent); }

/* Faixa horizontal (thumbs_bottom): rola na horizontal, alinhada à largura da foto */
.gsl--thumbs_bottom .gsl__thumbs { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }

/* Coluna vertical (thumbs_side): thumbs à ESQUERDA, foto à direita. A faixa de thumbs
   é POSICIONADA (absolute) preenchendo a altura da foto e rola internamente — assim a
   coluna nunca "estica" o palco além da foto, por mais fotos que haja (CSS puro, sem JS). */
.gsl--thumbs_side .gsl__stage {
    position: relative;
    display: block;
    padding-left: calc(var(--gsl-thumb-w) + var(--gsl-gap));
}
.gsl--thumbs_side .gsl__thumbs {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: var(--gsl-thumb-w); flex-direction: column;
    overflow-y: auto; overflow-x: hidden; padding-right: 2px;
}
.gsl--thumbs_side .gsl__main { min-width: 0; }

/* Scrollbar discreta nas faixas de thumbs */
.gsl__thumbs { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, .3) transparent; }
.gsl__thumbs::-webkit-scrollbar { width: 7px; height: 7px; }
.gsl__thumbs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .3); border-radius: 10px; }

/* 1 foto: sem cursor de zoom-in falso na faixa (o zoom segue disponível pelo botão) */
.gsl--single .gsl__viewport { cursor: zoom-in; }

/* Mobile: o layout lateral vira thumbs embaixo (faixa vertical não cabe bem) */
@media (max-width: 768px) {
    /* No mobile a coluna lateral vira foto em cima + faixa de thumbs embaixo (como o thumbs_bottom). */
    .gsl--thumbs_side .gsl__stage {
        position: static; display: flex; flex-direction: column; padding-left: 0;
    }
    .gsl--thumbs_side .gsl__thumbs {
        position: static; width: auto; flex-direction: row;
        overflow-x: auto; overflow-y: hidden;
    }
    .gsl__arrow { width: 36px; height: 36px; font-size: 22px; }
    .gsl { --gsl-thumb-w: 72px; }
}

/* ============================================================================
   LIGHTBOX (tela cheia) — construída sob demanda pelo JS e anexada ao <body>.
   ========================================================================== */
body.gsl-lb-open { overflow: hidden; }
.gsl-lb {
    position: fixed; inset: 0; z-index: 99992; display: none;
    align-items: center; justify-content: center;
}
.gsl-lb.is-open { display: flex; }
.gsl-lb__backdrop { position: absolute; inset: 0; background: rgba(12, 12, 14, .92); }
.gsl-lb__fig { position: relative; z-index: 1; margin: 0; max-width: 92vw; max-height: 88vh; overflow: hidden; }
.gsl-lb__img {
    max-width: 92vw; max-height: 88vh; object-fit: contain; display: block;
    cursor: zoom-in; transition: transform .2s ease; user-select: none;
}
.gsl-lb.is-zoomed .gsl-lb__img { transform: scale(2); cursor: zoom-out; }
.gsl-lb__close, .gsl-lb__arrow {
    position: absolute; z-index: 2; border: 0; background: rgba(255, 255, 255, .12);
    color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.gsl-lb__close:hover, .gsl-lb__arrow:hover { background: rgba(255, 255, 255, .28); }
.gsl-lb__close { top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; font-size: 20px; }
.gsl-lb__arrow { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; font-size: 32px; line-height: 1; }
.gsl-lb__arrow--prev { left: 20px; }
.gsl-lb__arrow--next { right: 20px; }
.gsl-lb__counter {
    position: absolute; z-index: 2; bottom: 22px; left: 50%; transform: translateX(-50%);
    color: #fff; background: rgba(255, 255, 255, .12); padding: 5px 14px; border-radius: 20px;
    font-size: 13px; font-weight: 600; letter-spacing: .4px;
}
.gsl-lb--single .gsl-lb__arrow, .gsl-lb--single .gsl-lb__counter { display: none; }

@media (max-width: 768px) {
    .gsl-lb__arrow { width: 44px; height: 44px; font-size: 26px; }
    .gsl-lb__arrow--prev { left: 8px; }
    .gsl-lb__arrow--next { right: 8px; }
    .gsl-lb__close { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .gsl__track, .gsl-lb__img { transition: none; }
}