/**
 * Presença Digital 4 Anos — Estilos do Módulo Trabalhos Executados (Antes & Depois)
 * Alinhado visualmente com a grade e cards do catálogo (#catalogo).
 */

/* Ajustes específicos da seção de trabalhos */
#trabalhos.catalog {
    padding-top: var(--espaco-3xl);
    padding-bottom: var(--espaco-3xl);
    min-height: 75vh;
}

/* Switcher Antes / Depois sobre a imagem do card */
.work-card__image-wrapper {
    position: relative;
}

.work-card__switch {
    position: absolute;
    top: var(--espaco-sm);
    left: var(--espaco-sm);
    display: inline-flex;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    border-radius: var(--raio-pill);
    padding: 3px;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.work-card__switch-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 11px;
    font-weight: var(--peso-bold);
    padding: 3px 10px;
    border-radius: var(--raio-pill);
    cursor: pointer;
    transition: all var(--transicao-rapida);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-height: 24px;
    line-height: 1;
}

.work-card__switch-btn:hover {
    color: #ffffff;
}

.work-card__switch-btn.is-active[data-mode="depois"] {
    background: var(--cor-primaria, #ef4444);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.work-card__switch-btn.is-active[data-mode="antes"] {
    background: #475569;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.work-card__badge {
    position: absolute;
    top: var(--espaco-sm);
    left: var(--espaco-sm);
    padding: 4px 10px;
    border-radius: var(--raio-pill);
    font-size: 11px;
    font-weight: var(--peso-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffffff;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.work-card__badge--depois {
    background: var(--cor-primaria, #ef4444);
}

.work-card__badge--antes {
    background: #475569;
}

.work-card__photo-count {
    position: absolute;
    bottom: var(--espaco-sm);
    right: var(--espaco-sm);
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 11px;
    font-weight: var(--peso-semi);
    padding: 2px 8px;
    border-radius: var(--raio-pill);
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Miniaturas discretas caso haja mais de 2 fotos */
.work-card__thumbs {
    display: flex;
    gap: 6px;
    margin-top: var(--espaco-sm);
    overflow-x: auto;
    padding-bottom: 2px;
}

.work-card__thumb {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--raio-sm);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0.65;
    padding: 0;
    background: var(--cor-superficie);
    transition: all var(--transicao-rapida);
}

.work-card__thumb:hover,
.work-card__thumb.is-active {
    opacity: 1;
    border-color: var(--cor-primaria);
}

.work-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.work-card__thumb-label {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    padding: 0 3px;
    text-transform: uppercase;
    line-height: 10px;
}