/* ==========================================================================
   Ruble Weddings — galleries.css
   Page-specific styles for /galleries. Loads AFTER styles.css and reuses its
   palette, fonts, buttons and reveal animations.
   Layout rule (learned the hard way on iOS): every grid track is minmax(0,1fr)
   and every <img> carries width/height, so nothing can blow out the viewport.
   ========================================================================== */

/* ---------- hero ---------- */
.g-hero{position:relative;height:100vh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;color:#fff}
.g-hero .bg{position:absolute;inset:-8% 0;background-size:cover;background-position:center 40%;will-change:transform;animation:gHeroIn 2.6s var(--ease) both}
@keyframes gHeroIn{from{transform:scale(1.08);opacity:0}to{transform:scale(1);opacity:1}}
.g-hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,17,13,.35) 0%,rgba(20,17,13,.08) 40%,rgba(20,17,13,.62) 100%)}
.g-hero-inner{position:relative;z-index:2;text-align:center;padding:0 1.5rem clamp(5.5rem,14vh,8.5rem);max-width:860px}
.g-hero .label{color:rgba(255,255,255,.85)}
.g-hero h1{font-size:clamp(2.8rem,7.4vw,6rem);font-weight:300;line-height:1.02;margin:.8rem 0 1.1rem;text-shadow:0 2px 30px rgba(0,0,0,.3);text-wrap:balance}
.g-hero h1 em{font-style:italic}
.g-hero p{font-size:clamp(1rem,1.4vw,1.12rem);color:rgba(255,255,255,.9);max-width:560px;margin:0 auto}

/* ---------- one wedding = one row ----------
   Desktop: carousel on one half, story on the other (sides swap every row).
   Mobile: names → carousel → story + button, stacked. */
.story{padding:clamp(4rem,10vh,7.5rem) 0}
.story-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(1.2rem,4.5vw,3.5rem);
  display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"title" "car" "body";gap:1.8rem}
.story-title{grid-area:title}
.carousel{grid-area:car}
.story-body{grid-area:body}

@media(min-width:960px){
  .story-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"car title" "car body";column-gap:clamp(3rem,6vw,6.5rem);row-gap:0;align-items:center}
  .story.alt .story-wrap{grid-template-areas:"title car" "body car"}
  .story-title{align-self:end;padding-bottom:1.4rem}
  .story-body{align-self:start}
}

.story-title h2{font-size:clamp(2.6rem,5.4vw,4.8rem);line-height:.98;font-weight:300;text-wrap:balance}
.story-title h2 em{font-style:italic}
.story-body .place{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.story-body .synopsis{color:var(--ink-soft);max-width:44ch;margin-bottom:2.2rem}
.story-body .btn{padding:1.05rem 2.2rem}
.story-body .btn .arr{transition:transform .5s var(--ease)}
.story-body .btn:hover .arr{transform:translateX(5px)}

/* ---------- carousel ----------
   One main frame in focus, the previous and next frames faded behind it.
   Slide sizes are set by galleries.js so portraits and landscapes both
   show uncropped. */
.carousel{position:relative;min-width:0}
.c-stage{position:relative;height:clamp(330px,112vw,540px);overflow:hidden;transition:height .9s var(--ease);touch-action:pan-y;outline:none}
@media(min-width:960px){.c-stage{height:clamp(460px,72vh,700px)}}
.c-slide{position:absolute;left:50%;top:50%;margin:0;overflow:hidden;background:var(--cream);
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
  transition:transform 1s var(--ease),width 1s var(--ease),height 1s var(--ease),opacity .9s ease,filter .9s ease;will-change:transform,opacity}
.c-slide img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.c-slide.is-active{opacity:1;z-index:3;pointer-events:auto;box-shadow:0 24px 40px -28px rgba(34,31,26,.4)}
.c-slide.is-prev,.c-slide.is-next{opacity:.32;z-index:2;pointer-events:auto;cursor:pointer;filter:saturate(.7)}
.c-slide.is-prev:hover,.c-slide.is-next:hover{opacity:.5}

.c-controls{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.2rem}
.c-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--ink);background:transparent;color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease)}
.c-btn:hover{background:var(--ink);color:var(--paper)}
.c-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.2}
.c-count{font-size:.68rem;letter-spacing:.3em;color:var(--ink-soft);font-variant-numeric:tabular-nums;min-width:5.5rem;text-align:center}
.c-count b{font-weight:400;color:var(--ink)}
.c-bar{position:relative;height:1px;width:min(220px,50%);margin:1.1rem auto 0;background:var(--line)}
.c-bar i{position:absolute;left:0;top:0;height:100%;background:var(--accent);transition:width .9s var(--ease)}

/* row separators */
.story + .story{border-top:1px solid var(--line)}

/* ---------- closing ---------- */
.g-close{background:var(--film-bg);color:#F4EEE4;text-align:center}
.g-close .label{color:#caa87f}
.g-close h2{font-size:clamp(2.4rem,5.5vw,4.4rem);color:#F7F1E7;font-weight:300;line-height:1.05;margin:.8rem 0 1.2rem}
.g-close h2 em{font-style:italic}
.g-close p{color:rgba(247,241,231,.72);max-width:50ch;margin:0 auto 2.4rem}
.g-close .cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* nav: mark the current page */
.nav-links a[aria-current="page"]::after{width:100%}

@media(prefers-reduced-motion:reduce){
  .g-hero .bg{animation:none}
  .c-slide,.c-bar i{transition:none}
}
.story-body .btn.is-off{opacity:.45;cursor:default;pointer-events:none}