/* =============================================================
   Kulturalnia Gallery – frontend styles  v1.1
   Kolory: #fc6523 akcent | #212121 tekst | #53585c drugorzędny
   ============================================================= */

:root {
    --kg-accent:       #fc6523;
    --kg-accent-dark:  #e0551a;
    --kg-text:         #212121;
    --kg-muted:        #53585c;
    --kg-bg:           #f5f4f2;
    --kg-white:        #ffffff;
    --kg-border:       #e2e0dc;
    --kg-shadow:       0 2px 12px rgba(0,0,0,.10);
    --kg-shadow-hover: 0 6px 24px rgba(0,0,0,.18);
    --kg-transition:   .22s cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper galerii ── */
.kg-gallery-wrap { width: 100%; margin: 0 auto; }

/* ── Header galerii ── */
.kg-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: .5rem;
}

.kg-gallery-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--kg-text);
    text-transform: uppercase;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.kg-gallery-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background: var(--kg-accent);
    border-radius: 2px;
}

.kg-gallery-count {
    font-size: .8rem;
    color: var(--kg-muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Hero photo – pierwsze zdjęcie galerii ── */
.kg-hero-item {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;           /* proporcja 3:2 */
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 4px;            /* ten sam odstęp co między miniaturami */
    box-shadow: var(--kg-shadow);
    transition: box-shadow var(--kg-transition);
}
.kg-hero-item:hover {
    box-shadow: var(--kg-shadow-hover);
}
.kg-hero-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;             /* 3:2 – pionowe zdjęcia przycinane */
    object-position: center top;   /* kadrownie od góry – twarze widoczne */
    transition: transform var(--kg-transition);
}
.kg-hero-item:hover img {
    transform: scale(1.02);
}

/* Overlay hero */
.kg-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 40%, transparent 100%);
    opacity: 0;
    transition: opacity var(--kg-transition);
    display: flex;
    align-items: flex-end;
    padding: 1.25rem;
    pointer-events: none;
}
.kg-hero-item:hover .kg-hero-overlay { opacity: 1; }

.kg-hero-caption {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.95);
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Ikona zoom na hero – większa niż na miniaturach */
.kg-hero-item .kg-item-overlay-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    transition: transform var(--kg-transition), opacity var(--kg-transition);
    opacity: 0;
    width: 56px; height: 56px;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.4);
}
.kg-hero-item:hover .kg-item-overlay-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.kg-hero-item .kg-item-overlay-icon svg { width: 24px; height: 24px; color: #fff; }

/* Numer 01 na hero */
.kg-hero-item .kg-item-num {
    position: absolute;
    top: 10px; left: 10px;
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,.85);
    letter-spacing: .04em;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    pointer-events: none;
}

/* ── Odstęp między hero a masonry ── */
.kg-masonry-grid { margin: 0 -1px; }   /* 2px gutter */

.kg-masonry-grid .kg-masonry-sizer,
.kg-masonry-grid .kg-item {
    width: calc(25% - 4px);
    margin: 0 2px 4px;                 /* 2px odstęp */
}

@media (max-width: 1024px) {
    .kg-masonry-grid .kg-masonry-sizer,
    .kg-masonry-grid .kg-item { width: calc(33.333% - 4px); }
}
@media (max-width: 680px) {
    .kg-masonry-grid .kg-masonry-sizer,
    .kg-masonry-grid .kg-item { width: calc(50% - 4px); }
}
@media (max-width: 380px) {
    .kg-masonry-grid .kg-masonry-sizer,
    .kg-masonry-grid .kg-item { width: calc(100% - 4px); }
}

/* ── Pojedynczy kafelek ── */
.kg-item {
    position: relative;
    border-radius: 0;              /* bez zaokrągleń (pkt 2) */
    overflow: hidden;
    background: var(--kg-border);
    cursor: pointer;
    display: block;
    transition: transform var(--kg-transition), box-shadow var(--kg-transition);
    box-shadow: var(--kg-shadow);
}
.kg-item:hover,
.kg-item:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--kg-shadow-hover);
    outline: none;
}
.kg-item:focus-visible {
    outline: 2px solid var(--kg-accent);
    outline-offset: 2px;
}
.kg-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--kg-transition);
}
.kg-item:hover img { transform: scale(1.03); }

/* Overlay hover */
.kg-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.15) 50%,transparent 100%);
    opacity: 0;
    transition: opacity var(--kg-transition);
    display: flex;
    align-items: flex-end;
    padding: .75rem;
    pointer-events: none;
}
.kg-item:hover .kg-item-overlay { opacity: 1; }

.kg-item-overlay-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    transition: transform var(--kg-transition), opacity var(--kg-transition);
    opacity: 0;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.4);
}
.kg-item:hover .kg-item-overlay-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.kg-item-overlay-icon svg { width: 18px; height: 18px; color: #fff; }

/* Numer zdjęcia */
.kg-item-num {
    position: absolute;
    top: 8px; left: 8px;
    font-size: 10px; font-weight: 700;
    color: rgba(255,255,255,.85);
    letter-spacing: .04em;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    pointer-events: none;
}

/* ── Badge ocen na miniaturze – oba kciuki (pkt 7) ── */
.kg-item-score {
    position: absolute;
    bottom: 8px; right: 8px;
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 11px; font-weight: 600;
    padding: 3px 7px;
    border-radius: 20px;
    display: flex; align-items: center; gap: 6px;
    backdrop-filter: blur(4px);
    pointer-events: none;
    border: 1px solid rgba(255,255,255,.15);
}
.kg-item-score .kg-score-up,
.kg-item-score .kg-score-down {
    display: flex; align-items: center; gap: 3px;
}
.kg-item-score svg { width: 11px; height: 11px; }
.kg-item-score .kg-score-up   svg { color: #22c55e; }   /* zielony */
.kg-item-score .kg-score-down svg { color: #ef4444; }   /* czerwony */
.kg-item-score .kg-score-sep {
    width: 1px; height: 12px;
    background: rgba(255,255,255,.25);
}

/* Caption overlay */
.kg-item-caption {
    font-size: 11px;
    color: rgba(255,255,255,.9);
    line-height: 1.3; font-weight: 500;
    max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Shimmer ładowania */
.kg-item.kg-loading {
    background: linear-gradient(90deg,#ede9e2 25%,#e5e0d8 50%,#ede9e2 75%);
    background-size: 200% 100%;
    animation: kg-shimmer 1.5s infinite;
    min-height: 160px;
}
@keyframes kg-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Fancybox – toolbar ── */
.fancybox__toolbar {
    background: linear-gradient(to bottom,rgba(0,0,0,.7) 0%,transparent 100%) !important;
}

/* ── Strzałki nawigacyjne Fancybox 5 ── */
.fancybox__nav {
    z-index: 99998 !important;
}
.fancybox__container .f-button.is-prev,
.fancybox__container .f-button.is-next {
    width: 44px !important;
    height: 44px !important;
    background: rgba(0,0,0,.55) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .18s !important;
}
.fancybox__container .f-button.is-prev:hover,
.fancybox__container .f-button.is-next:hover {
    background: rgba(0,0,0,.8) !important;
}
/* Przesunięcie strzałek do środka – bliżej zdjęcia (nie przy krawędzi ekranu) */
.fancybox__container .f-button.is-prev {
    left: max(8px, calc(50% - 42vw)) !important;
}
.fancybox__container .f-button.is-next {
    right: max(8px, calc(50% - 42vw)) !important;
}

/* ── Stopka lightboxa – kciuki NA ŚRODKU pod zdjęciem (pkt 3) ── */
.kg-lb-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 99999;
    background: linear-gradient(to top,rgba(0,0,0,.82) 0%,transparent 100%);
    padding: 2.5rem 1rem 1rem;
    /* ZMIANA: układ kolumnowy wyśrodkowany */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s, transform .3s;
}
.kg-lb-footer.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Opis – wyśrodkowany */
.kg-lb-meta {
    text-align: center;
    width: 100%;
    max-width: 680px;
}
.kg-lb-caption {
    font-size: 14px; font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kg-lb-sub {
    font-size: 12px;
    color: rgba(255,255,255,.5);
}

/* Opis w stopce lightboxa – ukryty (duplikuje natywny caption Fancybox) */
.kg-lb-meta { display: none; }

/* Przyciski ocen – wyśrodkowane obok siebie (pkt 3) */
.kg-lb-votes {
    display: flex;
    align-items: center;
    justify-content: center;    /* ← wyśrodkowanie */
    gap: 12px;
}

.kg-vote-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 9px 20px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.1);
    color: #fff;
    font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .12s;
    backdrop-filter: blur(6px);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-width: 80px;
    justify-content: center;
}
.kg-vote-btn:hover  { background: rgba(255,255,255,.22); }
.kg-vote-btn:active { transform: scale(.94); }
.kg-vote-btn svg    { width: 16px; height: 16px; pointer-events: none; flex-shrink: 0; }
#kg-btn-up   svg   { color: #22c55e; }   /* kciuk w górę – zielony */
#kg-btn-down svg   { color: #ef4444; }   /* kciuk w dół  – czerwony */

.kg-vote-btn.kg-voted-up {
    background: rgba(34,197,94,.25);
    border-color: rgba(34,197,94,.65);
    color: #86efac;
}
.kg-vote-btn.kg-voted-down {
    background: rgba(239,68,68,.25);
    border-color: rgba(239,68,68,.55);
    color: #fca5a5;
}
.kg-vote-btn.kg-loading-vote {
    opacity: .6; pointer-events: none;
}

/* Toast komunikat rate limiting */
.kg-vote-toast {
    display: none;
    text-align: center;
    font-size: 12px;
    color: rgba(255,255,255,.85);
    background: rgba(0,0,0,.65);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 20px;
    padding: 6px 16px;
    max-width: 340px;
    backdrop-filter: blur(6px);
    animation: kg-toast-in .25s ease;
}
.kg-vote-toast.visible { display: block; }
@keyframes kg-toast-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Licznik pozycji */
.kg-lb-counter {
    font-size: 11px;
    color: rgba(255,255,255,.35);
    letter-spacing: .04em;
}

/* ── Dark mode ── */
@media (prefers-color-scheme: dark) {
    .kg-gallery-wrap {
        --kg-bg:    #1a1917;
        --kg-border:#2e2c29;
        --kg-text:  #f0eeeb;
        --kg-muted: #9a9590;
    }
}
.dark-mode .kg-gallery-title  { color: #f0eeeb; }
.dark-mode .kg-gallery-count  { color: #9a9590; }