/* NOVUS — Project gallery ---------------------------------------------------- */

.poly-gallery__head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: clamp(24px, 5vw, 80px);
}

.poly-gallery__title { color: var(--poly-title); }

.poly-gallery__intro {
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.7;
}

/* ---------------------------------------------------------------- filters */

.poly-gallery__filters {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: clamp(32px, 4vw, 52px);
}

.poly-gallery__filters[hidden] { display: none; }

.poly-gallery__filter {
    padding: .7em 1.25em;
    border: 1px solid var(--poly-line-strong);
    border-radius: 999px;
    background: var(--poly-white);
    font: 600 .875rem/1.2 var(--poly-font-body);
    color: var(--poly-title);
    cursor: pointer;
    transition: background-color .3s var(--poly-ease), color .3s var(--poly-ease), border-color .3s var(--poly-ease);
}

.poly-gallery__filter:hover { border-color: var(--poly-brand); color: var(--poly-brand); }

.poly-gallery__filter[aria-pressed="true"] {
    background: var(--poly-brand);
    border-color: var(--poly-brand);
    color: var(--poly-white);
}

/* ------------------------------------------------------------------- grid */

.poly-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin-top: clamp(28px, 3.4vw, 44px);
}

.poly-gallery__item[hidden] { display: none; }

.poly-gallery__figure { display: flex; flex-direction: column; height: 100%; }

.poly-gallery__open {
    position: relative;
    display: block;
    border-radius: var(--poly-radius-lg);
    overflow: hidden;
}

.poly-gallery__media { display: block; aspect-ratio: 4 / 3; }

.poly .poly-gallery__media img { transition: transform 1.1s var(--poly-ease-out); }
.poly-gallery__open:hover .poly-gallery__media img { transform: scale(1.05); }

.poly-gallery__zoom {
    position: absolute;
    right: 14px;
    bottom: 14px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--poly-white);
    color: var(--poly-brand);
    box-shadow: 0 10px 24px -12px rgba(11, 17, 48, .5);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s var(--poly-ease), transform .35s var(--poly-ease-out);
}

.poly-gallery__zoom .poly-icon { width: 18px; height: 18px; }

.poly-gallery__open:hover .poly-gallery__zoom,
.poly-gallery__open:focus-visible .poly-gallery__zoom { opacity: 1; transform: none; }

.poly-gallery__caption {
    display: grid;
    gap: .3rem;
    padding: 1.1rem .2rem 0;
}

.poly-gallery__cat {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--poly-accent);
}

.poly-gallery__name {
    font-family: var(--poly-font-display);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--poly-title);
}

.poly-gallery__text { font-size: .92rem; line-height: 1.6; }
.poly-gallery__link { margin-top: .35rem; }

/* --------------------------------------------------------------- lightbox */

.poly-lightbox {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: clamp(16px, 4vw, 56px);
    border: 0;
    background: rgba(11, 17, 48, .94);
    color: var(--poly-white);
}

/* A modal dialog does not lock the page behind it. */
html:has(.poly-lightbox[open]) { overflow: hidden; }

.poly-lightbox::backdrop { background: rgba(11, 17, 48, .6); }

.poly-lightbox[open] { display: grid; place-items: center; }

.poly-lightbox__stage {
    display: grid;
    justify-items: center;
    gap: 1rem;
    max-width: min(1200px, 100%);
}

.poly .poly-lightbox__img {
    width: auto;
    max-width: 100%;
    max-height: calc(100dvh - 160px);
    border-radius: var(--poly-radius-lg);
    object-fit: contain;
}

.poly-lightbox__caption { font-size: .95rem; color: rgba(255, 255, 255, .82); text-align: center; }

.poly-lightbox__btn {
    position: absolute;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(11, 17, 48, .55);
    color: var(--poly-white);
    cursor: pointer;
    transition: background-color .3s var(--poly-ease), border-color .3s var(--poly-ease);
}

.poly-lightbox__btn:hover { background: var(--poly-brand); border-color: var(--poly-brand); }
.poly-lightbox__btn svg { width: 22px; height: 22px; }
.poly-lightbox__btn--close { top: 18px; right: 18px; }
.poly-lightbox__btn--prev { left: 18px; top: 50%; transform: translateY(-50%); }
.poly-lightbox__btn--next { right: 18px; top: 50%; transform: translateY(-50%); }

.poly .poly-lightbox__btn:focus-visible { outline: 2px solid var(--poly-accent-200); outline-offset: 3px; border-radius: 50%; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .poly-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .poly-gallery__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
}

@media (max-width: 640px) {
    .poly-gallery__grid { grid-template-columns: minmax(0, 1fr); }
    .poly-lightbox__btn--prev,
    .poly-lightbox__btn--next { top: auto; bottom: 18px; transform: none; }
}