/* Project gallery and full-screen viewer. General layout lives in styles.css. */
.gallery-section {
  padding: 105px 0 110px;
  background: #f0eee8;
  scroll-margin-top: 24px;
}
.gallery-section .section-title {
  font-size: clamp(38px, 4.8vw, 65px);
}
.gallery-section .section-head .lead {
  font-size: 17px;
  max-width: 370px;
}
.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 30px 0;
}
.gallery-filters button {
  min-height: 44px;
  border: 1px solid #cfcac0;
  border-radius: 30px;
  padding: 10px 20px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.2s;
}
.gallery-filters button:hover {
  background: #e4dfd4;
}
.gallery-filters button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.gallery-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid #ded9cf;
  padding: 0;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  min-width: 0;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
.gallery-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 28px #201d1714;
}
.gallery-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4/3;
  width: 100%;
}
.gallery-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.gallery-card:hover img {
  transform: scale(1.035);
}
.gallery-count {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: #fffffff0;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
}
.gallery-card-body {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 12px;
  flex: 1;
  width: 100%;
}
.gallery-category {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 750;
  color: var(--wood);
}
.gallery-title {
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}
.gallery-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-line;
}
.gallery-open {
  border-top: 1px solid var(--line);
  padding-top: 15px;
  margin-top: auto;
  font-size: 12px;
  font-weight: 700;
}
.gallery-empty {
  border: 1px solid #d4cec3;
  background: #faf9f6;
  border-radius: 4px;
  padding: 48px;
  max-width: 100%;
  margin-top: 32px;
}
.gallery-empty h3 {
  font-size: 26px;
  letter-spacing: -0.035em;
  margin: 0 0 12px;
  font-weight: 600;
}
.gallery-empty p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0;
  max-width: 560px;
}
/* A single lightbox serves featured projects and service galleries. */
.viewer-open { overflow: hidden; overscroll-behavior: none; }
.gallery-viewer {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #f7f6ef;
  background: #151a16;
  overflow: hidden;
  overscroll-behavior: none;
  --dismiss-opacity: 1;
}
.gallery-viewer::backdrop { background: #111711f2; backdrop-filter: blur(14px); }
.gallery-viewer:focus-visible { outline: none; }
.viewer-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
  width: 100%;
  height: 100%;
  padding: max(22px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
}
.viewer-header {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-width: 0;
  min-height: 54px;
}
.viewer-label { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.viewer-heading-line { display: flex; align-items: center; gap: 18px; min-width: 0; }
.viewer-eyebrow { color: #b4bfad; font-size: 9px; letter-spacing: .16em; font-weight: 650; white-space: nowrap; }
.viewer-counter { color: #e0d5bb; font-size: 10px; font-weight: 550; letter-spacing: .1em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.viewer-title { margin: 0; overflow: hidden; color: #fffef7; font-size: 17px; line-height: 1.3; letter-spacing: -.025em; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.viewer-tools { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex: none; }
.viewer-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 10px;
  border: 1px solid #72806c5c;
  border-radius: 50%;
  color: #f7f6ee;
  background: #ffffff08;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s, border-color .18s, opacity .18s;
}
.viewer-tool svg { display: block; width: 20px; height: 20px; flex: none; pointer-events: none; }
.viewer-tool:hover:not(:disabled) { background: #f4eddb1c; border-color: #c2cbb187; }
.viewer-tool[aria-pressed="true"] { background: #e2d7ba; color: #263124; border-color: #e2d7ba; }
.viewer-tool:focus-visible, .viewer-thumbnail:focus-visible { outline: 2px solid #e2d7ba; outline-offset: 4px; }
.viewer-tool:disabled { cursor: default; opacity: .35; }
.viewer-zoom-level { width: 49px; border-radius: 23px; padding: 8px 5px; font-size: 11px; font-variant-numeric: tabular-nums; }
.viewer-close { margin-left: 8px; color: #1e2a20; background: #f2efe4; border-color: #f2efe4; }
.viewer-close:hover:not(:disabled) { color: #17241b; background: #ddcfaf; border-color: #ddcfaf; }
.viewer-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; opacity: var(--dismiss-opacity); }
.viewer-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.viewer-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  transform-origin: center;
  will-change: transform;
  transition: transform .22s cubic-bezier(.2, .7, .2, 1), opacity .18s;
}
.viewer-loading .viewer-image { opacity: 0; }
.viewer-dragging .viewer-image { transition: none; }
.viewer-dragging .viewer-viewport, .viewer-zoomed.viewer-dragging .viewer-viewport { cursor: grabbing; }
.viewer-zoomed .viewer-viewport { cursor: grab; }
.viewer-step { position: absolute; top: 50%; z-index: 2; width: 49px; height: 49px; margin-top: -24px; background: #1a231bdd; border-color: #c1ccb36b; box-shadow: 0 6px 22px #0002; backdrop-filter: blur(12px); }
.viewer-step.prev { left: 8px; }
.viewer-step.next { right: 8px; }
.viewer-step svg { width: 23px; height: 23px; }
.viewer-image-status { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; padding: 45px; color: #d9e0d1; text-align: center; font-size: 13px; line-height: 1.65; pointer-events: none; }
.viewer-image-status .viewer-tool { pointer-events: auto; }
.viewer-spinner { width: 26px; height: 26px; border: 2px solid #8b967c38; border-top-color: #d3c8a8; border-radius: 50%; animation: viewer-spin .8s linear infinite; }
@keyframes viewer-spin { to { transform: rotate(360deg); } }
.viewer-footer { display: grid; min-width: 0; gap: 12px; }
.viewer-photo-info { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; min-width: 0; }
.viewer-caption { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c9d0c1; font-size: 11px; line-height: 1.5; }
.viewer-help { flex: none; margin: 0; color: #85917d; font-size: 10px; line-height: 1.5; }
.viewer-thumbnails { display: flex; position: relative; gap: 9px; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 3px 2px 6px; scrollbar-width: thin; scrollbar-color: #7e8c6f #ffffff08; overscroll-behavior-x: contain; }
.viewer-thumbnail { display: block; flex: 0 0 83px; width: 83px; height: 57px; margin: 0; padding: 3px; border: 1px solid #ffffff00; border-radius: 5px; color: inherit; background: transparent; cursor: pointer; opacity: .48; transition: opacity .18s, border-color .18s; }
.viewer-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; pointer-events: none; }
.viewer-thumbnail[aria-current="true"] { border-color: #d9caa4; opacity: 1; }
.viewer-thumbnail:hover { opacity: 1; }
.viewer-progress { height: 2px; background: #72806c33; overflow: hidden; border-radius: 2px; }
.viewer-progress > span { display: block; width: 0; height: 100%; background: #c9b789; transition: width .25s; }

@media (min-width: 681px) and (max-width: 1100px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .viewer-layout { gap: 15px; padding-inline: 22px; }
  .viewer-header { gap: 18px; }
  .viewer-tools { gap: 6px; }
  .viewer-title { font-size: 16px; }
  .viewer-help { max-width: 210px; font-size: 9px; }
  .viewer-photo-info { gap: 18px; }
}
@media (max-width: 980px) {
  .gallery-section { padding: 80px 0; }
  .viewer-tools .viewer-tool { width: 40px; height: 40px; min-height: 40px; }
  .viewer-tools .viewer-zoom-level { width: 45px; }
  .viewer-heading-line { gap: 13px; }
  .viewer-eyebrow { font-size: 8px; }
}
@media (max-width: 680px) {
  .gallery-section { padding: 68px 0 75px; }
  .gallery-section .section-title { font-size: clamp(36px, 10vw, 48px); }
  .gallery-grid { grid-template-columns: 1fr; gap: 20px; }
  .gallery-filters { gap: 7px; }
  .gallery-filters button { padding: 10px 15px; }
  .gallery-empty { padding: 28px; }
  .gallery-card-body { padding: 22px; }
  .viewer-layout { gap: 12px; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .viewer-header { flex-direction: column; align-items: stretch; gap: 15px; }
  .viewer-label { padding-right: 51px; gap: 8px; }
  .viewer-heading-line { gap: 13px; }
  .viewer-title { font-size: 15px; }
  .viewer-eyebrow { font-size: 8px; letter-spacing: .14em; }
  .viewer-tools { justify-content: flex-start; gap: 8px; }
  .viewer-tools .viewer-tool { min-height: 40px; width: 40px; height: 40px; }
  .viewer-tools .viewer-zoom-level { width: 46px; }
  .viewer-tools .viewer-close { position: absolute; top: 0; right: 0; margin: 0; width: 43px; height: 43px; }
  .viewer-step { width: 43px; height: 43px; margin-top: -21px; }
  .viewer-step.prev { left: 3px; }
  .viewer-step.next { right: 3px; }
  .viewer-photo-info { flex-direction: column; gap: 5px; }
  .viewer-caption { width: 100%; font-size: 10px; }
  .viewer-help { max-width: none; font-size: 9px; }
  .viewer-thumbnails { gap: 7px; padding-bottom: 4px; }
  .viewer-thumbnail { flex-basis: 66px; width: 66px; height: 49px; }
  .viewer-footer { gap: 10px; }
  .viewer-image-status { padding: 30px; font-size: 12px; }
}
@media (max-width: 360px) {
  .viewer-layout { padding-inline: 10px; }
  .viewer-tools { gap: 6px; }
  .viewer-tools .viewer-tool { width: 38px; height: 38px; min-height: 38px; }
  .viewer-tools .viewer-zoom-level { width: 43px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .viewer-layout { padding: 9px 18px; gap: 8px; }
  .viewer-header { flex-direction: row; align-items: center; gap: 16px; }
  .viewer-label { padding-right: 0; gap: 4px; max-width: 50%; }
  .viewer-title { font-size: 13px; }
  .viewer-eyebrow { font-size: 7px; }
  .viewer-tools { justify-content: flex-end; gap: 5px; }
  .viewer-tools .viewer-tool { width: 34px; height: 34px; min-height: 34px; padding: 8px; }
  .viewer-tools .viewer-zoom-level { width: 38px; }
  .viewer-tools .viewer-close { position: static; margin-left: 5px; width: 34px; height: 34px; }
  .viewer-photo-info { display: none; }
  .viewer-thumbnail { height: 34px; flex-basis: 49px; width: 49px; padding: 2px; }
  .viewer-footer { gap: 5px; }
  .viewer-thumbnails { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer-image, .viewer-thumbnail, .viewer-tool, .viewer-progress > span { transition: none; }
  .viewer-spinner { animation-duration: 1.5s; }
}