/* XI events: card "Details" + event modal (additive; loaded only by events.php). */
.page-events .night { position: relative; }
.page-events .night.has-detail { cursor: pointer; transition: border-color .25s ease; }
.page-events .night.has-detail:hover { border-color: var(--hair); }
.page-events .night .night-cta { margin-top: auto; }
.page-events .night .night-more { margin: auto 0 0; padding-top: 1.1rem; }
.page-events .night .night-cta + .night-more { margin-top: 0; padding-top: 0.75rem; }
.page-events .night-more-btn {
  appearance: none; background: none; border: 0; border-bottom: 1px solid var(--hair);
  padding: 0.35rem 0; min-height: 44px; cursor: pointer;
  font-family: var(--sans); font-size: 0.68rem; font-weight: 300; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--sand);
}
.page-events .night-more-btn:hover { color: var(--cream); border-color: var(--sand); }
.page-events .night-more-btn:focus-visible { outline: 1px solid var(--teal); outline-offset: 3px; }
.page-events .night template, .page-events .night .night-more { display: none; }
.page-events .night.has-detail .night-more { display: block; }

/* Modal */
.evm {
  width: min(40rem, calc(100% - 2rem)); max-height: calc(100dvh - 3rem);
  margin: auto; padding: 0; border: 1px solid var(--hair); border-radius: 0;
  background: linear-gradient(180deg, rgba(25, 65, 65, 0.22), transparent 40%), var(--ink);
  color: var(--paper); overflow: hidden; display: none;
}
.evm[open] { display: flex; flex-direction: column; }
.evm-content { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; min-height: 0; }
.evm::backdrop { background: rgba(3, 6, 6, 0.82); backdrop-filter: blur(3px); }
.evm[open] { animation: evm-in .28s ease both; }
@keyframes evm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .evm[open] { animation: none; } }
.evm-close {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; width: 44px; height: 44px;
  border: 1px solid var(--hair); background: rgba(7, 10, 10, 0.75); color: var(--sand);
  font: 300 1.5rem/1 var(--sans); cursor: pointer;
}
.evm-close:hover { border-color: var(--sand); color: var(--cream); }
.evm-close:focus-visible { outline: 1px solid var(--teal); outline-offset: 2px; }
.evm-img { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--hair-dim); }
.evm-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evm-body { padding: 1.75rem clamp(1.25rem, 4vw, 2.25rem) 2rem; }
.evm-body .eyebrow { color: var(--teal); margin: 0 0 0.45rem; }
.evm-body .meta { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: #fff; margin: 0 0 0.75rem; }
.evm-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.12; color: var(--cream); margin: 0 0 0.5rem; padding-right: 2.5rem; }
.evm-body .place { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal); margin: 0 0 1rem; }
.evm-body .blurb { font-size: 1rem; line-height: 1.55; margin: 0 0 1.25rem; max-width: none; }
.evm-cta { margin: 0 0 0.5rem; }
.evm-sec { border-top: 1px solid var(--hair-dim); margin-top: 1.4rem; padding-top: 1.2rem; }
.evm-sec h3.eyebrow { font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sand); margin: 0 0 0.8rem; }
.evm-links { list-style: none; margin: 0; padding: 0; }
.evm-links li { border-bottom: 1px solid var(--hair-dim); }
.evm-links a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; padding: 0.55rem 0; color: var(--paper); }
.evm-links a::after { content: "\2197"; color: var(--sand); font-size: 0.9rem; }
.evm-links a:hover { color: var(--cream); }
.evm-qlist { margin: 0 0 1rem; padding-left: 1.4rem; }
.evm-qlist li { margin: 0 0 0.55rem; line-height: 1.5; }
.evm-qlist li::marker { color: var(--teal); font-family: var(--sans); font-size: 0.8rem; }
html.evm-lock { overflow: hidden; }
@media (max-width: 720px) {
  .evm { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; border: 0; }
  .evm-body { text-align: left; }
}