/* Gallery-local composition and controls; shared shell, CTA and footer remain unchanged. */
.gallery-title-field {
  padding: 42px 28px 36px;
}
.gallery-title-field h1 {
  font-family: "Sora", Arial, sans-serif;
  font-size: 64px;
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.075em;
  text-transform: uppercase;
  color: var(--ink);
}
.gallery-filters {
  position: sticky;
  top: 68px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 22px 28px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.gallery-filters button {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  opacity: 1;
  font: 500 14px/1.2 "Inter Tight", Arial, sans-serif;
  letter-spacing: -0.01em;
  cursor: default;
}
.gallery-filters button[aria-pressed="true"]::after {
  position: absolute;
  inset: auto 0 -5px;
  height: 1px;
  background: currentColor;
  content: "";
}
.gallery-grid {
  display: grid;
  gap: 15px;
  padding: 15px;
}
.gallery-row {
  display: grid;
  grid-template-columns: var(--row-columns);
  height: var(--row-height);
  gap: 15px;
  min-width: 0;
}
.gallery-photo {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.gallery-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-row[hidden] { display: none; }
.gallery-filter-options { display: contents; }
.gallery-filters .gallery-filter-toggle { display: none; }
.gallery-filters button:not(:disabled) { cursor: pointer; }
.gallery-photo[role="button"] { cursor: zoom-in; }
.gallery-photo[role="button"]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}
.gallery-lightbox {
  --gallery-control-lane: clamp(56px, calc(6.25vw - 0.25px), 96px);
  --gallery-shell-top: 68px;
  --gallery-shell-left: var(--rail);
  --gallery-shell-right: var(--edge);
  position: fixed;
  z-index: 25;
  inset: var(--gallery-shell-top) calc(var(--gallery-shell-right) + 1px) 0 var(--gallery-shell-left);
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  color: var(--ink);
}
.gallery-lightbox[open] { display: grid; place-items: center; }
/* Keep body from becoming the sticky header's scroll container during root scroll lock. */
.gallery-lightbox-open { overflow: clip; }
.gallery-lightbox-open .site-rail { z-index: 31; }
.gallery-lightbox::backdrop { background: transparent; }
.gallery-lightbox-band {
  position: relative;
  display: grid;
  justify-items: center;
  width: 100%;
  min-width: 0;
  padding: 84px var(--gallery-control-lane);
  background: var(--paper);
}
.gallery-lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(60dvh, calc(100dvh - var(--gallery-shell-top) - 180px));
  object-fit: contain;
  outline: 1px solid var(--rule-soft);
  outline-offset: -1px;
}
.gallery-lightbox-index {
  position: absolute;
  color: var(--muted);
  font: 400 12px/1.2 "Inter Tight", Arial, sans-serif;
  letter-spacing: -0.01em;
  pointer-events: none;
}
.gallery-lightbox button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 400 32px/1 "Inter Tight", Arial, sans-serif;
  cursor: pointer;
}
.gallery-lightbox button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.gallery-lightbox[data-input="pointer"] button:focus-visible { outline: none; }
.gallery-lightbox-close {
  top: calc((84px - 48px) / 2);
  left: calc(var(--gallery-photo-right) + var(--gallery-control-lane) - 48px - 8px);
  right: auto;
}
.gallery-lightbox-prev { left: calc(var(--gallery-control-lane) / 2 - 24px); }
.gallery-lightbox-next { right: calc(var(--gallery-control-lane) / 2 - 24px); }

@media (min-width: 1276px) {
  .gallery-lightbox-image {
    max-height: min(68dvh, calc(100dvh - var(--gallery-shell-top) - 180px));
  }
}

/* Tablet composition; other viewport ranges retain their rules. */
@media (min-width: 768px) and (max-width: 899px) {
  .gallery-filters { top: 60px; }
  .gallery-row { height: 300px; }
  .gallery-row[data-row="1"],
  .gallery-row[data-row="7"],
  .gallery-row[data-row="11"],
  .gallery-row[data-row="14"] { grid-template-columns: 55fr 45fr; }
  .gallery-row[data-row="2"],
  .gallery-row[data-row="5"],
  .gallery-row[data-row="13"] { grid-template-columns: 45fr 55fr; }
  .gallery-row[data-row="3"],
  .gallery-row[data-row="10"],
  .gallery-row[data-row="15"] { grid-template-columns: 1fr 1fr; }
  .gallery-row[data-row="4"],
  .gallery-row[data-row="9"],
  .gallery-row[data-row="12"] { grid-template-columns: 60fr 40fr; }
  .gallery-row[data-row="6"] { grid-template-columns: 40fr 60fr; }
  /* The portrait shower needs more vertical context than the standard row. */
  .gallery-row[data-row="4"] { height: 380px; }
  .gallery-row[data-row="8"] { grid-template-columns: 40fr 30fr 30fr; height: 260px; }
  .gallery-row[data-row="16"] { grid-template-columns: 30fr 35fr 35fr; height: 260px; }
  /* Override the authored desktop focal points only in the approved tablet band. */
  .gallery-photo[data-photo="Living Room 3"] img { object-position: 80% 55% !important; }
  .gallery-photo[data-photo="Bedroom 5"] img { object-position: 38% 54% !important; }
  .gallery-photo[data-photo="Bathroom 2"] img { object-position: calc(50% + 28px) 52% !important; }
  .gallery-photo[data-photo="Kitchen 4"] img { object-position: 42% 52% !important; }
}

/* Compact composition; other viewport ranges retain their rules. */
@media (min-width: 541px) and (max-width: 767px) {
  .gallery-title-field h1 { font-size: clamp(54px, calc(4.926108vw + 27.349754px), 64px); }
  .gallery-filters { top: 60px; gap: 24px; }
  .gallery-grid { gap: 10px; padding: 10px; }
  .gallery-row { height: 230px; gap: 10px; }
  .gallery-row[data-row="1"],
  .gallery-row[data-row="7"],
  .gallery-row[data-row="12"],
  .gallery-row[data-row="15"] { grid-template-columns: 55fr 45fr; }
  .gallery-row[data-row="2"],
  .gallery-row[data-row="5"],
  .gallery-row[data-row="10"],
  .gallery-row[data-row="13"] { grid-template-columns: 1fr 1fr; }
  .gallery-row[data-row="3"],
  .gallery-row[data-row="6"],
  .gallery-row[data-row="11"],
  .gallery-row[data-row="14"] { grid-template-columns: 45fr 55fr; }
  .gallery-row[data-row="4"],
  .gallery-row[data-row="9"] { grid-template-columns: 60fr 40fr; }
  .gallery-row[data-row="4"] { height: 300px; }
  .gallery-row[data-row="8"] { grid-template-columns: 34fr 33fr 33fr; height: 190px; }
  .gallery-row[data-row="16"] { grid-template-columns: 33fr 33fr 34fr; height: 190px; }
  .gallery-photo[data-photo="Living Room 3"] img { object-position: 80% 55% !important; }
  .gallery-photo[data-photo="Bedroom 5"] img { object-position: 38% 54% !important; }
  .gallery-photo[data-photo="Bathroom 2"] img { object-position: 70% 52% !important; }
  .gallery-photo[data-photo="Kitchen 4"] img { object-position: 42% 52% !important; }
  .gallery-lightbox { --gallery-control-lane: 52px; }
  .gallery-lightbox-band { padding-block: 64px; }
  .gallery-lightbox .gallery-lightbox-close {
    top: calc((64px - 48px) / 2);
    font-size: 20px;
    font-weight: 300;
  }
}

@media (min-width: 541px) and (max-width: 767px) and (max-height: 500px) {
  .gallery-title-field h1 { font-size: clamp(42px, 7vw, 48px); line-height: 1; }
  .gallery-lightbox-band { padding-block: 36px; }
  .gallery-lightbox-image {
    max-height: calc(100dvh - var(--gallery-shell-top) - 72px);
  }
  .gallery-lightbox .gallery-lightbox-close { top: 0; }
}

@media (max-width: 540px) {
  .gallery-title-field h1 { font-size: clamp(38px, calc(6.666667vw + 16px), 48px); line-height: 1; }
  .gallery-grid { gap: 10px; padding: 10px; }
  .gallery-row { height: 180px; gap: 10px; }
  .gallery-row[data-phone-row="1"],
  .gallery-row[data-phone-row="16"] { height: 240px; }
  .gallery-row[data-phone-row="4"],
  .gallery-row[data-phone-row="5"] { height: 220px; }
  .gallery-photo[data-photo="Kitchen 4"] img { object-position: 42% 52% !important; }
  .gallery-photo[data-photo="Bathroom 2"] img { object-position: calc(50% - 20px) 52% !important; }
  .gallery-photo[data-photo="Bathroom 5"] img { object-position: 50% 0% !important; }
  .gallery-photo[data-photo="Lobby 1"] img { object-position: 10% 52% !important; }
  .gallery-photo[data-photo="Living Room 3"] img { object-position: 80% 55% !important; }
  .gallery-photo[data-photo="Bedroom 5"] img { object-position: 38% 54% !important; }
  .gallery-filters { top: 56px; padding: 0 28px; gap: 0; }
  .gallery-filters .gallery-filter-toggle {
    display: flex; align-items: center; gap: 12px; min-height: 48px;
  }
  .gallery-filter-toggle::after {
    content: ""; width: 6px; height: 6px; border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-top: -3px;
  }
  .gallery-filter-toggle[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 3px; }
  .gallery-filter-options { display: none; }
  .gallery-filters[data-menu-open] .gallery-filter-options {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    padding: 8px 28px 14px; gap: 8px; background: var(--paper); border-bottom: 1px solid var(--rule);
  }
  .gallery-filter-options button { justify-self: start; min-height: 36px; }
  .gallery-filter-options button[aria-pressed="true"]::after { bottom: 3px; }
  .gallery-filters button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .gallery-lightbox { --gallery-control-lane: 48px; }
  .gallery-lightbox-band { padding-block: 40px; }
  .gallery-lightbox-image { max-height: calc(100dvh - var(--gallery-shell-top) - 80px); }
  .gallery-lightbox .gallery-lightbox-close { top: 0; font-size: 20px; font-weight: 300; }
  .gallery-lightbox .gallery-lightbox-prev,
  .gallery-lightbox .gallery-lightbox-next { font-size: 22px; font-weight: 300; }
}

/* Progressive enhancement: photographs stay visible without the reveal script. */
.gallery-reveals-ready .gallery-photo {
  opacity: 0;
  transition: opacity 700ms ease-out;
}
.gallery-reveals-ready .gallery-row[data-gallery-revealed] .gallery-photo {
  opacity: 1;
}
.gallery-reveals-ready .gallery-row[data-gallery-immediate] .gallery-photo {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .gallery-reveals-ready .gallery-photo {
    opacity: 1;
    transition: none;
  }
}