.gallery-page { padding-top: 76px; }
.gallery-hero { padding: 110px 7% 75px; text-align: center; }
.gallery-hero h1 { margin: 0; font: clamp(64px, 11vw, 150px) / .88 'Bebas Neue', sans-serif; letter-spacing: 2px; }
.gallery-hero p:last-child { max-width: 620px; margin: 18px auto 0; color: #aaa; }
.gallery-content { padding: 0 7% 110px; }
.gallery-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; max-width: 1100px; margin: 0 auto 36px; }
.gallery-filters button { padding: 11px 16px; border: 1px solid #464646; border-radius: 999px; background: #111; color: #bbb; font: 600 10px Inter, Arial, sans-serif; letter-spacing: 1px; cursor: pointer; }
.gallery-filters button.active, .gallery-filters button:hover { border-color: #f4f3ef; background: #f4f3ef; color: #111; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: auto; }
.gallery-card { position: relative; min-height: 240px; margin: 0; border-radius: 16px; overflow: hidden; background: #171717; cursor: zoom-in; }
.gallery-card img { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; filter: grayscale(.18); transition: transform .45s ease, filter .45s ease; }
.gallery-card:hover img { transform: scale(1.08); filter: none; }
.gallery-card figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 44px 18px 16px; background: linear-gradient(transparent, rgb(0 0 0 / .86)); color: #fff; font: 26px 'Bebas Neue', sans-serif; letter-spacing: .6px; }
.gallery-card small { display: block; margin-top: 4px; color: #d2d2d2; font: 600 9px Inter, Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
.gallery-empty { max-width: 600px; margin: 42px auto; padding: 28px; border: 1px dashed #444; border-radius: 16px; color: #aaa; text-align: center; }
.gallery-empty[hidden] { display: none; }
.gallery-lightbox { position: fixed; z-index: 50; inset: 0; display: none; place-items: center; padding: 68px 24px 24px; background: rgb(0 0 0 / .92); }
.gallery-lightbox.open { display: grid; }
.gallery-lightbox-content { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(230px, .7fr); align-items: center; width: min(1180px, 94vw); max-height: 84vh; overflow: auto; border: 1px solid #303030; border-radius: 16px; background: #101010; }
.gallery-lightbox img { width: 100%; max-height: 84vh; border-radius: 16px; object-fit: contain; }
.gallery-lightbox-copy { padding: 28px; }
.gallery-lightbox-copy .eyebrow { margin: 0 0 10px; color: #aaa; font: 600 10px / 1.5 Inter, Arial, sans-serif; letter-spacing: 2px; }
.gallery-lightbox-copy h2 { margin: 0 0 16px; color: #fff; font: 38px / .95 'Bebas Neue', sans-serif; letter-spacing: 1px; }
.gallery-lightbox-copy p:last-child { margin: 0; color: #c8c8c8; font: 14px / 1.7 Inter, Arial, sans-serif; }
.gallery-close { position: absolute; top: 18px; right: 24px; border: 0; background: transparent; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }
@media (max-width: 760px) { .gallery-page { padding-top: 62px; } .gallery-hero { padding: 78px 5% 52px; } .gallery-content { padding: 0 5% 75px; } .gallery-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .gallery-filters button { flex: 0 0 auto; } .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; } .gallery-card, .gallery-card img { min-height: 180px; } .gallery-card figcaption { padding: 32px 12px 12px; font-size: 21px; } .gallery-lightbox { padding: 58px 14px 14px; } .gallery-lightbox-content { grid-template-columns: 1fr; width: min(94vw, 520px); max-height: 88vh; } .gallery-lightbox img { max-height: 54vh; border-radius: 16px 16px 0 0; } .gallery-lightbox-copy { padding: 20px; } .gallery-lightbox-copy h2 { font-size: 32px; } }