/* ==========================================================
   AgroBalon — Galeria
   Podstrona z galeriami zdjęć z różnych lotów
   Wymaga: styles.css + blog.css (nawigacja, stopka)
   ========================================================== */

/* ============ TŁO STRONY ============ */
body{background:var(--forest-deep)}

/* ============ HERO / INTRO ============ */
.gal-hero{
  background:var(--forest-deep);
  text-align:center;
  padding:170px 40px 70px;
  position:relative;overflow:hidden;
}
.gal-hero::before{
  content:"";position:absolute;top:-120px;left:50%;transform:translateX(-50%);
  width:680px;height:680px;
  background:radial-gradient(circle,rgba(184,147,90,.14) 0%,transparent 70%);
  pointer-events:none;
}
.gal-hero .eyebrow{justify-content:center;color:var(--gold-light)}
.gal-hero .eyebrow::before{display:none}
.gal-hero h1{
  font-family:var(--heading);font-weight:400;
  font-size:clamp(40px,5.4vw,72px);
  line-height:1.05;letter-spacing:-.01em;
  color:var(--cream);margin-top:18px;position:relative;
}
.gal-hero h1 em{font-style:italic;color:var(--yellow)}
.gal-hero p{
  max-width:620px;margin:26px auto 0;
  color:rgba(245,239,228,.62);
  font-family:var(--lead);font-size:21px;line-height:1.6;font-weight:400;
}

/* ============ SEKCJA GALERII ============ */
.gal-section{background:var(--forest-deep);padding:60px 0 90px}
.gal-section + .gal-section{
  border-top:1px solid rgba(245,239,228,.08);
  padding-top:80px;
}
.gal-head{text-align:center;margin-bottom:52px;padding:0 40px}
.gal-head .eyebrow{justify-content:center;color:var(--gold-light)}
.gal-head .eyebrow::before{display:none}
.gal-sep{
  display:block;width:56px;height:1px;margin:0 auto 22px;
  background:var(--gold);opacity:.7;
}
.gal-head h2{
  font-family:var(--heading);font-size:clamp(30px,3.6vw,48px);
  font-weight:400;color:var(--cream);margin-top:14px;line-height:1.08;letter-spacing:-.01em;
}
.gal-head h2 em{font-style:italic;color:var(--yellow)}
.gal-meta{
  display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;
  margin-top:18px;font-family:var(--sans);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,239,228,.45);
}
.gal-meta span{display:inline-flex;align-items:center;gap:8px}
.gal-meta-dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* ============ SIATKA (jak w sekcji galeria na index) ============ */
.insta-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:6px;max-width:1320px;margin:0 auto;padding:0 40px;
}
.insta-tile{
  aspect-ratio:1;overflow:hidden;position:relative;cursor:pointer;
  background:var(--forest);
}
.insta-tile img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.25,.8,.25,1),opacity .4s}
.insta-tile::after{
  content:"";position:absolute;inset:0;
  background:rgba(20,40,28,0);transition:background .35s;
}
.insta-tile:hover img{transform:scale(1.07)}
.insta-tile:hover::after{background:rgba(20,40,28,.45)}
.insta-zoom-icon{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.7);
  opacity:0;z-index:2;
  transition:opacity .3s,transform .3s cubic-bezier(.25,.8,.25,1);
  color:#fff;pointer-events:none;
}
.insta-zoom-icon svg{width:36px;height:36px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.insta-tile:hover .insta-zoom-icon{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* opcjonalny wariant: kafelek na całą szerokość (urozmaicenie) */
.insta-tile.span-2{grid-column:span 2}
.insta-tile.tall{aspect-ratio:auto}

/* ============ LIGHTBOX (identyczny jak na index) ============ */
.lb-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(14,31,21,.96);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .35s cubic-bezier(.25,.8,.25,1);
}
.lb-overlay.open{opacity:1;pointer-events:all}
.lb-img-wrap{
  position:relative;max-width:90vw;max-height:88vh;
  display:flex;align-items:center;justify-content:center;
}
.lb-img-wrap img{
  max-width:90vw;max-height:88vh;
  object-fit:contain;border-radius:2px;
  box-shadow:0 40px 80px rgba(0,0,0,.6);
  transition:opacity .25s,transform .25s cubic-bezier(.25,.8,.25,1);
}
.lb-img-wrap img.fade{opacity:0;transform:scale(.97)}
.lb-close{
  position:fixed;top:28px;right:36px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(245,239,228,.1);border:1px solid rgba(245,239,228,.2);
  display:grid;place-items:center;cursor:pointer;
  color:var(--cream);transition:all .25s;z-index:9001;
}
.lb-close:hover{background:rgba(245,239,228,.2);border-color:rgba(245,239,228,.5)}
.lb-close svg{width:18px;height:18px}
.lb-arrow{
  position:fixed;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(245,239,228,.1);border:1px solid rgba(245,239,228,.2);
  display:grid;place-items:center;cursor:pointer;
  color:var(--cream);transition:all .25s;z-index:9001;
}
.lb-arrow:hover{background:var(--gold);border-color:var(--gold);color:var(--forest-deep)}
.lb-arrow svg{width:20px;height:20px}
.lb-prev{left:28px}
.lb-next{right:28px}
.lb-counter{
  position:fixed;bottom:32px;left:50%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(245,239,228,.5);z-index:9001;font-family:var(--sans);text-align:center;
}
.lb-dots{
  display:flex;gap:8px;align-items:center;justify-content:center;margin-top:12px;
}
.lb-dot{
  width:6px;height:6px;border-radius:50%;border:none;padding:0;
  background:rgba(245,239,228,.25);
  transition:all .25s;cursor:pointer;
}
.lb-dot.active{background:var(--gold);transform:scale(1.4)}

/* ============ POWRÓT ============ */
.gal-back{text-align:center;padding:0 40px 100px;background:var(--forest-deep)}
.gal-back .btn{margin:0 auto}

/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--spring),transform .7s var(--spring)}
.reveal.in{opacity:1;transform:none}

/* ============ RESPONSYWNOŚĆ ============ */
@media(max-width:900px){
  .gal-hero{padding:140px 28px 56px}
  .insta-grid{grid-template-columns:repeat(3,1fr);padding:0 20px}
}
@media(max-width:560px){
  .insta-grid{grid-template-columns:repeat(2,1fr);gap:4px;padding:0 12px}
  .insta-tile.span-2{grid-column:span 2}
  .lb-arrow{width:40px;height:40px}
  .lb-prev{left:10px}
  .lb-next{right:10px}
  .gal-section{padding:48px 0 64px}
}