:root { --gallery-gold: #c99a53; --gallery-gold-light: #f2cb82; --gallery-dark: #090b0c; --gallery-panel: #121719; --gallery-muted: #aeb6b9; }
.gallery-page { min-height: 70vh; color: #f6f1e8; background: var(--gallery-dark); }
.gallery-page *, .gallery-page *::before, .gallery-page *::after { box-sizing: border-box; }
.gallery-container { width: min(1180px, calc(100% - 36px)); margin-inline: auto; }
.gallery-hero { position: relative; overflow: hidden; padding: 150px 0 80px; text-align: center; background: radial-gradient(circle at 20% 10%, rgba(201, 154, 83, .2), transparent 34%), linear-gradient(145deg, #171c1e, #080a0b 70%); }
.gallery-hero::after { content: ""; position: absolute; inset: auto 10% 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 203, 130, .55), transparent); }
.gallery-eyebrow { display: inline-block; margin-bottom: 15px; color: var(--gallery-gold-light); font-size: .86rem; font-weight: 800; letter-spacing: .04em; }
.gallery-hero h1 { margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 4.2rem); font-weight: 900; line-height: 1.15; }
.gallery-hero p { max-width: 720px; margin: 22px auto 0; color: var(--gallery-muted); font-size: 1rem; line-height: 2; }
.gallery-section { padding: 64px 0 100px; }
.gallery-filters { display: flex; justify-content: center; gap: 10px; margin-bottom: 38px; flex-wrap: wrap; }
.gallery-filters a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; color: #d8dcdd; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; background: rgba(255, 255, 255, .035); font-size: .88rem; transition: .22s ease; }
.gallery-filters a:hover, .gallery-filters a.active { color: #15100a; border-color: var(--gallery-gold-light); background: linear-gradient(135deg, var(--gallery-gold-light), var(--gallery-gold)); text-decoration: none; transform: translateY(-2px); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gallery-card { overflow: hidden; border: 1px solid rgba(201, 154, 83, .19); border-radius: 20px; background: linear-gradient(155deg, #171d1f, #0e1112); box-shadow: 0 18px 42px rgba(0, 0, 0, .28); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; }
.gallery-card:hover { border-color: rgba(242, 203, 130, .58); box-shadow: 0 28px 65px rgba(0, 0, 0, .42); transform: translateY(-7px); }
.gallery-card-preview { position: relative; display: block; width: 100%; height: 255px; padding: 0; overflow: hidden; color: inherit; text-align: inherit; border: 0; background: #050606; cursor: pointer; }
.gallery-card-preview img, .gallery-card-preview video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease, opacity .3s ease; }
.gallery-card:hover .gallery-card-preview img, .gallery-card:hover .gallery-card-preview video { transform: scale(1.055); opacity: .82; }
.gallery-kind { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; padding: 5px 11px; color: var(--gallery-gold-light); border: 1px solid rgba(242, 203, 130, .5); border-radius: 999px; background: rgba(5, 6, 6, .72); backdrop-filter: blur(8px); font-size: .72rem; font-weight: 800; }
.gallery-kind-project { color: #172015; border-color: rgba(190, 225, 150, .72); background: rgba(190, 225, 150, .9); }
.gallery-play { position: absolute; inset: 50% auto auto 50%; z-index: 2; display: grid; width: 58px; height: 58px; place-items: center; color: #16100a; border-radius: 50%; background: linear-gradient(145deg, var(--gallery-gold-light), var(--gallery-gold)); box-shadow: 0 0 0 10px rgba(201, 154, 83, .14); opacity: .92; transform: translate(-50%, -50%); transition: transform .25s ease, box-shadow .25s ease; }
.gallery-card:hover .gallery-play { box-shadow: 0 0 0 15px rgba(201, 154, 83, .18); transform: translate(-50%, -50%) scale(1.1); }
.gallery-zoom { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 3; display: grid; width: 34px; height: 34px; place-items: center; color: #16100a; border-radius: 10px; background: linear-gradient(145deg, var(--gallery-gold-light), var(--gallery-gold)); box-shadow: 0 7px 20px rgba(0, 0, 0, .28); font-size: .78rem; transition: transform .22s ease, box-shadow .22s ease; }
.gallery-card:hover .gallery-zoom { box-shadow: 0 10px 28px rgba(0, 0, 0, .38); transform: scale(1.07); }
.gallery-card-body { padding: 19px 20px 22px; }
.gallery-card-body h2 { min-height: 52px; margin: 0 0 12px; color: #fff; font-size: 1.02rem; font-weight: 800; line-height: 1.7; }
.gallery-card-body a { display: inline-flex; align-items: center; gap: 8px; color: var(--gallery-gold-light); font-size: .82rem; font-weight: 700; }
.gallery-card-body a:hover { color: #fff; text-decoration: none; }
.gallery-empty { padding: 70px 20px; text-align: center; color: var(--gallery-muted); border: 1px dashed rgba(201, 154, 83, .35); border-radius: 20px; }
.gallery-empty i { display: block; margin-bottom: 16px; color: var(--gallery-gold); font-size: 3rem; }
.gallery-pagination { display: flex; justify-content: center; margin-top: 45px; }
.gallery-pagination .page-link { color: var(--gallery-gold-light); border-color: #343b3d; background: #121719; }
.gallery-pagination .page-item.active .page-link { color: #15100a; border-color: var(--gallery-gold); background: var(--gallery-gold); }
.gallery-detail-section { padding: 145px 0 100px; background: radial-gradient(circle at 80% 0, rgba(201, 154, 83, .15), transparent 35%), var(--gallery-dark); }
.gallery-back { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px; color: var(--gallery-gold-light); font-weight: 700; }
.gallery-back:hover { color: #fff; text-decoration: none; }
.gallery-detail-card { overflow: hidden; border: 1px solid rgba(201, 154, 83, .25); border-radius: 26px; background: var(--gallery-panel); box-shadow: 0 28px 80px rgba(0, 0, 0, .42); }
.gallery-detail-media { position: relative; display: grid; min-height: 440px; place-items: center; background: #030404; }
.gallery-detail-image { position: relative; display: block; width: 100%; padding: 0; color: inherit; border: 0; background: transparent; cursor: zoom-in; }
.gallery-detail-media img, .gallery-detail-media video { display: block; width: 100%; max-height: 72vh; object-fit: contain; }
.gallery-detail-zoom { position: absolute; top: 16px; inset-inline-end: 16px; display: grid; width: 36px; height: 36px; place-items: center; color: #15100a; border-radius: 10px; background: var(--gallery-gold-light); box-shadow: 0 8px 22px rgba(0, 0, 0, .3); font-size: .8rem; }
.gallery-detail-copy { position: relative; padding: 28px 32px 34px; }
.gallery-kind-static { position: static; display: inline-block; margin-bottom: 14px; }
.gallery-detail-copy h1 { margin: 0; color: #fff; font-size: clamp(1.45rem, 3vw, 2.35rem); font-weight: 900; line-height: 1.55; }
.gallery-detail-copy p { display: flex; align-items: center; gap: 9px; margin: 13px 0 0; color: var(--gallery-muted); font-size: .85rem; }
.gallery-modal-open { overflow: hidden; }
.gallery-modal[hidden] { display: none; }
.gallery-modal { position: fixed; inset: 0; z-index: 2100; display: grid; padding: 24px; place-items: center; opacity: 0; transition: opacity .18s ease; }
.gallery-modal.is-open { opacity: 1; }
.gallery-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .88); backdrop-filter: blur(12px); }
.gallery-modal-panel { position: relative; z-index: 1; width: min(1120px, 100%); max-height: calc(100dvh - 48px); overflow: hidden; border: 1px solid rgba(242, 203, 130, .3); border-radius: 22px; background: #080a0b; box-shadow: 0 35px 100px rgba(0, 0, 0, .7); transform: translateY(14px) scale(.985); transition: transform .18s ease; }
.gallery-modal.is-open .gallery-modal-panel { transform: translateY(0) scale(1); }
.gallery-modal-close { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; display: grid; width: 40px; height: 40px; padding: 0; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; background: rgba(5, 6, 7, .8); font-size: 1.65rem; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); }
.gallery-modal-close:hover, .gallery-modal-close:focus { color: #15100a; border-color: var(--gallery-gold-light); outline: none; background: var(--gallery-gold-light); }
.gallery-modal-stage { display: grid; min-height: 240px; max-height: calc(100dvh - 145px); place-items: center; overflow: auto; background: #030404; }
.gallery-modal-stage img, .gallery-modal-stage video { display: block; width: 100%; max-width: 100%; max-height: calc(100dvh - 145px); object-fit: contain; }
.gallery-modal-title { min-height: 66px; margin: 0; padding: 20px 68px 20px 24px; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.7; }
[dir="rtl"] ~ .gallery-modal .gallery-modal-title, .page-gallery .gallery-modal-title, .page-gallery-detail .gallery-modal-title { padding-right: 24px; padding-left: 68px; }
@media (max-width: 991px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery-hero { padding-top: 125px; } }
@media (max-width: 575px) { .gallery-container { width: min(100% - 24px, 1180px); } .gallery-grid { grid-template-columns: 1fr; } .gallery-card-preview { height: 235px; } .gallery-section { padding-top: 42px; } .gallery-detail-media { min-height: 260px; } .gallery-detail-copy { padding: 23px 20px 28px; } .gallery-zoom { top: 11px; inset-inline-end: 11px; width: 32px; height: 32px; } .gallery-modal { padding: 0; place-items: end center; } .gallery-modal-panel { width: 100%; max-height: 94dvh; border-width: 1px 0 0; border-radius: 20px 20px 0 0; } .gallery-modal-stage { max-height: calc(94dvh - 62px); } .gallery-modal-stage img, .gallery-modal-stage video { max-height: calc(94dvh - 62px); } .gallery-modal-title { min-height: 62px; padding-top: 18px; padding-bottom: 18px; font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { .gallery-page *, .gallery-page *::before, .gallery-page *::after { scroll-behavior: auto !important; transition: none !important; } }