/**
 * Gallery landing + category pages (shop/gallery.html, shop/gallery-category.html).
 * Reuses lux.css page tokens (--lux-accent, --lux-surface, --lux-line) and
 * styles.css's --pink/--pink-deep soft-highlight tokens already used
 * site-wide (css/colour-rail.css, css/checkout-extras.css, css/apex-ui.css)
 * — no new palette, no new font.
 */

.gallery-page {
  max-width: 74rem;
  margin: 0 auto;
}

.gallery-page__intro {
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--lux-muted, #6e5c63);
  margin: 0.35rem 0 0;
}

.gallery-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--lux-muted, #6e5c63);
}

/* ── Landing page: category cards ─────────────────────────────────────── */

.gallery-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.75rem;
  margin-top: 2.25rem;
}

.gallery-cat-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.gallery-cat-card__frame {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--lux-surface, #faf6f7);
  position: relative;
}

.gallery-cat-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gallery-cat-card__img--empty {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, #fffbfc 0%, var(--pink, #f8e8ec) 100%);
}

@media (hover: hover) {
  .gallery-cat-card:hover .gallery-cat-card__img:not(.gallery-cat-card__img--cycle) {
    transform: scale(1.045);
  }
}

/* Second image layer, crossfaded on top of the static thumbnail for the
   hover/idle cycling effect (js/gallery.js's wireCardCycling) — absent
   entirely when prefers-reduced-motion is set, since that JS never runs
   at all in that case and this layer simply stays empty/invisible. */
.gallery-cat-card__img--cycle {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.gallery-cat-card.is-cycling .gallery-cat-card__img--cycle {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-cat-card__img--cycle {
    transition: none;
    display: none;
  }
}

.gallery-cat-card__label {
  display: block;
  margin-top: 0.85rem;
  font-family: "Poppins", "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--lux-ink, #2a2226);
  position: relative;
  padding-left: 0.6rem;
}

/* Small soft-pink accent mark next to each category label — the only
   colour treatment on the landing page besides the imagery itself. */
.gallery-cat-card__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 0.28rem;
  height: 0.9rem;
  border-radius: 2px;
  background: var(--pink-deep, #e8b4c4);
}

/* ── Category page: image grid ────────────────────────────────────────── */

.gallery-back-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lux-accent, #7a1528);
  text-decoration: none;
  margin-bottom: 0.75rem;
}
.gallery-back-link:hover {
  text-decoration: underline;
}

.gallery-shop-cta {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  background: var(--pink, #faf0f2);
  color: var(--lux-accent, #7a1528);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--pink-deep, #e8b4c4);
  transition: background 0.2s ease;
}
.gallery-shop-cta:hover {
  background: var(--pink-deep, #e8b4c4);
}
.gallery-shop-cta.hidden {
  display: none;
}

/* Matches .gallery-cat-grid's card size/density (the main Gallery page,
   used as the visual reference) rather than its own previous smaller
   11rem/0.9rem tiles, which read as noticeably smaller and sparser than
   the landing page despite a smaller gap - the real driver was tile
   width (more, smaller columns), not the gap itself. */
.gallery-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}

.gallery-tile {
  /* .gallery-tile is a <figure> (js/gallery.js), which carries the
     browser's default UA-stylesheet margin (1em 40px) if not reset here.
     That default margin was silently eating 80px of horizontal space per
     tile inside its grid column - the real reason tiles stayed visibly
     small even after enlarging .gallery-tile-grid's column/gap sizing.
     .gallery-cat-card (main Gallery page) is an <a>, which has no such
     default margin, which is why it never showed this problem. */
  margin: 0;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--lux-surface, #faf6f7);
}

.gallery-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
}

/* Deter the normal browser save/share/context-menu experience on Gallery
   photos (see js/protect-images.js for the matching contextmenu/dragstart
   handling) — scoped to Gallery images only, never site-wide. Does not
   affect click/tap (the lightbox still opens normally), scrolling, or
   keyboard/focus behaviour. */
.gallery-tile__img,
.gallery-cat-card__img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

@media (max-width: 640px) {
  .gallery-cat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .gallery-tile-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .gallery-cat-card__label {
    font-size: 0.88rem;
  }
}