/* Detail photos keep a portrait frame while the first landscape shot leads. */
.detail-gallery { margin-top: clamp(36px, 6vw, 76px); }
.detail-gallery[hidden] { display: none; }
.detail-gallery__heading { margin-bottom: 24px; }
.detail-gallery__heading h3 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.4rem); }
.detail-gallery__heading p { margin: 8px 0 0; color: var(--color-text-muted); }
.detail-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-4); }
.detail-grid .hp-item, .detail-grid .portfolio-item { width: 100%; height: auto; aspect-ratio: 3 / 4; grid-column: auto; grid-row: auto; }
.detail-grid .hp-item:first-child, .detail-grid .portfolio-item:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: auto; }
.detail-grid img { object-position: center center; }
@media (max-width: 700px) {
  .detail-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .detail-grid .hp-item:first-child, .detail-grid .portfolio-item:first-child { aspect-ratio: 16 / 9; }
}
@media (max-width: 520px) {
  .detail-grid { gap: 12px; }
  .detail-grid .hp-item, .detail-grid .portfolio-item { aspect-ratio: 3 / 4; }
}