.pev-grid {
  display: grid;
  gap: 24px;
  margin: 24px 0;
  /* Fallback only — the actual column count normally comes from a
     pev-cols-N class below, chosen by balanced_grid_cols() in PHP so a
     leftover card never ends up alone on its own row stretched full width. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pev-cols-1 { grid-template-columns: 1fr; }
.pev-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pev-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pev-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .pev-grid[class*="pev-cols-"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pev-grid[class*="pev-cols-"] { grid-template-columns: 1fr; }
}

/* Homepage grid: same auto-fit approach so it adapts to 1, a few, or many events */
.pev-home-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.pev-home-single { grid-template-columns: 1fr; }

.pev-card {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.pev-card-hero { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
.pev-card-hero .pev-card-image { flex: 1 1 50%; }
.pev-card-hero .pev-card-body { flex: 1 1 45%; padding: 28px; display: flex; flex-direction: column; justify-content: center; }
.pev-card-hero .pev-card-title { font-size: 26px; }

.pev-card-image { display: block; aspect-ratio: 16/10; background: #f2f2f2; overflow: hidden; }
.pev-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pev-card-body { padding: 16px 18px 20px; }
.pev-card-date { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #B8860B; font-weight: 600; }
.pev-card-venue { font-size: 13px; color: #777; margin-top: 2px; }
.pev-card-title { margin: 8px 0 14px; font-size: 18px; }
.pev-card-title a { color: inherit; text-decoration: none; }
.pev-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------------- "From Rxxx" theatre-ticket price tag ---------------- */
.pev-price-tag {
  position: relative;
  display: inline-block;
  background: #B8860B;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  padding: 6px 14px;
  border-radius: 4px;
  margin: 0 0 12px;
}
.pev-price-tag::before,
.pev-price-tag::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
}
.pev-price-tag::before { left: -5px; }
.pev-price-tag::after { right: -5px; }
.pev-price-tag span { position: relative; border-left: 1px dashed rgba(255,255,255,.5); border-right: 1px dashed rgba(255,255,255,.5); padding: 0 8px; }

.pev-btn {
  display: inline-block; padding: 8px 16px; border-radius: 4px; font-size: 13px;
  background: #1F3864; color: #fff !important; text-decoration: none;
  border: none; cursor: pointer; font-family: inherit;
}
.pev-btn-outline { background: transparent; color: #1F3864 !important; border: 1px solid #1F3864; }
.pev-btn-lg { padding: 12px 24px; font-size: 15px; border-radius: 5px; }
.pev-btn-outline-light { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,.8); }
.pev-btn-outline-light:hover { background: rgba(255,255,255,.12); }
.pev-empty { padding: 24px; text-align: center; color: #888; }
.pev-view-all { text-align: center; margin-top: 8px; }
.pev-view-all a { color: #1F3864; font-weight: 600; text-decoration: none; }

/* ---------------- Homepage hero: 1 or 2 full-bleed "poster" blocks ---------------- */
.pev-hero-row {
  display: grid;
  gap: 20px;
  margin: 0 0 32px;
  grid-template-columns: 1fr;
}
.pev-hero-count-2 { grid-template-columns: repeat(2, 1fr); }

.pev-hero-poster {
  position: relative;
  min-height: 560px;
  border-radius: 10px;
  overflow: hidden;
  background: #1F3864 center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pev-hero-count-2 .pev-hero-poster { min-height: 460px; }

/* Full-image darkening (not just a bottom gradient) so centered text stays
   legible wherever it lands on the photo, with a slightly heavier vignette
   toward the middle where the text block sits. */
.pev-hero-poster-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10,14,26,.55) 0%, rgba(10,14,26,.4) 55%, rgba(10,14,26,.55) 100%),
    linear-gradient(rgba(10,14,26,.35), rgba(10,14,26,.35));
}

.pev-hero-poster-content {
  position: relative;
  padding: 40px;
  color: #fff;
  width: 100%;
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
}
.pev-hero-poster-date {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #E8C87A;
  font-weight: 600;
  margin-bottom: 10px;
}
/* color/text-shadow are !important because several themes (Astra included)
   ship a default h1-h6 heading color rule with enough specificity to win
   over a plain class selector — without this, the title can end up the
   theme's default dark heading color instead of the white this design
   needs, which is what made it disappear against a dark photo. */
.pev-hero-poster-title {
  margin: 0 0 10px;
  font-size: 40px;
  line-height: 1.15;
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4) !important;
}
.pev-hero-count-2 .pev-hero-poster-title { font-size: 28px; }
.pev-hero-poster-venue { font-size: 15px; color: #e4e7f0; margin-bottom: 18px; letter-spacing: .02em; }

.pev-price-tag-dark { margin-left: auto; margin-right: auto; }
.pev-price-tag-dark::before,
.pev-price-tag-dark::after { background: #1F3864; }

.pev-hero-poster-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; justify-content: center; }

/* pev-script.js samples the actual poster photo and adds this class when
   it's a mostly-light image (bright skies, pale sets, etc.) — a plain
   white title on a light photo disappears, so it switches to a dark navy
   title with a soft light glow instead, and flips the outline button to
   match. Until the JS finishes analyzing the image (or if that fails —
   e.g. a hotlinked photo without CORS headers), the default light-on-dark
   treatment above still applies, so text is never left unreadable either way. */
.pev-hero-poster.pev-hero-light-photo .pev-hero-poster-overlay {
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,.32) 0%, rgba(255,255,255,.12) 55%, rgba(20,20,30,.25) 100%),
    linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1));
}
.pev-hero-poster.pev-hero-light-photo .pev-hero-poster-date { color: #8a5a12; }
.pev-hero-poster.pev-hero-light-photo .pev-hero-poster-title {
  color: #1F3864 !important;
  text-shadow: 0 2px 16px rgba(255,255,255,.85), 0 1px 2px rgba(255,255,255,.6) !important;
}
.pev-hero-poster.pev-hero-light-photo .pev-hero-poster-venue { color: #2b3a55; }
.pev-hero-poster.pev-hero-light-photo .pev-price-tag-dark::before,
.pev-hero-poster.pev-hero-light-photo .pev-price-tag-dark::after { background: #F5F1E8; }
.pev-hero-poster.pev-hero-light-photo .pev-btn-outline-light {
  color: #1F3864 !important;
  border-color: rgba(31,56,100,.55);
}
.pev-hero-poster.pev-hero-light-photo .pev-btn-outline-light:hover { background: rgba(31,56,100,.1); }

@media (max-width: 780px) {
  .pev-hero-count-2 { grid-template-columns: 1fr; }
  .pev-hero-poster { min-height: 420px; }
  .pev-hero-poster-content { padding: 26px; }
  .pev-hero-poster-title { font-size: 28px; }
}

/* Optional slideshow mode: [pacofs_events_home slideshow="1"]. Every slide
   is rendered up front (each is a normal .pev-hero-row, same markup the
   static hero uses) and stacked on top of one another; pev-script.js
   toggles which one is ".is-active", crossfading via opacity. Without JS,
   only the first slide's opacity/visibility ever changes, so it just looks
   like the static hero — no broken carousel. */
.pev-hero-slideshow { position: relative; margin: 0 0 32px; min-height: 560px; }
.pev-hero-slideshow .pev-hero-row {
  margin: 0;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease;
  pointer-events: none;
}
.pev-hero-slideshow .pev-hero-row.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.pev-hero-slideshow .pev-hero-poster { height: 100%; min-height: 0; }

.pev-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7);
  background: rgba(10,14,26,.35);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.pev-hero-nav:hover { background: rgba(10,14,26,.6); }
.pev-hero-nav:focus-visible { outline: 2px solid #B8860B; outline-offset: 2px; }
.pev-hero-prev { left: 16px; }
.pev-hero-next { right: 16px; }

.pev-hero-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}
.pev-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.3);
  padding: 0;
  cursor: pointer;
}
.pev-hero-dot.is-active { background: #B8860B; border-color: #B8860B; }
.pev-hero-dot:focus-visible { outline: 2px solid #B8860B; outline-offset: 2px; }

@media (max-width: 780px) {
  .pev-hero-slideshow { min-height: 420px; }
  .pev-hero-nav { width: 36px; height: 36px; font-size: 14px; }
}

/* ---------------- What's On / Past Productions: row list layout ---------------- */
.pev-list { display: flex; flex-direction: column; gap: 20px; margin: 24px 0; }

/* Four columns spanning the row's full width — image, title/price, venue/
   dates, actions — instead of a narrow text block hugging the image with
   empty space down the rest of the card. The expand panel (full dates +
   description) spans all columns on its own row underneath when opened. */
.pev-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1.1fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 28px;
  padding: 20px 24px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
/* A fixed aspect-ratio here used to fight with flex's default stretch
   (the box would stretch tall to match a long date list, but the ratio
   kept the crisp image itself short — leaving a grey gap below it). Now
   the image column stretches to match the row's height, a blurred/faded
   duplicate of the same photo fills that full height as a backdrop, and
   the crisp image sits on top via object-fit:contain — so there's never a
   bare grey gap, whatever the row's height ends up being. */
.pev-row-image {
  grid-row: 1;
  grid-column: 1;
  align-self: stretch;
  position: relative;
  overflow: hidden;
  display: block;
  background: #f2f2f2;
  min-width: 0;
  min-height: 150px;
  border-radius: 6px;
}
.pev-row-image-bg {
  position: absolute;
  inset: -10px;
  background-size: cover;
  background-position: center;
  filter: blur(16px) brightness(0.92);
  transform: scale(1.15);
  opacity: 0.5;
}
.pev-row-image img {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

.pev-row-col { min-width: 0; }
.pev-row-col-title .pev-card-title { margin: 0 0 10px; }
/* Venue stands out more here (bold, navy, larger) and the date list sits
   right underneath it with minimal gap, instead of the two looking
   loosely related. */
.pev-row-col-info .pev-card-venue {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: #1F3864;
}
.pev-row-col-info .pev-row-dates { margin-top: 0; }
.pev-row-col-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.pev-row-col-actions .pev-btn { text-align: center; }

/* !important here because Astra (and several other themes) apply their
   own default left padding/indent to plain <ul> elements inside content
   areas with enough specificity to beat a plain class selector — without
   it, the date list sits indented to the right of the venue name above it
   instead of sharing its left edge. */
.pev-row-dates {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px;
  color: #444;
}
.pev-row-dates li { padding: 2px 0 !important; margin: 0 !important; list-style: none !important; }

/* "Read More" reveals this full-width panel below the row's columns, as
   two columns of its own: description on the left, the itemized "All
   performances" date/time list on the right. If only one of the two
   exists (no description, or no extra dates worth listing), it spans the
   full width instead of leaving an empty second column. Collapses to a
   single stacked column on narrower screens. */
.pev-row-expand {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 8px 40px;
}
/* Needed because "display: grid" above has the same specificity as the
   browser's built-in "[hidden] { display: none }" rule and loads later,
   so without this override every panel showed expanded on page load
   regardless of its "hidden" attribute — this selector's higher
   specificity restores the collapse. */
.pev-row-expand[hidden] { display: none; }
.pev-row-expand > *:only-child { grid-column: 1 / -1; }
.pev-row-expand-dates strong { display: block; margin-bottom: 6px; font-size: 13px; color: #1F3864; text-transform: uppercase; letter-spacing: .04em; }
.pev-row-dates-full {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  color: #444;
}
.pev-row-dates-full li { padding: 3px 0 !important; margin: 0 !important; list-style: none !important; }
.pev-row-excerpt { font-size: 14px; color: #444; line-height: 1.6; }
.pev-row-excerpt p:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .pev-row { grid-template-columns: 180px 1fr 1fr; }
  .pev-row-col-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .pev-row-col-actions .pev-btn { flex: 1 1 140px; }
}

@media (max-width: 820px) {
  .pev-row-expand { grid-template-columns: 1fr; }
  .pev-row-expand-dates { padding-top: 4px; }
}

@media (max-width: 640px) {
  .pev-row { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .pev-row-image { grid-column: 1; width: 100%; min-height: 200px; }
  .pev-row-col-actions { grid-column: 1; flex-direction: row; }
}

/* ---------------- "Read More" modal (grid cards + hero poster) ---------------- */
body.pev-modal-open-body { overflow: hidden; }

.pev-modal { position: fixed; inset: 0; z-index: 100000; }
.pev-modal[hidden] { display: none; }
.pev-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,14,26,.72);
}
.pev-modal-box {
  position: relative;
  margin: 5vh auto;
  max-width: 640px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.pev-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.95);
  color: #1F3864;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
  transition: background .15s ease, transform .15s ease;
}
.pev-modal-close:hover { background: #fff; transform: scale(1.08); }
.pev-modal-close:focus-visible { outline: 2px solid #1F3864; outline-offset: 2px; }
.pev-modal-image {
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border-radius: 10px 10px 0 0;
}
.pev-modal-body { padding: 24px 28px 28px; }

.pev-modal-title { margin: 0 0 10px; font-size: 24px; }
.pev-modal-content { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: #333; }

/* Venue (bold, left) and price + full dates (stacked, right) share one
   row below the title/description, with a divider separating it from the
   description above — then Buy Tickets sits at the very bottom. */
.pev-modal-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
.pev-modal-venue { font-size: 16px; font-weight: 700; color: #1F3864; }
.pev-modal-price-dates { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.pev-modal-price-dates .pev-price-tag { margin: 0; }
.pev-modal-price-dates .pev-row-dates-full { text-align: right; }
.pev-modal-content p:first-child { margin-top: 0; }

.pev-modal-buy-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 22px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .pev-modal-box { margin: 0; max-width: 100%; width: 100%; max-height: 100vh; border-radius: 0; }
  .pev-modal-image { border-radius: 0; }
  .pev-modal-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pev-modal-price-dates { align-items: flex-start; }
  .pev-modal-price-dates .pev-row-dates-full { text-align: left; }
}

/* ---------------- Past Events page: gallery-count rows ---------------- */
/* Venue info block (address/parking/access) — inside the event "Read More"
   modal, and via the standalone [pacofs_venue_info] shortcode */
.pev-venue-info {
  margin: 10px 0 16px;
  padding: 12px 14px;
  background: #F5F1E8;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pev-venue-info-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.pev-venue-info-label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #B8860B;
  flex: 0 0 62px;
}
.pev-venue-info-value { color: #333; font-size: 14px; flex: 1 1 200px; }
.pev-venue-info-link {
  color: #1F3864;
  font-weight: 600;
  font-size: 13px;
  text-decoration: underline;
}
.pev-venue-info-link:hover { color: #B8860B; }

/* Year / Venue / Genre filter bar above the Past Productions list */
.pev-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin: 24px 0 8px;
  padding: 16px 20px;
  background: #F5F1E8;
  border-radius: 8px;
}
.pev-filter-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pev-filter-field span {
  font-weight: 600;
  color: #1F3864;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}
.pev-filter-field select {
  padding: 8px 32px 8px 12px;
  border-radius: 20px;
  border: 1px solid #d8d0bd;
  background: #fff;
  color: #1F3864;
  font-size: 14px;
  min-width: 160px;
  cursor: pointer;
}
.pev-filter-field select:focus-visible { outline: 2px solid #B8860B; outline-offset: 1px; }
.pev-filters-submit { align-self: center; }
.pev-filters-clear {
  align-self: center;
  color: #B8860B;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}
.pev-filters-clear:hover { color: #1F3864; }
@media (max-width: 600px) {
  .pev-filters { flex-direction: column; align-items: stretch; gap: 12px; }
  .pev-filter-field select { width: 100%; }
}

/* Newer/Older pager under the Past Productions list */
.pev-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 32px 0 8px;
}
.pev-page-link {
  color: #1F3864;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid #1F3864;
  border-radius: 20px;
  transition: background .15s ease, color .15s ease;
}
.pev-page-link:hover { background: #1F3864; color: #fff; }
.pev-page-disabled {
  color: #bbb;
  border: 1px solid #e5e5e5;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}
.pev-page-status { color: #555; font-size: 13px; }

.pev-past-list { display: flex; flex-direction: column; gap: 16px; margin: 24px 0; }
.pev-past-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.pev-past-row:hover,
.pev-past-row:focus-visible {
  border-color: #1F3864;
  box-shadow: 0 4px 16px rgba(31,56,100,.12);
  outline: none;
}
.pev-past-row-image {
  aspect-ratio: 4/3;
  border-radius: 6px;
  background: #1F3864 center / cover no-repeat;
}
.pev-past-row-title { margin: 0 0 6px; font-size: 18px; color: #1F3864; }
.pev-past-row-desc { margin: 0 0 10px; font-size: 14px; color: #555; line-height: 1.6; }
.pev-past-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; font-size: 13px; color: #777; }
.pev-past-row-when { font-weight: 600; color: #1F3864; }
.pev-past-row-media { display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 560px) {
  .pev-past-row { grid-template-columns: 1fr; }
  .pev-past-row-image { aspect-ratio: 16/9; }
}

/* ---------------- Homepage "Past Events" gallery teaser ---------------- */
.pev-past-teaser-view-all { text-align: center; margin: 0 0 24px; }
.pev-past-teaser-grid {
  display: grid;
  gap: 20px;
  margin: 24px 0;
  /* Fallback only — see the .pev-teaser-cols-N note above .pev-cols-1 */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pev-past-teaser-grid.pev-teaser-cols-1 { grid-template-columns: 1fr; }
.pev-past-teaser-grid.pev-teaser-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pev-past-teaser-grid.pev-teaser-cols-3 { grid-template-columns: repeat(3, 1fr); }
.pev-past-teaser-grid.pev-teaser-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .pev-past-teaser-grid[class*="pev-teaser-cols-"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pev-past-teaser-grid[class*="pev-teaser-cols-"] { grid-template-columns: 1fr; }
}
.pev-past-teaser {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 380px;
  border-radius: 8px;
  overflow: hidden;
  background: #1F3864 center / cover no-repeat;
  text-decoration: none;
  padding: 24px 20px;
  text-align: center;
}

@media (max-width: 700px) {
  .pev-past-teaser { min-height: 300px; }
}
.pev-past-teaser-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(10,14,26,0) 30%, rgba(10,14,26,.82) 100%);
}
.pev-past-teaser-title {
  position: relative;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 14px;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.pev-past-teaser-btn { position: relative; }

/* ---------------- Gallery modal: masonry + lightbox ---------------- */
.pev-gallery-modal-box { max-width: 900px; }
.pev-gallery-modal-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: #777; margin: -6px 0 16px; }
.pev-gallery-modal-when { font-weight: 600; color: #1F3864; }

/* CSS-columns masonry — no JS layout math needed; varying image heights
   naturally stagger across columns, exactly like a Pinterest-style grid. */
.pev-masonry {
  column-count: 3;
  column-gap: 10px;
  margin-top: 18px;
}
.pev-masonry-item {
  display: block;
  width: 100%;
  break-inside: avoid;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: #f2f2f2;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}
.pev-masonry-item img { width: 100%; height: auto; display: block; transition: transform .2s ease; }
.pev-masonry-item:hover img { transform: scale(1.04); }
.pev-masonry-item:focus-visible { outline: 2px solid #1F3864; outline-offset: 2px; }

.pev-masonry-video-thumb {
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1F3864;
}
.pev-play-icon { color: #fff; font-size: 26px; }

@media (max-width: 700px) { .pev-masonry { column-count: 2; } }
@media (max-width: 460px) { .pev-masonry { column-count: 1; } }

/* Lightbox: full-screen overlay, browsable via the on-screen arrow buttons
   OR the keyboard's left/right arrow keys (pev-script.js), looping at
   either end. Escape closes just the lightbox first — a second Escape then
   closes the event modal underneath it (see the capture-phase handler). */
.pev-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100010;
  background: rgba(6,8,16,.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pev-lightbox[hidden] { display: none; }
.pev-lightbox-stage { max-width: 90vw; max-height: 84vh; display: flex; align-items: center; justify-content: center; }
.pev-lightbox-stage img,
.pev-lightbox-stage video { max-width: 90vw; max-height: 84vh; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }

.pev-lightbox-close,
.pev-lightbox-prev,
.pev-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,.1);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.pev-lightbox-close:hover,
.pev-lightbox-prev:hover,
.pev-lightbox-next:hover { background: rgba(255,255,255,.22); }

.pev-lightbox-close {
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 24px;
}
.pev-lightbox-prev,
.pev-lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 20px;
}
.pev-lightbox-prev { left: 18px; }
.pev-lightbox-next { right: 18px; }
.pev-lightbox-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.8);
  font-size: 13px;
  letter-spacing: .04em;
}

@media (max-width: 600px) {
  .pev-lightbox-prev, .pev-lightbox-next { width: 42px; height: 42px; font-size: 16px; }
  .pev-lightbox-prev { left: 6px; }
  .pev-lightbox-next { right: 6px; }
}

/* Calendar */
.pev-calendar { margin: 24px 0; }
.pev-calendar-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pev-calendar-nav a { color: #1F3864; text-decoration: none; font-size: 14px; }

/* A 7-column calendar loses its "calendar-ness" if reflowed into cards, so
   on narrow screens it scrolls horizontally instead — with a min-width
   that keeps each day cell legible rather than being squeezed unreadably. */
.pev-calendar-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pev-calendar-table { width: 100%; min-width: 560px; border-collapse: collapse; table-layout: fixed; }
.pev-calendar-table th { background: #1F3864; color: #fff; padding: 8px; font-size: 12px; }
.pev-calendar-table td { border: 1px solid #eee; vertical-align: top; height: 90px; padding: 6px; font-size: 12px; }
.pev-day-num { font-weight: 600; color: #444; }
.pev-has-event { background: #FFF8E8; }
.pev-day-event { display: block; margin-top: 4px; font-size: 11px; color: #1F3864; text-decoration: none; background: #fff; border-radius: 3px; padding: 2px 4px; }

@media (max-width: 600px) {
  .pev-calendar-table td { height: 64px; padding: 4px; font-size: 11px; }
  .pev-day-event { font-size: 10px; padding: 1px 3px; }
}