/* ==========================================================================
   Vidyodaya Academy — gallery.php only styles
   Loaded only on gallery.php (via $extraStyles). Reuses the shared
   .gallery-grid / .gallery-slide / .lightbox / .stat-strip system from
   assets/style.css. Everything below is scoped to .gallery-grid--full so
   none of it touches the homepage's smaller gallery preview.
   ========================================================================== */

/* ==========================================================================
   Hero — light two-column hero with floating stat cards (matches the
   about.php / courses.php hero pattern, kept page-scoped like theirs)
   ========================================================================== */
.gallery-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vw, 64px) 0 clamp(56px, 8vw, 88px);
}
.gallery-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  position: relative;
  z-index: 1;
}
.gallery-hero__title { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem); font-weight: 800; letter-spacing: -0.01em; }
.gallery-hero__text { color: var(--ink-soft); max-width: 54ch; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.08rem); }
.gallery-hero__cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

.gallery-hero__visual { position: relative; padding: 28px; max-width: 440px; margin-inline: auto; }
.gallery-hero__frame {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
.gallery-hero__frame img { width: 100%; height: 100%; object-fit: cover; }

.gallery-hero__shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.gallery-hero__shape--circle {
  width: 260px; height: 260px;
  top: -30px; right: -40px;
  background: radial-gradient(circle, var(--accent-soft) 0%, rgba(227, 241, 239, 0) 70%);
}
.gallery-hero__shape--dot {
  width: 18px; height: 18px;
  left: 6px; bottom: 54px;
  background: var(--yellow);
  box-shadow: var(--shadow-md);
  z-index: 2;
}
@media (prefers-reduced-motion: no-preference) {
  .gallery-hero__shape--circle { animation: floatSlow 10s ease-in-out infinite; }
  .gallery-hero__shape--dot { animation: floatIdle 4.5s ease-in-out infinite; }
}

@media (max-width: 991.98px) {
  .gallery-hero__grid { grid-template-columns: 1fr; }
  .gallery-hero__visual { order: -1; max-width: 340px; }
}

/* ---------- Stats strip ---------- */
.gallery-stats-section { padding-top: clamp(32px, 5vw, 48px); }

/* ---------- Filter meta + tabs ---------- */
.gallery-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(20px, 3vw, 28px);
}
.gallery-meta__count { color: var(--ink-soft); font-size: 0.92rem; margin: 0; }
.gallery-meta__count strong { color: var(--ink); font-family: var(--font-display); }

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.gallery-filter {
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.gallery-filter:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.gallery-filter.is-active { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.gallery-filter.is-active:hover { color: var(--on-navy); transform: none; }

/* ---------- Tiles: hover lift + rich overlay ---------- */
/* One shared transition list for every state this tile can be in (hover
   lift, scroll reveal, filter fade) — a single declaration avoids two
   rules silently fighting over the "transition" property. */
.gallery-grid--full .gallery-slide {
  box-shadow: var(--shadow-sm);
  transition: opacity 0.7s var(--ease), transform 0.5s var(--ease), box-shadow var(--dur-base) var(--ease);
}
.gallery-grid--full .gallery-slide:hover,
.gallery-grid--full .gallery-slide:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  background: linear-gradient(0deg, rgba(12, 37, 64, 0.92) 0%, rgba(12, 37, 64, 0.5) 48%, rgba(12, 37, 64, 0.02) 78%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
.gallery-grid--full .gallery-slide:hover .gallery-overlay,
.gallery-grid--full .gallery-slide:focus-visible .gallery-overlay { opacity: 1; }

.gallery-overlay__category,
.gallery-overlay__title,
.gallery-overlay__cta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.gallery-grid--full .gallery-slide:hover .gallery-overlay__category,
.gallery-grid--full .gallery-slide:focus-visible .gallery-overlay__category { opacity: 1; transform: translateY(0); transition-delay: 0.04s; }
.gallery-grid--full .gallery-slide:hover .gallery-overlay__title,
.gallery-grid--full .gallery-slide:focus-visible .gallery-overlay__title { opacity: 1; transform: translateY(0); transition-delay: 0.09s; }
.gallery-grid--full .gallery-slide:hover .gallery-overlay__cta,
.gallery-grid--full .gallery-slide:focus-visible .gallery-overlay__cta { opacity: 1; transform: translateY(0); transition-delay: 0.14s; }

.gallery-overlay__category {
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.68rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.gallery-overlay__title {
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
}
.gallery-overlay__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
}
.gallery-overlay__cta svg { transition: transform var(--dur-fast) var(--ease); }
.gallery-grid--full .gallery-slide:hover .gallery-overlay__cta svg,
.gallery-grid--full .gallery-slide:focus-visible .gallery-overlay__cta svg { transform: translateX(4px); }

/* ---------- Filtered-out tiles ---------- */
/* JS staggers each tile's transition-delay before adding/removing this
   class, then removes it from grid flow (display:none) once the fade
   finishes, so the grid reflows cleanly instead of snapping instantly. */
.gallery-grid--full .gallery-slide.is-hidden {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* ---------- Scroll reveal ---------- */
/* JS adds .reveal-pending to each tile at setup time, then removes it via
   IntersectionObserver as the tile scrolls into view — so if JS never
   runs, tiles simply keep their default (fully visible) state instead of
   staying hidden forever. */
.gallery-grid--full .gallery-slide.reveal-pending {
  opacity: 0;
  transform: translateY(32px) scale(1.05);
}

@media (max-width: 575.98px) {
  .gallery-filters { gap: 8px; }
  .gallery-filter { padding: 8px 16px; font-size: 0.82rem; }
  .gallery-overlay { padding: 12px; }
}