/* Procity public · galleries */

.gal-page{position:relative}

.gal-page__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.gal-page__stats > div{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 18px;display:flex;flex-direction:column;gap:4px}
.gal-page__stats b{font-size:1.6rem;font-weight:620;color:var(--ink);font-feature-settings:"tnum"}
.gal-page__stats span{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}

.gal-page__filters{display:grid;grid-template-columns:1.4fr 1fr 1fr auto auto;gap:10px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--surface);margin-bottom:14px}
.gal-page__search{position:relative}
.gal-page__search input{width:100%;height:44px;border:1px solid var(--line);border-radius:999px;padding:0 16px 0 44px;font-size:.92rem;color:var(--ink);background:var(--surface)}
.gal-page__search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)}
.gal-page__select{height:44px;border:1px solid var(--line);border-radius:999px;padding:0 36px 0 16px;font-size:.88rem;background-color:var(--surface);color:var(--ink);cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%236A6F78' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 16px center}
@media(max-width:880px){.gal-page__filters{grid-template-columns:1fr;border-radius:14px}.gal-page__select{width:100%}}

.gal-page__meta{color:var(--muted);font-size:.85rem;margin:6px 0 18px}

.gal-page__empty{padding:90px 20px;text-align:center;border:1px dashed var(--line);border-radius:22px;background:var(--surface)}
.gal-page__empty h3{font-size:1.2rem;margin:0 0 6px}
.gal-page__empty p{color:var(--muted);margin:0 0 18px}

.gal-page__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;align-items:stretch}

.gal-card-pub{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s cubic-bezier(.16,.84,.44,1),box-shadow .3s ease,border-color .3s ease}
.gal-card-pub:hover{transform:translateY(-6px);border-color:var(--ink);box-shadow:0 30px 60px -36px rgba(0,0,0,.35);color:inherit}
.gal-card-pub__ph{position:relative;aspect-ratio:4/3;background:linear-gradient(135deg,#161618,#0b0b0d);overflow:hidden}
.gal-card-pub__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gal-card-pub:hover .gal-card-pub__ph img{transform:scale(1.06)}
.gal-card-pub__noimg{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.45)}
.gal-card-pub__featured{position:absolute;top:12px;left:12px;background:var(--brand);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.06em;padding:5px 10px;border-radius:999px;text-transform:uppercase}
.gal-card-pub__count{position:absolute;bottom:12px;right:12px;background:rgba(0,0,0,.55);color:#fff;font-size:.74rem;padding:5px 10px;border-radius:999px;font-weight:600;display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(8px)}
.gal-card-pub__stack{position:absolute;bottom:12px;left:12px;display:flex;gap:4px}
.gal-card-pub__stack span{width:28px;height:28px;border-radius:8px;background-size:cover;background-position:center;border:2px solid rgba(255,255,255,.85);box-shadow:0 8px 16px -10px rgba(0,0,0,.4)}
.gal-card-pub__body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.gal-card-pub__summary{margin:2px 0 0;color:var(--muted);font-size:.88rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gal-card-pub__foot{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:.76rem;color:var(--muted)}
.gal-card-pub__foot strong{color:var(--ink);font-weight:650}
.gal-card-pub__cat{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);font-weight:700}
.gal-card-pub__title{margin:0;font-size:1.08rem;font-weight:620;letter-spacing:-.005em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.gal-card-pub__meta{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem}

.gal-page__pages{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;margin-top:32px}
.gal-page__pg{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;font-size:.85rem;font-weight:600;text-decoration:none}
.gal-page__pg:hover{border-color:var(--ink);color:var(--ink)}
.gal-page__pg.is-current{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.gal-page__pg.is-disabled{opacity:.4;pointer-events:none}
.gal-page__pg--gap{border-color:transparent;pointer-events:none}

/* ============ Detail hero ============ */

.gal-detail__hero{position:relative;min-height:clamp(360px, 60vh, 620px);overflow:hidden;background:#0b0b0d;color:#fff}
.gal-detail__hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);will-change:transform;filter:saturate(1.05)}
.gal-detail__hero-overlay{position:absolute;inset:0;background:
    radial-gradient(80% 60% at 20% 80%, color-mix(in srgb, var(--gal-accent, #C0492B) 35%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(11,11,13,.35) 0%, rgba(11,11,13,.85) 80%, #0b0b0d 100%);
}
.gal-detail__hero-inner{position:relative;padding:clamp(80px,12vw,160px) 0 clamp(40px,6vw,72px);max-width:880px;color:#fff}
.gal-detail__crumbs{color:rgba(255,255,255,.7);font-size:.78rem;margin-bottom:18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gal-detail__crumbs a{color:rgba(255,255,255,.9);text-decoration:none}
.gal-detail__crumbs a:hover{color:#fff}
.gal-detail__crumbs span{color:rgba(255,255,255,.4)}
.gal-detail__eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;padding:6px 14px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(8px)}
.gal-detail__title{font-size:clamp(2rem,5vw,3.4rem);font-weight:620;letter-spacing:-.015em;margin:14px 0;line-height:1.1;color:#fff}
.gal-detail__lead{font-size:clamp(1rem,1.8vw,1.18rem);max-width:680px;color:rgba(255,255,255,.85);margin:0 0 22px}
.gal-detail__meta{display:flex;flex-wrap:wrap;gap:18px;font-size:.86rem;color:rgba(255,255,255,.8);margin-bottom:22px}
.gal-detail__meta span{display:inline-flex;align-items:center;gap:6px}
.gal-detail__cta{display:flex;gap:10px;flex-wrap:wrap}
.gal-detail__cta .btn{font-weight:700}
.gal-detail__cta .btn-light{background:#fff;color:#0b0b0d;border-color:#fff}
.gal-detail__cta .btn-light:hover{background:rgba(255,255,255,.85);border-color:rgba(255,255,255,.85)}

.gal-detail__desc{max-width:760px;margin:0 auto;color:var(--ink-soft);font-size:1.02rem;line-height:1.65}
.gal-detail__desc p{margin:0 0 14px}
.gal-detail__desc h2,.gal-detail__desc h3{color:var(--ink);font-weight:620;margin:24px 0 10px}

.section-tight{padding:clamp(30px,5vw,52px) 0}

/* ============ Professional gallery grid ============ */

/* Uniform media grid. Every tile is the same size and ratio, so the page
   reads as an ordered portfolio rather than a scattered mosaic. The project
   photography is portrait (3:4), which a landscape tile cropped heavily. */
.gal-kinetic{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:16px;
    align-items:start;
}
.gal-kinetic__item{
    position:relative;margin:0;border-radius:14px;overflow:hidden;background:#0b0b0d;
    aspect-ratio:3/4;
    transition:box-shadow .25s ease,transform .25s ease;
}
.gal-kinetic__item:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
/* Video keeps a landscape frame — walkthrough footage is filmed wide. */
.gal-kinetic__item--video{aspect-ratio:16/9;grid-column:span 2}
@media(max-width:900px){
    .gal-kinetic{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
}
@media(max-width:640px){
    .gal-kinetic{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .gal-kinetic__item--video{grid-column:span 2}
}
.gal-kinetic__btn{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;position:relative;color:#fff;outline:none}
.gal-kinetic__btn:focus-visible{outline:3px solid var(--gal-accent, #C0492B);outline-offset:3px;border-radius:18px}
.gal-kinetic__btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;transition:transform .45s cubic-bezier(.16,.84,.44,1)}
.gal-kinetic__video{cursor:default}
.gal-kinetic__video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#111}
.gal-kinetic__btn:hover img{transform:scale(1.04)}
.gal-kinetic__shine{position:absolute;inset:0;background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 100%);opacity:.65;transition:opacity .3s ease;pointer-events:none}
.gal-kinetic__btn:hover .gal-kinetic__shine{opacity:.85}
.gal-kinetic__cap{position:absolute;left:14px;right:14px;bottom:12px;color:#fff;font-size:.82rem;font-weight:600;letter-spacing:-.005em;line-height:1.4;text-shadow:0 2px 12px rgba(0,0,0,.6);pointer-events:none;font-style:normal;margin:0}

/* ============ More galleries ============ */

.gal-detail__more{background:var(--surface-2,#F8FAFC)}
.gal-detail__more-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.gal-detail__more-head h2{margin:6px 0 0;font-size:clamp(1.4rem,3vw,2rem);font-weight:620;letter-spacing:-.005em}
.gal-detail__more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}

/* ============ Lightbox ============ */

.gal-lightbox{position:fixed;inset:0;z-index:300;background:rgba(8,8,11,.96);display:flex;flex-direction:column;animation:lbFade .25s ease}
.gal-lightbox[hidden]{display:none}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
.gal-lightbox__close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:50%;width:44px;height:44px;font-size:28px;line-height:1;cursor:pointer;z-index:4;backdrop-filter:blur(8px);display:grid;place-items:center}
.gal-lightbox__close:hover{background:rgba(255,255,255,.18)}
.gal-lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:50%;width:52px;height:52px;font-size:30px;line-height:1;cursor:pointer;z-index:4;backdrop-filter:blur(8px);display:grid;place-items:center;transition:background .2s ease}
.gal-lightbox__nav:hover{background:rgba(255,255,255,.2)}
.gal-lightbox__nav--prev{left:18px}
.gal-lightbox__nav--next{right:18px}
@media(max-width:560px){.gal-lightbox__nav{width:42px;height:42px;font-size:24px}.gal-lightbox__nav--prev{left:8px}.gal-lightbox__nav--next{right:8px}}

.gal-lightbox__stage{flex:1;display:grid;grid-template-rows:1fr auto;align-items:stretch;padding:50px 20px 10px;min-height:0;text-align:center;overflow:hidden}
.gal-lightbox__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);align-self:center;justify-self:center;transition:transform .45s cubic-bezier(.16,.84,.44,1);cursor:zoom-in}
.gal-lightbox__img.is-zoomed{cursor:zoom-out;transform:scale(1.5)}
.gal-lightbox__meta{padding:12px 0 0;color:rgba(255,255,255,.9);display:flex;flex-direction:column;gap:6px}
.gal-lightbox__caption{font-size:.95rem;margin:0;color:rgba(255,255,255,.95)}
.gal-lightbox__caption:empty{display:none}
.gal-lightbox__counter{display:flex;align-items:center;justify-content:center;gap:18px;color:rgba(255,255,255,.65);font-size:.78rem;font-family:var(--font-mono, monospace);letter-spacing:.04em}
.gal-lightbox__actions{display:flex;gap:6px}
.gal-lightbox__act{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;border-radius:8px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;text-decoration:none}
.gal-lightbox__act:hover{background:rgba(255,255,255,.18);color:#fff}

.gal-lightbox__filmstrip{display:flex;gap:6px;padding:14px 20px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.gal-lightbox__filmstrip::-webkit-scrollbar{height:6px}
.gal-lightbox__filmstrip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:999px}
.gal-lightbox__film{flex:0 0 auto;width:62px;height:62px;border-radius:8px;overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:#000}
.gal-lightbox__film img{width:100%;height:100%;object-fit:cover;display:block;opacity:.55;transition:opacity .2s ease}
.gal-lightbox__film.is-current{border-color:var(--gal-accent, #fff)}
.gal-lightbox__film.is-current img,.gal-lightbox__film:hover img{opacity:1}

@media(max-width:540px){
    .gal-detail__hero{min-height:480px}
    .gal-lightbox__filmstrip{padding:10px}
    .gal-lightbox__film{width:48px;height:48px}
}

@media (prefers-reduced-motion: reduce) {
    .gal-card-pub, .gal-kinetic__item, .gal-kinetic__btn img, .gal-detail__hero-img { transition:none !important; transform:none !important; }
}

/* A video tile shows the browser's own controls along its bottom edge, so the
   caption sits above them instead of on top of the scrubber. */
.gal-kinetic__video .gal-kinetic__cap{bottom:52px;}
@media(max-width:640px){ .gal-kinetic__video .gal-kinetic__cap{bottom:46px;font-size:.76rem} }