/* EVH photo galleries: story bursts, room grids, the "See all photos" tour and the full-screen viewer.
   Motion follows the EVH web-motion standard: things morph and cascade, nothing pops; reduced motion = no motion. */

/* ---------- bursts ---------- */
.gx-sec{padding-block:var(--ev-sp-md)}
.gx-head{max-width:46rem;margin:0 auto calc(var(--ev-sp-sm) - 4px);text-align:center;display:grid;gap:16px}
.gx-head .ev-p{margin:0 auto;max-width:38rem}
.gx-burst{display:grid;gap:clamp(8px,1vw,14px)}
.gx-tile{position:relative;display:block;width:100%;padding:0;margin:0;border:0;border-radius:10px;overflow:hidden;background:var(--ev-card);cursor:zoom-in;aspect-ratio:3/2;-webkit-tap-highlight-color:transparent}
.gx-tile img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s var(--ease)}
.gx-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none}
@media (hover:hover){.gx-tile:hover img{transform:scale(1.04)}}
.gx-tile:focus-visible{outline:2px solid #fff;outline-offset:3px}
.gx-btns{margin-top:calc(var(--ev-sp-sm) - 8px)}
.gx-open{gap:10px}
.gx-open svg{flex:none}
/* "See all photos": EVH blue with a soft glow that breathes, so nobody misses it */
.gx-open.ev-btn--b,.gx-view__all.ev-btn--b{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 22px -2px var(--blue-glow),0 10px 34px -10px var(--blue-glow);animation:gx-glow 3.2s ease-in-out infinite}
.gx-open.ev-btn--b:hover,.gx-view__all.ev-btn--b:hover{box-shadow:0 0 0 1px rgba(255,255,255,.18),0 0 34px 2px var(--blue-glow),0 14px 40px -10px var(--blue-glow);transform:translateY(-1px)}
@keyframes gx-glow{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 18px -4px var(--blue-glow),0 10px 34px -12px var(--blue-glow)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 32px 2px var(--blue-glow),0 12px 40px -8px var(--blue-glow)}}
@media (prefers-reduced-motion:reduce){.gx-open.ev-btn--b,.gx-view__all.ev-btn--b{animation:none}}

@media (min-width:721px){
  .gx-burst--3,.gx-burst--4,.gx-burst--5{grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));height:min(74vh,720px)}
  .gx-burst--3{grid-template-columns:2fr 1fr}
  .gx-burst .gx-tile{aspect-ratio:auto;height:100%}
  .gx-burst .gx-tile:first-child{grid-row:1 / 3}
  .gx-burst--4 .gx-tile:nth-child(4){grid-column:2 / 4}
  .gx-burst--flip .gx-tile:first-child{grid-column:-2 / -1}
  .gx-burst--flip.gx-burst--3,.gx-burst--flip.gx-burst--4,.gx-burst--flip.gx-burst--5{grid-template-columns:1fr 1fr 2fr}
  .gx-burst--flip.gx-burst--3{grid-template-columns:1fr 2fr}
  .gx-burst--flip.gx-burst--4 .gx-tile:nth-child(4){grid-column:1 / 3}
  .gx-burst--flip .gx-tile:not(:first-child){grid-row:auto}
  .gx-burst--2{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .gx-burst{grid-template-columns:1fr 1fr}
  .gx-burst .gx-tile:first-child{grid-column:1 / -1}
  .gx-burst--4 .gx-tile:last-child,.gx-burst--2 .gx-tile:last-child{grid-column:1 / -1}
}

/* room grid (room pages) */
.gx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.gx-grid .gx-tile:first-child{grid-column:span 2;grid-row:span 2}
@media (max-width:720px){.gx-grid{grid-template-columns:1fr 1fr}.gx-grid .gx-tile:first-child{grid-column:1 / -1;grid-row:auto}}

/* ---------- tour ---------- */
html.gx-lock,html.gx-lock body{overflow:hidden}
.gx-tour{position:fixed;inset:0;z-index:9970;background:#000;color:#fff;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.gx-tour.is-open{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.gx-tour:focus{outline:none}
.gx-tour__bar{position:sticky;top:0;z-index:3;background:linear-gradient(#000 70%,rgba(0,0,0,0));padding:14px var(--ev-m) 18px}
.gx-tour__top{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:var(--ev-max);margin:0 auto}
.gx-tour__ttl{font:400 clamp(24px,3vw,36px)/1.05 var(--display);margin:0;letter-spacing:-.01em}
.gx-tour__ttl small{display:block;font:500 12px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ev-mute);margin-top:6px}
.gx-x{flex:none;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;transition:background .2s ease}
.gx-x:hover{background:rgba(255,255,255,.2)}
.gx-x:focus-visible,.gx-chip:focus-visible,.gx-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.gx-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;max-width:var(--ev-max);margin:14px auto 0;padding-bottom:2px;-webkit-mask:linear-gradient(90deg,#000 92%,transparent)}
.gx-chips::-webkit-scrollbar{display:none}
.gx-chip{flex:none;min-height:36px;padding:0 14px;border-radius:999px;border:0;background:rgba(255,255,255,.08);color:#fff;font:500 13px/1 var(--sans);cursor:pointer;white-space:nowrap;transition:background .25s ease,color .25s ease}
.gx-chip:hover{background:rgba(255,255,255,.16)}
.gx-chip.is-on{background:#fff;color:#000}
.gx-chip span{opacity:.55;margin-left:6px}
.gx-tour__body{max-width:var(--ev-max);margin:0 auto;padding:4px var(--ev-m) 120px}
.gx-room{padding-top:40px;scroll-margin-top:130px}
.gx-room__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;margin-bottom:16px}
.gx-room__head h3{font:400 clamp(26px,2.6vw,40px)/1.05 var(--display);margin:0}
.gx-room__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;color:var(--ev-mute);font:400 14px/1.4 var(--sans)}
.gx-room__meta a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px}
.gx-room__meta a:hover{border-color:#fff}
.gx-room__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gx-room__grid .gx-tile{border-radius:8px}
.gx-room__grid .gx-tile:first-child{grid-column:span 2;grid-row:span 2}
.gx-room__grid .gx-tile:only-child{grid-column:span 2;grid-row:auto}
@media (max-width:720px){
  .gx-room__grid{grid-template-columns:1fr 1fr;gap:8px}
  .gx-room__grid .gx-tile:first-child,.gx-room__grid .gx-tile:only-child{grid-column:1 / -1;grid-row:auto}
  .gx-room{scroll-margin-top:120px}
}
/* count-in as each room's photos come into view */
.gx-tour .gx-room__grid .gx-tile{opacity:0;transform:scale(.94) translateY(10px);transition:opacity .5s var(--ease),transform .6s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(var(--i,0) * 30ms)}
.gx-tour .gx-room.is-in .gx-room__grid .gx-tile{opacity:1;transform:none}
.gx-tour__book{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding-top:56px}

/* ---------- viewer ---------- */
.gx-view{position:fixed;inset:0;z-index:9980;background:rgba(0,0,0,.97);color:#fff;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s linear .4s;touch-action:none}
.gx-view.is-open{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}
.gx-view__stage{position:absolute;inset:64px clamp(12px,6vw,96px) 84px}
.gx-view__img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px;opacity:0;transform:scale(.985);transition:opacity .45s var(--ease),transform .6s var(--ease);user-select:none;-webkit-user-drag:none}
.gx-view__img.is-on{opacity:1;transform:none}
.gx-view__img.is-out-l{opacity:0;transform:translateX(-36px)}
.gx-view__img.is-out-r{opacity:0;transform:translateX(36px)}
.gx-view__top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px clamp(12px,2vw,24px)}
.gx-view__room{font:400 clamp(20px,2vw,28px)/1.1 var(--display);margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gx-view__room a{color:#fff;text-decoration:none}
.gx-view__bot{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:18px 16px calc(24px + env(safe-area-inset-bottom,0px));font:500 13px/1 var(--sans);letter-spacing:.14em;color:var(--ev-mute)}
.gx-view__bot .ev-btn{letter-spacing:0;min-height:42px}
.gx-nav{position:absolute;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .2s ease}
.gx-nav:hover{background:rgba(255,255,255,.22)}
.gx-nav--p{left:clamp(8px,1.6vw,24px)}
.gx-nav--n{right:clamp(8px,1.6vw,24px)}
@media (max-width:720px){
  .gx-view__stage{inset:58px 0 96px}
  .gx-view__img{border-radius:0}
  .gx-nav{display:none}
}
/* the photo flying from its tile into the viewer (and back) */
.gx-fly{position:fixed;z-index:9985;object-fit:cover;border-radius:10px;pointer-events:none;transition:left .5s var(--ease),top .5s var(--ease),width .5s var(--ease),height .5s var(--ease),border-radius .5s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .gx-tile img,.gx-tour,.gx-view,.gx-view__img,.gx-fly,.gx-tour .gx-room__grid .gx-tile{transition:none!important}
  .gx-tour .gx-room__grid .gx-tile{opacity:1;transform:none}
  @media (hover:hover){.gx-tile:hover img{transform:none}}
}
/* while the tour or viewer is open, the chat button and the phone Book bar step aside (they sit above everything else) */
html.gx-lock .ecc-fab,html.gx-lock .ecc-panel,html.gx-lock .epic-bookbar{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
/* logged-in admins: keep the tour and viewer below the WordPress toolbar */
body.admin-bar .gx-tour,body.admin-bar .gx-view{top:32px}
@media (max-width:782px){body.admin-bar .gx-tour,body.admin-bar .gx-view{top:46px}}

/* fading-out layers never catch taps; keep the page from shifting when the scrollbar hides */
.gx-view:not(.is-open),.gx-tour:not(.is-open){pointer-events:none}
html.gx-lock{scrollbar-gutter:stable}