/* ==========================================================================
   Generational Abundance — Gallery (masonry layout)
   Replaces the broken Bootstrap grid with a clean, responsive masonry.
   3 columns (large) / 2 columns (medium) / 1 column (mobile).
   ========================================================================== */

.ga-gallery {
  column-gap: 24px;
  column-count: 3;          /* large screens */
}

@media (max-width: 991.98px) {
  .ga-gallery { column-count: 2; }   /* medium / tablet */
}

@media (max-width: 575.98px) {
  .ga-gallery { column-count: 1; }   /* mobile */
}

/* Each photo card */
.ga-card {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 0 24px;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.14);
  break-inside: avoid;          /* keep a card from splitting across columns */
  -webkit-column-break-inside: avoid;
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}

.ga-card img {
  display: block;
  width: 100%;
  height: auto;                 /* natural aspect ratio — no awkward cropping */
  transition: transform 0.6s ease;
}

/* Gold hover overlay */
.ga-card .ga-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(218, 165, 32, 0.92), rgba(255, 193, 7, 0.72));
  opacity: 0;
  transition: opacity 0.45s ease;
  z-index: 1;
}

/* Centred expand icon */
.ga-card .ga-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 74px;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 50%;
  opacity: 0;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.ga-card .ga-icon i {
  color: #DAA520;
  font-size: 24px;
}

/* Hover state */
.ga-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.ga-card:hover img        { transform: scale(1.07); }
.ga-card:hover .ga-overlay { opacity: 1; }
.ga-card:hover .ga-icon   { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Accessible keyboard focus */
.ga-card:focus-visible {
  outline: 3px solid #DAA520;
  outline-offset: 3px;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ga-card,
  .ga-card img,
  .ga-card .ga-overlay,
  .ga-card .ga-icon { transition: none; }
  .ga-card:hover { transform: none; }
  .ga-card:hover img { transform: none; }
}