/* gallery.css - photo gallery  (v01.00.00 // 06-10-26 // AH.TWC)
   Used by gallery.html and the latest-photos strip on about-us.html */
#photo-gallery { padding: 60px 0 40px; }
#photo-gallery .gal-head { text-align: center; margin-bottom: 18px; }
#photo-gallery .gal-head h2 { font-family: "Ancizar Sans", serif; color: #3747db; font-weight: 600; margin-bottom: 4px; }
#photo-gallery .gal-head p { color: #555; margin: 0; }

/* album filter buttons */
.gal-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
.gal-chip { border: 1px solid #c9ceea; background: #fff; color: #333; border-radius: 999px; padding: 7px 16px; cursor: pointer;
  font-family: "Georama", sans-serif; font-size: .95rem; transition: background .2s, color .2s, border-color .2s; }
.gal-chip span { color: #888; font-size: .8rem; margin-left: 4px; }
.gal-chip:hover { border-color: #3747db; color: #3747db; }
.gal-chip[aria-pressed="true"] { background: #3747db; border-color: #3747db; color: #fff; }
.gal-chip[aria-pressed="true"] span { color: rgba(255,255,255,.75); }

/* masonry grid: photos keep their own shape */
.gal-grid { column-count: 4; column-gap: 16px; }
@media (max-width: 1100px) { .gal-grid { column-count: 3; } }
@media (max-width: 760px)  { .gal-grid { column-count: 2; column-gap: 10px; } }

.gal-item { position: relative; display: block; margin: 0 0 16px; break-inside: avoid; overflow: hidden; border-radius: 12px;
  background: #e9ebf3; box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
@media (max-width: 760px) { .gal-item { margin-bottom: 10px; border-radius: 10px; } }
.gal-item img { display: block; width: 100%; height: auto; opacity: 0; transform: scale(1);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.gal-item img.in { opacity: 1; }
.gal-item:hover img, .gal-item:focus-visible img { transform: scale(1.05); }
.gal-item:focus-visible { outline: 3px solid #3747db; outline-offset: 2px; }

/* grey pop-up caption */
.gal-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 14px; color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(52,55,62,.96) 0%, rgba(52,55,62,.88) 55%, rgba(52,55,62,0) 100%);
  transform: translateY(101%); opacity: 0; transition: transform .35s ease, opacity .35s ease; pointer-events: none; }
.gal-cap strong { display: block; font-family: "Ancizar Sans", serif; font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
.gal-cap span { display: block; font-size: .88rem; line-height: 1.4; margin-top: 4px; color: #e3e5ea; }
.gal-item:hover .gal-cap, .gal-item:focus-visible .gal-cap { transform: translateY(0); opacity: 1; }
/* touch screens have no hover: keep a slim title bar showing */
@media (hover: none) {
  .gal-cap { transform: none; opacity: 1; padding: 22px 10px 8px; }
  .gal-cap span { display: none; }
  .gal-cap strong { font-size: .9rem; }
}

.gal-count { text-align: center; color: #777; font-size: .9rem; margin: 0 0 14px; }
.gal-empty { text-align: center; color: #555; padding: 40px 0; }
.gal-more { text-align: center; margin-top: 10px; }

/* viewer (GLightbox) caption: match the site */
.glightbox-clean .gslide-title { font-family: "Ancizar Sans", serif; font-weight: 600; font-size: 1.15rem; color: #1b1f2a; }
.glightbox-clean .gslide-desc { font-family: "Georama", sans-serif; color: #444; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .gal-item img, .gal-cap { transition: none; } }