/* Unified Gallery Styles (aligned with news styles) */
:root{
  --primary:#667eea;--secondary:#764ba2;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--radius:12px;--radius-lg:16px;--shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);--shadow-lg:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);--transition:all .25s ease;
}

/* Grid */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.gallery-grid.masonry{ column-count: 4; column-gap: 1.25rem; }
.gallery-grid.masonry .gallery-card{ break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 1.25rem; }
@media (max-width: 1200px){ .gallery-grid.masonry{ column-count: 3; } }
@media (max-width: 900px){ .gallery-grid.masonry{ column-count: 2; } }
@media (max-width: 600px){ .gallery-grid.masonry{ column-count: 1; } }
.gallery-card{ background:#fff; border:1px solid var(--gray-100); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); transition: var(--transition); }
.gallery-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gray-200); }
.gallery-card .img{ position:relative; background:var(--gray-100); aspect-ratio: 4/3; overflow:hidden; }
.gallery-card img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; display:block; }
.gallery-card:hover img{ transform: scale(1.06) rotate(.5deg); }

/* Overlays & badges */
.zoom-indicator{ position:absolute; right:.75rem; bottom:.75rem; background: rgba(17,24,39,.75); color:#fff; width:34px; height:34px; border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:14px; box-shadow:0 6px 16px rgba(0,0,0,.25); }
.badge{ position:absolute; top:.75rem; left:.75rem; background: rgba(255,255,255,.92); color: var(--gray-800); border:1px solid var(--gray-200); border-radius:999px; padding:.3rem .55rem; font-size:.8rem; display:inline-flex; gap:.35rem; align-items:center; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.album-badge{ top: auto; bottom:.75rem; left:.75rem; }
.year-badge{ opacity:.96; }
.badge i{ color: var(--primary); }

/* Body */
.gallery-card .body{ padding: .9rem 1rem; }
.gallery-card .title{ font-weight:700; color:var(--gray-900); font-size:1rem; margin-bottom:.35rem; display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.gallery-card .meta{ color:var(--gray-600); font-size:.9rem; display:flex; flex-direction:column; gap:.2rem; }
.gallery-card .meta-line{ display:flex; align-items:center; gap:.4rem; }
.gallery-card .meta-line i{ color: var(--gray-400); font-size:.95em; }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ padding:.35rem .6rem; border:1px solid var(--gray-200); border-radius:999px; background:#fff; cursor:pointer; font-size:.9rem; color:var(--gray-700); transition: var(--transition); }
.chip:hover{ background: var(--gray-100); }
.chip.active{ background: linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; border-color: transparent; }

/* View mode buttons */
.view-mode-buttons{ display:flex; gap:.5rem; }
.view-mode-buttons .view-mode-btn{ display:inline-flex; align-items:center; justify-content:center; padding:.6rem .8rem; border:2px solid var(--gray-200); border-radius:12px; background: #fff; color: var(--gray-700); text-decoration:none; transition: var(--transition); }
.view-mode-buttons .view-mode-btn:hover{ background: var(--gray-100); border-color: var(--gray-300); }
.view-mode-buttons .view-mode-btn.active{ background: linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; border-color: transparent; box-shadow: 0 4px 12px rgba(102,126,234,.35); }

/* Albums grid */
.album-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.album-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--gray-100); border-radius:16px; overflow:hidden; box-shadow: var(--shadow); text-decoration:none; color:inherit; transition: var(--transition); }
.album-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gray-200); }
.album-cover{ position:relative; background: var(--gray-100); aspect-ratio: 4/3; overflow:hidden; }
.album-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.album-cover-placeholder{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); font-size:2rem; }
.album-body{ padding:.9rem 1rem; }
.album-title{ font-weight:800; color: var(--gray-900); font-size:1.05rem; margin-bottom:.25rem; }
.album-meta{ color: var(--gray-600); font-weight:600; }

/* Suggestions (autocomplete) */
.autocomplete{ position:relative; }
.suggestions{ position:absolute; left:0; right:0; top: calc(100% + 6px); background:#fff; border:1px solid var(--gray-200); border-radius:12px; z-index:20; display:none; max-height:240px; overflow:auto; box-shadow: var(--shadow-lg); }
.suggestions.open{ display:block; }
.suggestions div{ padding:.5rem .75rem; cursor:pointer; }
.suggestions div:hover{ background: var(--gray-100); }
.suggestions mark{ background:#fde68a; color:#111827; border-radius:3px; padding:0 2px; }
.suggestions div.active{ background:#e5e7eb; }

/* Minimal image modal */
body.modal-open{ overflow:hidden; }
.img-modal{ position: fixed; inset: 0; background: rgba(17,24,39,.7); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 2rem; }
.img-modal.open{ display: flex; }
.img-modal .img-modal-inner{ position: relative; max-width: 92vw; max-height: 92vh; }
.img-modal img{ max-width: 92vw; max-height: 92vh; width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); background:#111; }
.img-modal .close-btn{ position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; border-radius: 999px; border: none; background: #fff; color: var(--gray-800); box-shadow: var(--shadow-lg); cursor: pointer; display:flex; align-items:center; justify-content:center; }
.img-modal .close-btn i{ color: var(--gray-700); }

/* Lightbox controls tweaks to match design */
.lightbox .nav{ background: rgba(255,255,255,.12); }
.lightbox .close{ opacity:.9; }

/* Sidebar selects */
.filter-select{ width:100%; padding:.65rem .9rem; border:2px solid var(--gray-200); border-radius:12px; background:#fff; color:var(--gray-800); font-weight:600; transition: var(--transition); }
.filter-select:focus{ outline:none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(102,126,234,.12); }
@media (max-width:480px){
  .gallery-grid{ grid-template-columns:1fr; }
}