/* ============================================================
   PAGE: GALERIJA — "Zid imena" (wall of glowing names)
   Reuse tokens/komponente iz app.css; sve boje preko var(--...)
   Signature motiv: svetleći natpis imena bebe na hover.
   ============================================================ */

/* ---------- HERO ---------- */
.galerija-hero{position:relative;overflow:hidden;
  padding-top:clamp(120px,16vh,178px);padding-bottom:clamp(48px,7vw,84px)}
.galerija-hero .hero-bg{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(58% 55% at 82% 10%,color-mix(in srgb,var(--blush) 66%,transparent),transparent 70%),
  radial-gradient(50% 52% at 6% 92%,color-mix(in srgb,var(--mist) 82%,transparent),transparent 66%),
  radial-gradient(38% 40% at 98% 74%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 70%),
  var(--bg)}
.galerija-hero .inner{max-width:760px}
.galerija-hero h1{font-size:var(--fs-hero);margin:1.2rem 0 1.15rem}
.galerija-hero h1 em{font-style:italic;color:var(--aqua);position:relative;white-space:nowrap}
/* svetleći potpis u naslovu — signature */
.galerija-hero h1 .glow{font-style:italic;color:var(--aqua);position:relative;
  text-shadow:0 0 18px color-mix(in srgb,var(--aqua-bright) 70%,transparent),
              0 0 42px color-mix(in srgb,var(--aqua) 40%,transparent);
  animation:galSign 4.2s var(--ease) infinite}
.galerija-hero .lead{margin-bottom:1.9rem}

/* plutajući svetleći name-tag klaster (dekor) */
.galerija-tags{display:flex;flex-wrap:wrap;gap:.6rem;max-width:640px}
.galerija-tag{display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:.96rem;
  color:var(--fg);background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:.42rem .95rem;box-shadow:var(--shadow-sm);
  will-change:transform;animation:galFloat 6s var(--ease) infinite}
.galerija-tag::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--aqua-bright);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--aqua-bright) 22%,transparent),
             0 0 12px color-mix(in srgb,var(--aqua-bright) 80%,transparent);
  animation:galBlink 2.6s ease-in-out infinite}
.galerija-tag:nth-child(2){animation-delay:.5s}
.galerija-tag:nth-child(2)::before{animation-delay:.4s;background:var(--blush);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blush) 22%,transparent),0 0 12px color-mix(in srgb,var(--blush) 80%,transparent)}
.galerija-tag:nth-child(3){animation-delay:1s}
.galerija-tag:nth-child(3)::before{animation-delay:.9s;background:var(--gold);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 22%,transparent),0 0 12px color-mix(in srgb,var(--gold) 80%,transparent)}
.galerija-tag:nth-child(4){animation-delay:1.5s}
.galerija-tag:nth-child(5){animation-delay:2s}
.galerija-tag:nth-child(6){animation-delay:2.5s}

/* ---------- ZID IMENA (masonry-mozaik) ---------- */
.galerija-wall{display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:132px;grid-auto-flow:dense;gap:.9rem;margin-top:.4rem}
.galerija-tile{position:relative;margin:0;grid-row:span 2;overflow:hidden;
  border-radius:var(--r-md);box-shadow:var(--shadow-sm);isolation:isolate;
  background:color-mix(in srgb,var(--sand) 50%,var(--card))}
.galerija-tile.t-tall{grid-row:span 3}
.galerija-tile.t-wide{grid-column:span 2;grid-row:span 2}
.galerija-tile.t-big{grid-column:span 2;grid-row:span 3}
.galerija-tile img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease),filter .5s var(--ease);will-change:transform}
.galerija-tile:hover img,.galerija-tile:focus-within img{transform:scale(1.07)}

/* zatamnjenje na hover */
.galerija-tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,color-mix(in srgb,var(--teal) 78%,transparent));
  opacity:.28;transition:opacity .4s var(--ease)}
.galerija-tile:hover::after,.galerija-tile:focus-within::after{opacity:.72}

/* SIGNATURE: svetleći natpis imena */
.galerija-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.4rem .95rem .85rem;display:flex;flex-direction:column;gap:.15rem;
  transform:translateY(8px);opacity:0;transition:opacity .38s var(--ease),transform .38s var(--ease)}
.galerija-tile:hover .galerija-cap,.galerija-tile:focus-within .galerija-cap{opacity:1;transform:none}
.galerija-cap b{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:1.12rem;color:#fff;letter-spacing:.01em;line-height:1.1;
  text-shadow:0 0 10px color-mix(in srgb,var(--aqua-bright) 85%,transparent),
              0 0 26px color-mix(in srgb,var(--aqua) 60%,transparent),
              0 1px 2px rgba(0,0,0,.4)}
.galerija-cap span{font-family:'Manrope',sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.03em;color:color-mix(in srgb,#fff 82%,var(--aqua-bright))}
/* svetleća tačka u ćošku — uvek prisutan „potpis" */
.galerija-tile .galerija-star{position:absolute;top:.7rem;right:.75rem;z-index:2;
  width:9px;height:9px;border-radius:50%;background:var(--aqua-bright);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--aqua-bright) 20%,transparent),
             0 0 12px color-mix(in srgb,var(--aqua-bright) 90%,transparent);
  opacity:.55;transition:opacity .4s var(--ease);animation:galBlink 3s ease-in-out infinite}
.galerija-tile:hover .galerija-star,.galerija-tile:focus-within .galerija-star{opacity:1}
.galerija-tile.t-name .galerija-star{background:var(--blush);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--blush) 20%,transparent),0 0 12px color-mix(in srgb,var(--blush) 90%,transparent)}

/* stagger ulaz — samo transform/opacity (dopuna reveal sistemu) */
.galerija-wall.is-in .galerija-tile{animation:galRise .7s var(--ease) backwards}
.galerija-wall.is-in .galerija-tile:nth-child(4n+1){animation-delay:.02s}
.galerija-wall.is-in .galerija-tile:nth-child(4n+2){animation-delay:.09s}
.galerija-wall.is-in .galerija-tile:nth-child(4n+3){animation-delay:.16s}
.galerija-wall.is-in .galerija-tile:nth-child(4n){animation-delay:.23s}

/* ---------- INSTAGRAM TRAKA ---------- */
.galerija-ig{border-block:1px solid var(--line);
  background:linear-gradient(135deg,color-mix(in srgb,var(--blush) 26%,var(--bg)),
    color-mix(in srgb,var(--mist) 42%,var(--bg)))}
.galerija-ig .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:1.4rem;flex-wrap:wrap;padding-block:clamp(30px,5vw,50px)}
.galerija-ig-txt{display:flex;align-items:center;gap:1rem}
.galerija-ig-ico{flex:none;width:56px;height:56px;border-radius:17px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(135deg,var(--gold),var(--blush) 55%,var(--aqua));
  box-shadow:var(--shadow-sm)}
.galerija-ig-ico svg{width:28px;height:28px}
.galerija-ig h2{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .15rem}
.galerija-ig p{color:var(--muted);font-size:.96rem}

/* ---------- FINALNI CTA ---------- */
.galerija-cta{position:relative;text-align:center;overflow:hidden;
  padding-block:clamp(80px,12vw,140px);
  background:radial-gradient(68% 120% at 50% 0%,color-mix(in srgb,var(--mist) 78%,transparent),transparent 62%),var(--bg)}
.galerija-cta-glow{position:absolute;inset:0;z-index:0;
  background:radial-gradient(42% 42% at 50% 44%,color-mix(in srgb,var(--aqua) 20%,transparent),transparent);
  filter:blur(10px);animation:galPulse 6s ease-in-out infinite alternate}
.galerija-cta .inner{position:relative;z-index:1;max-width:36ch;margin-inline:auto}
.galerija-cta h2{font-size:clamp(2rem,5vw,3.4rem);font-style:italic;font-weight:400;margin-bottom:1.1rem}
.galerija-cta p{color:var(--muted);max-width:52ch;margin:0 auto 2rem}
.galerija-cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.galerija-note{margin-top:1.8rem;font-size:.84rem;color:var(--muted)}

/* ---------- KEYFRAMES (GPU: transform/opacity) ---------- */
@keyframes galRise{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes galFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes galBlink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes galSign{0%,100%{text-shadow:0 0 18px color-mix(in srgb,var(--aqua-bright) 70%,transparent),0 0 42px color-mix(in srgb,var(--aqua) 40%,transparent)}
  50%{text-shadow:0 0 26px color-mix(in srgb,var(--aqua-bright) 90%,transparent),0 0 60px color-mix(in srgb,var(--aqua) 60%,transparent)}}
@keyframes galPulse{from{opacity:.5;transform:scale(.97)}to{opacity:.95;transform:scale(1.04)}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .galerija-wall{grid-template-columns:repeat(3,1fr);grid-auto-rows:124px}
}
@media (max-width:640px){
  .galerija-wall{grid-template-columns:repeat(2,1fr);grid-auto-rows:118px;gap:.7rem}
  .galerija-tile.t-big{grid-column:span 2;grid-row:span 3}
  .galerija-tile.t-wide{grid-column:span 2;grid-row:span 2}
  .galerija-cap{opacity:1;transform:none}          /* na telefonu natpis uvek vidljiv */
  .galerija-tile::after{opacity:.55}
}

/* ============================================================
   VIDEO — "Naši mali plivači" (video facade grid)
   Osnovni .vfacade stil dolazi iz app.css (globalni agent);
   ovde samo raspored grida + 9/16 okvir.
   ============================================================ */
.galerija-video .center{margin-bottom:.4rem}
.vgal{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
.vgal .vfacade{position:relative;margin:0;padding:0;width:100%;
  aspect-ratio:9/16;border:0;background:color-mix(in srgb,var(--sand) 50%,var(--card));
  border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm);
  cursor:pointer;isolation:isolate;display:block}
.vgal .vfacade-poster{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease),filter .5s var(--ease);will-change:transform}
.vgal .vfacade:hover .vfacade-poster,
.vgal .vfacade:focus-visible .vfacade-poster{transform:scale(1.06)}
/* video koji app.js ubaci nasleđuje 9/16 okvir */
.vgal .vfacade video,.vgal video{width:100%;height:100%;object-fit:cover;
  aspect-ratio:9/16;border-radius:var(--r-md);display:block;background:#000}
.vgal .vfacade:focus-visible{outline:3px solid var(--aqua-bright);outline-offset:3px}

/* ---------- RESPONSIVE (video grid) ---------- */
@media (max-width:900px){
  .vgal{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:520px){
  .vgal{grid-template-columns:repeat(2,1fr);gap:.7rem}
}

/* ---------- REDUCED MOTION GUARD ---------- */
@media (prefers-reduced-motion:reduce){
  .galerija-tag,.galerija-tag::before,.galerija-tile .galerija-star,
  .galerija-hero h1 .glow,.galerija-cta-glow,
  .galerija-wall.is-in .galerija-tile{animation:none!important}
  .galerija-tile img,.vgal .vfacade-poster{transition:none}
  .galerija-cap{opacity:1;transform:none}
}