/**
 * Galéria - frontend stílusok
 *
 * [ss_galeria] és [ss_galeria oszlopok="3"]
 *
 * Felépítés: grid + kép + alsó gradiens overlay szöveggel.
 * Lightbox: fixen a viewporton, középen a nagy kép, nyilak, bezárás, számláló.
 */

.ss-galeria {
    display: grid;
    grid-template-columns: repeat(var(--ss-galeria-oszlopok, 3), 1fr);
    grid-auto-rows: 300px;
    gap: 16px;
    font-family: Poppins, sans-serif;
}

/* ==========================================================================
   GALÉRIA ELEM (kép + overlay)
   ========================================================================== */
.ss-gal-item {
    position: relative;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    background: #f5f4ef;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-gal-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px -30px rgba(21, 24, 29, 0.5);
}

/* Kép kitölti a dobozt (object-fit: cover). */
.ss-gal-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ss-gal-item:hover .ss-gal-img {
    transform: scale(1.05);
}

/* Alsó gradiens overlay: transparent 52%-tól sötétig. */
.ss-gal-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    padding: 24px;
    background: linear-gradient(transparent 52%, rgba(21, 24, 29, 0.8));
}

.ss-gal-caption {
    width: 100%;
}

.ss-gal-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.3;
}

.ss-gal-meta {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    margin-top: 2px;
}


/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.ss-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 17, 20, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ss-lightbox.is-open {
    display: flex;
}

/* Nagy kép konténer. */
.ss-lightbox-stage {
    position: relative;
    max-width: 90vw;
    max-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss-lightbox-img {
    max-width: 90vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
    /* Képváltás: opacity átmenet. */
    opacity: 0;
    transition: opacity 0.35s ease;
}

.ss-lightbox-img.is-visible {
    opacity: 1;
}

/* Információs sáv lent: fekete átlátszó, keskeny. */
.ss-lightbox-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 24px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: #fff;
    pointer-events: none;
}

.ss-lightbox-title {
    font-weight: 600;
    font-size: 17px;
}

.ss-lightbox-meta {
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    margin-top: 2px;
}

/* Bezárás gomb (jobb felső sarok). */
.ss-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
}

.ss-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Navigációs nyilak. */
.ss-lightbox-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.25s, transform 0.25s;
    user-select: none;
}

.ss-lightbox-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ss-lightbox-arrow--prev {
    left: 24px;
}

.ss-lightbox-arrow--next {
    right: 24px;
}

.ss-lightbox-arrow--prev:hover {
    transform: translateY(-50%) translateX(-3px);
}

.ss-lightbox-arrow--next:hover {
    transform: translateY(-50%) translateX(3px);
}

/* Rejtett nyilak, ha csak 1 kép van. */
.ss-lightbox.is-single .ss-lightbox-arrow {
    display: none;
}

/* Számláló (bal felső). */
.ss-lightbox-counter {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    letter-spacing: 0.05em;
    pointer-events: none;
}


/* ==========================================================================
   REZPONZÍV
   ========================================================================== */

/* Tableten max 2 oszlop. */
@media (min-width: 769px) and (max-width: 1024px) {
    .ss-galeria {
        grid-template-columns: repeat(min(var(--ss-galeria-oszlopok, 3), 2), 1fr);
    }
}

/* ==========================================================================
   „TOVÁBBI REFERENCIÁK" GOMB (csak mobilon, a grid alatt)
   ========================================================================== */
.ss-galeria-tovabbi-wrap {
    display: none; /* asztalon rejtve; mobilon felülírjuk */
}

/* Ha a galéria a „referenciák oldalon" van (ss-galeria--oldal), akkor a gomb
   wrapper sem kell — a PHP nem is rendereli, de biztosítjuk, hogy ha valami
   miatt mégis megjelenne, ne látszódjon. */
.ss-galeria--oldal + .ss-galeria-tovabbi-wrap {
    display: none !important;
}

.ss-galeria-tovabbi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
background-color: #10b981;
    box-shadow: 0 16px 50px -12px rgba(16, 185, 129, 0.6) !important;
        padding: 19px 38px;
        font-family: Poppins, sans-serif;
    border-radius: 100px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ss-galeria-tovabbi:hover {
    background: #029e50;
    color: #fff;
}

.ss-galeria-tovabbi:active {
    transform: translateY(1px);
}


/* ==========================================================================
   MOBIL (max-width: 768px)
   ========================================================================== */
/* Mobilon 1 oszlop, kisebb sorok. */
@media (max-width: 768px) {
    .ss-galeria {
        grid-template-columns: 1fr;
        grid-auto-rows: 240px;
        gap: 14px;
    }

    /* Csak az ELSŐ kép (teljes) és a MÁSODIK kép (félig átmosva) látszik
       mobilon. A többi rejtve — a „További referenciák" gomb visz külön
       oldalra. A lightbox továbbra is az összes képet tartalmazza
       (a display:none elemek a DOM-ban maradnak). */
    .ss-gal-item:nth-child(n+3) {
        display: none;
    }

    /* A második kép alulról átmosva #f5f4ef színnel: a kép teteje teljesen
       látszik, az alja halványan olvad át a háttérbe. A maszk a kép ALJÁRA
       kerül (overlay nélkül), hogy a gradiens a #f5f4ef háttérbe simuljon. */
    .ss-gal-item--second {
        /* A default sötét overlay-t (felirattal) eltávolítjuk a 2. képről,
           mert az átmosás miatt zavaró lenne. A kép tiszta marad. */
    }

    .ss-gal-item--second .ss-gal-overlay {
        /* Új gradiens: alulról #f5f4ef-be átmenő maszk (a kép alja halványodik).
           Felül transparent → a kép teteje teljesen látszik. */
        background: linear-gradient(transparent 40%, #f5f4ef 98%);
    }

    /* A gomb wrapper mobilon megjelenik, középre zárt, a grid alatt. */
    .ss-galeria-tovabbi-wrap {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    /* Mobilon a nyilak közelebb, kisebbek. */
    .ss-lightbox-arrow {
        width: 44px;
        height: 44px;
        font-size: 22px;
    }

    .ss-lightbox-arrow--prev {
        left: 12px;
    }

    .ss-lightbox-arrow--next {
        right: 12px;
    }

    .ss-lightbox-close {
        top: 14px;
        right: 14px;
    }

    /* ======================================================================
       „REFERENCIÁK OLDAL" mód: [ss_galeria oldal="1"]
       Ezen az oldalon NEM történik levágás mobilon — az összes kép simán
       egymás alatt megjelenik, nincs átfedés/átmosás a 2. képen, és a
       „További referenciák" gomb sem jelenik meg. A lightbox továbbra is működik.
       ====================================================================== */

    /* Feloldjuk a „csak első 2 kép látszik" szabályt — minden elem látszik. */
    .ss-galeria--oldal .ss-gal-item:nth-child(n+3) {
        display: block;
    }

    /* Ha valamiért kapott first/second osztályt egy elem (PHP-ben nem kap, de
       biztosítjuk), az alapértelmezett overlay-t kapjon vissza, ne az átmosást. */
    .ss-galeria--oldal .ss-gal-item--second .ss-gal-overlay {
        background: linear-gradient(transparent 52%, rgba(21, 24, 29, 0.8));
    }
}

/* Üres állapot. */
.ss-galeria-ures {
    font-family: Poppins, sans-serif;
    color: #565b63;
}