/* ======================================================
   GALLERY — Matches Classes & Staff (lava-lamp + underline)
====================================================== */

/* Tokens (fallbacks in case styles.css isn't first) */
:root{
  --green:#0abe67;
  --red:#fd2f18;
  --yellow:#fece00;
  --purple:#97448c;
  --blue:#1888de;
}

/* Base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; background:#fff; }

/* ------------------------------------------------------
   PAGE-WIDE STATIC LAVA-LAMP BACKGROUND (like Classes)
------------------------------------------------------ */
main::before{
  content:"";
  position:fixed;
  inset:-25vmax;               /* bleed beyond edges so it fills on scroll */
  z-index:-1;
  background:
    radial-gradient(35vmax 35vmax at 20% 30%, var(--green) 0 38%, transparent 60%),
    radial-gradient(32vmax 32vmax at 80% 22%, var(--red)   0 38%, transparent 60%),
    radial-gradient(40vmax 40vmax at 52% 77%, var(--yellow)0 38%, transparent 60%),
    radial-gradient(30vmax 30vmax at 14% 74%, var(--purple)0 38%, transparent 60%),
    radial-gradient(36vmax 36vmax at 86% 70%, var(--blue)  0 38%, transparent 60%);
  filter: blur(28px) saturate(115%);
  opacity:.28;
  background-color:#fff;       /* fallback base */
  pointer-events:none;
}

/* ------------------------------------------------------
   HERO (clear old bg & decorations, keep spacing)
------------------------------------------------------ */
.page-hero{
  position:relative;
  overflow:hidden;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  background: transparent !important;
}

/* Remove any previous hero blobs/dots so lava-lamp shows cleanly */
.page-hero::before,
.page-hero::after,
.page-hero .container::before{ content:none !important; }

/* Title + multi-stripe UNDERLINE (center-grow, matches Classes) */
.page-hero .title{
  font-weight:900; letter-spacing:.2px;
  text-shadow:0 6px 18px rgba(0,0,0,.08);
  text-align:center;
  opacity:0; transform:translateY(12px);
  animation: fadeUpIn .7s cubic-bezier(.2,.65,.2,1) .05s forwards;
  position:relative;
  padding-bottom:14px; /* space for underline */
}
.page-hero .title::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:160px; max-width:40vw; height:6px; border-radius:999px;
  background:
    linear-gradient(90deg,
      var(--green) 0 20%,
      var(--red)   20% 40%,
      var(--yellow)40% 60%,
      var(--purple)60% 80%,
      var(--blue)  80% 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  transform:translateX(-50%) scaleX(0);
  transform-origin:center;
  animation: underlineGrow .7s cubic-bezier(.2,.7,.2,1) .18s forwards;
}

.page-hero .sub{
  opacity:0; transform:translateY(10px);
  color:#4b5563; text-align:center;
  animation: fadeUpIn .75s cubic-bezier(.2,.65,.2,1) .22s forwards;
}

/* ------------------------------------------------------
   GALLERY GRID
------------------------------------------------------ */
.gallery-section{ padding:2rem 0 3rem; }
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.gallery-grid a{
  position:relative; display:block; overflow:hidden; border-radius:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.10); background:#f2f2f2;
}
.gallery-grid img{
  width:100%; height:220px; object-fit:cover; object-position:center;
  transition: transform .4s ease, filter .4s ease;
}
.gallery-grid a:hover img{
  transform: scale(1.05);
  filter: contrast(1.05) saturate(1.05);
}
/* Optional caption pill */
.gallery-grid .cap{
  position:absolute; left:8px; bottom:8px; padding:.25rem .5rem;
  color:#fff; font-weight:700; font-size:.9rem; border-radius:10px;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}

/* Lightbox */
.modal-content img{ width:100%; height:auto; max-height:80vh; object-fit:contain; }

/* Animations */
@keyframes fadeUpIn{ to{ opacity:1; transform:translateY(0); } }
@keyframes underlineGrow{ to{ transform:translateX(-50%) scaleX(1); } }

@media (prefers-reduced-motion:reduce){
  .page-hero .title,
  .page-hero .sub{ animation:none!important; opacity:1!important; transform:none!important; }
  .page-hero .title::after{ animation:none!important; transform:none!important; }
}
/* --- Bring the Gallery header down from the fixed nav --- */

/* Fallbacks in case styles.css didn't define this var */
:root{ --nav-h: 96px; }                  /* desktop nav height */
@media (max-width: 991.98px){
  :root{ --nav-h: 72px; }                /* tablet/phone nav height */
}

/* Override only the TOP padding on the hero */
.page-hero{
  /* add the navbar height + extra breathing room */
  padding-top: calc(var(--nav-h, 72px) + clamp(24px, 5.5vw, 48px));
}

/* Phones: a touch more room + respect notches */
@media (max-width: 575.98px){
  .page-hero{
    padding-top: calc(var(--nav-h, 72px) + 32px + env(safe-area-inset-top, 0));
  }
}