/**
 * Tom Serviços System - Frontend Styles
 */

/* ... (Estilos de .tss-servicos-wrapper, .tss-layout-grid, .tss-service-item etc. MANTIDOS COMO ANTES) ... */

/* NOVO: Estilos para a galeria com background-image */
.tss-service-gallery-wrapper .tss-gallery-grid {
    display: grid !important;
    /* Variáveis de coluna definidas pelos seletores do widget no PHP */
    grid-template-columns: repeat(var(--gallery-columns-desktop, 4), 1fr) !important;
    /* Variável de gap definida pelo seletor do widget */
    gap: var(--gallery-item-gap, 10px) !important;
    margin-top: 15px;
}

/* Responsividade das Colunas (reutilizando variáveis) */
@media (max-width: 1024px) { /* Tablet */
    .tss-service-gallery-wrapper .tss-gallery-grid {
        grid-template-columns: repeat(var(--gallery-columns-tablet, var(--gallery-columns-desktop, 3)), 1fr) !important;
    }
}
@media (max-width: 767px) { /* Mobile */
    .tss-service-gallery-wrapper .tss-gallery-grid {
        grid-template-columns: repeat(var(--gallery-columns-mobile, var(--gallery-columns-tablet, var(--gallery-columns-desktop, 2))), 1fr) !important;
    }
}

.tss-service-gallery-wrapper .tss-gallery-item {
    /* Cada item do grid é um container para o link/imagem */
}

.tss-service-gallery-wrapper .tss-gallery-item a,
.tss-service-gallery-wrapper .tss-gallery-item .tss-gallery-image-bg { /* Se não houver link */
    display: block;
    position: relative; /* Para o overlay e aspect ratio */
    text-decoration: none;
    overflow: hidden; /* Para o border-radius no overlay */
    /* border-radius é aplicado via seletor do widget ao .tss-gallery-image-bg */
}

.tss-service-gallery-wrapper .tss-gallery-image-bg {
    width: 100%;
    /* height é definido por gallery_thumbnail_height ou pelo aspect ratio */
    background-repeat: no-repeat;
    /* background-size e background-position são definidos pelos seletores do widget */
    transition: transform 0.3s ease; /* Removido se não quiser scale no hover */
}

/* Aplica padding para aspect ratio se a classe estiver presente */
.tss-service-gallery-wrapper .tss-gallery-image-bg.has-aspect-ratio {
    height: 0; /* Necessário para padding-bottom controlar a altura */
    padding-bottom: var(--aspect-ratio-padding); /* Ex: 66.66% para 3:2, setado via style no wrapper */
}


/* Pseudo-elemento para o overlay no .tss-gallery-image-bg */
.tss-service-gallery-wrapper .tss-gallery-image-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--tss-overlay-base-color, rgba(0,0,0,1)); /* Cor base do overlay */
    opacity: 0; /* Inicialmente transparente */
    transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none; /* Permite cliques no link abaixo do overlay */
    border-radius: inherit; /* Herda o border-radius do .tss-gallery-image-bg */
}

/* Efeito Hover (Apenas Overlay) */
/* A classe tss-has-hover-effect é adicionada ao .tss-service-gallery-wrapper */
.tss-service-gallery-wrapper.tss-has-hover-effect .tss-gallery-item a:hover .tss-gallery-image-bg::after,
.tss-service-gallery-wrapper.tss-has-hover-effect .tss-gallery-item .tss-gallery-image-bg:hover::after { /* Caso não seja um link */
    opacity: var(--tss-overlay-opacity-value, 0.6); /* Opacidade definida no hover */
}

/* Legenda (opcional, se você descomentar no PHP) */
.tss-service-gallery-wrapper .tss-gallery-caption {
    font-size: 0.85em !important;
    color: #555 !important;
    margin-top: 8px !important;
    padding: 0 5px;
    line-height: 1.3;
    text-align: center;
}


/* ... (Estilos de .tss-service-gallery (galeria interna) e GLightbox Theme MANTIDOS COMO ANTES) ... */