/* Feature-screenshot lightbox — Digital Specialist landing.

   The feature screenshots are 720px wide but `.device-mockup` caps them at
   296px, so every label inside them renders at roughly 40% of its authored
   size and the UI being advertised is unreadable. Clicking one opens it here
   at its natural width.

   Deliberately a STANDALONE pair (css + js), like cookie-consent: css/style.css
   is GENERATED from ds-homepage/src/scss and must not be hand-edited, so a
   landing addition that does not belong in that build lives in its own file.

   The panel is allowed to be TALLER than the viewport and the overlay scrolls.
   Constraining it to 90vh would re-shrink a 1563px-tall phone screenshot to
   about 430px wide on a typical laptop — barely better than the thumbnail, and
   the whole point is legibility. */

.device-mockup {
    cursor: zoom-in;
}

.device-mockup:focus-visible {
    outline: 3px solid #4f6bed;
    outline-offset: 4px;
    border-radius: 4px;
}

.ds-lb {
    position: fixed;
    inset: 0;
    /* Above the cookie banner (z-index 10000) — it is a full-screen overlay the
       user opened deliberately, and the banner is still there when it closes. */
    z-index: 10050;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(12, 14, 24, 0.93);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.ds-lb[hidden] {
    display: none;
}

.ds-lb__img {
    display: block;
    width: auto;
    height: auto;
    /* Natural size, capped only by the viewport WIDTH. No height cap: see the
       header note. */
    max-width: min(92vw, 760px);
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    background: #0c0e18;
    animation: ds-lb-in 160ms ease-out;
}

@keyframes ds-lb-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.ds-lb__close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background 140ms ease;
}

.ds-lb__close:hover,
.ds-lb__close:focus-visible {
    background: rgba(255, 255, 255, 0.28);
}

.ds-lb__close:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

/* Screen-reader-only caption; the visible affordance is the image itself. */
.ds-lb__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Stops the page behind from scrolling while the overlay is open. */
.ds-lb-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .ds-lb__img { animation: none; }
    .ds-lb__close { transition: none; }
}