/* ========================================================================
   828 Mega Mums by Starla — Gallery Page v1.0.0
   Page-only stylesheet. Loaded only where the gallery grid actually renders
   (the "Gallery Page" template, or a page containing [mm_gallery]).

   Everything below is scoped under .mm-gallery. There are no global img {}
   rules, no header/nav/footer selectors, and no product, wizard, cart, or
   homepage selectors, so this file cannot affect any other page.

   Colors, fonts, radius, and shadows all come from the existing sitewide
   custom properties in main.css. Nothing new is invented here.
   ======================================================================== */

.mm-gallery {
  --gal-ink: var(--color-text-dark, #2c1a1d);
  --gal-muted: var(--color-text-muted, #5e484b);
  --gal-rose: var(--color-brand-rose, #dc6496);
  --gal-canvas: var(--color-bg-neutral, #fff5f6);
  --gal-cream: var(--color-cream, #fffdfe);
  --gal-border: rgba(220, 100, 150, 0.25);
  --gal-shadow: 0 18px 50px rgba(105, 50, 72, 0.09);
  --gal-shadow-hover: 0 24px 62px rgba(105, 50, 72, 0.15);
  --gal-radius: 12px;
  --gal-shell: min(1200px, calc(100vw - 40px));
  --gal-gap: 28px;

  position: relative;
  padding: 0 0 clamp(56px, 8vw, 104px);
  background:
    radial-gradient(circle at 8% 4%, rgba(255, 182, 193, 0.26), transparent 24rem),
    radial-gradient(circle at 94% 12%, rgba(220, 100, 150, 0.1), transparent 26rem),
    var(--gal-canvas);
  color: var(--gal-ink);
  font-family: var(--font-body, 'Poppins', sans-serif);
  line-height: 1.65;
}

.mm-gallery *,
.mm-gallery *::before,
.mm-gallery *::after { box-sizing: border-box; }

.mm-gallery h1,
.mm-gallery h2,
.mm-gallery p,
.mm-gallery figure,
.mm-gallery figcaption { margin: 0; }

.mm-gallery h1,
.mm-gallery h2 {
  color: var(--gal-ink);
  font-family: var(--font-heading, 'Poppins', sans-serif);
}

.mm-gallery a { color: var(--gal-rose); }

.mm-gallery a:focus-visible {
  outline: 3px solid var(--gal-ink);
  outline-offset: 4px;
}

.mm-gallery-shell {
  width: var(--gal-shell);
  margin: 0 auto;
}

/* INTRO ------------------------------------------------------------------ */

.mm-gallery-header {
  max-width: 760px;
  padding: clamp(34px, 5vw, 66px) 0 clamp(28px, 4vw, 44px);
}

.mm-gallery-eyebrow {
  margin-bottom: 14px;
  color: #9f3f69;
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.mm-gallery-title {
  margin-bottom: 18px;
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.mm-gallery-intro {
  color: var(--gal-muted);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
}

.mm-gallery-intro > * + * { margin-top: 14px; }

/* GRID ------------------------------------------------------------------- */

.mm-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gal-gap);
  /* Pins every photo to the top of its cell, so a two-line caption in one
     column never pushes the next row out of alignment. */
  align-items: start;
}

.mm-gallery-item {
  display: flex;
  flex-direction: column;
}

.mm-gallery-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--gal-border);
  border-radius: var(--gal-radius);
  background: var(--gal-cream);
  box-shadow: var(--gal-shadow);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

/* Scoped to the gallery frame only — never a global img rule. */
.mm-gallery-frame .mm-gallery-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 300ms ease;
}

.mm-gallery-item:hover .mm-gallery-frame {
  transform: translateY(-2px);
  box-shadow: var(--gal-shadow-hover);
}

.mm-gallery-item:hover .mm-gallery-img { transform: scale(1.03); }

/* CAPTION ---------------------------------------------------------------- */

/* Sits outside the clipped frame, so it is never cropped. When a photo has
   its caption switched off, no figcaption is printed at all: no empty text
   row, no leftover margin, no reserved space. */
.mm-gallery-caption {
  padding-top: 10px;
  color: var(--gal-muted);
  font-size: 0.875rem;
  line-height: 1.45;
  text-wrap: pretty;
}

/* EDITOR-ONLY EMPTY STATE ------------------------------------------------ */

.mm-gallery-empty {
  padding: 16px 18px;
  border: 1px dashed var(--gal-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--gal-muted);
  font-size: 0.9375rem;
}

/* RESPONSIVE ------------------------------------------------------------- */

@media (max-width: 1023px) {
  .mm-gallery {
    --gal-gap: 20px;
    --gal-shell: min(1200px, calc(100vw - 36px));
  }
  .mm-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .mm-gallery {
    --gal-gap: 16px;
    --gal-shell: min(1200px, calc(100vw - 32px));
  }
  .mm-gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .mm-gallery-caption { font-size: 0.9375rem; }
}

/* MOTION PREFERENCES ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .mm-gallery-frame,
  .mm-gallery-frame .mm-gallery-img { transition: none; }

  .mm-gallery-item:hover .mm-gallery-frame { transform: none; }
  .mm-gallery-item:hover .mm-gallery-img { transform: none; }
}