/*
 * gw_gallery_header — Community gallery header (Figma 1:1372, 1920x1080) and
 * its second instance (1:1612), Builders header (1:1163, 1921x1284), Location
 * three-up (1:786, three 586x723 photos edge-to-edge, ~4.7vw gap). Arrows and
 * expand button use .gw-circle-btn / .gw-circle-btn--white from
 * assets/css/components.css — only their placement and size live here.
 */
.gw-gallery { position: relative; }
.gw-gallery__stage { position: relative; min-width: 0; }

/* Track: full = one 100%-wide slide per view; three-up = 3-column grid at
   desktop, same snap track under 1000px. Both are native scroll-snap so the
   arrows and the finder's `min-width: 0` grid-blowout gotcha both apply. */
.gw-gallery__track {
  display: flex; margin: 0; padding: 0; list-style: none; min-width: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth;
}
.gw-gallery__track::-webkit-scrollbar { display: none; }
.gw-gallery__track li.gw-gallery__item { list-style: none; margin: 0; }
.gw-gallery__track li.gw-gallery__item::before, .gw-gallery__track li.gw-gallery__item::marker { content: none; } /* Salient forces li bullets */

.gw-gallery__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.gw-gallery__photo { margin: 0; overflow: hidden; border-radius: var(--gw-radius-square); }
.gw-gallery__img { display: block; width: 100%; height: 100% !important; object-fit: cover; } /* !important: Salient forces img { height: auto !important } (§9c gotcha) */

/* Hero use (Builders 53:150): Salient pads .container-wrap 40px under the fixed header, which
   would show as a white band above the photo and keep the band out of the header-tone
   observer's 1px band on load. Zeroed on pages whose first element is this band as a hero. */
body.gw-builders-page .container-wrap { padding-top: 0 !important; padding-bottom: 0 !important; } /* bottom: the inline contact section meets the footer */
body.gw-find-home-page .container-wrap, body.gw-home-single .container-wrap { padding-top: 0 !important; } /* Find A Home + home pages open on the same hero (57:296) */

/* Full layout: one slide fills the viewport, 16:9 (matches 1:1372 exactly;
   Builders' 1:1163 is closer to 3:2 — the comp sizes this to the source
   photo, so 16:9 is a sensible shared default, cropped via object-fit). */
.gw-gallery--full .gw-gallery__photo { aspect-ratio: 16 / 9; }
/* As a page hero (header_tone set) a 16:9 band is 219px tall on a 390 phone, with the pills and
   lockup stacked over most of it; crop to 4:5 there so the photo reads as a hero. */
@media (max-width: 599px) { .gw-gallery--full[data-gw-header-tone] .gw-gallery__photo { aspect-ratio: 4 / 5; } }

/* Three-up: edge-to-edge (no outer margin, like the comp), ~90px / 4.7vw gap
   at 1920, 4:5 photos (586x723 in the comp ≈ 0.81, 4:5 = 0.8). */
.gw-gallery--three-up .gw-gallery__track { gap: clamp(12px, 4.6875vw, 90px); }
.gw-gallery--three-up .gw-gallery__photo { aspect-ratio: 4 / 5; }
.gw-gallery--three-up.gw-gallery--ratio-2-3 .gw-gallery__photo { aspect-ratio: 2 / 3; } /* Builders 53:11-13: 476x714 */
@media (min-width: 1000px) {
  .gw-gallery--three-up .gw-gallery__track { overflow-x: visible; scroll-snap-type: none; display: grid; grid-template-columns: repeat(3, 1fr); }
  .gw-gallery--three-up .gw-gallery__item { flex-basis: auto; }
}
@media (max-width: 999px) {
  .gw-gallery--three-up .gw-gallery__item { flex: 0 0 82vw; }
}

/* Optional overlay heading: cream on the standard photo scrim, top-left of the stage. */
.gw-gallery__heading-wrap {
  position: absolute; z-index: 3; inset: 0 0 auto 0;
  padding: var(--gw-fluid-margin-chrome) var(--gw-fluid-margin-content) var(--gw-space-6);
  background: linear-gradient(to bottom, var(--gw-scrim-photo), transparent);
  pointer-events: none;
}
.gw-gallery__heading { color: var(--gw-cream-100); margin: 0; }
/* Centred variant (Gallery hero 48:1084 / 48:1269): heading at 549/1080 with a pill 278px below it, over a light full-photo scrim; the pill stays clickable. */
.gw-gallery__heading-wrap--center { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--gw-fluid-margin-chrome); background: rgba(0, 0, 0, 0.18); gap: clamp(40px, 12vw, 232px); }
.gw-gallery__heading-wrap--center .gw-gallery__heading { color: var(--gw-white); max-width: 26ch; }
.gw-gallery__cta { pointer-events: auto; min-width: clamp(160px, 13.85vw, 266px); min-height: clamp(48px, 3.28vw, 63px); }
@media (max-width: 599px) { .gw-gallery__heading-wrap--center { gap: var(--gw-space-5); } }

/* Arrows: 75px @1920 white circles, inset ~72px (chrome margin) from the
   stage edge, sitting over the photo near its bottom edge (Figma 1:1373). */
.gw-gallery__arrow {
  position: absolute; z-index: 4; bottom: var(--gw-space-7);
  width: clamp(48px, 3.9vw, 75px); height: clamp(48px, 3.9vw, 75px);
}
.gw-gallery__arrow--prev { left: var(--gw-fluid-margin-chrome); }
.gw-gallery__arrow--next { right: var(--gw-fluid-margin-chrome); }
.gw-gallery__arrow--prev svg { transform: scaleX(-1); }
.gw-gallery__arrow:disabled { opacity: 0.35; }

/* Expand: bottom-right corner of the stage, left of the next arrow's slot
   (deviation from the comp's centred text pill — see element.php header
   note). The offset assumes the arrow's width whether or not arrows are
   actually shown; with arrows off, expand just sits alone in that slot. */
.gw-gallery__expand { position: absolute; z-index: 4; right: calc(var(--gw-fluid-margin-chrome) + clamp(48px, 3.9vw, 75px) + var(--gw-space-2)); bottom: var(--gw-space-7); width: clamp(44px, 2.6vw, 50px); height: clamp(44px, 2.6vw, 50px); }
/* Photo grids (Location 472:1399 / 472:1429): EXPAND is a 97x26 white text pill in the corner of one tile. */
.gw-gallery__photo { position: relative; }
body .gw-gallery__expand--pill, body[data-button-style] button.gw-gallery__expand--pill { right: clamp(12px, 1.46vw, 28px); bottom: clamp(12px, 1.6vw, 31px); width: auto; height: auto; min-width: clamp(76px, 5.05vw, 97px); min-height: 26px; padding: 0 12px; border: 1px solid var(--gw-white); border-radius: var(--gw-radius-pill) !important; background: transparent; color: var(--gw-white); font-family: var(--gw-font-display); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: var(--gw-track-label); text-transform: uppercase; cursor: pointer; transition: background var(--gw-dur-fast) var(--gw-ease), color var(--gw-dur-fast) var(--gw-ease); }
body .gw-gallery__expand--pill:hover, body .gw-gallery__expand--pill:focus-visible { background: var(--gw-white); color: var(--gw-green-700); }
.gw-gallery__expand--pill:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: 3px; }

/* Two-up (Location 472:1410-1411): two 905x1006 photos edge to edge, 110 between. */
.gw-gallery--two-up .gw-gallery__track { gap: clamp(12px, 5.73vw, 110px); }
.gw-gallery--two-up .gw-gallery__photo { aspect-ratio: 905 / 1006; }
@media (min-width: 1000px) {
  .gw-gallery--two-up .gw-gallery__track { overflow-x: visible; scroll-snap-type: none; display: grid; grid-template-columns: repeat(2, 1fr); }
  .gw-gallery--two-up .gw-gallery__item { flex-basis: auto; }
}
@media (max-width: 999px) { .gw-gallery--two-up .gw-gallery__item { flex: 0 0 82vw; } }

@media (max-width: 999px) {
  .gw-gallery__arrow { display: none; }
  .gw-gallery__expand:not(.gw-gallery__expand--pill) { bottom: var(--gw-space-2); right: var(--gw-space-2); }
  .gw-gallery__heading-wrap { padding: var(--gw-space-3) var(--gw-space-2) var(--gw-space-4); }
}

/* Slide dots (57:819-821: three 18px circles, 26px pitch, 52px above the band's bottom edge) + seal mark (57:1079: 98x111 centred, 88px above the edge, over the dots) */
.gw-gallery__dots { position: absolute; left: 0; right: 0; bottom: clamp(16px, 2.7vw, 52px); z-index: 3; display: flex; justify-content: center; gap: clamp(6px, 0.42vw, 8px); pointer-events: none; }
.gw-gallery__dot { pointer-events: auto; width: clamp(10px, 0.94vw, 18px); height: clamp(10px, 0.94vw, 18px); padding: 0; border: var(--gw-stroke-hairline) solid var(--gw-sand-200); border-radius: var(--gw-radius-circle); background: transparent; cursor: pointer; transition: background var(--gw-dur-fast) var(--gw-ease); }
.gw-gallery__dot[aria-current="true"], .gw-gallery__dot:hover { background: var(--gw-sand-200); }
.gw-gallery__dot:focus-visible { outline: 2px solid var(--gw-teal-500); outline-offset: 3px; }
body[data-button-style] button.gw-gallery__dot { border-radius: var(--gw-radius-circle) !important; }
.gw-gallery__mark { position: absolute; left: 50%; bottom: clamp(28px, 4.58vw, 88px); z-index: 3; width: clamp(56px, 5.1vw, 98px); transform: translateX(-50%); color: var(--gw-cream-100); line-height: 0; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18)); }
.gw-gallery__mark svg { display: block; width: 100%; height: auto; }

/* Captions on photo grids (Location Local Gems, Website file 649:2): Rund Display 600 16px uppercase white,
   centred, 48px above the photo's bottom edge at 1920; a light foot scrim keeps it legible on bright photos. */
.gw-gallery__photo:has(.gw-gallery__caption)::after { content: ""; position: absolute; inset: auto 0 0 0; height: 32%; background: linear-gradient(to top, rgba(0, 0, 0, 0.38), transparent); pointer-events: none; }
.gw-gallery__caption { position: absolute; z-index: 2; left: var(--gw-space-2); right: var(--gw-space-2); bottom: clamp(16px, 2.5vw, 48px); margin: 0; color: var(--gw-white); font-family: var(--gw-font-display); font-weight: 600; font-size: var(--gw-fluid-label-s); line-height: 1.2; letter-spacing: var(--gw-track-label); text-transform: uppercase; text-align: center; pointer-events: none; }