/* ============================================================
   LAB LIFE — justified photo grid + lightbox
   Each photo keeps its own shape: items share a row height and grow in
   proportion to their aspect ratio (--r = width / height, set inline),
   so landscape shots run wide and portraits stay narrow, and every row
   fills the full width. A spacer after the last item keeps the final
   row from stretching.
   ============================================================ */
.lab-life { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(3.5rem, 7vw, 6rem); }

.lab-grid {
    --row-h: clamp(170px, 22vw, 290px);
    display: flex; flex-wrap: wrap; gap: clamp(.6rem, 1.4vw, 1rem);
    margin: 0; padding: 0; list-style: none;
}
.lab-grid::after { content: ""; flex-grow: 999; }
.lab-grid__item {
    flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--row-h));
    position: relative;
}
.lab-grid__link {
    position: relative; display: block; overflow: hidden;
    aspect-ratio: var(--r);
    border-radius: var(--radius-md); background: var(--blue-50);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
}
.lab-grid__link img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    transition: scale 700ms var(--ease-out);
}
.lab-grid__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2.2rem 1rem .85rem;
    background: linear-gradient(180deg, transparent, rgba(14,28,58,.72));
    color: #fff; font-size: .9rem; font-weight: 700;
    opacity: 0; translate: 0 6px;
    transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
    .lab-grid__link:hover { translate: 0 -3px; box-shadow: var(--shadow-md); }
    .lab-grid__link:hover img { scale: 1.04; }
    .lab-grid__link:hover .lab-grid__caption { opacity: 1; translate: 0 0; }
}
.lab-grid__link:focus-visible .lab-grid__caption { opacity: 1; translate: 0 0; }
.lab-grid__link:active { translate: 0 0; }

@media (max-width: 640px) {
    .lab-grid { --row-h: 130px; }
}

/* Pagination */
.lab-pagination { display: flex; justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }
.lab-pagination .page-numbers {
    display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .7rem; margin: 0 .2rem;
    border-radius: var(--radius-pill); border: 1px solid var(--line);
    font-weight: 700; color: var(--ink-2); background: #fff;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.lab-pagination .page-numbers.current { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.lab-pagination .page-numbers.dots { border-color: transparent; background: none; }
@media (hover: hover) and (pointer: fine) {
    .lab-pagination a.page-numbers:hover { border-color: var(--blue-300); color: var(--blue-700); }
}

/* Lightbox (native <dialog>) */
.lightbox {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0 0 1.4rem; border: 0;
    background: rgba(9,18,38,.94); color: #fff;
    display: grid; grid-template-rows: 1fr auto; place-items: center;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: transparent; }
/* Opening: only the dark backdrop and the controls fade in — the photo
   itself grows out of its thumbnail (lab-life.js). Closing reverses it. */
.lightbox { transition: background-color 280ms var(--ease-out); }
.lightbox[open] { animation: lightbox-in 280ms var(--ease-out); }
@keyframes lightbox-in { from { background-color: rgba(9,18,38,0); } }
.lightbox[open] .lightbox__btn,
.lightbox[open] .lightbox__caption,
.lightbox[open] .lightbox__count { animation: lightbox-ui 280ms var(--ease-out) both; }
@keyframes lightbox-ui { from { opacity: 0; } }
.lightbox.is-closing { background-color: rgba(9,18,38,0); }
.lightbox.is-closing .lightbox__btn,
.lightbox.is-closing .lightbox__caption,
.lightbox.is-closing .lightbox__count { opacity: 0; transition: opacity 180ms var(--ease-out); }
.lightbox__stage { display: grid; place-items: center; width: 100%; height: 100%; padding: clamp(3.5rem, 6vw, 4.5rem) clamp(1rem, 8vw, 6.5rem) .5rem; min-height: 0; }
.lightbox__img {
    max-width: 100%; max-height: calc(100dvh - 9rem); width: auto; height: auto;
    border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
    /* Fade only: scaling the photo while it swaps read as a jolt */
    transition: opacity 200ms var(--ease-out);
    user-select: none;
}
.lightbox__img.is-loading { opacity: 0; transition-duration: 0s; }
/* While growing out of the thumbnail it is fully opaque from frame one */
.lightbox__img.is-zooming { transition: none; }
.lightbox__caption { margin: 0; padding: .4rem 1rem 0; font-weight: 700; font-size: 1rem; color: #fff; text-align: center; }
.lightbox__count { position: absolute; top: 1.2rem; left: 1.4rem; margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.lightbox__caption, .lightbox__count { min-height: 1.4em; }
.lightbox__btn {
    position: absolute; width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__btn:active { background: rgba(255,255,255,.28); }
@media (hover: hover) and (pointer: fine) {
    .lightbox__btn:hover { background: rgba(255,255,255,.2); }
}
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; translate: 0 -50%; }
.lightbox__next { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; translate: 0 -50%; }
.lightbox--single .lightbox__prev, .lightbox--single .lightbox__next { display: none; }
@media (max-width: 640px) {
    .lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; translate: none; }
    .lightbox__img { max-height: calc(100dvh - 11rem); }
}
@media (prefers-reduced-motion: reduce) {
    .lightbox[open] { animation: none; }
}