/* ============================================================
   zs-images.css — shared image patterns for Zvjezdane Staze
   ============================================================
   Sve klase prefiksom .zs- da ne kolidiraju sa per-page CSS-om.

   Token policy (v2 · 2026-05-05 brand consolidation):
   - Solid hex (e.g. #c4a050, #1f3a1f) → var(--token) where possible
   - rgba() values stay direct — CSS variables can't be composed with
     custom alpha in legacy syntax (the modern rgb(from var(...) ...) is
     too new for our browser support floor). Alpha overlays of forest
     45,74,45 and gold 196,160,80 ARE the canonical token colors at
     custom transparency — kept inline by design.

   v1 · 2026-04-29 · paired with /js/zs-gallery.js
   v2 · 2026-05-05 · solid hex → CSS vars (forest, forest-deep, gold, bg)
   ============================================================ */

/* ---------- FIGURE WRAPPER (size + caption alignment) ---------- */
.zs-figure { margin: 0; }
.zs-figure--hero-wide      { max-width: 720px; margin: 0 auto 3.5rem; }
.zs-figure--hero-portrait  { max-width: 280px; margin: 0 auto 2.5rem; }
.zs-figure--float-right {
    float: right;
    margin: 0 0 1.5rem 2rem;
    width: 280px;
}
.zs-figure--float-left {
    float: left;
    margin: 0 2rem 1.5rem 0;
    width: 280px;
}
@media (max-width: 600px) {
    .zs-figure--float-right,
    .zs-figure--float-left {
        float: none;
        width: 100%;
        margin: 1.5rem 0;
    }
}

/* ---------- IMAGE FRAME (gradient bg + gold border) ---------- */
.zs-image {
    background: linear-gradient(135deg, rgba(45,74,45,0.06), rgba(196,160,80,0.04));
    border: 1px solid rgba(196,160,80,0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: border-color 0.3s, transform 0.3s;
}
.zs-image::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(196,160,80,0.08), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(45,74,45,0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.zs-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}
.zs-image[data-zs-clickable] { cursor: zoom-in; }
.zs-image[data-zs-clickable]:hover {
    border-color: rgba(196,160,80,0.55);
    transform: translateY(-2px);
}

/* ---------- ASPECT RATIOS ---------- */
.zs-image--16x9 { aspect-ratio: 16/9; }
.zs-image--4x5  { aspect-ratio: 4/5; }
.zs-image--3x2  { aspect-ratio: 3/2; }
.zs-image--1x1  { aspect-ratio: 1/1; }
.zs-image--4x3  { aspect-ratio: 4/3; }

/* ---------- SIZE MODIFIERS ---------- */
.zs-image--avatar       { max-width: 130px; }
.zs-image--avatar-large { max-width: 160px; }   /* team portraits, programme mentor avatars */
.zs-image--thumb        { max-width: 320px; }

/* Avatar-large applies max-width on the parent figure too, since figures are
   what get hover-translated. Use on .zs-figure when wrapping an avatar-large
   image — keeps the hairline border tight to the photo without stretching. */
.zs-figure--avatar-large { max-width: 160px; margin: 0 auto 1.25rem; }

/* ---------- SHAPE MODIFIERS ---------- */
/* Circular crop — for signature avatars / round portrait blocks.
   Applied to the .zs-image wrapper; overflow:hidden in base rule masks the
   image to the circle. The hairline gold border + gradient bg from the base
   .zs-image rule still apply, so the result is a circular polaroid. */
.zs-image--circle { border-radius: 50%; }
.zs-image--circle img { border-radius: inherit; }

/* ---------- LOGO MODIFIER (no padding/border/gradient — for transparent PNGs) ---------- */
.zs-image--logo {
    background: none;
    border: none;
}
.zs-image--logo::before { content: none; }
.zs-image--logo img {
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ---------- ROTATION MODIFIERS ---------- */
.zs-image--rotate-90 { transform: rotate(90deg); }

/* ---------- PLACEHOLDER ---------- */
.zs-image-placeholder {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    color: rgba(45,74,45,0.45);
}
.zs-image-placeholder svg { width: 32px; height: 32px; }
.zs-image-placeholder span {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ---------- UNIVERSAL FIGCAPTION ----------
   Two ways to get canonical caption styling:
     1. Add class="zs-caption" to <figcaption> (explicit, works anywhere)
     2. Just place <figcaption> inside .zs-figure (auto, default)
   Page-specific overrides (e.g. .intro-image figcaption, .place-photo
   figcaption) are more specific and continue to win — this default exists
   so unclassed figcaptions don't fall back to browser default italic.
*/
.zs-caption,
.zs-figure > figcaption {
    font-size: 11px;
    color: rgba(45,74,45,0.55);
    text-align: right;
    margin-top: 0.4rem;
    font-style: italic;
    line-height: 1.4;
}

/* ---------- GALLERY GRIDS ---------- */
.zs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}
.zs-gallery-grid--large {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
}
.zs-gallery-grid figure { margin: 0; }
@media (max-width: 600px) {
    .zs-gallery-grid,
    .zs-gallery-grid--large { grid-template-columns: 1fr; }
}

/* ---------- EDITION GALLERY (1:1) ---------- */
.zs-edition-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}
.zs-edition-gallery figure { margin: 0; }
.zs-edition-item {
    aspect-ratio: 1/1;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(45,74,45,0.06), rgba(196,160,80,0.04));
    border: 1px solid rgba(196,160,80,0.30);
    transition: border-color 0.3s, transform 0.3s;
    cursor: zoom-in;
}
.zs-edition-item:hover {
    border-color: rgba(196,160,80,0.55);
    transform: translateY(-2px);
}
.zs-edition-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) {
    .zs-edition-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* --cinema variant (dark) — Dvonoćje highlight items */
.zs-edition-item--cinema {
    background: #0a0a0a;
    border: 1px solid rgba(0,0,0,0.2);
}
.zs-edition-item--cinema:hover {
    border-color: rgba(196,160,80,0.55);
    transform: translateY(-2px);
}

/* --green variant — Dvonoćje format items */
.zs-edition-item--green {
    background: rgba(45,74,45,0.85);
    border: 1px solid rgba(45,74,45,0.4);
}
.zs-edition-item--green:hover {
    border-color: rgba(196,160,80,0.55);
    transform: translateY(-2px);
}

/* --highlight (span 2) — height matches 1:1 siblings via grid auto-row */
.zs-edition-item--highlight {
    grid-column: span 2;
    aspect-ratio: auto;
}
@media (max-width: 600px) {
    .zs-edition-item--highlight {
        grid-column: span 1;
        aspect-ratio: 1/1;
    }
}

/* --posters variant — items stretch to row height (no enforced 1:1 square).
   Used for festival/edition galleries where individual posters have varied
   proportions and the grid should feel like a poster wall, not a uniform
   tile mosaic. Used by /programmes/dvonocje (EN + DE). Combined with
   --cinema or --green item variants for the dark/green poster overlay. */
.zs-edition-gallery--posters {
    align-items: stretch;
}
.zs-edition-gallery--posters .zs-edition-item {
    aspect-ratio: unset;
}
.zs-edition-gallery--posters .zs-edition-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ---------- EDITION POSTER (overlay text — content, NIJE caption) ---------- */
.zs-edition-poster {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 3rem 1.1rem 1rem;
    z-index: 2;
}
.zs-edition-poster-name { display: block; margin-bottom: 0.25rem; }
.zs-edition-poster-info {
    font-size: 11px;
    letter-spacing: 0.04em;
}
.zs-edition-item--cinema .zs-edition-poster {
    background: linear-gradient(to top,
        rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.2) 80%, transparent 100%);
    color: #fff;
}
.zs-edition-item--cinema .zs-edition-poster-name {
    font-family: var(--font-serif);
    font-size: 0.9rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.zs-edition-item--cinema .zs-edition-poster-info {
    color: rgba(255,255,255,0.88);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.zs-edition-item--green .zs-edition-poster {
    background: linear-gradient(to top,
        rgba(45,74,45,0.92) 0%, rgba(45,74,45,0.6) 40%, rgba(45,74,45,0.2) 80%, transparent 100%);
    color: #fff;
}
.zs-edition-item--green .zs-edition-poster-name {
    font-family: var(--font-hybrid);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* ---------- MASONRY GRID (CSS columns, natural aspect, all visible) ----------
   Used for thematic photo archives where photos have varied orientations and
   we want each to "breathe" in its own aspect ratio rather than being cropped
   to a uniform shape. CSS columns gives us masonry without JS dependency.

   Brand book §15 photography treatment fits — warm, low-contrast, lifted
   shadows render best at natural proportions.

   Markup:
     <div class="zs-masonry-wrap">
       <div class="zs-masonry" data-zs-gallery>
         <figure class="zs-masonry-frame" data-zs-clickable data-caption="...">
           <img src="..." alt="...">
           <figcaption>...</figcaption>
         </figure>
         ...
       </div>
     </div>

   data-zs-gallery + data-zs-clickable wire into js/zs-gallery.js (same lightbox
   as filmstrip — figures stay clickable, caption on hover overlay).
*/
.zs-masonry-wrap { margin: 2rem 0; }

.zs-masonry {
    column-count: 3;
    column-gap: 1rem;
}
@media (max-width: 900px) { .zs-masonry { column-count: 2; } }
@media (max-width: 600px) { .zs-masonry { column-count: 1; } }

.zs-masonry-frame {
    display: inline-block;
    width: 100%;
    margin: 0 0 1rem 0;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    background: linear-gradient(135deg, rgba(45,74,45,0.06), rgba(196,160,80,0.04));
    border: 1px solid rgba(196,160,80,0.30);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.zs-masonry-frame:hover {
    border-color: rgba(196,160,80,0.55);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(45,74,45,0.08);
}
.zs-masonry-frame img {
    width: 100%;
    height: auto;
    display: block;
}
.zs-masonry-frame figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.7rem 1rem;
    background: linear-gradient(transparent, rgba(31,58,31,0.7));
    color: var(--bg);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.zs-masonry-frame:hover figcaption {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .zs-masonry-frame,
    .zs-masonry-frame figcaption { transition: none; }
    .zs-masonry-frame:hover { transform: none; box-shadow: none; }
}


/* ---------- FILMSTRIP (drag-scroll with edge-fade affordance) ----------
   Horizontal scrolling collection. Frames slide in from the right edge with a
   gradient fade-out indicating "there's more →". On scroll, the right fade
   animates out (replaced by a left fade if there's content to the left).

   Markup:
     <div class="zs-filmstrip-wrap">
       <div class="zs-filmstrip" data-zs-gallery>
         <figure class="zs-film-frame" data-zs-clickable data-caption="...">
           <img src="..." alt="...">
           <figcaption>...</figcaption>
         </figure>
         ...
       </div>
     </div>
*/
.zs-filmstrip-wrap {
    position: relative;
    margin: 2rem 0;
}

/* Right edge fade — signals "more to scroll", fades to bg paper.
   Always visible at start, JS hides via .zs-filmstrip-wrap--end class
   when user has scrolled to the rightmost frame (zs-gallery.js handles). */
.zs-filmstrip-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 1.4rem;  /* leave scrollbar space */
    width: 36px;                       /* narrow enough not to obscure the rightmost frame */
    background: linear-gradient(to left, var(--bg, #faf9f6) 0%, rgba(250, 249, 246, 0.7) 50%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
}
.zs-filmstrip-wrap--end::after { opacity: 0; }

/* Optional left fade — appears once user has scrolled away from start */
.zs-filmstrip-wrap::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 1.4rem;
    width: 28px;
    background: linear-gradient(to right, var(--bg, #faf9f6) 0%, rgba(250, 249, 246, 0.7) 50%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.zs-filmstrip-wrap--scrolled::before { opacity: 1; }

.zs-filmstrip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.5rem 0 1.4rem;
    scroll-snap-type: x mandatory;
    scroll-padding: 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(196,160,80,0.4) transparent;
    cursor: grab;
}
.zs-filmstrip:active { cursor: grabbing; }
.zs-filmstrip::-webkit-scrollbar { height: 4px; }
.zs-filmstrip::-webkit-scrollbar-track { background: transparent; }
.zs-filmstrip::-webkit-scrollbar-thumb { background: rgba(196,160,80,0.3); border-radius: 2px; }
.zs-filmstrip::-webkit-scrollbar-thumb:hover { background: rgba(196,160,80,0.6); }

.zs-film-frame {
    flex: 0 0 auto;
    width: 320px;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, rgba(45,74,45,0.06), rgba(196,160,80,0.04));
    border: 1px solid rgba(196,160,80,0.30);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color 0.3s, transform 0.3s;
}
.zs-film-frame:hover {
    border-color: rgba(196,160,80,0.55);
    transform: translateY(-2px);
}
.zs-film-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.zs-film-num {
    position: absolute;
    top: 0.6rem; left: 0.7rem;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--gold);
    letter-spacing: 0.1em;
    opacity: 0.85;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
@media (max-width: 600px) {
    .zs-film-frame { width: 240px; }
}

/* ---------- FILMSTRIP — ARCHIVE VARIANT (photo-album register) ----------
   Used for thematic photo archives (media/photos.php) where the visual
   register wants to feel more "physical photo album" than the architectural
   matted register of the canonical filmstrip.

   Differences from canonical:
     • White-tinted photo-mat background instead of forest+gold gradient
     • 0.5rem inner padding (mat border around the photograph)
     • calc-based 3-up width that fits the section column exactly
     • Hover: gold border + box-shadow lift + 3% image scale (zoom)
       instead of canonical translate
     • Left-aligned figcaption inside the frame (no right-align)
     • Mobile breakpoints: 2-up at ≤768px, 1.5-up (peek) at ≤480px
     • Optional --collage sub-variant: square 1:1 frames for before/after pairs

   Activation: add class="zs-filmstrip zs-filmstrip--archive" on the inner
   filmstrip element. Frames inside automatically pick up the archive
   styling.
*/
.zs-filmstrip--archive .zs-film-frame {
    flex: 0 0 calc((100% - 2rem) / 3);
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(196, 160, 80, 0.2);
    transition: all 0.3s;
    margin: 0;
}
.zs-filmstrip--archive .zs-film-frame:hover {
    border-color: var(--gold);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: none;
}
.zs-filmstrip--archive .zs-film-frame img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}
.zs-filmstrip--archive .zs-film-frame:hover img {
    transform: scale(1.03);
}
.zs-filmstrip--archive .zs-film-frame > figcaption {
    /* Override the .zs-figure > figcaption right-align default — archive
       captions sit inside the photo mat, left-aligned, no italic. */
    font-size: 11px;
    color: var(--light);
    padding: 0.6rem 0.25rem 0.1rem;
    margin-top: 0;
    letter-spacing: 0.02em;
    text-align: left;
    font-style: normal;
}

/* Square sub-variant for before/after collages */
.zs-filmstrip--archive .zs-film-frame--collage {
    flex: 0 0 380px;
}
.zs-filmstrip--archive .zs-film-frame--collage img {
    aspect-ratio: 1/1;
}
@media (max-width: 768px) {
    .zs-filmstrip--archive .zs-film-frame { flex: 0 0 calc((100% - 1rem) / 2); }
    .zs-filmstrip--archive .zs-film-frame--collage { flex: 0 0 300px; }
}
@media (max-width: 480px) {
    .zs-filmstrip--archive .zs-film-frame { flex: 0 0 78%; }
    .zs-filmstrip--archive .zs-film-frame--collage { flex: 0 0 280px; }
}

/* ---------- PERFORMER TILE ---------- */
.zs-performers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.6rem 1.2rem;
    margin: 2rem 0;
}
.zs-performer-tile {
    text-align: center;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s;
}
.zs-performer-tile:hover { transform: translateY(-2px); }
.zs-performer-tile:hover .zs-image { border-color: rgba(196,160,80,0.55); }
/* Prevent double-translate when avatar inside tile is hovered */
.zs-performer-tile .zs-image[data-zs-clickable]:hover { transform: none; }
.zs-performer-name {
    font-family: var(--font-serif);
    font-size: 1rem;
    margin-top: 0.6rem;
    color: var(--forest-deep);
}
.zs-performer-role {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    margin-top: 0.2rem;
}

/* ---------- VIDEO CARD ---------- */
.zs-video-card {
    display: block;
    text-decoration: none;
    color: inherit;
    background: linear-gradient(135deg, rgba(45,74,45,0.06), rgba(196,160,80,0.04));
    border: 1px solid rgba(196,160,80,0.30);
    transition: border-color 0.3s ease, transform 0.3s ease;
    margin: 2rem 0;
    max-width: 600px;
}
.zs-video-card:hover {
    border-color: rgba(196,160,80,0.55);
    transform: translateY(-2px);
}
.zs-video-thumb {
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
}
.zs-video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.zs-video-play-circle {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s ease;
    z-index: 2;
}
.zs-video-card:hover .zs-video-play-circle { background: var(--gold); }
.zs-video-card:hover .zs-video-play-circle svg { color: var(--bg); }
.zs-video-play-circle svg {
    width: 28px; height: 28px;
    color: var(--forest);
    transition: color 0.3s;
    margin-left: 4px;
}
.zs-video-meta {
    padding: 1.2rem 1.4rem;
    border-top: 1px solid rgba(196,160,80,0.30);
}
.zs-video-meta .title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--forest-deep);
    margin: 0 0 0.4rem;
    font-weight: 400;
}
.zs-video-meta .info {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(45,74,45,0.55);
}

/* ---------- LIGHTBOX ---------- */
.zs-lightbox {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    align-items: center; justify-content: center;
    padding: 2rem;
}
.zs-lightbox.active { display: flex; }
.zs-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex; flex-direction: column; align-items: center;
}
.zs-lightbox-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    background: #0a0a0a;
}
.zs-lightbox-caption {
    color: rgba(255,255,255,0.85);
    font-size: 13px;
    text-align: center;
    margin-top: 1rem;
    max-width: 600px;
    line-height: 1.5;
}
.zs-lightbox-counter {
    position: absolute;
    top: -2.5rem; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.6);
}
.zs-lightbox-close,
.zs-lightbox-prev,
.zs-lightbox-next {
    position: absolute;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 22px;
    transition: all 0.3s;
    z-index: 2;
}
.zs-lightbox-close:hover,
.zs-lightbox-prev:hover,
.zs-lightbox-next:hover { border-color: var(--gold); color: var(--gold); }
.zs-lightbox-close { top: 1rem; right: 1rem; }
.zs-lightbox-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); }
.zs-lightbox-next { right: 1.5rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 720px) {
    /* Lightbox buttons retain 44×44px on mobile (WCAG 2.5.5 minimum).
       Position adjusted for narrower viewport; icon size lightly reduced for visual balance. */
    .zs-lightbox-prev, .zs-lightbox-next { font-size: 18px; }
    .zs-lightbox-prev { left: 0.5rem; }
    .zs-lightbox-next { right: 0.5rem; }
    .zs-lightbox-close { top: 0.8rem; right: 0.8rem; font-size: 18px; }
}