/* ==========================================================================
   Trip Nepal - We Plan It Better
   Photo gallery stylesheet   (loads after css/style.css)
   --------------------------------------------------------------------------
   Mobile first. The grid is a real masonry built on CSS columns, so tall and
   wide pictures keep their own proportions instead of being cropped square.

   Sections
     1. hero
     2. filter bar
     3. masonry grid + tiles
     4. empty state + load more
     5. where these were taken
     6. lightbox
     7. cta borrowed from packages.css
     8. reduced motion
   ========================================================================== */

:root{
  --gl-radius:14px;
  --wa:#25d366;
  --wa-2:#128c7e;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.gl-hero{
  position:relative;overflow:hidden;
  background:var(--navy);color:#fff;
  padding:52px 0 70px;
}
.gl-hero-bg{position:absolute;inset:-6% 0 0;z-index:1}
.gl-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.gl-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,26,50,.84) 0%,rgba(8,26,50,.52) 36%,rgba(8,26,50,.72) 72%,rgba(8,26,50,.96) 100%);
}
.gl-hero-marks{position:absolute;inset:0;z-index:2;pointer-events:none}
.gl-hero-marks i{position:absolute;color:rgba(255,255,255,.07);font-size:64px}
.gl-hero-marks i:nth-child(1){top:18%;right:9%;transform:rotate(-10deg)}
.gl-hero-marks i:nth-child(2){bottom:24%;right:26%;font-size:52px;transform:rotate(8deg)}
.gl-hero-marks i:nth-child(3){top:34%;left:5%;font-size:46px}

.gl-hero-inner{position:relative;z-index:4}

.gl-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;font-weight:500;margin-bottom:16px}
.gl-crumb a{color:#cfe2f5;transition:color .25s ease}
.gl-crumb a:hover{color:#fff}
.gl-crumb i{font-size:8px;color:rgba(255,255,255,.45)}
.gl-crumb span{color:#fff;font-weight:600}

.gl-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.gl-script{font-family:var(--ff-script);font-size:29px;font-weight:600;color:#ffd9a6;line-height:1}
.gl-eyebrow i{color:rgba(255,255,255,.5);font-size:17px}

.gl-hero-title{
  font-family:var(--ff-display);
  font-size:clamp(30px,8vw,56px);
  font-weight:700;line-height:1.04;letter-spacing:.6px;
  text-transform:uppercase;color:#fff;
}
.gl-hero-title span{color:#ff4a50}

.gl-hero .hero-divider{max-width:190px;margin:12px 0 16px}
.gl-hero .hero-divider .bar{background:#ff4a50}
.gl-hero .hero-divider i{color:#ffd9a6}

.gl-hero-lead{font-size:14px;line-height:1.8;color:rgba(255,255,255,.86);max-width:620px}
.gl-hero-lead b{color:#fff}

.gl-hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.gl-hero-actions .btn i{font-size:12px}

.gl-snow{position:absolute;left:0;right:0;bottom:-1px;z-index:5;line-height:0}
.gl-snow svg{width:100%;height:48px;display:block}

@media (min-width:768px){
  .gl-hero{padding:66px 0 86px}
  .gl-hero-lead{font-size:15px}
  .gl-snow svg{height:70px}
}
@media (min-width:992px){
  .gl-hero{padding:78px 0 100px}
}

/* ==========================================================================
   2. FILTER BAR
   ========================================================================== */
.gl-bar{
  position:sticky;top:var(--hdr,0px);z-index:60;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  padding:12px 0 10px;
}
.gl-chips{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.gl-chips::-webkit-scrollbar{display:none}
/* .gchip is a shared component in css/style.css */

.gl-count{font-size:12.5px;color:var(--muted);padding-top:8px;border-top:1px dashed var(--line)}
.gl-count b{color:var(--navy);font-weight:700}

@media (min-width:768px){
  .gl-chips{flex-wrap:wrap;overflow:visible}
}

/* ==========================================================================
   3. MASONRY GRID + TILES
   ========================================================================== */
.gl-sec{padding:22px 0 8px}
.gl-grid{columns:1;column-gap:14px}

@media (min-width:600px){ .gl-grid{columns:2} }
@media (min-width:992px){ .gl-sec{padding:30px 0 12px} .gl-grid{columns:3;column-gap:16px} }
@media (min-width:1400px){ .gl-grid{columns:4} }

.gtile{
  position:relative;overflow:hidden;
  border-radius:var(--gl-radius);
  margin:0 0 14px;
  break-inside:avoid;
  cursor:pointer;background:var(--navy);
  box-shadow:var(--shadow-sm);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
}
.gtile:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.gtile:focus{outline:none}
.gtile:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.gtile img{
  width:100%;display:block;
  transition:transform 1.1s cubic-bezier(.22,1,.36,1);
}
/* the shape hints give the masonry its rhythm without cropping anything hard */
.s-tall img{aspect-ratio:3/4;object-fit:cover}
.s-wide img{aspect-ratio:16/10;object-fit:cover}
.s-square img{aspect-ratio:1/1;object-fit:cover}
.gtile:hover img{transform:scale(1.07)}

.gtile-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,26,50,.34) 0%,rgba(8,26,50,0) 40%,rgba(8,26,50,.10) 55%,rgba(8,26,50,.86) 100%);
  opacity:.9;transition:opacity .4s ease;
}
.gtile:hover .gtile-veil{opacity:1}

.gtile-zoom{
  position:absolute;top:50%;left:50%;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--navy);font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transform:translate(-50%,-50%) scale(.6);opacity:0;
  transition:opacity .3s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.gtile:hover .gtile-zoom,.gtile:focus-visible .gtile-zoom{opacity:1;transform:translate(-50%,-50%) scale(1)}

.gtile figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:14px 15px;color:#fff;
  transform:translateY(6px);opacity:.96;
  transition:transform .4s ease;
}
.gtile:hover figcaption{transform:translateY(0)}
.gtile figcaption b{display:block;font-size:14.5px;line-height:1.35;color:#fff}
.gtile figcaption span{
  display:inline-flex;align-items:center;gap:6px;margin-top:4px;
  font-size:11.5px;color:rgba(255,255,255,.78);
}
.gtile figcaption span i{color:#ff8f93;font-size:10px}

.gtile-cat{
  position:absolute;top:11px;left:11px;z-index:2;
  background:rgba(8,26,50,.6);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(4px);
  color:#fff;font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;
  opacity:0;transform:translateY(-6px);
  transition:opacity .3s ease,transform .3s ease;
}
.gtile:hover .gtile-cat,.gtile:focus-visible .gtile-cat{opacity:1;transform:translateY(0)}

/* crawlers without javascript still get the pictures */
.gl-noscript{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gl-noscript img{width:100%;border-radius:var(--gl-radius)}

/* ==========================================================================
   4. EMPTY STATE + LOAD MORE
   ========================================================================== */
.gl-empty{
  text-align:center;padding:48px 20px;
  background:var(--bg-soft);border:1px dashed #cfdcea;border-radius:var(--gl-radius);
}
.gl-empty > i{font-size:36px;color:#c2d2e2;margin-bottom:12px;display:block}
.gl-empty h3{font-size:18px;margin-bottom:7px}
.gl-empty p{font-size:13.5px;max-width:400px;margin:0 auto 16px}

.gl-more-wrap{display:flex;justify-content:center;padding:20px 0 8px}
.gl-more-wrap[hidden]{display:none}
.gl-more{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:30px;
  padding:12px 26px;font-size:13px;font-weight:600;color:var(--navy);
  box-shadow:var(--shadow-sm);transition:.28s ease;
}
.gl-more i{font-size:11px;transition:transform .3s ease}
.gl-more:hover{border-color:var(--red);color:var(--red);box-shadow:var(--shadow)}
.gl-more:hover i{transform:translateY(3px)}

/* ==========================================================================
   5. WHERE THESE WERE TAKEN
   ========================================================================== */
.gl-links{background:var(--bg-soft);padding:42px 0 46px;margin-top:28px}
.gl-links .section-head{margin-bottom:26px}
.gl-links-row{display:grid;grid-template-columns:1fr;gap:14px}
.gl-link{
  background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:20px 18px;display:block;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.gl-link:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cfe0f2}
.gl-link > i{
  width:44px;height:44px;border-radius:12px;
  background:var(--blue-soft);color:var(--blue);
  display:flex;align-items:center;justify-content:center;font-size:17px;
  margin-bottom:13px;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .35s ease,color .35s ease;
}
.gl-link:hover > i{background:var(--red);color:#fff;transform:rotate(-8deg) scale(1.06)}
.gl-link b{display:block;font-size:15px;color:var(--navy);margin-bottom:5px}
.gl-link:hover b{color:var(--red)}
.gl-link span{display:block;font-size:12.5px;line-height:1.7;color:var(--text)}

@media (min-width:600px){ .gl-links-row{grid-template-columns:repeat(2,1fr)} }
@media (min-width:992px){ .gl-links-row{grid-template-columns:repeat(4,1fr);gap:18px} }

/* ==========================================================================
   6. LIGHTBOX
   ========================================================================== */
body.gl-locked{overflow:hidden}
/* display:flex would beat the browser's [hidden] rule, so the closed state is
   carried by visibility + pointer-events as well - otherwise the transparent
   overlay sits on top of the page and swallows every click */
.gl-lightbox{
  position:fixed;inset:0;z-index:300;
  background:rgba(6,20,38,.95);
  display:flex;align-items:center;justify-content:center;
  padding:56px 14px 92px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility .3s;
}
.gl-lightbox[hidden]{display:none}
.gl-lightbox.open{opacity:1;visibility:visible;pointer-events:auto}
.gl-lb-stage{max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.gl-lb-img{
  max-width:100%;max-height:70vh;border-radius:10px;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.gl-lb-cap{text-align:center;max-width:640px}
.gl-lb-cap b{display:block;font-size:16px;color:#fff;font-family:var(--ff-display);letter-spacing:.5px}
.gl-lb-cap span{display:block;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.7);margin-top:5px}

.gl-lb-btn{
  position:absolute;width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:15px;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,transform .25s ease;
}
.gl-lb-btn:hover{background:var(--red);border-color:var(--red)}
.gl-lb-close{top:16px;right:16px}
.gl-lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.gl-lb-next{right:12px;top:50%;transform:translateY(-50%)}
.gl-lb-prev:hover,.gl-lb-next:hover{transform:translateY(-50%) scale(1.06)}
.gl-lb-count{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.8);font-size:12.5px;font-weight:600;letter-spacing:1px;
}

@media (min-width:768px){
  .gl-lightbox{padding:70px 70px 92px}
  .gl-lb-img{max-height:74vh}
}

/* ==========================================================================
   7. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .gtile,.gtile img,.gl-link,.gl-link > i,.gtile figcaption{transition:none}
  .gtile:hover{transform:none}
  .gtile:hover img{transform:none}
  .gl-link:hover{transform:none}
}

/* ==========================================================================
   LARGE DESKTOPS
   --------------------------------------------------------------------------
   Deliberately staying at four columns. A fifth leaves an empty column while
   only the first page of photos is loaded, so wider tiles read better.
   ========================================================================== */