/* HAMIDI TOURS · Gallery page
   Builds on the approved homepage stylesheet (home.css): same navbar, footer, colours and type. */

/* Hero */
.g-hero{position:relative;min-height:max(640px,88svh);color:#fff;overflow:hidden;display:flex;flex-direction:column;isolation:isolate}
.g-hero-bg{position:absolute;inset:0;z-index:-2;display:block}
.g-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:30% 40%;transform:scale(1.04);animation:heroIn 2.2s ease-out forwards}
.g-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(4,12,22,.62) 0%,rgba(4,12,22,.2) 26%,rgba(4,12,22,.25) 55%,rgba(4,12,22,.86) 100%),
  linear-gradient(270deg,rgba(4,12,22,.82) 0%,rgba(4,12,22,.55) 40%,rgba(4,12,22,0) 68%)}
.g-hero-inner{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;padding-top:150px;padding-bottom:64px}
.g-hero-copy{width:min(600px,100%)}
.g-hero .eyebrow{color:#fff}
.g-hero .eyebrow::before{background:var(--gold-bright)}
.g-hero h1{font-size:clamp(44px,5.6vw,84px);line-height:1.02;letter-spacing:-.01em;text-wrap:balance;text-shadow:0 6px 40px rgba(0,0,0,.3)}
.g-hero h1 em{display:block;font-style:italic;color:var(--gold-light)}
.g-hero-sub{max-width:520px;margin:24px 0 0;font-size:17.5px;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.g-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.g-hero-cta .btn-outline{padding:13px 22px;font-size:14px}

/* Gallery */
.g-section{background:#F6F1E7}
.g-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.g-filter{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border:1px solid rgba(7,26,43,.2);background:#fff;color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;border-radius:30px;transition:background .25s,color .25s,border-color .25s}
.g-filter span{font-family:var(--serif);font-weight:500;font-size:13px;color:var(--gold);min-width:1.2em;text-align:center}
.g-filter:hover{border-color:var(--gold)}
.g-filter.active{background:var(--dark);border-color:var(--dark);color:#fff}
.g-filter.active span{color:var(--gold-light)}
.g-filter:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.g-status{margin:0 0 26px;font-size:13.5px;color:var(--muted)}
.g-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:270px;grid-auto-flow:dense;gap:16px}
.g-item{position:relative;margin:0;overflow:hidden;border-radius:4px;background:#e6dfd1;min-width:0}
.g-item.g-wide{grid-column:span 2;grid-row:span 2}
.g-item.g-pano{grid-column:span 2}
.g-pano figcaption strong{font-size:28px}
.g-item[hidden]{display:none}
.g-grid.is-filtered{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:320px}
.g-grid.is-filtered .g-item{grid-column:auto;grid-row:auto}
.g-grid.is-filtered.is-odd .g-item.is-first{grid-column:span 2}
.g-open{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.g-open img{width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
.g-item:hover .g-open img{transform:scale(1.05)}
.g-open:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.g-item::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(4,12,22,.82));pointer-events:none}
.g-item figcaption{position:absolute;left:20px;right:20px;bottom:16px;z-index:1;color:#fff;pointer-events:none;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.g-item figcaption small{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}
.g-item figcaption strong{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2}
.g-wide figcaption strong{font-size:30px}

/* Closing call to action */
.g-cta{background:var(--dark);color:#fff;padding:clamp(56px,7vw,90px) 0}
.g-cta .h2{color:#fff}
.g-cta-inner{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.g-cta-btns{display:flex;gap:12px;flex-wrap:wrap}
.g-cta .btn-outline{padding:13px 22px;font-size:14px}

/* Photo viewer */
.g-lightbox{position:fixed;inset:0;z-index:2000;background:rgba(4,12,22,.95);display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;padding:56px 16px 24px}
.g-lightbox[hidden]{display:none}
.g-lightbox figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;max-height:100%}
.g-lightbox img{max-width:100%;max-height:calc(100svh - 170px);object-fit:contain;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.g-lightbox figcaption{display:flex;align-items:baseline;gap:16px;color:#fff;text-align:center;flex-wrap:wrap;justify-content:center}
.g-lightbox figcaption strong{font-family:var(--serif);font-weight:500;font-size:22px}
.g-lb-count{font-size:13px;letter-spacing:.12em;color:var(--gold-light)}
.g-lightbox button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(223,197,142,.5);background:rgba(255,255,255,.04);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;justify-self:center;transition:background .25s,border-color .25s}
.g-lightbox button:hover{background:var(--gold-bright);border-color:var(--gold-bright);color:var(--navy)}
.g-lightbox button:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}
.g-lb-close{position:absolute;top:14px;right:16px;font-size:28px!important}
body.lightbox-open{overflow:hidden}

@media (max-width:920px){
  .g-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:230px}
  .g-item.g-pano{grid-column:auto}
}
@media (max-width:920px){
  .g-hero::before{background:linear-gradient(180deg,rgba(4,12,22,.6) 0%,rgba(4,12,22,.25) 30%,rgba(4,12,22,.55) 60%,rgba(4,12,22,.9) 100%)}
  .g-hero-inner{align-items:flex-start;justify-content:flex-end}
}
@media (max-width:640px){
  .g-hero{min-height:auto}
  .g-hero-inner{padding-top:128px;padding-bottom:44px}
  .g-hero h1{font-size:clamp(38px,11vw,54px)}
  .g-hero-sub{font-size:16px}
  .g-hero-cta>a{flex:1 1 100%;justify-content:center}
  .g-grid{grid-template-columns:1fr;grid-auto-rows:240px}
  .g-item.g-wide{grid-column:auto;grid-row:span 1}
  .g-grid.is-filtered{grid-template-columns:1fr;grid-auto-rows:240px}
  .g-grid.is-filtered.is-odd .g-item.is-first{grid-column:auto}
  .g-wide figcaption strong{font-size:24px}
  .g-filter{padding:10px 14px}
  .g-cta-btns>a{flex:1 1 100%;justify-content:center}
  .g-lightbox{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;padding:60px 12px 20px;row-gap:16px}
  .g-lightbox figure{grid-column:1/-1;grid-row:1}
  .g-lb-prev{grid-row:2;grid-column:1}
  .g-lb-next{grid-row:2;grid-column:2}
  .g-lightbox img{max-height:calc(100svh - 230px)}
}