/* ============================================================
   AK CUSTOM HOMES — PHOTO GALLERY
   Masonry grid + filter bar + lightbox, plus the compact
   carousel the home page uses.

   Loaded AFTER style.css (and after style-v2.css where the cream
   2.0 theme is in play). Every colour resolves through the four
   tokens below, so the same markup reads correctly on the black
   portfolio page and on the cream home page — the .v2 block is
   the only place the light theme is spelled out.
   ============================================================ */

:root {
  --gal-bg:     transparent;
  --gal-ink:    #FFFFFF;
  --gal-mute:   rgba(255,255,255,0.55);
  --gal-line:   rgba(255,255,255,0.14);
  --gal-tile:   rgba(255,255,255,0.05);
  /* Eyebrows are red on the cream pages, but red type on a near-black ground
     is the hardest pairing on the site to read, so the dark pages set them
     in white instead. */
  --gal-accent: #FFFFFF;
}

.v2 {
  --gal-ink:    var(--ink);
  --gal-mute:   var(--ink-mute);
  --gal-line:   var(--line);
  --gal-tile:   var(--cream-3);
  --gal-accent: var(--red);
}

/* ────────────────────────────────────────
   SECTION SHELL
──────────────────────────────────────── */
.gal {
  position: relative;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 64px);
  background: var(--gal-bg);
  color: var(--gal-ink);
}
.gal-inner { max-width: 1440px; margin: 0 auto; }

.gal-head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 52px); }
.gal-eyebrow {
  display: block;
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gal-accent); margin-bottom: 18px;
}
.gal-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 400; line-height: 1.06; letter-spacing: -0.5px;
  margin-bottom: 18px;
}
.gal-head h2 em { font-style: italic; }
.gal-head p {
  font-size: 15px; line-height: 1.75; font-weight: 300;
  color: var(--gal-mute); max-width: 620px;
}

/* ────────────────────────────────────────
   FILTER BAR
   Wraps rather than scrolls: ten room types will not fit on one
   line at phone width and a hidden overflow row goes unnoticed.
──────────────────────────────────────── */
.gal-filter {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 4px;
  border-bottom: 1px solid var(--gal-line);
  padding-bottom: 14px;
  margin-bottom: clamp(24px, 3vw, 38px);
}
.gal-filter-btn {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--font-sub);
  font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--gal-mute);
  padding: 9px 14px;
  border-radius: 999px;
  transition: color var(--tf), background var(--tf);
}
.gal-filter-btn:hover { color: var(--gal-ink); }
.gal-filter-btn.active {
  color: var(--white);
  background: var(--red);
}
.gal-filter-count {
  margin-left: auto; padding-left: 16px;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gal-mute);
}

/* ────────────────────────────────────────
   MASONRY
   CSS columns rather than a JS-measured grid: filtering just sets
   display:none and the columns rebalance on their own, with no
   reflow pass to run and nothing to re-measure on resize.
──────────────────────────────────────── */
.gal-masonry {
  column-count: 4;
  column-gap: 14px;
}
@media (max-width: 1180px) { .gal-masonry { column-count: 3; } }
@media (max-width: 820px)  { .gal-masonry { column-count: 2; } }
@media (max-width: 500px)  { .gal-masonry { column-count: 1; column-gap: 0; } }

.gal-tile {
  display: block; width: 100%;
  break-inside: avoid;
  margin: 0 0 14px;
  padding: 0; border: none;
  background: var(--gal-tile);
  position: relative; overflow: hidden;
  cursor: zoom-in;
  appearance: none;
  color: inherit;
}
.gal-tile img {
  display: block; width: 100%; height: auto;
  transition: transform 0.7s var(--ease), opacity 0.5s ease;
}
.gal-tile:hover img { transform: scale(1.04); }

/* Caption rides in from the foot on hover. Pointer-events off so it
   never eats the click that opens the lightbox. */
.gal-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 16px 13px;
  font-size: 10.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--t), transform var(--t);
  pointer-events: none;
}
.gal-tile:hover .gal-tile-cap,
.gal-tile:focus-visible .gal-tile-cap { opacity: 1; transform: none; }
.gal-tile:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.gal-empty {
  padding: 50px 0; font-size: 14px; font-weight: 300;
  color: var(--gal-mute);
}

/* ────────────────────────────────────────
   LIGHTBOX
   Always dark, on both themes — a cream surround would wash out
   the photographs it exists to show.
──────────────────────────────────────── */
.gal-lb {
  position: fixed; inset: 0; z-index: 2000;
  display: none;
  background: rgba(8,7,6,0.95);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.gal-lb.open { display: flex; flex-direction: column; }

.gal-lb-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 16px clamp(14px, 3vw, 30px);
  color: rgba(255,255,255,0.8);
}
.gal-lb-count {
  font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.gal-lb-close {
  margin-left: auto;
  appearance: none; background: none; border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font-size: 22px; line-height: 1;
  transition: background var(--tf);
}
.gal-lb-close:hover { background: rgba(255,255,255,0.12); }

.gal-lb-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 clamp(8px, 2vw, 24px);
  position: relative;
}
.gal-lb-stage img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.gal-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  appearance: none; border: none; cursor: pointer;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.10); color: #fff;
  font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tf);
}
.gal-lb-nav:hover { background: rgba(255,255,255,0.22); }
.gal-lb-prev { left: clamp(6px, 1.6vw, 20px); }
.gal-lb-next { right: clamp(6px, 1.6vw, 20px); }

.gal-lb-cap {
  flex: 0 0 auto;
  padding: 16px clamp(14px, 3vw, 30px) 24px;
  text-align: center;
  font-size: 12px; letter-spacing: 1.2px;
  color: rgba(255,255,255,0.72);
}

body.gal-locked { overflow: hidden; }

/* ────────────────────────────────────────
   HOME PAGE CAROUSEL
   A single scroll-snap rail. Deliberately short: this sits on the
   home page as a taste of the house, not as the gallery itself.
──────────────────────────────────────── */
.galc { position: relative; }
.galc-rail {
  display: flex; gap: 12px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.galc-rail::-webkit-scrollbar { display: none; }

.galc-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: clamp(230px, 27vw, 380px);
  height: clamp(180px, 22vw, 300px);
  overflow: hidden; position: relative;
  background: var(--gal-tile);
  border: none; padding: 0; cursor: zoom-in;
}
.galc-item img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}
.galc-item:hover img { transform: scale(1.05); }
.galc-item:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.galc-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 14px 11px;
  font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase;
  color: #fff; text-align: left;
  background: linear-gradient(to top, rgba(0,0,0,0.68), rgba(0,0,0,0));
  pointer-events: none;
}

.galc-ctrls { display: flex; gap: 8px; margin-top: 18px; }
.galc-btn {
  appearance: none; cursor: pointer;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--gal-line);
  background: none; color: var(--gal-ink);
  font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--tf), border-color var(--tf), color var(--tf);
}
.galc-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .gal-tile img, .galc-item img, .gal-tile-cap { transition: none; }
  .gal-tile:hover img, .galc-item:hover img { transform: none; }
  .galc-rail { scroll-behavior: auto; }
}

/* ────────────────────────────────────────
   WALKTHROUGH ENTRY BUTTON
   Sits under the featured project on both the home page and Our
   Work. The tour lives on its own page, so this is the only thing
   either page shows of it.
──────────────────────────────────────── */
.port-tour-row {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
  margin: clamp(22px, 3vw, 38px) 0 clamp(34px, 4.5vw, 60px);
}
.port-tour-btn {
  display: flex; flex-direction: column; gap: 7px;
  text-decoration: none;
  padding: clamp(18px, 2.2vw, 26px) clamp(24px, 3vw, 40px);
  border: 1px solid var(--gal-line);
  color: var(--gal-ink);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.port-tour-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }

.port-tour-kicker {
  font-family: var(--font-sub);
  font-size: 9.5px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--gal-accent);
  transition: color var(--t);
}
.port-tour-btn:hover .port-tour-kicker { color: rgba(255,255,255,0.75); }

.port-tour-label {
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.2vw, 30px); font-weight: 400; line-height: 1.1;
  display: flex; align-items: center; gap: 14px;
}
.port-tour-label em {
  font-style: normal; font-size: 0.66em;
  transition: transform var(--t);
}
.port-tour-btn:hover .port-tour-label em { transform: translateX(6px); }

.port-tour-note {
  font-size: 13.5px; line-height: 1.7; font-weight: 300;
  color: var(--gal-mute); max-width: 260px;
}

@media (max-width: 620px) {
  .port-tour-btn { width: 100%; }
  .port-tour-note { max-width: none; }
}

/* On the home page the row is a direct child of .featured, which pads its
   edges but does not cap its width the way .featured-header and
   .featured-inner are capped. Match them so the button lines up with the
   section above it on wide screens. */
.featured .port-tour-row { max-width: 1400px; margin-left: auto; margin-right: auto; }

/* ────────────────────────────────────────
   CAROUSEL HEADER + FOOTER CONTROLS
   Used by the home page rail, which sits directly under the featured
   project and has to stay short.
──────────────────────────────────────── */
.galc-home { max-width: 1400px; margin: 0 auto clamp(20px, 3vw, 40px); }
.galc-head { margin-bottom: 20px; }
.galc-eyebrow {
  display: block;
  font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
  color: var(--gal-accent); margin-bottom: 12px;
}
.galc-head h3 {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 400; line-height: 1.1; letter-spacing: -0.3px;
  color: var(--gal-ink);
}
.galc-all {
  margin-left: auto; align-self: center;
  font-family: var(--font-sub);
  font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase;
  color: var(--gal-ink); text-decoration: none;
  transition: color var(--tf);
}
.galc-all:hover { color: var(--red); }

/* The Our Work gallery sits inside .port-grid, which already centers and
   pads. Drop the section's own side padding so the tiles line up with the
   featured card above them. */
.gal-inline { padding-left: 0; padding-right: 0; }
.gal-inline .gal-inner { max-width: none; }