/* ==========================================================
   gallery.css - media gallery (masonry grid + lightbox). Banner comes from pages.css.
   ========================================================== */
.gallery-section { padding: 40px 0 64px; }
.gallery-count { margin: 0 0 18px; color: var(--muted-color); font-size: .92rem; }
.gallery-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 56px 0; text-align: center; color: var(--muted-color); }
.gallery-empty svg { color: #c5ccd6; }

/* masonry via CSS columns: photos keep their own proportions */
.gallery-masonry { column-count: 1; column-gap: 16px; }
.g-item { position: relative; display: block; margin: 0 0 16px; overflow: hidden; break-inside: avoid; border-radius: 12px; background: var(--primary-light); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); cursor: zoom-in; }
.g-item img { display: block; width: 100%; height: auto; transition: transform .5s ease; }
.g-item:hover img, .g-item:focus-visible img { transform: scale(1.06); }
.g-item:focus-visible { outline: 3px solid var(--secondary-color); outline-offset: 3px; }

.g-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; padding: 16px; text-align: center; color: var(--white); background: linear-gradient(to top, rgba(0, 60, 30, .85), rgba(0, 60, 30, 0) 60%); opacity: 0; transition: opacity var(--transition); }
.g-item:hover .g-overlay, .g-item:focus-visible .g-overlay { opacity: 1; }
.g-zoom { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--secondary-color); color: #1f2937; }
.g-title { font-family: var(--font-heading); font-weight: 600; line-height: 1.3; }
@media (hover: none) { .g-overlay { opacity: 1; background: linear-gradient(to top, rgba(0, 60, 30, .7), rgba(0, 60, 30, 0) 45%); } .g-zoom { display: none; } }

.gallery-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 32px; }
.gallery-pagination a { min-width: 40px; padding: 8px 12px; text-align: center; border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); text-decoration: none; }
.gallery-pagination a.current, .gallery-pagination a:hover { background: var(--primary-color); border-color: var(--primary-color); color: var(--white); }

@media (min-width: 560px)  { .gallery-masonry { column-count: 2; } }
@media (min-width: 900px)  { .gallery-masonry { column-count: 3; } }
@media (min-width: 1200px) { .gallery-masonry { column-count: 4; } }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 20, 14, .94); color: var(--white); }
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(8, 20, 14, .94); }
.lightbox figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; margin: 0; padding: 64px 16px 24px; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.lightbox figcaption { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 720px; text-align: center; }
.lightbox figcaption strong { font-family: var(--font-heading); font-size: 1.1rem; }
.lightbox figcaption span { opacity: .85; }
.lightbox figcaption small { margin-top: 4px; opacity: .6; }
.lightbox figcaption:empty { display: none; }

.lb-btn { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--white); cursor: pointer; transition: background var(--transition), color var(--transition); }
.lb-btn:hover { background: var(--secondary-color); color: #1f2937; }
.lb-btn:focus-visible { outline: 3px solid var(--secondary-color); outline-offset: 2px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-btn[hidden] { display: none; }
@media (max-width: 640px) { .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; } .lb-prev { left: 16px; } .lb-next { right: 16px; } .lightbox figure { padding-bottom: 76px; } }