/* =====================================================================
   VESPERS — Gallery archive page
   Inherits tokens + .gal-grid/.gtile (from main.css). Mobile-first.
   ===================================================================== */

/* ---------- Hero ---------- */
.gp-hero{position:relative; overflow:hidden; background:var(--ink-900); color:var(--on-dark-1);
  padding-top:clamp(108px,16vw,156px); padding-bottom:clamp(40px,7vw,80px);}
.gp-hero-bg{position:absolute; inset:0; z-index:0;}
.gp-hero-bg img{width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06);
  transition:opacity 1.2s var(--ease-veil), transform 16s var(--ease-veil);}
.js .gp-hero-bg img.lit{opacity:.4; transform:scale(1);}
.gp-hero-scrim{position:absolute; inset:0; z-index:1; background:
  linear-gradient(110deg, rgba(20,22,46,.92) 0%, rgba(20,22,46,.74) 50%, rgba(20,22,46,.55) 100%),
  radial-gradient(58% 60% at 22% 30%, rgba(226,203,148,.18), transparent 62%);}
.gp-hero .hero-arch{bottom:-28%;}
.gp-hero-inner{position:relative; z-index:2; max-width:60ch;}
.gp-hero .mvt .num{font-family:var(--font-display); color:var(--gilt-300);}
.gp-hero h1{color:var(--on-dark-1); font-size:clamp(2.5rem,6vw,4.4rem); line-height:1.03; margin:12px 0 0; text-shadow:0 2px 40px rgba(20,22,46,.5);}
.gp-hero .eyebrow{margin-top:14px;}
.gp-hero .lead{color:var(--on-dark-2); margin-top:16px; max-width:52ch;}

/* ---------- Archive ---------- */
.gp-archive{background:var(--parchment-50);}
/* Videos / reels — distinct band, same masonry + reel modal */
.gp-reels{background:var(--surface-warm); border-top:1px solid var(--border-soft);}
.gp-tiktok-link{color:var(--accent-strong); font-weight:700; white-space:nowrap; text-transform:none; letter-spacing:0;}
.gp-tiktok-link vm-icon{vertical-align:-2px; margin-left:1px;}
.gp-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap;}
.gp-head .kicker{margin-top:10px;}
.gp-count{font:700 .72rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-strong);
  background:var(--gilt-100); padding:9px 16px; border-radius:999px;}

.gp-filter{margin-top:clamp(22px,3vw,30px);}

/* denser masonry for the archive; dense flow keeps the weave tight when filtered */
.gp-grid{margin-top:clamp(22px,3vw,32px); grid-auto-flow:dense;}
.gtile.is-hidden{display:none;}
/* a category ribbon revealed on hover/focus */
.gtile-cat{position:absolute; z-index:3; top:11px; left:11px; font:700 .58rem/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-dark-1); background:rgba(20,22,46,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  padding:6px 10px; border-radius:999px; opacity:0; transform:translateY(-4px); transition:opacity .3s var(--ease), transform .3s var(--ease);}
@media (hover:hover){ .gtile:hover .gtile-cat{opacity:1; transform:none;} }
.gtile:focus-visible .gtile-cat{opacity:1; transform:none;}

@media (min-width:720px){
  .gp-grid{grid-auto-rows:210px;}
  .gtile.tall{grid-row:span 2;}
}
@media (min-width:1080px){
  .gp-grid{grid-template-columns:repeat(4,1fr);}
}

/* ---------- Closing scripture band ---------- */
.gp-verse{position:relative; overflow:hidden; color:var(--on-dark-1); background:var(--ink-900);
  padding-block:clamp(54px,8vw,104px);}
.gp-verse-bg{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  background-image:linear-gradient(rgba(20,22,46,.82), rgba(20,22,46,.92)),
    url('../media/images/images-compressed/vmm-gallery-26.webp');}
/* Wider wrapper (rem-based so it isn't tied to the small body font) so the
   full verse settles into ~2 tidy lines on desktop. */
.gp-verse-inner{position:relative; z-index:2; text-align:center; max-width:min(46rem,92vw); margin-inline:auto; display:flex; flex-direction:column; align-items:center; gap:14px;}
.gp-verse-mark{color:var(--gilt-300);}
.gp-verse .scripture{color:var(--on-dark-1); letter-spacing:-.01em;
  font-size:clamp(1.35rem,2.3vw,1.8rem); line-height:1.45;
  /* safety cap so it never sprawls; sized to hold the full verse in 2 lines */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;}
.gp-verse .cite{color:var(--gilt-300);}
@media (max-width:640px){
  .gp-verse-inner{max-width:32rem;}
  .gp-verse .scripture{-webkit-line-clamp:4; font-size:1.3rem;}
}