/* ============================================================
   Photo Gallery — hero + masonry grid + closing CTA.
   Mobile-first. Motion silenced under prefers-reduced-motion.
   v2 — phone polish layer (≤480 / ≤600 breakpoints added).
   ============================================================ */

/* section-rhythm washes — warm peach into cream-gold (gallery's hue) */
:root {
  --wash-1: #fbe8dc;  /* pale peach      */
  --wash-2: #f6edd8;  /* pale cream-gold */
}

/* ---- Page hero (photo gallery feel: scattered polaroids) ---- */
/* Selector matches the other interior-page heroes (.page-hero.ph--cafe /
   .ph--play / .ph--member / etc.) so it has the same specificity as the
   default .page-hero.ph--gallery in styles.css. Source order then wins,
   and this warm-oat tile background actually applies. */
.page-hero.ph--gallery {
  /* Same recipe as Fusion — a single signature tile (cameras) repeated over
     a warm peach gradient. Gives the gallery its own colour identity. */
  background:
    url("../../img/photo-tile-v2.svg") center / 132px repeat,
    linear-gradient(180deg, #F6D5C0 0%, #F4E2CB 58%, var(--base) 100%);
  padding-bottom: clamp(5.5rem, 4vw + 4rem, 7.5rem);
  position: relative;
  overflow: hidden;
}
.ph--gallery .container { position: relative; z-index: 2; }
.gallery-hero-inner {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  text-align: center;
}
@media (min-width: 760px) {
  .gallery-hero-inner { grid-template-columns: 1fr auto; }
}
.gallery-hero-art { margin-inline: auto; }
.gallery-hero-art svg { width: 100%; height: auto; display: block; }
/* Warm-coral partner-tag eyebrow */
.ph--gallery .partner-tag {
  background: rgba(255,255,255,0.85);
  color: #8A3320;
  border: 1px solid rgba(182,93,69,0.30);
}
.ph--gallery .eyebrow { color: var(--accent); letter-spacing: 0.06em; }
.ph--gallery h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  margin: 0.5rem 0 0.9rem;
  max-width: 22ch;
  color: var(--ink);
}
.ph--gallery .lead {
  max-width: 52ch;
  margin: 0;
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  color: var(--ink-soft);
}
@media (max-width: 859px) {
  .ph--gallery h1 { margin-inline: auto; }
  .ph--gallery .lead { margin-inline: auto; }
}

/* ---- Scattered polaroid decorations ---- */
.deco-polaroid {
  position: absolute;
  z-index: 1;
  width: 132px;
  background: #fff;
  padding: 8px 8px 30px;
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 4px rgba(58, 49, 40, 0.08),
    0 14px 28px -6px rgba(58, 49, 40, 0.22),
    0 32px 56px -20px rgba(58, 49, 40, 0.20);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s ease;
}
.deco-polaroid:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 4px rgba(58, 49, 40, 0.10),
    0 22px 40px -8px rgba(58, 49, 40, 0.28),
    0 44px 80px -24px rgba(58, 49, 40, 0.24);
}
.deco-polaroid img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 2px;
}
.deco-polaroid::after {
  content: attr(data-cap);
  position: absolute;
  bottom: 7px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}
/* Individual tilts so each polaroid feels handed-down rather than aligned */
.pol--tl { transform: rotate(-9deg); }
.pol--bl { transform: rotate(6deg);  width: 112px; }
.pol--tr { transform: rotate(7deg); }
.pol--br { transform: rotate(-6deg); width: 118px; }
.pol--tl:hover, .pol--bl:hover, .pol--tr:hover, .pol--br:hover { transform: rotate(0) scale(1.04); }

/* Polaroids are decorative — hide on tablet/mobile to keep the hero focused */
@media (max-width: 980px) { .deco-polaroid { display: none; } }

/* ---- Gallery (uniform 1:1 grid — clean, Instagram-feed feel) ---- */
.gallery-section { padding-top: clamp(2rem, 4vw, 3rem); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: 0 auto;
  max-width: 1100px;
}
@media (max-width: 880px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
@media (max-width: 540px) { .gallery-grid { grid-template-columns: 1fr; } }

.gallery-figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg, 22px);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  aspect-ratio: 1 / 1;
}
.gallery-figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(58, 49, 40, 0.22);
}
.gallery-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.gallery-figure figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1.1rem 0.9rem;
  background: linear-gradient(0deg, rgba(58, 49, 40, 0.7) 0%, rgba(58, 49, 40, 0) 100%);
  color: #fff;
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.gallery-figure:hover figcaption,
.gallery-figure:focus-within figcaption {
  opacity: 1;
  transform: translateY(0);
}
/* Touch devices: keep captions visible — no hover */
@media (hover: none) {
  .gallery-figure figcaption { opacity: 1; transform: none; }
}

/* Playful sticker on a couple of featured figures */
.gallery-sticker {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  background: var(--accent, #d9774e);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(217, 119, 78, 0.35);
  transform: rotate(-6deg);
  z-index: 2;
}
.gallery-sticker--sage {
  background: var(--accent-teal, #3F7268);
  box-shadow: 0 6px 14px rgba(63, 114, 104, 0.35);
}

/* Soft helper line under the gallery */
.gallery-note {
  text-align: center;
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-style: italic;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .gallery-figure,
  .gallery-figure figcaption { transition: none; }
  .gallery-figure:hover { transform: none; }
}

/* ============================================================
   MOBILE POLISH — ≤600px / ≤480px / 320px
   All rules are gated so desktop look is untouched.
   ============================================================ */

/* --- Hero: tighten vertical breathing room on phones --- */
@media (max-width: 600px) {
  .page-hero.ph--gallery {
    padding-bottom: clamp(3rem, 6vw, 4.5rem);
  }

  /* Scale the polaroid SVG art down so it doesn't push CTAs off-screen */
  .gallery-hero-art {
    max-width: 220px !important; /* override the inline style */
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }

  /* Slightly tighter headline — still prominent, not overwhelming */
  .ph--gallery h1 {
    font-size: clamp(1.9rem, 7.5vw, 2.6rem);
    margin-bottom: 0.6rem;
  }

  .ph--gallery .lead {
    font-size: 0.975rem;
    line-height: 1.55;
  }

  /* Eyebrow / partner-tag: make sure it wraps gracefully */
  .ph--gallery .partner-tag {
    font-size: 0.82rem;
    padding: 0.3rem 0.75rem;
  }
}

/* --- Hero art: hide entirely at 360px and below to keep hero compact --- */
@media (max-width: 380px) {
  .gallery-hero-art { display: none; }
}

/* --- Gallery grid: 2-up on phones (not 1-col) for a proper photo-feed feel --- */
/* The existing rule collapses to 1-col at ≤540px; override to keep 2-up tighter */
@media (max-width: 540px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;            /* tighter gutters — photos fill the screen edge-to-edge */
    padding-inline: 0;      /* let the container's own padding handle edges */
  }

  /* 2-up at 360px = ~168px tiles; 1:1 is fine, but 4:3 fills better and shows more content */
  .gallery-figure {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-md, 14px); /* softer radius at small size */
  }

  /* Captions: smaller text so they don't eat the photo */
  .gallery-figure figcaption {
    font-size: 0.82rem;
    padding: 1rem 0.65rem 0.55rem;
  }

  /* Stickers: scale down slightly and keep inside the tile */
  .gallery-sticker {
    font-size: 0.7rem;
    padding: 0.22rem 0.5rem;
    top: 0.4rem;
    left: 0.4rem;
    /* ensure the pill never overflows the tile */
    max-width: calc(100% - 0.8rem);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Sticker icons: hide on tiny tiles to keep text legible */
  .gallery-sticker img { display: none; }
}

/* --- 320px safety net: confirm no horizontal overflow --- */
@media (max-width: 340px) {
  .gallery-grid { gap: 0.35rem; }
  .gallery-figure { border-radius: 10px; }
  .gallery-sticker { font-size: 0.65rem; padding: 0.18rem 0.4rem; }
}

/* --- Gallery section: less top padding on phones --- */
@media (max-width: 600px) {
  .gallery-section { padding-top: 1.25rem; }

  /* gallery-note: comfortable reading line at small widths */
  .gallery-note {
    font-size: 0.88rem;
    margin-top: 1.25rem;
    padding-inline: 0.5rem;
    line-height: 1.5;
  }
}

/* --- Closing CTA band: padding + heading size for phones --- */
@media (max-width: 480px) {
  /* .cta-band is a shared component — only adjust what affects this page's flow */
  .section .cta-band {
    padding-inline: clamp(1rem, 5vw, 1.75rem);
  }

  .cta-band h2 {
    font-size: clamp(1.55rem, 6vw, 2rem);
  }

  .cta-band p {
    font-size: 0.925rem;
  }
}