/* The Events page only (page-events.php). Its slideshow is portrait (4:5), the shape of the
 * Christmas poster it starts with and of most phone photos, instead of the fixed-height landscape
 * frame style.css gives the other pages' slideshows. */
.content-media > .carousel.is-portrait {
  width: min(100%, 380px);
  height: auto;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
}

/* Menus and posters (inc/event-menus.php) under the main card, the boxes in a column beside them,
 * in the main card's proportions so the two columns line up with it, and the boxes as tall together
 * as the pictures, their words a size up and centred in them (Peter, 2 Nov 2026). Narrower than
 * 900px, one column: the pictures first, then the boxes at their own height. Each picture whole;
 * the shadow is a drop-shadow, which follows the picture's own outline, so a menu with cut-out
 * corners (the Christmas menu's red frame) keeps its shape. */
.events-with-menu {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(20px, 3vw, 32px);
}
.events-with-menu > .feature-row,
.events-with-menu > .feature-row.cols-2 {
  grid-template-columns: 1fr;
  margin-top: 0;
}
.events-with-menu > .event-menus { align-self: start; }
@media (min-width: 901px) {
  /* a column the height of the pictures: the boxes share it, as equal as their words allow */
  .events-with-menu > .feature-row { display: flex; flex-direction: column; }
  .events-with-menu .feature-card {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .events-with-menu .feature-card .eyebrow { font-size: clamp(.68rem, .5rem + .3vw, .74rem); }
  .events-with-menu .feature-card h2 { font-size: clamp(1.24rem, .6rem + 1.1vw, 1.5rem); margin-bottom: 12px; }
  .events-with-menu .feature-card p:not(.eyebrow) { font-size: clamp(.88rem, .62rem + .45vw, .98rem); line-height: 1.65; }
}
.event-menus {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  justify-items: center;
}
.event-menu {
  display: block;
  width: 100%;
}
.event-menu img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 30px rgba(6, 15, 35, .55));
  transition: transform .2s ease;
}
.event-menu:hover img { transform: translateY(-2px); }
.event-menu:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .event-menu img { transition: none; } }
@media (max-width: 900px) {
  .events-with-menu { grid-template-columns: 1fr; }
  .event-menu { width: min(100%, 560px); }
}