/**
 * Photographic additions for the Events page.
 *
 * This file stays separate from the shared site stylesheet so the event-only
 * layout remains easy to find and does not affect other pages.
 */
.events-hero-visual {
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto;
  column-gap:clamp(2rem,6vw,6rem);
  row-gap:clamp(1.5rem,3vw,2.5rem);
  align-items:center
}

.events-hero-visual h1 {
  font-size:clamp(5.5rem,9vw,8.5rem)
}

.events-hero-photo {
  display:block;
  grid-column:2;
  grid-row:1 / span 2;
  color:inherit
}

.events-hero-heading {
  grid-column:1;
  grid-row:1;
  align-self:end
}

.events-hero-copy {
  grid-column:1;
  grid-row:2;
  align-self:start
}

.events-hero-photo figure {
  position:relative;
  margin:0;
  overflow:hidden;
  background:#101b33;
  box-shadow:.8rem .8rem 0 #f2b84b
}

.events-hero-photo img {
  width:100%;
  height:clamp(20rem,30vw,28rem);
  display:block;
  object-fit:cover;
  transition:transform .35s ease
}

.events-hero-photo figcaption {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  padding:.9rem 1rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  background:rgba(16,27,51,.92);
  color:#fff;
  font-size:.68rem;
  font-weight:700
}

.events-hero-photo figcaption strong {
  color:#f2b84b;
  text-transform:uppercase
}

.events-hero-photo:hover img,
.events-hero-photo:focus-visible img {
  transform:scale(1.025)
}

.events-hero-photo:focus-visible {
  outline:3px solid #173f78;
  outline-offset:.35rem
}

.events-special-description {
  max-width:44rem;
  color:#d7e0ec;
  line-height:1.7
}

.events-meeting-recurrence {
  max-width:18rem;
  margin:0;
  color:#173f78;
  font:600 clamp(1.15rem,2vw,1.55rem)/1.35 var(--font-display);
  text-transform:uppercase
}

@media(max-width:70rem) {
  .events-hero-visual {
    grid-template-columns:1fr 1fr
  }
}

@media(max-width:47.5rem) {
  .events-hero-visual {
    grid-template-columns:1fr
  }

  .events-hero-heading,
  .events-hero-photo,
  .events-hero-copy {
    grid-column:auto;
    grid-row:auto
  }

  .events-hero-heading {
    order:1
  }

  .events-hero-photo {
    order:2
  }

  .events-hero-copy {
    order:3
  }

  .events-hero-photo img {
    height:21rem
  }

  .events-hero-photo figcaption {
    flex-direction:column;
    gap:.3rem
  }
}