/* ===========================================================================
   No1 Princess — Gallery page (Figma node 587-2236)
   Layered on top of home.css (shares header/nav/drawer/contact/footer + tokens).
   Section classes use the np-gal prefix. Light page → dark nav variant.
   =========================================================================== */

/* ---- Dark nav variant (page background is light) ------------------------ */
.np-gallery-page .np-nav__brand-mark { color: var(--c-dark); }
.np-gallery-page .np-nav__toggle { border-color: rgba(29, 29, 27, 0.55); }
.np-gallery-page .np-nav__toggle span { background: var(--c-dark); }
.np-gallery-page .np-cart-toggle { border-color: rgba(29, 29, 27, 0.5); color: var(--c-dark); }
.np-gallery-page .np-cart-toggle:hover { background: var(--c-dark); color: var(--c-cream); }

/* ---- Page shell --------------------------------------------------------- */
.np-gal {
  background: var(--c-cream);
  padding-bottom: clamp(44px, 6vw, 88px);
  border-radius: 0 0 clamp(20px, 2.6vw, 44px) clamp(20px, 2.6vw, 44px);
}

/* ---- Hero --------------------------------------------------------------- */
.np-gal__head { text-align: center; padding-top: clamp(118px, 14vh, 172px); padding-bottom: clamp(22px, 3vw, 40px); }
.np-gal__title {
  font-family: var(--font-display); font-weight: 400; color: var(--c-dark);
  font-size: clamp(56px, 9vw, 128px); line-height: 1; letter-spacing: -0.05em; margin: 0 0 16px;
}
.np-gal__intro {
  max-width: 640px; margin: 0 auto;
  font-family: var(--font-body); font-weight: 500; font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.6; color: var(--c-dark);
}

/* ---- Image grid --------------------------------------------------------- */
.np-gal__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.np-gal__cell {
  position: relative;
  margin: 0;
  aspect-ratio: 336 / 530;
  overflow: hidden;
  background: var(--c-beige);
}
.np-gal__cell--wide { grid-column: span 2; aspect-ratio: 684 / 530; }
.np-gal__cell img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ---- Load more ---------------------------------------------------------- */
.np-gal__more { margin-top: 12px; }
.np-gal__loadmore {
  display: block; width: 100%; padding: clamp(16px, 1.6vw, 24px);
  background: transparent; border: 1px solid rgba(29, 29, 27, 0.25);
  color: var(--c-gray); font-family: var(--font-body); font-weight: 800;
  font-size: clamp(13px, 1vw, 16px); letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.np-gal__loadmore:hover { background: var(--c-dark); color: var(--c-cream); border-color: var(--c-dark); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .np-gal__grid { grid-template-columns: repeat(2, 1fr); }
  .np-gal__cell--wide { grid-column: span 2; aspect-ratio: 684 / 420; }
}
@media (max-width: 520px) {
  .np-gal__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
}