/* ============================================================
   Gallery hub — four city albums.
   Experience surface: album covers orient, photography leads.
   ============================================================ */

.gallery-page{background:var(--cream)}
.gallery-hero{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;
  min-height:min(760px,80svh);padding:calc(88px + clamp(54px,7vw,100px)) 0 clamp(58px,7vw,94px);
  overflow:hidden;background:var(--night);color:var(--lamp)
}
.gallery-hero__image{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:center 36%}
.gallery-hero__veil{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,color-mix(in srgb,var(--night) 86%,transparent),color-mix(in srgb,var(--night) 42%,transparent) 60%,color-mix(in srgb,var(--night) 16%,transparent))}
.gallery-hero__content{display:flex;flex-direction:column;align-items:flex-start}
.gallery-hero h1{max-width:9ch;margin:0;font:400 clamp(56px,7.4vw,92px)/.91 var(--serif);letter-spacing:-.025em;text-wrap:balance}
.gallery-hero p{max-width:48ch;margin:28px 0 0;color:var(--lamp-dim);font-size:var(--fs-lead);line-height:var(--lh-lead)}
.gallery-hero__action{
  display:inline-flex;align-items:center;gap:18px;min-height:54px;margin-top:34px;padding:0 2px;
  border-bottom:1px solid var(--gold-line);color:var(--lamp);font-size:var(--fs-lead);
  transition:color var(--t-state),border-color var(--t-state)
}
.gallery-hero__action svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform var(--t-state)}
.gallery-hero__action:hover{color:var(--gold-line);border-color:var(--lamp)}
.gallery-hero__action:hover svg{transform:translateY(4px)}

.gallery-events{scroll-margin-top:88px;padding:94px 0 100px;background:var(--tan);overflow:hidden}
.gallery-events__tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:54px}
.gallery-event-tab{min-width:0;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.gallery-event-tab__media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-md);background:var(--card)}
.gallery-event-tab__media::after{content:"";position:absolute;inset:0;border:0 solid var(--gold-line);border-radius:inherit;transition:border-width var(--t-state)}
.gallery-event-tab__media img{width:100%;height:100%;object-fit:cover;filter:saturate(.74) brightness(.91);transition:transform 1s var(--ease),filter .45s var(--ease)}
.gallery-event-tab__copy{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:end;padding:18px 2px 0}
.gallery-event-tab__copy strong{font:500 30px/1 var(--serif);color:var(--green);transition:color var(--t-state)}
.gallery-event-tab__copy>span{grid-column:1;font-size:var(--fs-label);color:var(--ink);text-transform:uppercase;letter-spacing:.055em}
.gallery-event-tab__copy small{grid-column:2;grid-row:1/3;align-self:center;font-size:12.5px;line-height:1.25;color:var(--brass-ink);text-align:right}
.gallery-event-tab:hover .gallery-event-tab__media img{transform:scale(1.035);filter:saturate(.94) brightness(.98)}
.gallery-event-tab.is-active .gallery-event-tab__media::after{border-width:2px}
.gallery-event-tab.is-active .gallery-event-tab__media img{filter:saturate(.96) brightness(1)}
.gallery-event-tab.is-active .gallery-event-tab__copy strong{color:var(--gold)}

.gallery-album{background:var(--cream)}
.gallery-album__panel[hidden]{display:none}
.gallery-album__head{display:flex;align-items:end;justify-content:space-between;gap:48px;padding-top:96px;padding-bottom:52px}
.gallery-album__head h2{scroll-margin-top:20px;margin:0;color:var(--green);font:500 var(--fs-headline)/1.02 var(--serif);text-transform:uppercase;text-wrap:balance}
.gallery-album__head .divider{margin:14px 0 0;width:250px}
.gallery-album__head>p{max-width:34ch;margin:0 0 5px;font-size:var(--fs-label);line-height:1.4;color:var(--brass-ink);letter-spacing:.055em;text-transform:uppercase;text-align:right}
.gallery-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.gallery-card{grid-column:span 4;margin:0;min-width:0;aspect-ratio:3/4;overflow:hidden;background:var(--card);border-radius:var(--r-md)}
.gallery-card--landscape{grid-column:span 8;aspect-ratio:4/3}
.gallery-card__button{position:relative;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in;overflow:hidden;color:var(--lamp)}
.gallery-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .55s var(--ease)}
.gallery-card__hint{
  position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:44px;height:44px;
  border:1px solid color-mix(in srgb,var(--lamp) 58%,transparent);border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--night) 58%,transparent);opacity:0;transform:translateY(8px);
  transition:opacity var(--t-state),transform var(--t-state),background var(--t-state)
}
.gallery-card__hint svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.35}
.gallery-card__button:hover img{transform:scale(1.035);filter:saturate(.92)}
.gallery-card__button:hover .gallery-card__hint,.gallery-card__button:focus-visible .gallery-card__hint{opacity:1;transform:translateY(0)}

.gallery-album__pager{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:76px;padding-top:28px;padding-bottom:100px;border-top:1px solid var(--rule-on-cream)}
.gallery-album__pager button{display:flex;align-items:center;gap:15px;min-height:58px;padding:0;border:0;background:transparent;color:var(--green);font:inherit;cursor:pointer;text-align:left}
.gallery-album__pager button:last-child{justify-self:end;text-align:right}
.gallery-album__pager svg{width:24px;height:24px;fill:none;stroke:var(--gold-line);stroke-width:1.4;transition:transform var(--t-state)}
.gallery-album__pager span{display:flex;flex-direction:column;gap:4px}
.gallery-album__pager small{font-size:12.5px;color:var(--brass-ink);text-transform:uppercase;letter-spacing:.06em}
.gallery-album__pager strong{font:500 27px/1 var(--serif)}
.gallery-album__pager button:hover:first-of-type svg{transform:translateX(-4px)}
.gallery-album__pager button:hover:last-child svg{transform:translateX(4px)}

.gallery-lightbox{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:color-mix(in srgb,var(--night) 96%,transparent);color:var(--lamp)}
.gallery-lightbox::backdrop{background:color-mix(in srgb,var(--night) 92%,transparent)}
.gallery-lightbox__stage{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:center;width:100%;height:100%;padding:76px clamp(18px,4vw,64px) 28px}
.gallery-lightbox figure{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;height:100%;margin:0}
.gallery-lightbox__image{max-width:100%;max-height:calc(100svh - 142px);width:auto;height:auto;object-fit:contain;border-radius:var(--r-sm)}
.gallery-lightbox__caption{min-height:22px;margin-top:16px;color:var(--lamp-dim);font-size:var(--fs-label);letter-spacing:.04em}
.gallery-lightbox__close,.gallery-lightbox__arrow{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid color-mix(in srgb,var(--lamp) 42%,transparent);border-radius:var(--r-pill);background:transparent;color:var(--lamp);cursor:pointer;transition:background var(--t-state),border-color var(--t-state)}
.gallery-lightbox__close:hover,.gallery-lightbox__arrow:hover{background:color-mix(in srgb,var(--lamp) 12%,transparent);border-color:var(--gold-line)}
.gallery-lightbox__close{position:absolute;top:22px;right:clamp(18px,4vw,64px)}
.gallery-lightbox__arrow{justify-self:center}
.gallery-lightbox__close svg,.gallery-lightbox__arrow svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4}
body.has-gallery-lightbox{overflow:hidden}

@media (max-width:1120px){
  .gallery-hero{padding-top:calc(80px + 54px)}
  .gallery-events__tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 20px}
}
@media (max-width:860px){
  .gallery-hero{min-height:650px;padding-top:calc(74px + 48px)}
  .gallery-hero__veil{background:linear-gradient(0deg,color-mix(in srgb,var(--night) 90%,transparent),color-mix(in srgb,var(--night) 28%,transparent) 76%)}
  .gallery-hero h1{font-size:clamp(50px,13vw,72px)}
  .gallery-events{scroll-margin-top:74px;padding:74px 0 78px}
  .gallery-events__tabs{display:flex;width:100%;overflow-x:auto;gap:14px;padding-inline:24px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .gallery-events__tabs::-webkit-scrollbar{display:none}
  .gallery-event-tab{flex:0 0 78vw;min-width:260px;max-width:300px;scroll-snap-align:center}
  .gallery-album__head{align-items:flex-start;flex-direction:column;gap:24px;padding-top:72px;padding-bottom:40px}
  .gallery-album__head>p{text-align:left}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .gallery-card{grid-column:span 1}
  .gallery-card--landscape{grid-column:span 2}
  .gallery-album__pager{padding-bottom:76px}
  .gallery-lightbox__stage{grid-template-columns:54px minmax(0,1fr) 54px;padding-inline:8px}
}
@media (max-width:520px){
  .gallery-hero{min-height:610px;padding-bottom:48px}
  .gallery-hero__image{object-position:42% center}
  .gallery-hero p{font-size:17px;line-height:24px}
  .gallery-hero__action{margin-top:28px;font-size:17px}
  .gallery-events .sec-head h2{font-size:36px}
  .gallery-event-tab__copy strong{font-size:28px}
  .gallery-album__head h2{font-size:36px}
  .gallery-grid{grid-template-columns:1fr;gap:10px;width:100%}
  .gallery-card,.gallery-card--landscape{grid-column:span 1;border-radius:0}
  .gallery-card__hint{opacity:1;transform:none;right:12px;bottom:12px}
  .gallery-album__pager{gap:12px;margin-top:54px;padding:22px 24px 64px}
  .gallery-album__pager button{gap:8px}
  .gallery-album__pager strong{font-size:22px}
  .gallery-album__pager small{font-size:10px}
  .gallery-album__pager svg{width:20px;height:20px}
  .gallery-lightbox__stage{display:flex;align-items:center;justify-content:center;padding:72px 12px 78px}
  .gallery-lightbox figure{width:100%;height:auto}
  .gallery-lightbox__image{max-height:calc(100svh - 174px)}
  .gallery-lightbox__arrow{position:absolute;bottom:18px}
  .gallery-lightbox__arrow--prev{left:18px}
  .gallery-lightbox__arrow--next{right:18px}
  .gallery-lightbox__caption{position:absolute;bottom:31px;left:76px;right:76px;margin:0;text-align:center}
}