/* =================================================================
   PALETĂ
================================================================== */
:root{
    --amg-brown:#4f3522;
    --amg-white:#ffffff;
    --amg-bg:#faf8f5;
    --amg-shadow:rgba(0,0,0,.12);
    --amg-text:#2b2b2b;
}

.amg-gallery-page,
.amg-gallery-page *{
    box-sizing:border-box;
}

.amg-gallery-page{
    font-family:"Special Gothic", sans-serif;
}

/* =================================================================
   HERO
================================================================== */
.amg-hero{
    position:relative;
    width:100%;
    height:430px;
    overflow:hidden;
background: url('gal1.webp');
    /* Placeholder — înlocuiește cu url('images/hero.jpg') background-size:cover center/no-repeat */
       background-size:cover;
    background-position:center;
}

.amg-overlay{
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, 0.432);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 6%;
    opacity:0;
    transition:opacity .9s ease;
}
.amg-hero.amg-hero-in-view .amg-overlay{
    opacity:1;
}

.amg-subtitle,
.amg-title,
.amg-description{
    opacity:0;
    transform:translateY(45px);
    transition:opacity .9s ease, transform .9s ease;
}
.amg-hero.amg-hero-in-view .amg-subtitle{ opacity:1; transform:translateY(0); }
.amg-hero.amg-hero-in-view .amg-title{ opacity:1; transform:translateY(0); transition-delay:.12s; }
.amg-hero.amg-hero-in-view .amg-description{ opacity:1; transform:translateY(0); transition-delay:.24s; }

.amg-subtitle{
    font-size:20px;
    font-weight:600;
    color:var(--amg-white);
    margin-bottom:20px;
}

.amg-title{
    font-size:clamp(54px, 5vw, 82px);
    font-weight:700;
    line-height:1.1;
    color:var(--amg-white);
    margin-bottom:25px;
}

.amg-description{
    font-size:30px;
    color:var(--amg-white);
    max-width:800px;
    line-height:1.5;
}

/* =================================================================
   SECȚIUNE GALERIE
================================================================== */
.amg-gallery{
    background:var(--amg-white);
}

.amg-container{
    max-width:1400px;
    margin:auto;
    padding:120px 7%;
}

/* =================================================================
   GRID — scalabil, orice număr de imagini
================================================================== */
.amg-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:55px;
}

/* =================================================================
   CARD
================================================================== */
.amg-card{
    position:relative;
    border-radius:34px;
    overflow:hidden;
    background:var(--amg-bg);
    cursor:pointer;
    transition:.45s ease;
    box-shadow:0 18px 45px rgba(0,0,0,.10);

    opacity:0;
    transform:translateY(60px);
}
.amg-card.amg-card-in-view{
    opacity:1;
    transform:translateY(0);
    transition:opacity .8s ease, transform .8s ease, box-shadow .45s ease;
}

.amg-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 70px rgba(0,0,0,.18);
}
.amg-card.amg-card-in-view:hover{
    transition:transform .45s ease, box-shadow .45s ease;
}

.amg-card img{
    width:100%;
    /* Înălțimea fixă rezervă spațiul din start: skeleton-ul și poza ocupă
       exact același cadru, deci nu există layout shift la încărcare. */
    height:700px;
    object-fit:cover;
    display:block;
    transition:.6s;
    opacity:0;
}
.amg-card img.amg-is-loaded{
    opacity:1;
}
.amg-card:hover img.amg-is-loaded{
    transform:scale(1.05);
}

/* ---- Skeleton loader (vizibil cât timp poza se descarcă) -------------*/
.amg-placeholder{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(150deg, #efe9e2, #e2d9cd);
    color:rgba(79,53,34,.55);
    font-size:16px;
    letter-spacing:.5px;
    overflow:hidden;              /* ține banda de shimmer în interiorul cardului */
    transition:opacity .5s ease;
}

/* Banda de lumină care traversează skeleton-ul */
.amg-placeholder::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,
                rgba(255,255,255,0) 20%,
                rgba(255,255,255,.55) 50%,
                rgba(255,255,255,0) 80%);
    transform:translateX(-100%);
    animation:amg-skeleton-shimmer 1.6s ease-in-out infinite;
}
@keyframes amg-skeleton-shimmer{
    from{ transform:translateX(-100%); }
    to  { transform:translateX(100%); }
}

/* Eticheta text rămâne doar ca plasă de siguranță, dacă poza chiar lipsește */
.amg-placeholder span{
    position:relative;
    opacity:0;
    transition:opacity .3s ease;
}
.amg-card.amg-card-error .amg-placeholder span{ opacity:1; }
.amg-card.amg-card-error .amg-placeholder::after{ animation:none; opacity:0; }

/* Poza încărcată → skeleton-ul dispare lin și animația se oprește */
.amg-card img.amg-is-loaded ~ .amg-placeholder{
    opacity:0;
    pointer-events:none;
}
.amg-card img.amg-is-loaded ~ .amg-placeholder::after{
    animation:none;
}

/* =================================================================
   LIGHTBOX
================================================================== */
.amg-lightbox{
    position:fixed;
    inset:0;
    z-index:1000;
    background:rgba(0,0,0,.92);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility 0s linear .35s;
}
.amg-lightbox.amg-lightbox-open{
    opacity:1;
    visibility:visible;
    transition:opacity .35s ease, visibility 0s linear 0s;
}

.amg-lightbox-image{
    position:relative;
    z-index:1;
    max-width:88vw;
    max-height:86vh;
    border-radius:18px;
    box-shadow:0 30px 80px rgba(0,0,0,.5);
    opacity:0;
    transform:scale(.9);
    transition:opacity .4s ease, transform .4s ease;
}
.amg-lightbox.amg-lightbox-open .amg-lightbox-image{
    opacity:1;
    transform:scale(1);
}

.amg-lightbox-close,
.amg-lightbox-prev,
.amg-lightbox-next{
    position:absolute;
    /* Imaginea are transform (scale), deci creează propriul stacking context.
       Fără z-index explicit, săgeata dinaintea ei în DOM ajunge SUB poză și
       devine necliccabilă. z-index:2 le ține pe toate deasupra imaginii. */
    z-index:2;
    background:rgba(255,255,255,.08);
    border:1.5px solid rgba(255,255,255,.4);
    color:var(--amg-white);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s ease;
}
.amg-lightbox-close:hover,
.amg-lightbox-prev:hover,
.amg-lightbox-next:hover{
    background:var(--amg-white);
    color:var(--amg-brown);
    border-color:var(--amg-white);
}

.amg-lightbox-close{
    top:28px;
    right:28px;
    width:52px;
    height:52px;
    border-radius:50%;
    font-size:24px;
}

.amg-lightbox-prev,
.amg-lightbox-next{
    top:50%;
    width:60px;
    height:60px;
    border-radius:50%;
    font-size:28px;
    transform:translateY(-50%);
}
.amg-lightbox-prev{ left:28px; }
.amg-lightbox-next{ right:28px; }

/* =================================================================
   RESPONSIVE
================================================================== */
@media (max-width:900px){
    .amg-grid{
        grid-template-columns:1fr;
    }
    .amg-card img{
        height:500px;
    }
    .amg-lightbox-prev,
    .amg-lightbox-next{
        width:48px;
        height:48px;
        font-size:22px;
    }
    .amg-lightbox-prev{ left:14px; }
    .amg-lightbox-next{ right:14px; }
}

@media (max-width:600px){
    .amg-container{
        padding:80px 6%;
    }
    .amg-card img{
        height:420px;
    }
    .amg-title{
        font-size:42px;
    }
    .amg-description{
        font-size:22px;
    }
    .amg-lightbox-close{
        top:16px;
        right:16px;
        width:44px;
        height:44px;
        font-size:20px;
    }
    /* Pe telefon poza ocupă aproape toată lățimea, așa că săgețile coboară
       sub imagine — rămân complet vizibile, ușor de apăsat cu degetul și
       nu împing/nu taie cadrul fotografiei. Înălțimea redusă a imaginii
       eliberează exact banda de jos în care stau săgețile. */
    .amg-lightbox-image{
        max-width:92vw;
        max-height:64vh;
    }
    .amg-lightbox-prev,
    .amg-lightbox-next{
        top:auto;
        bottom:calc(24px + env(safe-area-inset-bottom, 0px));
        transform:none;
        width:52px;
        height:52px;
        font-size:26px;
    }
    .amg-lightbox-prev{ left:22%; }
    .amg-lightbox-next{ right:22%; }
}

/* =================================================================
   ACCESIBILITATE
================================================================== */
@media (prefers-reduced-motion: reduce){
    .amg-overlay,
    .amg-subtitle,
    .amg-title,
    .amg-description,
    .amg-card,
    .amg-card img,
    .amg-lightbox,
    .amg-lightbox-image{
        transition:none !important;
        opacity:1 !important;
        transform:none !important;
    }
    /* Skeleton-ul rămâne vizibil, dar fără banda animată */
    .amg-placeholder::after{
        animation:none !important;
        opacity:0 !important;
    }
}