

:root {
    --gold:#F0B429;--gold-lt:#FFD966;--gold-pale:#FFF8E1;
    --amber:#F07C1A;--amber-deep:#D4820A;
    --teal:#7b1e2b;--teal-lt:#a24a56;--teal-pale:#f4e7ea;--teal-deep:#57111a;
    --night:#0D2B35;--night2:#143545;
    --cream:#FDFAF0;--white:#fff;--muted:#4A7080;
    --r-xl:50px;--r-lg:26px;--r-md:18px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Tajawal',serif;background:var(--night);color:var(--white)}

  .page-hero{
    height:45vh;min-height:300px;
    background:linear-gradient(rgba(13, 43, 53, 0.17),rgba(13, 43, 53, 0.19)),
               url('../images/tour/wadi.jpg') center/cover;
    display:flex;align-items:center;justify-content:center;text-align:center;padding-top:80px;
  }
  .page-hero h1{font-family:'Cinzel',serif;font-size:clamp(2.5rem,6vw,4.5rem);color:var(--white);letter-spacing:8px;margin-bottom:12px}
  .page-hero p{color:var(--gold-lt);font-size:1.1rem;letter-spacing:2px}

  .gallery-section{padding:80px 60px;background:var(--dark2)}
  .section-label{font-family:'Cinzel',serif;font-size:0.7rem;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:12px;display:block}

  .filter-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:50px}
  .filter-btn{
    background:transparent;border:1px solid rgba(240,180,41,0.4);
    color:rgba(255,255,255,0.6);padding:10px 24px;
    font-family:'Cinzel',serif;font-size:0.72rem;letter-spacing:2px;
    cursor:pointer;transition:all 0.3s;
  }
  .filter-btn.active,.filter-btn:hover{background:linear-gradient(135deg,var(--gold),var(--amber));color:var(--night);border-color:var(--gold)}

  .gallery-masonry{
    columns:4;column-gap:6px;max-width:1400px;margin:0 auto;
  }
  .gallery-item{
    break-inside:avoid;margin-bottom:6px;
    position:relative;overflow:hidden;cursor:pointer;
  }
  .gallery-item img{width:100%;display:block;transition:transform 0.6s,filter 0.4s;filter:brightness(0.75)}
  .gallery-item:hover img{transform:scale(1.06);filter:brightness(1)}
  .gallery-item-info{
    position:absolute;bottom:0;left:0;right:0;
    padding:20px 16px;
    background:linear-gradient(transparent,rgba(13,43,53,0.85));
    transform:translateY(100%);transition:transform 0.4s;
  }
  .gallery-item:hover .gallery-item-info{transform:translateY(0)}
  .gallery-item-cat{font-family:'Cinzel',serif;font-size:0.6rem;letter-spacing:3px;color:var(--gold);margin-bottom:6px}
  .gallery-item-title{font-size:0.95rem;color:var(--white)}

  .lightbox{
    display:none;position:fixed;inset:0;z-index:9999;
    background:rgba(13,43,53,0.97);
    align-items:center;justify-content:center;
  }
  .lightbox.open{display:flex}
  .lightbox-inner{position:relative;max-width:90vw;max-height:90vh}
  .lightbox-inner img{max-width:100%;max-height:85vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,0.5)}
  .lightbox-close{
    position:fixed;top:24px;left:24px;
    background:transparent;border:1px solid rgba(240,180,41,0.5);
    color:var(--gold);width:46px;height:46px;font-size:1.5rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:all 0.3s;
  }
  .lightbox-close:hover{background:linear-gradient(135deg,var(--gold),var(--amber));color:var(--night)}
  .lightbox-nav{
    position:fixed;top:50%;transform:translateY(-50%);
    background:transparent;border:1px solid rgba(240,180,41,0.4);
    color:var(--gold);width:50px;height:50px;font-size:1.5rem;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:all 0.3s;
  }
  .lightbox-prev{right:20px}
  .lightbox-next{left:20px}
  .lightbox-nav:hover{background:linear-gradient(135deg,var(--gold),var(--amber));color:var(--night)}
  .lightbox-caption{text-align:center;margin-top:16px;color:var(--gold-lt);font-family:'Cinzel',serif;font-size:0.8rem;letter-spacing:3px}

  footer{background:var(--night);padding:40px 60px;color:rgba(255,255,255,0.5);text-align:center;border-top:1px solid rgba(240,180,41,0.15)}

  @media(max-width:900px){.gallery-masonry{columns:2}}
  @media(max-width:600px){.gallery-masonry{columns:1}.gallery-section{padding:60px 20px}}





