/* =============================================
   GALERIA INTERATIVA — Projetos em Destaque
   ============================================= */

.gallery-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 1.125rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    line-height: 1.7;
}

.gallery-options {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 420px;
    overflow: hidden;
}

/* Individual panel */
.gallery-option {
    position: relative;
    flex: 1 1 0%;
    min-width: 60px;
    overflow: hidden;
    cursor: pointer;
    background-color: #18181b;
    background-size: auto 120%;
    background-position: center;
    border: 2px solid #292929;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.30);

    /* Entrance animation: start hidden */
    opacity: 0;
    transform: translateX(-60px);

    transition:
        opacity 500ms ease,
        transform 500ms ease,
        flex 700ms ease-in-out,
        box-shadow 700ms ease-in-out,
        background-size 700ms ease-in-out,
        border-color 700ms ease-in-out;

    will-change: flex, opacity, transform;
}

/* Staggered entrance: JS adds this class */
.gallery-option.gallery-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Active (expanded) panel */
.gallery-option.active {
    flex: 7 1 0%;
    border-color: #ffffff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.50);
    z-index: 10;
    /* background-size: 100%auto ; */
}

/* ---- Bottom shadow gradient overlay ---- */
.gallery-shadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -40px;
    height: 120px;
    pointer-events: none;
    box-shadow:
        inset 0 -120px 0px -120px #000,
        inset 0 -120px 0px -80px #000;
    transition:
        bottom 700ms ease-in-out,
        box-shadow 700ms ease-in-out;
}

.gallery-option.active .gallery-shadow {
    bottom: 0;
    box-shadow:
        inset 0 -120px 120px -120px #000,
        inset 0 -120px 120px -80px #000;
}

/* ---- Label row (icon + text) ---- */
.gallery-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 48px;
    z-index: 2;
    pointer-events: none;
    padding: 0 16px;
    gap: 12px;
    width: 100%;
}

/* Icon circle */
.gallery-icon {
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #00571bd9;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    border: 2px solid #247700;
    flex-shrink: 0;
    flex-grow: 0;
    transition: all 200ms;
}

/* Info text block */
.gallery-info {
    color: white;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.gallery-info .gallery-main {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    opacity: 0;
    transform: translateX(25px);
    transition:
        opacity 700ms ease-in-out,
        transform 700ms ease-in-out;
}

.gallery-info .gallery-sub {
    font-size: 0.875rem;
    color: #d1d5db;
    opacity: 0;
    transform: translateX(25px);
    transition:
        opacity 700ms ease-in-out 60ms,
        transform 700ms ease-in-out 60ms;
}

/* Reveal text when panel is active */
.gallery-option.active .gallery-info .gallery-main,
.gallery-option.active .gallery-info .gallery-sub {
    opacity: 1;
    transform: translateX(0);
}

/* =============================================
   RESPONSIVE — Mobile: stacked vertically
   ============================================= */
@media (max-width: 700px) {
    .gallery-options {
        flex-direction: column;
        height: auto;
        min-height: 360px;
        max-width: 100%;
        border-radius: 12px;
    }

    .gallery-option {
        min-height: 68px;
        min-width: unset;
        background-size: cover;
        /* Override horizontal slide-in with vertical for mobile */
        transform: translateY(-30px);
        transition:
            opacity 500ms ease,
            transform 500ms ease,
            flex 700ms ease-in-out,
            box-shadow 700ms ease-in-out,
            border-color 700ms ease-in-out;
    }

    .gallery-option.gallery-visible {
        transform: translateY(0);
    }

    .gallery-option.active {
        flex: 5 1 0%;
        min-height: 220px;
        background-size: cover;
    }

    .gallery-info .gallery-main,
    .gallery-info .gallery-sub {
        transform: translateY(10px);
        transition:
            opacity 700ms ease-in-out,
            transform 700ms ease-in-out;
    }

    .gallery-option.active .gallery-info .gallery-main,
    .gallery-option.active .gallery-info .gallery-sub {
        transform: translateY(0);
    }

    .gallery-icon {

        margin-top: 20px;
    }
}