/* FuelDosth screenshot lightbox. Reuses .phone from phone-frame.css.
   Load AFTER phone-frame.css and theme*.css. */

/* ---- Fix: two-phone sections ----
   .shot is a flex row (stretch by default) and the 2nd phone has margin-top,
   so the 1st phone was stretched taller and its screenshot cropped by object-fit:cover. */
.shot{align-items:flex-start}
.shot .phone{align-self:flex-start;height:auto}

/* ---- Triggers on the page ---- */
.js .shot .phone{cursor:zoom-in}
.shot .phone:focus-visible{outline:3px solid var(--fd-red,#c95353);outline-offset:5px}

/* ---- Overlay ---- */
.fd-lb{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:rgba(13,24,36,.88);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility 0s linear .2s;
}
.fd-lb.is-open{opacity:1;visibility:visible;transition:opacity .2s ease}

.fd-lb__stage{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:56px 0 18px;max-width:100vw;
  touch-action:pan-y;           /* allow vertical scroll gestures, we handle horizontal swipes */
}

/* Phone in the lightbox: sized by available height, same frame as the page */
.fd-lb .phone.fd-lb__phone{
  --lb-h:calc(100vh - 190px);
  width:min(76vw,calc(var(--lb-h) * .45));
  height:auto;                  /* aspect-ratio from .phone does the rest */
  cursor:default;
  animation:none;               /* theme.css applies a scroll-driven "rise" to every .phone */
  margin:0;
  box-shadow:0 0 0 2px #3a5069,0 24px 60px rgba(0,0,0,.5);
}
@supports (height:100dvh){
  .fd-lb .phone.fd-lb__phone{--lb-h:calc(100dvh - 190px)}
}
.fd-lb .phone img{user-select:none;-webkit-user-drag:none}

.fd-lb__cap{
  margin:0;max-width:min(92vw,420px);
  text-align:center;color:#e9eef3;font:600 .95rem/1.35 "DM Sans",system-ui,sans-serif;
}
.fd-lb__count{display:block;margin-top:2px;font-weight:400;font-size:.85rem;opacity:.7}

/* ---- Controls ---- */
.fd-lb__btn{
  position:absolute;display:grid;place-items:center;
  width:46px;height:46px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;
  transition:background .15s ease,transform .15s ease;
}
.fd-lb__btn:hover{background:rgba(255,255,255,.26)}
.fd-lb__btn:active{transform:scale(.94)}
.fd-lb__btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fd-lb__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fd-lb__close{top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}
.fd-lb__prev,.fd-lb__next{top:50%;margin-top:-23px}
.fd-lb__prev{left:max(14px,env(safe-area-inset-left))}
.fd-lb__next{right:max(14px,env(safe-area-inset-right))}
.fd-lb__btn[hidden]{display:none}

@media (max-width:600px){
  .fd-lb__prev,.fd-lb__next{width:40px;height:40px;margin-top:-20px}
  .fd-lb__prev{left:4px}.fd-lb__next{right:4px}
}

@media (prefers-reduced-motion:reduce){
  .fd-lb,.fd-lb.is-open,.fd-lb__btn{transition:none}
}