.event-hero-images .hero-photo {
  display: block; position: relative; min-width: 0; min-height: 0;
  padding: 0; border: 0; background: #f4eadb; cursor: zoom-in; overflow: hidden;
}
.event-hero-images .hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: '⤢'; position: absolute; right: .65rem; bottom: .65rem; background: #fff; color: #4b3026; border-radius: 50%; width: 32px; height: 32px; font: 24px/32px sans-serif; text-align: center; }
.event-hero::after, .event-hero-copy { pointer-events: none; }
.hero-photo:focus-visible { outline: 4px solid #d9a921; outline-offset: -4px; }
.hero-photo-dialog { width: min(94vw, 1100px); max-width: 94vw; max-height: 92dvh; border: 0; padding: 3.5rem .5rem .5rem; background: #faf5ec; overflow: hidden; }
.hero-photo-dialog::backdrop { background: rgba(58,39,29, .88); }
.hero-photo-dialog img {
  display: block;
  width: 100%;
  height: min(70.5vw, 825px, calc(92dvh - 4rem));
  object-fit: contain;
  object-position: center;
  background: #f4eadb;
}
.hero-photo-close { position: absolute; right: .5rem; top: .5rem; width: 44px; height: 44px; border: 1px solid #dfd2c2; border-radius: 50%; background: #fff; color: #4b3026; font-size: 1.8rem; cursor: pointer; }
@media (max-width: 700px) {
  .event-hero { display: flex; height: clamp(330px, 41svh, 390px); min-height: clamp(330px, 41svh, 390px); }
  .event-hero::after { display: block; background: linear-gradient(90deg, rgba(58,39,29,.76), rgba(58,39,29,.22)); }
  .event-hero .event-hero-copy { position: relative; z-index: 2; width: 100%; height: 100%; min-height: 0; padding: 2rem 1.25rem; color: #fff; background: transparent; transform: none; justify-content: center; }
  .event-hero .event-hero-copy .eyebrow { color: #f4eadb; }
  .event-hero .event-hero-copy h1 { font-size: clamp(1.8rem, 7vw, 2.25rem); line-height: 1.1; margin: .4rem 0 0; }
  .event-hero-copy h1 br { display: none; }
  .event-hero .event-hero-images { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 0; }
  .event-hero-images .hero-photo { grid-column: auto; grid-row: 1; }
  .event-hero-images .hero-photo img { object-position: center; }
}
@media (max-width: 380px) {
  .event-hero { height: 320px; min-height: 320px; }
}

/* Keep all three photos visible on narrow screens, with the first photo above. */
@media (max-width: 700px) {
  .event-hero .event-hero-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 62% 38%;
  }
  .event-hero-images .hero-photo:first-child { grid-column: 1 / -1; grid-row: 1; }
  .event-hero-images .hero-photo:nth-child(2) { grid-column: 1; grid-row: 2; }
  .event-hero-images .hero-photo:last-child { grid-column: 2; grid-row: 2; }
}