/* ==========================================================
   gallery.css
   Extracted from gallery.html <style> block.

   NOTE: yet another header/navbar/drawer variant (.site-nav /
   .hamburger / Bootstrap Offcanvas .side-drawer, its own color
   palette) — same advice as the other pages: fold one version
   into the shared layout rather than keeping four. Everything
   from "PAGE HERO" down through "LIGHTBOX MODAL" is
   page-specific and safe to keep.
   ========================================================== */

  :root{
    --ink:#141210;
    --panel:#1c1713;
    --panel-2:#241d17;
    --brick:#c06a3f;
    --brick-soft:#e39868;
    --sand:#f2ece1;
    --sand-dim:#b9ad9a;
    --stone:#efeae0;
    --gold-soft:rgba(217,164,65,.14);
    --line:rgba(242,236,225,0.14);
    --ease:cubic-bezier(.22,.85,.32,1);
    --dark:#141414;
    --gold:#e8c15a;
    --font-display:'Georgia','Times New Roman',serif;

    /* previously referenced but undefined — caused the drawer / floating
       elements to render with broken colors. Mapped onto the existing
       sand/panel tokens so the whole page shares one palette. */
    --text:var(--sand);
    --text-dim:var(--sand-dim);
    --bg-2:var(--panel);
    --bg-3:var(--panel-2);
    --nav-h:92px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{background:var(--stone);color:var(--ink);font-family:'Manrope',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:'Fraunces',serif;font-weight:500;letter-spacing:-0.01em;}
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}
  button{font-family:inherit;}
  ::selection{background:var(--brick);color:var(--ink);}
  a:focus-visible, button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}

  .reveal-stagger .stagger-item{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease);}
  .reveal-stagger.in .stagger-item{opacity:1;transform:translateY(0);}
  @media (prefers-reduced-motion: reduce){.reveal-stagger .stagger-item{transition:none !important;opacity:1 !important;transform:none !important;}html{scroll-behavior:auto;}}

  /* ============ GOLD SHINE (reusable) ============ */
  .gold-shine-text,
  .nav-link-plain{
    background:linear-gradient(100deg, #a9793a 0%, #f4d998 22%, #c9a15a 45%, #fff2c9 60%, #a9793a 78%, #f0d290 100%);
    background-size:220% auto;
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  }
  @keyframes goldShine{0%{background-position:0% center;}100%{background-position:220% center;}}

  /* ==========================================================================
     HEADER / NAVBAR — navbar is transparent over the hero and switches to a
     solid dark background once the page scrolls (".scrolled" class, see JS).
     ========================================================================== */
  .site-nav{
    position:fixed; top:0; left:0; right:0; width:100%; z-index:1030;
    background:transparent;
    border-bottom:1px solid transparent;
    padding:.9rem 0;
    transition:background-color .35s ease, border-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease;
  }
  .site-nav.scrolled{
    background:rgba(11,11,12,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    box-shadow:0 4px 18px rgba(0,0,0,.35);
  }

  .nav-link-plain{
    font-size:.92rem; position:relative; padding-bottom:2px;
    font-weight:500; letter-spacing:.2px;
    animation:goldShine 4.5s linear infinite;
  }
  .nav-link-plain::after{
    content:""; position:absolute; left:0; bottom:-3px; width:0; height:1px;
    background:var(--gold); transition:width .3s ease;
  }
  .nav-link-plain:hover::after{width:100%;}

  .hamburger{
    width:44px; height:44px; border-radius:50%;
    border:1px solid var(--line);
    background:transparent;
    display:flex; align-items:center; justify-content:center;
    gap:5px; flex-direction:column;
    cursor:pointer; transition:border-color .3s ease, background .3s ease;
  }
  .hamburger:hover{border-color:var(--gold);}
  .hamburger span{
    display:block; width:18px; height:1.5px; background:var(--text);
    transition:transform .35s cubic-bezier(.65,0,.35,1), opacity .25s ease, background .3s ease;
  }
  .hamburger.active span{background:var(--gold);}
  .hamburger.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .hamburger.active span:nth-child(2){opacity:0;}
  .hamburger.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  /* ===== SIDE DRAWER (Bootstrap 5 offcanvas, restyled) =====
     Positioning, slide transform, backdrop, focus-trap and Esc-to-close are
     all handled natively by Bootstrap's .offcanvas component; this block only
     supplies the brand's look. */
  .offcanvas.side-drawer{
    --bs-offcanvas-width:min(400px, 88vw);
    background:var(--bg-2);
    border-left:1px solid var(--line);
    color:var(--text);
    padding:2rem 2.2rem;
  }
  .drawer-close{
    align-self:flex-end;
    width:42px; height:42px; border-radius:50%;
    border:1px solid var(--line); background:transparent; color:var(--text);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; transition:border-color .3s, transform .3s;
  }
  .drawer-close:hover{border-color:var(--gold); transform:rotate(90deg);}
  .drawer-close svg{width:15px; height:15px;}

  .drawer-menu{list-style:none; padding:0; margin:3rem 0 auto;}
  .drawer-menu li{
    border-bottom:1px solid var(--line);
   transform:translateX(24px);
    transition:opacity .5s ease, transform .5s ease;
  }
  .offcanvas.side-drawer.show .drawer-menu li,
  .offcanvas.side-drawer.showing .drawer-menu li{opacity:1; transform:translateX(0);}
  .offcanvas.side-drawer.show .drawer-menu li:nth-child(1),
  .offcanvas.side-drawer.showing .drawer-menu li:nth-child(1){transition-delay:.12s;}
  .offcanvas.side-drawer.show .drawer-menu li:nth-child(2),
  .offcanvas.side-drawer.showing .drawer-menu li:nth-child(2){transition-delay:.17s;}
  .offcanvas.side-drawer.show .drawer-menu li:nth-child(3),
  .offcanvas.side-drawer.showing .drawer-menu li:nth-child(3){transition-delay:.22s;}
  .offcanvas.side-drawer.show .drawer-menu li:nth-child(4),
  .offcanvas.side-drawer.showing .drawer-menu li:nth-child(4){transition-delay:.27s;}
  .offcanvas.side-drawer.show .drawer-menu li:nth-child(5),
  .offcanvas.side-drawer.showing .drawer-menu li:nth-child(5){transition-delay:.32s;}
  .offcanvas.side-drawer.show .drawer-menu li:nth-child(6),
  .offcanvas.side-drawer.showing .drawer-menu li:nth-child(6){transition-delay:.37s;}

  .drawer-menu a{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.05rem .2rem; font-family:'Fraunces',serif; font-size:1.25rem; color:var(--text);
  }
  .drawer-menu a.current{color:var(--gold);}
  .drawer-menu a .arrow{font-size:1rem; opacity:.5; transition:transform .3s ease, opacity .3s ease;}
  .drawer-menu a:hover .arrow{transform:translateX(5px); opacity:1; color:var(--gold);}

  .drawer-foot{padding-top:1.5rem; color:var(--text-dim); font-size:.85rem;}
  .drawer-foot .social{display:flex; gap:.6rem; margin-top:1rem;}
  .drawer-foot .social a{
    width:38px; height:38px; border:1px solid var(--line); border-radius:50%;
    display:flex; align-items:center; justify-content:center; color:var(--text);
    transition:border-color .3s, background .3s;
  }
  .drawer-foot .social a:hover{border-color:var(--gold); background:var(--gold-soft);}
  .drawer-foot .social svg{width:15px; height:15px;}
  /* ==========================================================================
     HEADER / NAVBAR — END
     ========================================================================== */

  /* ===== PAGE HERO ===== */
  .page-hero {
      position: relative;
      background-color: var(--dark);
      background-image: url('../img/project/golmolotar_bari.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% auto;

      color: var(--text);
      padding: calc(var(--nav-h) + 64px) 1.5rem 64px;
      text-align: center;
      overflow: hidden;
  }

  .page-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      z-index: 0;
  }

  .page-hero > * {
      position: relative;
      z-index: 1;
  }
  .hero-crumb{font-size:.82rem; color:var(--text-dim); letter-spacing:.3px; margin-bottom:.9rem;}
  .hero-crumb a:hover{color:var(--gold);}
  .hero-crumb .sep{margin:0 .5rem; opacity:.5;}
  .page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:.6rem;}
  .page-hero p{color:var(--text-dim); max-width:520px; font-size:.98rem; margin:0 auto;}

  /* ============ FILTER TABS ============ */
  .gallery-tabs{
    background:var(--stone); padding:26px 0;  top:var(--nav-h); z-index:20;
    border-bottom:1px solid rgba(20,16,13,.1);
  }
  .tab-scroll{display:flex; gap:10px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;}
  .tab-scroll::-webkit-scrollbar{display:none;}
  .tab-btn{
    flex-shrink:0; border:1px solid rgba(20,16,13,.18); background:transparent; color:var(--ink);
    border-radius:40px; padding:10px 22px; font-size:13.5px; font-weight:600; white-space:nowrap;
    transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  }
  .tab-btn:hover{border-color:var(--ink);}
  .tab-btn.active{background:var(--ink); border-color:var(--ink); color:#fff;}

  /* ============ MASONRY GALLERY ============ */
  .gallery-section{background:var(--stone); padding:60px 0 90px;}
  .masonry{column-count:1; column-gap:18px;}
  @media (min-width:576px){.masonry{column-count:2;}}
  @media (min-width:992px){.masonry{column-count:3;}}

  .gallery-tile{
    break-inside:avoid; margin-bottom:18px; position:relative; border-radius:12px; overflow:hidden;
    cursor:pointer; display:block;
  }
  .gallery-tile.d-none{display:none;}
  .gallery-tile .img{width:100%; background-size:cover; background-position:center; transition:transform .7s var(--ease);}
  .gallery-tile:hover .img{transform:scale(1.06);}
  .gallery-tile .shade{position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,8,6,.85) 0%, transparent 45%); opacity:0; transition:opacity .4s var(--ease);}
  .gallery-tile:hover .shade{opacity:1;}
  .gallery-tile .expand{
    position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center;
    opacity:0; transform:scale(.85); transition:opacity .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  }
  .gallery-tile:hover .expand{opacity:1; transform:scale(1); background:var(--gold);}
  .gallery-tile .expand svg{width:13px; height:13px; stroke:var(--ink);}
  .gallery-tile .cap{position:absolute; left:0; right:0; bottom:0; padding:18px; z-index:2; opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease);}
  .gallery-tile:hover .cap{opacity:1; transform:translateY(0);}
  .gallery-tile .cap h3{color:#fff; font-size:16.5px; margin-bottom:4px;}
  .gallery-tile .cap span{color:rgba(255,255,255,.75); font-size:12px;}

  .img.g1{aspect-ratio:4/5; background-image:linear-gradient(165deg,#87b6d6,#3d5a72 55%,#26313c),repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 8px, transparent 8px 26px);}
  .img.g2{aspect-ratio:4/3.1; background-image:linear-gradient(165deg,#9cc3dd,#4d6b83 55%,#2a343d),repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 20px, transparent 20px 40px);}
  .img.g3{aspect-ratio:4/5.6; background-image:linear-gradient(165deg,#b9d4e6,#587a91 55%,#2c3742),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 10px, transparent 10px 30px);}
  .img.g4{aspect-ratio:4/3.4; background-image:linear-gradient(165deg,#d7c3a4,#8a6a4c 55%,#3a2c20),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 14px, transparent 14px 32px);}
  .img.g5{aspect-ratio:4/4.9; background-image:linear-gradient(165deg,#a9c9dd,#4a6a80 55%,#232c34),repeating-linear-gradient(0deg,rgba(0,0,0,.1) 0 24px, transparent 24px 46px);}
  .img.g6{aspect-ratio:4/3; background-image:linear-gradient(165deg,#cdb896,#7c5c3f 55%,#31251a),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 12px, transparent 12px 28px);}
  .img.g7{aspect-ratio:4/5.3; background-image:linear-gradient(165deg,#9fbfd0,#476175 55%,#232c34),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 16px, transparent 16px 34px);}
  .img.g8{aspect-ratio:4/3.7; background-image:linear-gradient(165deg,#bcd2df,#5a7c8e 55%,#28323a),repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 18px, transparent 18px 40px);}
  .img.g9{aspect-ratio:4/5; background-image:linear-gradient(165deg,#d8c2a0,#93714f 55%,#3a2c1e),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 10px, transparent 10px 24px);}
  .img.g10{aspect-ratio:4/3.3; background-image:linear-gradient(165deg,#8fb3c9,#3f5c70 55%,#212b32),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 12px, transparent 12px 28px);}
  .img.g11{aspect-ratio:4/5.8; background-image:linear-gradient(165deg,#c7b195,#7a5b3e 55%,#2f2417),repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 18px, transparent 18px 38px);}
  .img.g12{aspect-ratio:4/3.9; background-image:linear-gradient(165deg,#a2c2d4,#476579 55%,#232c33),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 10px, transparent 10px 26px);}

  /* ============ PAGINATION ============ */
  .gallery-pagination .page-link{
    color:var(--ink); border:1px solid rgba(20,16,13,.18); background:transparent;
    margin:0 4px; border-radius:50%; width:40px; height:40px;
    display:flex; align-items:center; justify-content:center; padding:0;
    font-size:13.5px; font-weight:600;
    transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  }
  .gallery-pagination .page-item.active .page-link{background:var(--ink); border-color:var(--ink); color:#fff;}
  .gallery-pagination .page-link:hover{border-color:var(--ink);}
  .gallery-pagination .page-item.disabled .page-link{opacity:.35; pointer-events:none;}

  /* ============ LIGHTBOX MODAL ============ */
  .gallery-modal .modal-content{background:transparent; border:none;}
  .gallery-modal .modal-dialog{max-width:1100px;}
  .lightbox-frame{position:relative; border-radius:12px; overflow:hidden; background:var(--panel);}
  .lightbox-img{width:100%; aspect-ratio:16/10; background-size:cover; background-position:center;}
  .lightbox-cap{padding:20px 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
  .lightbox-cap h3{color:#fff; margin:0; font-size:19px;}
  .lightbox-cap span{color:var(--sand-dim); font-size:12.5px;}
  .lightbox-nav{
    position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
    background:rgba(20,16,13,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.25);
    display:flex; align-items:center; justify-content:center; color:#fff; transition:background .3s, border-color .3s;
  }
  .lightbox-nav:hover{background:var(--gold); border-color:var(--gold); color:#111;}
  .lightbox-nav.prev{left:16px;}
  .lightbox-nav.next{right:16px;}
  .lightbox-nav svg{width:16px; height:16px;}
  .lightbox-close{
    position:absolute; top:-52px; right:0; width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; display:flex; align-items:center; justify-content:center;
    transition:border-color .3s, transform .3s, color .3s;
  }
  .lightbox-close:hover{border-color:var(--gold); color:var(--gold); transform:rotate(90deg);}

  /* ============ NEWSLETTER + FOOTER ============ */
  .newsletter-section{background:var(--dark); color:#fff; padding:70px 0 0;}
  .newsletter-section h2{font-family:var(--font-display); font-weight:400; font-size:clamp(28px,4vw,42px); margin:0;}
  .newsletter-form{display:flex; gap:12px; max-width:560px; width:100%;}
  .newsletter-form input{flex:1; background:transparent; border:1px solid #555; border-radius:30px; padding:15px 22px; color:#fff; outline:none; font-size:14.5px;}
  .newsletter-form input::placeholder{color:#999;}
  .newsletter-form input:focus{border-color:var(--gold);}
  .newsletter-form button{background:#e9e9e9; color:#111; border:none; border-radius:30px; padding:15px 26px; font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px; white-space:nowrap; transition:background .2s ease, color .2s ease;}
  .newsletter-form button:hover{background:var(--gold); color:#111;}

  footer{border-top:1px solid #2b2b2b; margin-top:36px; padding-top:34px;}
  .footer-links a{font-size:14.5px; color:#ddd; transition:color .2s ease;}
  .footer-links a:hover{color:var(--gold); text-decoration:underline;}
  .footer-address{color:#999; font-size:13.5px;}
  .socials a{width:36px; height:36px; border-radius:50%; border:1px solid #444; display:flex; align-items:center; justify-content:center; color:#fff; transition:background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;}
  .socials a:hover{background:var(--gold); color:#111; border-color:var(--gold); transform:translateY(-3px);}
  .socials svg{width:15px; height:15px;}
  .copyright{color:#888; font-size:13px;}

  @media (max-width:575.98px){
    .gallery-section{padding:40px 0 60px;}
    .page-hero{padding:calc(var(--nav-h) + 36px) 1.25rem 40px;}
  }