/* ═══════════════════════════════════════════════════════════
   Natura Dental — Galeri CSS
   ═══════════════════════════════════════════════════════════ */

/* Hero */
.ndg-hero {
    background: linear-gradient(135deg, #13134b 0%, #1e1b6e 55%, #5e5ce6 100%);
    padding: 80px 11% 64px;
    color: white;
}
.ndg-hero-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:rgba(255,255,255,.85); font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:9999px; margin-bottom:20px; }
.ndg-hero-title { font-size:clamp(2rem,4vw,3rem); font-weight:800; line-height:1.1; letter-spacing:-.02em; margin-bottom:12px; }
.ndg-hero-desc { font-size:1rem; color:rgba(255,255,255,.7); max-width:540px; }

/* Filter Tabs */
.ndg-filters { padding:32px 11% 0; background:#fff; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ndg-filter-btn { padding:8px 20px; border-radius:9999px; font-size:.8125rem; font-weight:600; border:1.5px solid #e1e0ff; color:#575993; background:white; cursor:pointer; transition:all .2s; }
.ndg-filter-btn:hover { border-color:#4441cc; color:#4441cc; }
.ndg-filter-btn.active { background:#4441cc; border-color:#4441cc; color:white; }

/* Bento Grid */
.ndg-bento-wrap { padding:32px 11% 72px; background:#fff; }
.ndg-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    gap: 12px;
}
.ndg-item {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: #f5f2ff;
}
.ndg-item--featured { grid-column: span 2; grid-row: span 2; }
.ndg-item--tall { grid-row: span 2; }
.ndg-item--wide { grid-column: span 2; }

.ndg-item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .5s ease;
}
.ndg-item:hover img { transform: scale(1.06); }

/* Overlay */
.ndg-item-overlay {
    position: absolute; inset: 0;
    background: rgba(19,19,75,.0);
    display: flex; align-items: flex-end;
    padding: 20px;
    transition: background .3s;
}
.ndg-item:hover .ndg-item-overlay { background: rgba(19,19,75,.45); }
.ndg-item-label {
    color: white; font-size: .8125rem; font-weight: 600;
    opacity: 0; transform: translateY(8px);
    transition: opacity .3s, transform .3s;
}
.ndg-item:hover .ndg-item-label { opacity: 1; transform: translateY(0); }

/* Empty placeholder */
.ndg-item-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #f5f2ff 0%, #e1e0ff 100%);
    display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;
    color: #4441cc; opacity: .4;
}
.ndg-item-placeholder svg { width: 40px; height: 40px; }
.ndg-item-placeholder span { font-size: .75rem; font-weight: 600; }

/* Lightbox */
.ndg-lightbox {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.92);
    align-items: center; justify-content: center;
}
.ndg-lightbox.active { display: flex; }
.ndg-lightbox-img {
    max-width: 90vw; max-height: 85vh;
    object-fit: contain; display: block;
}
.ndg-lightbox-close {
    position: absolute; top: 20px; right: 24px;
    width: 44px; height: 44px;
    background: rgba(255,255,255,.1); border: none; cursor: pointer;
    color: white; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: background .2s;
}
.ndg-lightbox-close:hover { background: rgba(255,255,255,.2); }
.ndg-lightbox-close svg { width: 20px; height: 20px; }
.ndg-lightbox-caption { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .875rem; }

/* Responsive */
@media (max-width: 1024px) { .ndg-bento { grid-template-columns: repeat(3, 1fr); } .ndg-item--featured { grid-column: span 2; } }
@media (max-width: 768px) { .ndg-hero,.ndg-filters,.ndg-bento-wrap { padding-left: 5%; padding-right: 5%; } .ndg-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; } .ndg-item--featured { grid-column: span 2; grid-row: span 1; } .ndg-item--tall { grid-row: span 1; } .ndg-item--wide { grid-column: span 2; } }
@media (max-width: 480px) { .ndg-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 160px; } }