/* ==================================== */
/* COBI CONCEPT - STILURI GENERALE */
/* ==================================== */

/* Asigură că fontul 'Open Sans' este uniform preluat de Tailwind */
.font-sans, 
.font-\[Open\_Sans\] {
    font-family: 'Open Sans', sans-serif;
}

/* Stilul pentru Titlu (Folosește clamp pentru responsivitate pe o gamă largă de ecrane) */
.heading {
    /* Dimensiuni: minim 4rem (mobil), 8vw (fluid), maxim 10rem (desktop mare) */
    font-size: clamp(4rem, 8vw + 0.5rem, 10rem); 
    line-height: 0.95;
}

/* FIX: Asigură că smooth-wrapper este corect setat de GSAP */
#smooth-wrapper {
    overflow: hidden; 
}

/* ==================================== */
/* NAVBAR SPECIFIC (Hide on Scroll) */
/* ==================================== */
/* Tailwind CSS se ocupă de 'fixed', 'top-0', 'w-full', 'z-50', 'transition-transform' */
/* Clasa CSS "nav-hidden" va fi adăugată/scoasă de JavaScript */
.nav-hidden {
    transform: translateY(-100%); /* Ascunde bara în sus */
}

/* Textul animat (opțional, dar păstrează consistența cu JS) */
#text-animat {
    visibility: hidden;
}

/* ==================================== */
/* GALERIE CU EFECT DE STACK - CORECTAT */
/* ==================================== */

.image-stack-gallery {
    --clr-bg: #f8fafc;
    --clr-text: #1e293b;
    --clr-primary: #1e3a5f;
    --hover-intensity: 10rem;
    --hover-smoothness: 70ms;
    --fall-smoothness: 250ms;
    --perspective: 2000px;

    height: 80vh;
    display: grid;
    place-items: center;
    font-family: "Manrope", sans-serif;
    background: var(--clr-bg);
    color: var(--clr-text);
    padding: 2em;
    margin: 2rem 0;
}

.image-stack-gallery nav {
    --r: calc(var(--max-z) * (var(--p) - 1) + var(--z));
    --r-n: calc((var(--r) - 1) / (var(--max-z) * var(--max-p) - 1));

    block-size: min(30rem, 100%);
    inline-size: min(80rem, 100%);
    display: flex;
    align-items: flex-end;
    position: relative;
    perspective: var(--perspective);
    transform-style: preserve-3d;
    --dir: 0deg;
}

.image-stack-gallery a {
    flex: 1;
    block-size: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    transform-style: preserve-3d;
    --ts: calc(
        var(--hover-smoothness) * var(--falloff) + var(--fall-smoothness) *
        (1 - var(--falloff))
    );
    --fs: calc(0.1s * var(--falloff, 0) + 0.8s * (1 - var(--falloff, 0)));
    transition: scale var(--op, 0.15s), filter var(--fs),
        transform var(--ts, var(--fall-smoothness)), flex 0.3s;
}

.image-stack-gallery a {
    --p-n: calc(var(--i) / (var(--max-p) - 1));
    --diff: calc(var(--p-n) - var(--r-n));
    --u: calc(abs(var(--diff)) / var(--w));
    --w: 0.4;
    --falloff: clamp(
        calc(0.5 * (1 + cos(min(var(--u), 1) * 180deg))),
        0,
        1
    );
    --tilt: calc(clamp(-1, var(--diff) * 5, 1) * var(--falloff) * 70deg);

    transform: translateZ(calc(var(--falloff) * var(--hover-intensity)))
        rotateY(calc(var(--tilt) * cos(var(--dir))))
        rotateX(calc(var(--tilt) * sin(var(--dir))));

    filter: brightness(max(0.5, var(--falloff, 0) * 1.2))
        saturate(var(--falloff, 0));
}

.image-stack-gallery .img {
    background: var(--img);
    background-color: #fff3;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    margin-inline: 0.1em;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: filter 0.3s ease;
}

.image-stack-gallery a:hover {
    filter: brightness(1.1) saturate(1.5) hue-rotate(5deg);
}

.image-stack-gallery a:hover .img {
    filter: brightness(1.1) saturate(1.3);
}

.image-stack-gallery .hover-zone {
    position: absolute;
    inset: 0;
    inset-inline: -3px;
    display: flex;
    z-index: 999;
}

.image-stack-gallery .hover-zone > i {
    flex: 1;
    transition: 0.3s;
}

.image-stack-gallery .hover-zone::after {
    position: absolute;
    inset: 0;
}

.image-stack-gallery nav:has(.hover-zone:hover):not(:has(i:hover)),
.image-stack-gallery nav:has(a:focus-visible) {
    --z: calc((var(--max-z) + 1) / 2);
}

.image-stack-gallery a:hover,
.image-stack-gallery a:focus-visible {
    flex: 4;
}

.image-stack-gallery .hover-zone:active::after,
.image-stack-gallery .hover-zone:hover:not(i:hover)::after,
.image-stack-gallery a:focus-visible .hover-zone::after {
    content: "";
    pointer-events: all;
    --o: 1;
}

/* ==================================== */
/* GALERIE MOBILE - CORECTAT COMPLET */
/* ==================================== */

@media (max-width: 768px) {
    .image-stack-gallery {
        height: 70vh;
        padding: 1em;
        touch-action: pan-y;
    }

    .image-stack-gallery nav {
        writing-mode: horizontal-tb !important;
        flex-direction: column !important;
        --dir: 0deg !important;
        block-size: 100% !important;
        inline-size: 100% !important;
        gap: 4px;
    }

    .image-stack-gallery a {
        min-height: 80px;
        min-width: 100% !important;
        flex: 1;
        margin: 2px 0;
        /* Resetează transformările 3D care pot cauza probleme pe mobile */
        transform: none !important;
        transform-style: flat !important;
    }

    .image-stack-gallery .img {
        margin-inline: 0;
        margin-block: 0;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Stiluri pentru elementul activ pe touch */
    .image-stack-gallery a.touch-active {
        flex: 8 !important;
        min-height: 250px !important;
        z-index: 100;
        filter: brightness(1.1) saturate(1.5) hue-rotate(5deg) !important;
        border: 3px solid rgb(30, 58, 95);
        box-shadow: 0 8px 25px rgba(30, 58, 95, 0.404);
        transform: scale(1.02) !important;
    }

    .image-stack-gallery a.touch-active .img {
        filter: brightness(1.1) saturate(1.3) !important;
        border-radius: 12px;
    }

    /* Ascunde hover-zone pe mobile dacă cauzează probleme */
    .image-stack-gallery .hover-zone {
        display: none;
    }
}

/* Dezactivează efectele hover pe dispozitive touch */
@media (hover: none) and (pointer: coarse) {
    .image-stack-gallery a:hover {
        filter: none !important;
        flex: 1 !important;
        transform: none !important;
    }
    
    .image-stack-gallery a:hover .img {
        filter: none !important;
    }
}

/* Stiluri pentru ecrane foarte mici */
@media (max-width: 480px) {
    .image-stack-gallery {
        height: 60vh;
        padding: 0.5em;
    }

    .image-stack-gallery a {
        min-height: 60px;
    }

    .image-stack-gallery a.touch-active {
        min-height: 200px !important;
        flex: 10 !important;
    }
}

/* Asigură că imaginile se încarcă corect */
.image-stack-gallery .img {
    background-image: var(--img) !important;
}