/**
 * Instagram Slider Plugin
 * Compatível com: Bootstrap 4.6, jQuery 3.5.1, PHP 7.4
 * Autor: Plugin gerado para integração com site existente
 */

/* =========================================
   CONTAINER PRINCIPAL
   Envolve todo o componente do slider.
   Usamos position: relative para que os
   botões de navegação se posicionem em
   relação a este elemento.
   ========================================= */
.ig-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden; /* Esconde as imagens fora da área visível */
    margin: 0 auto;
}

/* =========================================
   VIEWPORT (JANELA DE VISUALIZAÇÃO)
   É a "janela" que mostra apenas 3 fotos.
   O overflow: hidden aqui é o segredo do
   funcionamento: esconde o que está fora.
   ========================================= */
.ig-slider-viewport {
    overflow: hidden;
    width: 100%;
}

/* =========================================
   TRACK (TRILHO)
   É a faixa longa que contém TODAS as 9
   imagens lado a lado. Ele se move para
   a esquerda/direita com CSS transition,
   criando o efeito de slide suave.
   ========================================= */
.ig-slider-track {
    display: flex;
    flex-wrap: nowrap;       /* Mantém todos os slides em uma linha */
    align-items: stretch;
    transition: transform 0.4s ease-in-out; /* Animação suave do slide */
    will-change: transform;  /* Otimização de performance no browser */
}

/* =========================================
   CADA SLIDE (ITEM)
   Cada foto ocupa exatamente 1/3 do
   container (menos o espaçamento).
   O calc() é usado para subtrair o gap
   corretamente.
   ========================================= */
.ig-slider-item {
    flex: 0 0 calc(33.333% - 9px); /* 3 itens por linha, com espaço */
    margin-right: 12px;             /* Espaçamento entre os itens */
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background-color: #f0f0f0;      /* Cor de fundo enquanto imagem carrega */
    aspect-ratio: 1 / 1;           /* Mantém formato quadrado (como Instagram) */
}

/* Remove margem do último item visível
   para não gerar espaço extra à direita */
.ig-slider-item:last-child {
    margin-right: 0;
}

/* =========================================
   IMAGEM DENTRO DO SLIDE
   object-fit: cover garante que a imagem
   preencha o quadrado sem distorcer,
   cortando as bordas se necessário.
   ========================================= */
.ig-slider-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.3s ease; /* Efeito de zoom no hover */
}

/* Zoom sutil ao passar o mouse */
.ig-slider-item:hover img {
    transform: scale(1.04);
}

/* =========================================
   OVERLAY (CAMADA SOBRE A IMAGEM)
   Aparece com hover para indicar que a
   imagem é clicável, exibindo ícones de
   curtidas e comentários como no Instagram.
   ========================================= */
.ig-slider-overlay {
    position: absolute;
    inset: 0;                        /* Equivalente a top/right/bottom/left: 0 */
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.ig-slider-item:hover .ig-slider-overlay {
    opacity: 1;
}

/* Estatísticas (curtidas e comentários) no overlay */
.ig-slider-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.ig-slider-stat svg {
    width: 18px;
    height: 18px;
    fill: #ffffff;
}

/* =========================================
   BOTÕES DE NAVEGAÇÃO (PREV / NEXT)
   Posicionados sobre o slider, nas laterais.
   São visíveis sempre e ficam sobre as fotos.
   ========================================= */
.ig-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, box-shadow 0.2s;
    padding: 0;
    line-height: 1;
}

.ig-slider-btn:hover {
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ig-slider-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.ig-slider-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #333333;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Posição do botão anterior (esquerda) */
.ig-slider-prev {
    left: 8px;
}

/* Posição do botão próximo (direita) */
.ig-slider-next {
    right: 8px;
}

/* =========================================
   INDICADORES DE POSIÇÃO (DOTS)
   Bolinhas abaixo do slider que mostram
   qual imagem está em foco (a mais à
   esquerda das 3 visíveis).
   ========================================= */
.ig-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
}

.ig-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cccccc;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease;
}

.ig-slider-dot.active {
    background: #262626; /* Cor escura para o dot ativo */
    transform: scale(1.3);
}

/* =========================================
   MODO RESPONSIVO
   Em telas pequenas (mobile), exibe apenas
   1 imagem por vez para melhor usabilidade.
   ========================================= */
@media (max-width: 575.98px) {
    .ig-slider-item {
        flex: 0 0 100%;
        margin-right: 0;
    }

    /* Esconde os botões laterais no mobile
       (o usuário usa swipe/touch) */
    .ig-slider-btn {
        display: none;
    }
}

/* Em telas médias, exibe 2 imagens *
@media (min-width: 576px) and (max-width: 767.98px) {
    .ig-slider-item {
        flex: 0 0 calc(50% - 6px);
    }
}

/* Em telas médias, exibe 3 imagens */
/* @media (min-width: 576px) and (max-width: 767.98px) { */
@media (min-width: 576px) and (max-width: 720.98px) {
    .ig-slider-item {
        flex: 0 0 calc(33.333% - 8px);
    }
}

/* =========================================
   CARREGAMENTO LAZY (SKELETON LOADER)
   Efeito visual enquanto as imagens carregam,
   dando feedback visual ao usuário.
   ========================================= */
.ig-slider-item.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: ig-skeleton 1.4s ease infinite;
}

@keyframes ig-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}