/* A shared, framed salon wall for every official set. */
.official-detail .salon-wall {
  --salon-gap: 13px;
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: var(--salon-gap);
  width: min(100%, 1080px);
  height: clamp(540px, 66vw, 760px);
  margin: 0 auto 68px;
  align-items: stretch;
}
.official-detail .salon-wall > .detail-photo {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 9px;
  overflow: hidden;
  background: #f7f5ef;
  border: 1px solid #a99a8d;
  box-shadow: 0 4px 15px rgba(72, 57, 45, .075);
  transition: opacity .28s ease, filter .28s ease, transform .28s ease, box-shadow .28s ease;
}
.official-detail .salon-wall > .detail-photo::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(169, 154, 141, .46);
  pointer-events: none;
}
.official-detail .salon-wall > .detail-photo:first-child { grid-column: 1; grid-row: 1 / span 3; }
.official-detail .salon-wall > .detail-photo:nth-child(2) { grid-column: 2; grid-row: 1; }
.official-detail .salon-wall > .detail-photo:nth-child(3) { grid-column: 2; grid-row: 2; }
.official-detail .salon-wall > .detail-photo:nth-child(4) { grid-column: 2; grid-row: 3; }
.official-detail .salon-wall > .detail-photo > a { display: block; min-height: 0; overflow: hidden; background: #e7e1d6; }
.official-detail .salon-wall > .detail-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  filter: saturate(.91) sepia(.035);
  transition: transform .4s ease, filter .4s ease;
}
.official-detail .salon-wall > .detail-photo figcaption {
  margin: 0;
  padding: 7px 3px 1px;
  color: #695a4e;
  font: 500 13px/1.2 'EB Garamond', Georgia, 'Times New Roman', serif;
  letter-spacing: .045em;
}
.official-detail .salon-wall:hover > .detail-photo { opacity: .76; filter: saturate(.82); }
.official-detail .salon-wall > .detail-photo:hover,
.official-detail .salon-wall > .detail-photo:focus-within {
  z-index: 1;
  opacity: 1;
  filter: none;
  transform: scale(1.012);
  box-shadow: 0 9px 24px rgba(72, 57, 45, .14);
}
.official-detail .salon-wall > .detail-photo:hover img,
.official-detail .salon-wall > .detail-photo:focus-within img { transform: scale(1.025); filter: saturate(1); }

/* Three-photo scenes retain the same left-anchor composition. */
.official-detail .salon-wall[data-photo-count="3"] { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.official-detail .salon-wall[data-photo-count="3"] > .detail-photo:first-child { grid-row: 1 / span 2; }
.official-detail .salon-wall[data-photo-count="3"] > .detail-photo:nth-child(2) { grid-row: 1; }
.official-detail .salon-wall[data-photo-count="3"] > .detail-photo:nth-child(3) { grid-row: 2; }

/* Dining Room has three additional official photographs; keep them all visible below. */
.official-detail .salon-wall.salon-wall--secondary {
  width: min(100%, 1080px);
  height: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: clamp(170px, 21vw, 250px);
  margin: 0 auto 68px;
}
.official-detail .salon-wall--secondary > .detail-photo:nth-child(n) { grid-column: auto; grid-row: auto; }
.official-detail .salon-wall--secondary > .detail-photo:first-child,
.official-detail .salon-wall--secondary > .detail-photo:nth-child(2),
.official-detail .salon-wall--secondary > .detail-photo:nth-child(3) { grid-column: auto; grid-row: auto; }
.official-detail .salon-wall--secondary > .detail-photo:last-child:nth-child(odd) { grid-column: auto; width: 100%; justify-self: stretch; }
.official-detail .salon-wall--secondary > .detail-photo:only-child,
.official-detail .salon-wall--secondary > .detail-photo:last-child:nth-child(3n + 1) { grid-column: 2; }

@media (max-width: 768px) {
  .official-detail .salon-wall,
  .official-detail .salon-wall[data-photo-count="3"],
  .official-detail .salon-wall.salon-wall--secondary {
    width: min(100%, 560px);
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: 16px;
    margin: 0 auto 44px;
  }
  .official-detail .salon-wall > .detail-photo:first-child,
  .official-detail .salon-wall > .detail-photo:nth-child(2),
  .official-detail .salon-wall > .detail-photo:nth-child(3),
  .official-detail .salon-wall > .detail-photo:nth-child(4) { grid-column: 1; grid-row: auto; }
  .official-detail .salon-wall > .detail-photo { min-height: 250px; padding: 8px; }
  .official-detail .salon-wall > .detail-photo > a { aspect-ratio: 1.42; }
  .official-detail .salon-wall > .detail-photo img { height: 100%; }
  .official-detail .salon-wall--secondary > .detail-photo { min-height: 220px; }
  .official-detail .salon-wall--secondary > .detail-photo:last-child:nth-child(odd) { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .official-detail .salon-wall > .detail-photo,
  .official-detail .salon-wall > .detail-photo img { transition: none; }
}