/* gallery.css */
.page-hero { background:var(--navy); padding:52px 40px 60px; position:relative; overflow:hidden; }
.page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:linear-gradient(90deg,transparent,var(--blue) 35%,var(--amber) 65%,transparent); }
.page-hero-inner { max-width:1100px; margin:0 auto; position:relative; }
.page-hero h1 { font-family:'Exo 2',sans-serif; font-weight:700; font-size:clamp(24px,3.5vw,36px); color:#fff; margin:10px 0 12px; }
.page-hero p { font-size:15px; color:#9EC4DC; max-width:440px; line-height:1.7; }

.filter-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.filter-tab { padding:7px 18px; border-radius:100px; font-size:13px; text-decoration:none; border:1px solid var(--border); color:var(--text-muted); background:var(--white); transition:border-color .2s,color .2s,background .2s; }
.filter-tab:hover { border-color:var(--blue); color:var(--blue); }
.filter-tab.active { background:var(--navy); border-color:var(--navy); color:#fff; }

.gallery-page { background:var(--bg); }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.gallery-item { cursor:pointer; border-radius:var(--radius); overflow:hidden; background:var(--white); border:1px solid var(--border); transition:transform .2s,box-shadow .2s; }
.gallery-item:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.1); }
.gallery-thumb-wrap { position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--blue-light); }
.gallery-thumb { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.gallery-item:hover .gallery-thumb { transform:scale(1.04); }
.gallery-overlay { position:absolute; inset:0; background:rgba(11,46,78,.45); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .2s; }
.gallery-item:hover .gallery-overlay { opacity:1; }
.gallery-overlay i { font-size:28px; color:#fff; }
.gallery-caption { padding:12px 14px; }
.gallery-caption p { font-size:13px; color:var(--text-dark); margin-top:6px; line-height:1.4; }

.gallery-cat-badge, .article-cat-badge { display:inline-block; padding:3px 10px; border-radius:100px; font-size:11px; font-weight:500; letter-spacing:.4px; }
.cat-electro { background:#FFF3E0; color:#C66B00; }
.cat-network  { background:#E3F0FF; color:#1055A8; }
.cat-cctv     { background:#F3E8FF; color:#7B2FA8; }
.cat-it       { background:#E6F9F1; color:#1A7A50; }
.cat-general  { background:#F0F0F0; color:#555; }

.gallery-empty { text-align:center; padding:60px 20px; color:var(--text-muted); }
.gallery-empty i { font-size:48px; display:block; margin-bottom:12px; opacity:.4; }

.lightbox { display:none; position:fixed; inset:0; background:rgba(5,18,30,.94); z-index:1000; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lb-content { max-width:min(860px,92vw); width:100%; position:relative; }
.lb-content img { width:100%; max-height:70vh; object-fit:contain; border-radius:var(--radius); display:block; }
.lb-info { padding:14px 4px 0; }
.lb-title { font-family:'Exo 2',sans-serif; font-size:16px; font-weight:600; color:#fff; margin-bottom:4px; }
.lb-desc  { font-size:13px; color:#8AABCA; line-height:1.6; }
.lb-close, .lb-prev, .lb-next { position:fixed; background:rgba(255,255,255,.1); border:none; color:#fff; border-radius:50%; width:44px; height:44px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; font-size:18px; }
.lb-close { top:20px; right:20px; }
.lb-prev  { top:50%; left:16px;  transform:translateY(-50%); }
.lb-next  { top:50%; right:16px; transform:translateY(-50%); }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background:rgba(255,255,255,.2); }

.gallery-preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.gallery-preview-item { aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden; background:var(--blue-light); cursor:pointer; position:relative; }
.gallery-preview-item img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.gallery-preview-item:hover img { transform:scale(1.06); }
.gallery-preview-item:hover .gallery-overlay { opacity:1; }