/* ============================================================
   NORIANA — Gallery page
   Page header (floating photo cards), marquee strip, and the
   per-look gallery grid. Shared chrome (nav, footer, cart, buttons,
   reveal/mask primitives, .wrap/.sec-head) lives in style.css.
   ============================================================ */

/* ============================================================
   Page header (static split - text left, floating images right)
   ============================================================ */
.pagehead{position:relative;background:var(--bg);overflow:hidden;padding:calc(var(--topbar) + 6.5rem) var(--pad) clamp(3rem,7vh,4.5rem)}
.pagehead__grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.pagehead__in{color:var(--primary)}
.pagehead__in h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1.06;margin-top:.7rem;max-width:15ch}
.pagehead__in p{max-width:38ch;margin:1.2rem 0 0;color:rgba(26,26,26,.62);font-size:1.08rem}
.pagehead__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.9rem}
.pagehead__cta .btn--light{color:var(--primary)}
.pagehead__cta .btn--light::before{background:var(--primary)}
.pagehead__cta .btn--light:hover{color:var(--bg)}

.pagehead__float{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.4rem)}
.pf-col{display:grid;gap:clamp(1rem,2vw,1.4rem)}
.pf-col.down{margin-top:clamp(1.6rem,5vw,3.2rem)}
.pf-card{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:3/4;background:var(--secondary);box-shadow:0 26px 50px -22px rgba(17,17,17,.28);animation:floaty 6.5s ease-in-out infinite}
.pf-card img{width:100%;height:100%;object-fit:cover;display:block}
.pf-d1{animation-delay:0s}
.pf-d2{animation-delay:1.6s}
.pf-d3{animation-delay:.8s}
.pf-d4{animation-delay:2.3s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ============================================================
   Marquee strip
   ============================================================ */
/* ============================================================
   Gallery grid
   ============================================================ */
.gal__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--section-pad);margin-bottom:1.6rem}
.gal__more-btn{margin-bottom:0}
.gal__card{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:3/4;background:var(--secondary);flex:0 1 calc((100% - 4*var(--section-pad))/5)}
.gal__card img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.gal__card:hover img{transform:scale(1.06)}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:1080px){
  .gal__card{flex-basis:calc((100% - 2*var(--section-pad))/3)}
}
@media(max-width:860px){
  .pagehead{padding-top:calc(var(--topbar) + 4.5rem)}
  .pagehead__grid{grid-template-columns:1fr;gap:2.4rem}
  .pagehead__in{display:contents}
  .pagehead__in h1{max-width:none}
  .pagehead__copy{order:1}
  .pagehead__float{order:2}
  /* CTAs sit under the floating image grid, side by side */
  .pagehead__cta{order:3;margin-top:1.6rem;flex-wrap:nowrap}
  .pagehead__cta .btn{flex:1 1 0;min-width:0;padding:.9rem .6rem;font-size:.7rem;letter-spacing:.1em;white-space:nowrap}
  .pf-col.down{margin-top:2.2rem}
  .gal__card{flex-basis:calc((100% - 1*var(--section-pad))/2)}
  /* Tighter gap between each product's gallery section on mobile */
  .wrap{padding-block:clamp(1.8rem,4vh,2.6rem)}
  .gal__grid{margin-bottom:1rem}
}
@media(max-width:560px){
  .pagehead{padding-top:calc(var(--topbar) + 3.5rem)}
  .wrap{padding-block:clamp(1.4rem,3vh,2rem)}
  .gal__grid{gap:.7rem}
  .gal__card{flex-basis:calc((100% - .7rem)/2)}
}