/* ==========================================================================
   Level Headed Construction — gallery.css
   Page-specific styles for /gallery.html.

   The gallery page intentionally reads a touch DIFFERENT from the rest
   of the site, while staying in the same family. Three subtle moves:

     1. Slightly warmer cream body (--gallery-cream) instead of the
        site's default --cream-soft. Same material, different grade.
     2. Asymmetric editorial grid — multi-photo projects (≥3 shots)
        get wide cards that span both columns; single-photo projects
        sit in a regular 2-up rhythm. Reads like a magazine spread,
        not a product catalog.
     3. Photo cards get a paper-on-table feel: faint rust edge,
        cream-soft frame, soft shadow that lifts on hover.

   Hero / divider / parallax / footer all reuse the inner-page
   patterns established on services.html and about.html.
   ========================================================================== */


/* ==========================================================================
   1. HERO
   Full-bleed gradient (same as the other inner pages). Centered stack:
   eyebrow → rust rule → stacked title with italic Playfair accent →
   short tagline → scroll cue.
   ========================================================================== */

.gallery-hero {
  --gallery-cream: #F2EAD8;
  position: relative;
  background: linear-gradient(
    180deg,
    var(--ink) 0%,
    #3D2418 50%,
    #5A3520 100%
  );
  color: var(--cream-soft);
  /* Parallax stacking: hero at z:0; siblings paint over it at z:2.   */
  z-index: 0;
  will-change: transform;
  padding: 140px var(--gutter) 80px;
  min-height: 38vh;
  min-height: 38svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .gallery-hero {
    padding: 180px var(--gutter) 110px;
    min-height: 45vh;
    min-height: 45svh;
  }
}

/* Bottom-glow rust ellipse — same accent as services / about / contact. */
.gallery-hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 60%;
  background: radial-gradient(
    ellipse at 50% 100%,
    rgba(168, 85, 46, 0.22) 0%,
    rgba(168, 85, 46, 0.10) 35%,
    rgba(168, 85, 46, 0)    72%);
  pointer-events: none;
}

/* Each hero-sibling section gets z:2 + the WARMER gallery cream as
   its background, so the page covers the dark hero AND telegraphs
   "this is the gallery" through tone alone.                         */
.gallery-hero ~ * {
  position: relative;
  z-index: 2;
  background-color: #F2EAD8;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-hero { transform: none !important; }
}

.gallery-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.gallery-hero__eyebrow,
.gallery-hero__rule,
.gallery-hero__title,
.gallery-hero__tagline,
.gallery-hero__cue {
  opacity: 0;
}

.gallery-hero__eyebrow {
  display: inline-block;
  color: var(--cream);
  transform: translateY(8px);
}

.gallery-hero__rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--rusty);
  margin: 16px auto 24px;
  transform: scaleX(0);
  transform-origin: center;
}

.gallery-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Match the homepage hero title — same clamp, cream face with the
     5-step ink extrusion + soft cast so all hero titles read as one
     family across the site. */
  font-size: clamp(48px, 11vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 22px;
  transform: translateY(16px);
  text-shadow:
    1px 1px 0 var(--ink),
    2px 2px 0 var(--ink),
    3px 3px 0 var(--ink),
    4px 4px 0 var(--ink),
    5px 5px 0 var(--ink),
    7px 9px 12px rgba(0, 0, 0, 0.45);
}
/* Accent words inside the hero title render in plain Oswald. */
.gallery-hero__title .title__accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  font-size: 1em;
  text-transform: inherit;
}

.gallery-hero__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.55vw, 19px);
  line-height: 1.55;
  color: rgba(251, 248, 241, 0.82);
  max-width: 600px;
  margin: 0 auto;
  transform: translateY(12px);
}

.gallery-hero__cue {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.04em;
  color: rgba(251, 248, 241, 0.55);
  margin: 14px auto 0;
  transform: translateY(12px);
}
.gallery-hero__cue::after {
  content: " \2193";
  display: inline-block;
  margin-left: 6px;
  transform: translateY(1px);
  color: rgba(251, 248, 241, 0.45);
}

.gallery-hero.is-entering .gallery-hero__eyebrow {
  animation: galleryHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 100ms both;
}
.gallery-hero.is-entering .gallery-hero__rule {
  animation: galleryHeroSweep 700ms cubic-bezier(0.85, 0, 0.15, 1) 250ms both;
}
.gallery-hero.is-entering .gallery-hero__title {
  animation: galleryHeroFadeUp 700ms cubic-bezier(0, 0.55, 0.45, 1) 350ms both;
}
.gallery-hero.is-entering .gallery-hero__tagline {
  animation: galleryHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 700ms both;
}
.gallery-hero.is-entering .gallery-hero__cue {
  animation: galleryHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 900ms both;
}

@keyframes galleryHeroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes galleryHeroSweep {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}


/* ==========================================================================
   2. CREAM DIVIDER
   ========================================================================== */
.gallery-divider {
  height: 18px;
  background: var(--cream);
}


/* ==========================================================================
   3. GALLERY SECTION
   The grid container + filter pills + honest-acknowledgement footer.
   ========================================================================== */
.gallery-section {
  padding: 56px var(--gutter) 80px;
}
@media (min-width: 768px) {
  .gallery-section { padding: 88px var(--gutter) 120px; }
}

.gallery-section__inner {
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
}


/* --- Filter pills --- */
.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 36px;
  justify-content: flex-start;
}
@media (min-width: 768px) {
  .gallery__filters { gap: 10px; margin-bottom: 48px; }
}

.gallery__pill {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid rgba(42, 27, 16, 0.20);
  border-radius: 999px;
  background: transparent;
  color: rgba(42, 27, 16, 0.72);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.gallery__pill:hover,
.gallery__pill:focus-visible {
  border-color: var(--rusty);
  color: var(--ink);
  outline: none;
}
.gallery__pill.is-active {
  background: var(--rusty);
  color: var(--cream-soft);
  border-color: var(--rusty);
}


/* --- Editorial grid ---
   1 column on phones, 2 at tablet, 3 at desktop. `auto-flow: dense`
   lets narrow cards back-fill the gap left when a wide card spans
   only 2 of 3 columns — keeps the rhythm tight without orphan rows. */
.gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  grid-auto-flow: dense;
}
@media (min-width: 640px) {
  .gallery__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 32px;
  }
}
@media (min-width: 1024px) {
  .gallery__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 56px 40px;
  }
}

/* Wide cards: span both columns at 2-col; span 2 of 3 at desktop so
   they read as feature cards but never blow out to full bleed.        */
@media (min-width: 640px) {
  .gallery__card--wide { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .gallery__card--wide { grid-column: span 2; }
}

/* --- Card ---
   Cards render visible immediately. We deliberately skip a stagger
   entrance on the grid: with 20 cards and a fast/programmatic scroll
   it's easy for the IntersectionObserver to leave stragglers, and
   the page's motion polish already lives in the hero entrance and
   the lightbox interaction. The grid just shows its content. */
.gallery__card {
  margin: 0;
}

/* The card is a button so the whole thing is clickable. Reset native
   button chrome so the picture takes over visually. */
.gallery__card-trigger {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Frame: wraps the picture. Subtle rust hairline + cream-soft interior
   matte, like a polaroid + frame combo. Hover lifts the card. */
.gallery__card-frame {
  position: relative;
  overflow: hidden;
  background: var(--cream-soft);
  border: 1px solid rgba(158, 60, 14, 0.18);
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(42, 27, 16, 0.06),
    0 12px 28px -16px rgba(42, 27, 16, 0.20);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.gallery__card-trigger:hover .gallery__card-frame,
.gallery__card-trigger:focus-visible .gallery__card-frame {
  transform: translateY(-3px);
  box-shadow:
    0 1px 2px rgba(42, 27, 16, 0.08),
    0 18px 36px -14px rgba(42, 27, 16, 0.28);
}
.gallery__card-trigger:focus-visible .gallery__card-frame {
  outline: 2px solid var(--rusty);
  outline-offset: 2px;
}

.gallery__card-frame picture,
.gallery__card-frame img {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery__card-frame img {
  /* Standard cards = 3:2 (less tall than the old 4:3, easier to scan
     in a 3-col grid). Wide cards stay slightly more cinematic.         */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery__card-trigger:hover .gallery__card-frame img {
  transform: scale(1.025);
}
.gallery__card--wide .gallery__card-frame img {
  aspect-ratio: 16 / 9;
}
/* Tall variant — drops a 1-col card into 4:5 portrait so the rhythm
   isn't every-card-the-same. Apply by adding .gallery__card--tall in
   the markup. Only takes effect at desktop where it's a real change;
   below that it inherits the normal aspect.                          */
@media (min-width: 1024px) {
  .gallery__card--tall .gallery__card-frame img {
    aspect-ratio: 4 / 5;
  }
}
/* Mobile single-column: cap aspect so a wide-spanning card doesn't
   render as a tall full-bleed photo on phones.                       */
@media (max-width: 639px) {
  .gallery__card--wide .gallery__card-frame img {
    aspect-ratio: 3 / 2;
  }
}

/* --- Text panel ---
   A non-photo tile that drops into the grid as one column to break
   up the photo rhythm. Lives outside the .gallery__card class so the
   filter pills + lightbox JS ignore it. Always visible regardless of
   the active filter — these are connective tissue, not items.        */
.gallery__text-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--cream);
  border: 1px solid rgba(158, 60, 14, 0.18);
  border-radius: 4px;
  padding: 28px 26px;
  min-height: 200px;
}
@media (min-width: 1024px) {
  .gallery__text-panel { padding: 36px 32px; }
}
.gallery__text-panel::before {
  /* Small rust hairline at the top edge — anchors the panel and ties
     it to the photo cards' rust border without copying the same look. */
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  width: 36px;
  height: 3px;
  background: var(--rusty);
  border-radius: 0 0 2px 2px;
}
.gallery__text-panel-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rusty);
  margin-bottom: 16px;
}
.gallery__text-panel-body {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.gallery__text-panel-cite {
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(42, 27, 16, 0.5);
}

/* Photo-count badge — small Oswald label, top-right corner of frame. */
.gallery__card-count {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-block;
  padding: 4px 8px;
  background: rgba(42, 27, 16, 0.78);
  color: var(--cream-soft);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 2px;
  backdrop-filter: blur(2px);
}

/* Caption strip below the frame: category in rust + project caption
   in italic Playfair, stacked on narrow cards, side-by-side on wide. */
.gallery__card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  padding: 0 2px;
}
.gallery__card--wide .gallery__card-meta {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.gallery__card-cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rusty);
}
.gallery__card-cap {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  color: rgba(42, 27, 16, 0.62);
}


/* --- Honest acknowledgement line --- */
.gallery__honest {
  margin: 56px 0 0;
  padding-top: 32px;
  border-top: 1px solid rgba(42, 27, 16, 0.12);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: 0.04em;
  color: rgba(42, 27, 16, 0.7);
}
.gallery__honest .title__accent {
  font-size: 1.08em;
  margin-left: 4px;
}


/* ==========================================================================
   4. CTA BAND
   Same simple two-button CTA used on services / about. Cream-on-soft.
   ========================================================================== */
.gallery-cta {
  padding: 72px var(--gutter) 96px;
  text-align: center;
}
@media (min-width: 768px) {
  .gallery-cta { padding: 110px var(--gutter) 130px; }
}

.gallery-cta__inner {
  max-width: 640px;
  margin: 0 auto;
}
.gallery-cta__inner .eyebrow {
  display: block;
  margin-bottom: 12px;
}

.gallery-cta__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 28px;
}

.gallery-cta__buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ==========================================================================
   5. LIGHTBOX
   Hidden by default. JS toggles .is-open on click. Full-screen
   overlay over an .ink-tinted backdrop, photo centered with prev/next
   nav and a small counter caption strip.
   ========================================================================== */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 16px;
  background: rgba(20, 12, 8, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease, visibility 0s;
}

.gallery-lightbox__close,
.gallery-lightbox__nav {
  position: absolute;
  background: rgba(42, 27, 16, 0.55);
  color: var(--cream-soft);
  border: 1px solid rgba(245, 239, 228, 0.22);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
}
.gallery-lightbox__close:hover,
.gallery-lightbox__nav:hover,
.gallery-lightbox__close:focus-visible,
.gallery-lightbox__nav:focus-visible {
  background: rgba(42, 27, 16, 0.85);
  outline: none;
}
.gallery-lightbox__close { top: 20px; right: 20px; }
.gallery-lightbox__nav  { top: 50%; transform: translateY(-50%); }
.gallery-lightbox__nav--prev { left: 20px; }
.gallery-lightbox__nav--next { right: 20px; }
.gallery-lightbox__nav svg,
.gallery-lightbox__close svg {
  width: 22px;
  height: 22px;
}

.gallery-lightbox__stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.gallery-lightbox__pic {
  display: block;
  max-width: min(1400px, 92vw);
  max-height: 80vh;
}
.gallery-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

.gallery-lightbox__caption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  color: rgba(245, 239, 228, 0.85);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gallery-lightbox__counter {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cream-soft);
}

/* On narrow screens, push the nav buttons closer + scale the close
   button so they don't overlap the image awkwardly. */
@media (max-width: 600px) {
  .gallery-lightbox { padding: 40px 12px; }
  .gallery-lightbox__close { top: 12px; right: 12px; }
  .gallery-lightbox__nav--prev { left: 8px; }
  .gallery-lightbox__nav--next { right: 8px; }
  .gallery-lightbox__nav,
  .gallery-lightbox__close { width: 38px; height: 38px; }
}

/* Respect reduced-motion: no fade or transitions, instant show/hide. */
@media (prefers-reduced-motion: reduce) {
  .gallery-lightbox,
  .gallery__card,
  .gallery__card-trigger,
  .gallery__card-frame,
  .gallery__card-frame img {
    transition: none !important;
    animation: none !important;
  }
  .gallery__card { opacity: 1; transform: none; }
}


/* ==========================================================================
   6. FOOTER — recolor only (matches the other inner pages).
   ========================================================================== */
.site-footer {
  background: var(--ink);
}