.gallery-overlay{
  padding:22px;
  background:rgba(2,6,23,.86);
}

body.light-mode .gallery-overlay{
  background:rgba(15,23,42,.72);
}

.project-gallery-dialog{
  position:relative;
  width:min(1220px,100%);
  max-height:94vh;
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(340px,.72fr);
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:28px;
  background:var(--surface);
  box-shadow:0 42px 120px rgba(0,0,0,.58);
}

.gallery-overlay.show .project-gallery-dialog{
  animation:project-gallery-enter .3s ease-out both;
}

@keyframes project-gallery-enter{
  from{
    opacity:0;
    transform:translateY(14px) scale(.985);
  }
  to{
    opacity:1;
    transform:none;
  }
}

body.light-mode .project-gallery-dialog .gallery-close-button{
  top:16px;
  right:16px;
  z-index:8;
  color:var(--text-strong);
}

.gallery-info-panel{
  min-width:0;
  overflow-y:auto;
  padding:68px 38px 36px;
  color:var(--text);
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--primary) 13%,transparent),transparent 34%),
    var(--surface);
}

body.light-mode .gallery-info-panel{
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--primary) 10%,transparent),transparent 34%),
    #ffffff;
}

.gallery-info-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:28px;
}

.gallery-project-status,
.gallery-info-panel .gallery-image-counter{
  position:static;
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  transform:none;
  font-size:.7rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  backdrop-filter:none;
}

.gallery-project-status{
  border-color:rgba(34,197,94,.25);
  color:#86efac;
  background:rgba(22,163,74,.14);
}

body.light-mode .gallery-project-status{
  color:#166534;
  background:#dcfce7;
}

.gallery-project-status.is-private{
  border-color:color-mix(in srgb,var(--primary-2) 30%,transparent);
  color:#ddd6fe;
  background:color-mix(in srgb,var(--primary-2) 18%,transparent);
}

body.light-mode .gallery-project-status.is-private{
  color:#5b21b6;
  background:#ede9fe;
}

.gallery-info-panel .gallery-image-counter{
  left:auto;
  bottom:auto;
  color:var(--muted);
  background:rgba(148,163,184,.08);
  white-space:nowrap;
}

body.light-mode .gallery-info-panel .gallery-image-counter{
  color:#475569;
  background:#f1f5f9;
}

.gallery-info-eyebrow{
  color:var(--accent-text);
  font-size:.73rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.14em;
}

.gallery-info-panel h2{
  margin:12px 0 16px;
  color:var(--text-strong);
  font-size:clamp(2rem,4vw,3.25rem);
  line-height:1.02;
  letter-spacing:-.045em;
}

.gallery-project-description{
  color:var(--muted);
  line-height:1.75;
}

.gallery-attraction-card{
  position:relative;
  overflow:hidden;
  margin:28px 0;
  padding:20px;
  border:1px solid color-mix(in srgb,var(--primary-2) 28%,transparent);
  border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 15%,transparent),color-mix(in srgb,var(--primary-2) 8%,transparent));
}

.gallery-attraction-card::after{
  content:"";
  position:absolute;
  width:90px;
  height:90px;
  right:-40px;
  bottom:-48px;
  border-radius:50%;
  background:color-mix(in srgb,var(--primary-2) 18%,transparent);
}

.gallery-attraction-card > span{
  color:var(--accent-text);
  font-size:.68rem;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.12em;
}

.gallery-attraction-card p{
  position:relative;
  z-index:1;
  margin-top:8px;
  color:var(--text-strong);
  font-size:1.05rem;
  font-weight:800;
  line-height:1.55;
}

.gallery-project-facts{
  display:grid;
  gap:0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

.gallery-project-facts > div{
  display:grid;
  grid-template-columns:100px 1fr;
  gap:16px;
  padding:14px 0;
}

.gallery-project-facts > div + div{
  border-top:1px solid var(--border);
}

.gallery-project-facts dt{
  color:var(--muted);
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.gallery-project-facts dd{
  color:var(--text-strong);
  font-size:.85rem;
  font-weight:800;
}

.gallery-zoom-tip{
  margin-top:22px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.6;
}

@media(max-width:980px){
  .project-gallery-dialog{
    grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
  }

  .gallery-info-panel{
    padding-left:28px;
    padding-right:28px;
  }
}

@media(max-width:820px){
  .gallery-overlay{
    padding:12px;
  }

  .project-gallery-dialog{
    height:calc(100vh - 24px);
    max-height:none;
    grid-template-columns:1fr;
    grid-template-rows:minmax(330px,58vh) minmax(0,1fr);
    border-radius:22px;
  }

  .gallery-info-panel{
    padding:30px 26px 28px;
  }

  .gallery-info-panel h2{
    font-size:2.15rem;
  }

  .gallery-info-topline{
    padding-right:46px;
    margin-bottom:20px;
  }

  .project-gallery-dialog .gallery-close-button{
    top:12px;
    right:12px;
  }
}

@media(max-width:520px){
  .project-gallery-dialog{
    grid-template-rows:minmax(300px,50vh) minmax(0,1fr);
  }

  .gallery-info-panel{
    padding:25px 20px 28px;
  }

  .gallery-info-topline{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }

  .gallery-project-facts > div{
    grid-template-columns:1fr;
    gap:4px;
  }
}

@media(prefers-reduced-motion:reduce){
  .gallery-overlay.show .project-gallery-dialog{
    animation:none;
  }
}

/* =========================================================
   AUTHORITATIVE GALLERY MEDIA LAYOUT — CONSISTENT VIEWPORT + CONTROL DOCK
   One desktop row height, a dedicated media viewport, and a stable internal
   zoom dock. Image backdrop is ambience, not Liquid Glass.
   ========================================================= */
:root{
  --gallery-canvas:#0b1424;
  --gallery-canvas-soft:#101b2f;
  --gallery-nav-bg:rgba(15,23,42,.72);
  --gallery-nav-border:rgba(196,181,253,.24);
  --gallery-media-inset:14px;
  --gallery-media-gap:10px;
}
body.light-mode{
  --gallery-canvas:#e9eef6;
  --gallery-canvas-soft:#f4f6fb;
  --gallery-nav-bg:rgba(255,255,255,.78);
  --gallery-nav-border:color-mix(in srgb,var(--primary) 22%,transparent);
}

.project-gallery-dialog{
  width:min(1320px,100%);
  height:min(680px,calc(100vh - 44px));
  max-height:calc(100vh - 44px);
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.68fr);
  box-shadow:0 34px 92px rgba(2,6,23,.42);
}
body.light-mode .project-gallery-dialog{box-shadow:0 30px 76px rgba(51,65,85,.22);}

.gallery-visual-panel{
  position:relative;
  isolation:isolate;
  min-width:0;
  min-height:0;
  height:auto;
  align-self:stretch;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 54px;
  align-items:stretch;
  overflow:hidden;
  padding:var(--gallery-media-inset) 0;
  background:var(--gallery-canvas);
}

.gallery-media-region{
  grid-column:2;
  grid-row:1;
  min-width:0;
  min-height:0;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:var(--gallery-media-gap);
}

.gallery-overlay .gallery-zoom-stage{
  position:relative;
  z-index:1;
  min-width:0;
  min-height:0;
  width:100%;
  height:auto;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  isolation:isolate;
  border:1px solid color-mix(in srgb,var(--border) 42%,transparent);
  border-radius:20px;
  background:
    radial-gradient(circle at center,color-mix(in srgb,var(--primary,var(--seja-brand-600,#705adc)) 7%,transparent),transparent 62%),
    var(--gallery-canvas-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.gallery-orientation-backdrop{
  position:absolute;
  z-index:0;
  inset:-6%;
  width:112%;
  height:112%;
  object-fit:cover;
  opacity:.22;
  filter:blur(19px) brightness(.68) saturate(1.12);
  transform:scale(1.03);
  pointer-events:none;
  user-select:none;
  transition:opacity .2s ease,filter .2s ease;
}
body.light-mode .gallery-orientation-backdrop{opacity:.16;filter:blur(18px) brightness(1.02) saturate(.98);}
.gallery-visual-panel.is-landscape-media .gallery-orientation-backdrop{opacity:.18;}
.gallery-visual-panel.is-portrait-media .gallery-orientation-backdrop{opacity:.28;}
.gallery-visual-panel.is-square-media .gallery-orientation-backdrop{opacity:.22;}
body.light-mode .gallery-visual-panel.is-landscape-media .gallery-orientation-backdrop{opacity:.13;}
body.light-mode .gallery-visual-panel.is-portrait-media .gallery-orientation-backdrop{opacity:.20;}
body.light-mode .gallery-visual-panel.is-square-media .gallery-orientation-backdrop{opacity:.16;}

.gallery-overlay .gallery-zoom-stage::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 24%,transparent 74%,rgba(2,6,23,.10)),
    radial-gradient(circle at 50% 38%,transparent 48%,color-mix(in srgb,var(--primary) 6%,transparent) 100%);
}
body.light-mode .gallery-overlay .gallery-zoom-stage::after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 26%,transparent 74%,rgba(71,85,105,.055)),
    radial-gradient(circle at 50% 38%,transparent 52%,color-mix(in srgb,var(--primary) 4.5%,transparent) 100%);
}

.gallery-overlay .gallery-main-image{
  position:relative;
  z-index:2;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border:1px solid color-mix(in srgb,rgba(255,255,255,.44) 38%,transparent);
  border-radius:13px;
  box-shadow:0 14px 40px rgba(2,6,23,.22);
}
body.light-mode .gallery-overlay .gallery-main-image{
  border-color:color-mix(in srgb,var(--border) 58%,rgba(255,255,255,.62));
  box-shadow:0 13px 34px rgba(51,65,85,.14);
}
.gallery-visual-panel.is-landscape-media .gallery-main-image{max-width:100%;max-height:100%;}
.gallery-visual-panel.is-portrait-media .gallery-main-image{max-width:min(86%,620px);max-height:100%;}
.gallery-visual-panel.is-square-media .gallery-main-image{max-width:min(90%,720px);max-height:100%;}

.gallery-control-dock{
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 8px;
}

.gallery-control-dock .gallery-zoom-toolbar{
  position:static;
  z-index:8;
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  margin:0;
  padding:6px;
  border-radius:999px !important;
  transform:none;
}

.gallery-control-dock .gallery-zoom-toolbar button{
  min-width:38px;
  height:38px;
  padding:0 11px;
  border:1px solid color-mix(in srgb,var(--border) 58%,var(--primary) 12%);
  border-radius:999px;
  background:color-mix(in srgb,var(--surface-2,var(--surface)) 84%,var(--primary) 5%);
  color:var(--text-strong);
  font-weight:900;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.gallery-control-dock .gallery-zoom-toolbar button:hover:not(:disabled){
  border-color:color-mix(in srgb,var(--primary) 56%,rgba(255,255,255,.34));
  background:color-mix(in srgb,var(--surface-2,var(--surface)) 76%,var(--primary) 14%);
  color:var(--text-strong);
  transform:translateY(-1px);
}
.gallery-control-dock .gallery-zoom-toolbar span{
  min-width:54px;
  color:var(--text-strong);
  text-align:center;
  font-size:.8rem;
  font-weight:900;
}

.gallery-visual-panel .public-nav-button{
  position:relative;
  top:auto;left:auto;right:auto;
  z-index:6;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  align-self:center;
  justify-self:center;
  border-radius:50%;
  color:var(--text-strong);
  transform:none;
}
.gallery-visual-panel .gallery-previous-button{grid-column:1;grid-row:1;}
.gallery-visual-panel .gallery-next-button{grid-column:3;grid-row:1;}
.gallery-visual-panel .public-nav-button .public-ui-icon,
.project-gallery-dialog .gallery-close-button .public-ui-icon{width:20px;height:20px;}

.gallery-visual-panel .public-nav-button:hover,
.project-gallery-dialog .gallery-close-button:hover{
  border-color:color-mix(in srgb,var(--primary) 58%,var(--seja-glass-border,var(--border))) !important;
  color:var(--text-strong) !important;
  transform:translateY(-1px);
}

.gallery-info-panel{min-height:0;overflow-y:auto;padding:68px clamp(28px,3vw,42px) 36px;}

@media(max-width:980px){
  .project-gallery-dialog{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);}
  .gallery-visual-panel{grid-template-columns:50px minmax(0,1fr) 50px;}
}

@media(max-width:820px){
  .gallery-overlay{padding:12px;}
  .project-gallery-dialog{
    width:100%;
    height:calc(100vh - 24px);
    max-height:none;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,54vh) minmax(0,1fr);
    border-radius:22px;
  }
  .gallery-visual-panel{grid-template-columns:44px minmax(0,1fr) 44px;padding:10px 0;}
  .gallery-media-region{gap:8px;}
  .gallery-overlay .gallery-zoom-stage{padding:10px;border-radius:17px;}
  .gallery-control-dock{min-height:44px;}
  .gallery-visual-panel.is-portrait-media .gallery-main-image,
  .gallery-visual-panel.is-square-media .gallery-main-image{max-width:94%;max-height:100%;}
  .gallery-info-panel{overflow:auto;padding:28px 24px 34px;}
  .gallery-info-topline{padding-right:46px;margin-bottom:20px;}
  .project-gallery-dialog .gallery-close-button{top:12px;right:12px;}
}

@media(max-width:560px){
  .project-gallery-dialog{grid-template-rows:minmax(0,50vh) minmax(0,1fr);}
  .gallery-visual-panel{grid-template-columns:38px minmax(0,1fr) 38px;padding:8px 0;}
  .gallery-visual-panel .public-nav-button{width:38px;height:38px;}
  .gallery-media-region{gap:6px;}
  .gallery-overlay .gallery-zoom-stage{padding:8px;border-radius:15px;}
  .gallery-control-dock{min-height:42px;padding:0 4px;}
  .gallery-control-dock .gallery-zoom-toolbar{gap:4px;padding:5px;max-width:100%;}
  .gallery-control-dock .gallery-zoom-toolbar button{min-width:34px;height:36px;padding:0 9px;font-size:.78rem;}
  .gallery-control-dock .gallery-zoom-toolbar span{min-width:48px;font-size:.75rem;}
  .gallery-info-panel{padding:24px 20px 28px;}
  .gallery-info-topline{align-items:flex-start;flex-direction:column;gap:8px;}
  .gallery-project-facts > div{grid-template-columns:1fr;gap:4px;}
}

@media(prefers-reduced-motion:reduce){
  .gallery-overlay.show .project-gallery-dialog{animation:none;}
  .gallery-orientation-backdrop{transition:none;}
}