/* THE EAGLE • Studio image viewer inspired by the verified Tzortzi's
   Apartments lightbox. Scoped only to #lightbox, loaded last. */
#lightbox {
 box-sizing:border-box!important;
 width:min(1010px,calc(100vw - 32px))!important;
 height:min(830px,calc(100dvh - 32px))!important;
 max-width:none!important;
 max-height:calc(100dvh - 32px)!important;
 margin:auto!important;
 padding:12px 13px 8px!important;
 overflow:hidden!important;
 border-radius:17px!important;
 border:1px solid rgba(239,234,218,.18)!important;
 background:#1c2220!important;
 color:#f8f6ef!important;
 box-shadow:0 30px 95px rgba(0,0,0,.55)!important;
}
#lightbox::backdrop {
 background:rgba(6,10,10,.83)!important;
 backdrop-filter:none!important;
}
#lightbox[open] {display:block!important;}
#lightbox .eagle-lightbox-shell {
 height:100%;
 min-height:0;
 display:grid;
 grid-template-rows:44px minmax(0,1fr) 39px;
}
#lightbox .lightbox-top {
 box-sizing:border-box;
 display:flex!important;
 align-items:center!important;
 justify-content:space-between!important;
 min-height:0!important;
 margin:0!important;
 padding:0 1px 7px 10px!important;
 color:#f1e6bf!important;
}
#lightbox .eagle-lightbox-title {
 color:#dfc56a!important;
 font-family:"DM Sans",system-ui,sans-serif!important;
 letter-spacing:.16em;
 font-size:.73rem!important;
 font-weight:800;
}
#lightbox .eagle-lightbox-stage {
 min-width:0;
 min-height:0;
 position:relative;
 overflow:hidden;
 display:grid;
 place-items:center;
 border-radius:8px;
 background:#111715;
 touch-action:pan-y;
}
#lightbox #large-photo {
 box-sizing:border-box!important;
 position:relative!important;
 display:block!important;
 width:100%!important;
 height:100%!important;
 max-width:100%!important;
 max-height:none!important;
 min-height:0!important;
 margin:0!important;
 object-fit:contain!important;
 object-position:center center!important;
 border:0!important;
 border-radius:0!important;
 background:transparent!important;
 user-select:none;
 -webkit-user-drag:none;
}
#lightbox #large-photo.eagle-photo-enter {
 animation:eagle-lightbox-reveal .23s ease-out both;
}
@keyframes eagle-lightbox-reveal {
 from{opacity:.38;}
 to{opacity:1;}
}
#lightbox #previous-photo,
#lightbox #next-photo {
 position:absolute!important;
 z-index:2!important;
 top:50%!important;
 display:grid!important;
 place-items:center!important;
 width:48px!important;
 height:48px!important;
 min-width:48px!important;
 min-height:48px!important;
 padding:0!important;
 margin:0!important;
 border-radius:50%!important;
 border:1px solid rgba(255,255,255,.37)!important;
 background:rgba(30,35,34,.83)!important;
 color:#fff!important;
 box-shadow:0 2px 15px rgba(0,0,0,.25)!important;
 transform:translateY(-50%)!important;
 cursor:pointer!important;
 opacity:1!important;
 transition:background-color .15s ease,transform .15s ease!important;
}
#lightbox #previous-photo {left:15px!important;right:auto!important;}
#lightbox #next-photo {right:15px!important;left:auto!important;}
#lightbox #previous-photo svg,
#lightbox #next-photo svg {
 width:23px!important;height:23px!important;
 stroke:currentColor!important;fill:none!important;
 color:inherit!important;
}
#lightbox #previous-photo:hover,
#lightbox #next-photo:hover {
 background:rgba(137,115,41,.95)!important;
 color:#fff!important;
 border-color:#e4cc76!important;
}
#lightbox #close-photo {
 position:static!important;
 flex:0 0 34px!important;
 width:34px!important;
 height:34px!important;
 min-width:34px!important;
 min-height:34px!important;
 display:grid!important;
 place-items:center!important;
 margin:0!important;
 padding:0!important;
 border-radius:50%!important;
 border:1px solid rgba(255,255,255,.31)!important;
 background:rgba(49,55,52,.91)!important;
 color:#fff!important;
 cursor:pointer!important;
}
#lightbox #close-photo svg {width:18px;height:18px;stroke:currentColor!important;color:inherit!important;}
#lightbox #close-photo:hover {background:#947b2c!important;color:#fff!important;}
#lightbox .lightbox-controls {
 display:flex!important;
 justify-content:center!important;
 align-items:center!important;
 width:100%!important;
 height:100%!important;
 margin:0!important;
 gap:0!important;
 color:#f8f6ef!important;
}
#lightbox #photo-counter {
 font-family:"DM Sans",system-ui,sans-serif!important;
 color:#f0eee7!important;
 font-size:.91rem!important;
 letter-spacing:.08em!important;
 font-weight:750!important;
 font-variant-numeric:tabular-nums;
}
#lightbox #photo-caption {
 position:absolute!important;
 width:1px!important;height:1px!important;
 margin:-1px!important;
 overflow:hidden!important;
 clip:rect(0,0,0,0)!important;
 white-space:nowrap!important;
 clip-path:inset(50%)!important;
}
:root[data-theme="dark"] #lightbox #close-photo,
:root[data-theme="light"] #lightbox #close-photo,
:root[data-theme="dark"] #lightbox #previous-photo,
:root[data-theme="light"] #lightbox #previous-photo,
:root[data-theme="dark"] #lightbox #next-photo,
:root[data-theme="light"] #lightbox #next-photo {
 color:#fff!important;
}
#lightbox button:focus-visible {
 outline:3px solid #ecd071!important;
 outline-offset:3px!important;
}
@media(max-width:650px) {
 #lightbox {
  width:calc(100vw - 16px)!important;
  height:min(700px,calc(100dvh - 18px))!important;
  max-height:calc(100dvh - 18px)!important;
  padding:8px!important;
  border-radius:13px!important;
 }
 #lightbox .eagle-lightbox-shell {
  grid-template-rows:39px minmax(0,1fr) 33px;
 }
 #lightbox .eagle-lightbox-stage {border-radius:5px;}
 #lightbox .eagle-lightbox-title {font-size:.62rem!important;}
 #lightbox #previous-photo,#lightbox #next-photo {
  height:42px!important;width:42px!important;
  min-height:42px!important;min-width:42px!important;
 }
 #lightbox #previous-photo {left:6px!important;}
 #lightbox #next-photo {right:6px!important;}
 #lightbox #photo-counter {font-size:.79rem!important;}
}
@media(prefers-reduced-motion:reduce){
 #lightbox #large-photo.eagle-photo-enter {animation:none!important;}
 #lightbox #previous-photo,#lightbox #next-photo {transition:none!important;}
}

/* Final contrast fix: override older theme-specific white backgrounds
   using the same selector specificity. */
:root[data-theme="light"] #lightbox #close-photo,
:root[data-theme="dark"] #lightbox #close-photo,
:root[data-theme="light"] #lightbox #previous-photo,
:root[data-theme="dark"] #lightbox #previous-photo,
:root[data-theme="light"] #lightbox #next-photo,
:root[data-theme="dark"] #lightbox #next-photo {
 background:rgba(29,35,33,.88)!important;
 color:#fff!important;
 border:1px solid rgba(255,255,255,.44)!important;
 opacity:1!important;
 text-shadow:none!important;
}
:root[data-theme="light"] #lightbox #close-photo:hover,
:root[data-theme="dark"] #lightbox #close-photo:hover,
:root[data-theme="light"] #lightbox #previous-photo:hover,
:root[data-theme="dark"] #lightbox #previous-photo:hover,
:root[data-theme="light"] #lightbox #next-photo:hover,
:root[data-theme="dark"] #lightbox #next-photo:hover {
 background:#a18739!important;
 border-color:#f1d882!important;
 color:#fff!important;
}

/* Make SVG icons visible despite legacy theme rules targeting every child. */
:root[data-theme="dark"] #lightbox #previous-photo svg,
:root[data-theme="light"] #lightbox #previous-photo svg,
:root[data-theme="dark"] #lightbox #next-photo svg,
:root[data-theme="light"] #lightbox #next-photo svg,
:root[data-theme="dark"] #lightbox #close-photo svg,
:root[data-theme="light"] #lightbox #close-photo svg {
 color:#fff!important;
 stroke:#fff!important;
 fill:none!important;
 opacity:1!important;
}

/* Legacy blanket * selectors also target SVG child paths; override them. */
:root[data-theme="light"] #lightbox #previous-photo svg path,
:root[data-theme="dark"] #lightbox #previous-photo svg path,
:root[data-theme="light"] #lightbox #next-photo svg path,
:root[data-theme="dark"] #lightbox #next-photo svg path,
:root[data-theme="light"] #lightbox #close-photo svg path,
:root[data-theme="dark"] #lightbox #close-photo svg path {
 color:#fff!important;
 stroke:#fff!important;
 fill:none!important;
}

/* Mobile preview follows each photo's natural aspect ratio instead of
   reserving a tall, mostly empty fixed-height box. */
@media(max-width:650px){
 #lightbox{height:auto!important;max-height:calc(100dvh - 18px)!important;}
 #lightbox .eagle-lightbox-shell{height:auto!important;grid-template-rows:39px auto 33px!important;}
 #lightbox .eagle-lightbox-stage{
  height:auto!important;
  aspect-ratio:var(--eagle-lightbox-aspect,4 / 3)!important;
  max-height:calc(100dvh - 110px)!important;
 }
}

@media(max-width:650px){
 /* Native modal has top and bottom insets; auto height stretches it.
    Use intrinsic content height to keep the image viewer compact. */
 #lightbox {height:max-content!important;min-height:0!important;}
}