/* ---------- Event detail view (calendar.html, js/event-detail.js) ----------
   Full-screen dialog: big flyer (whole, nothing over it) + info + map.
   Opaque backdrop on purpose (see the gallery zoom note in CONTEXT.md). */
.ev-detail{
  position: fixed; inset: 0; z-index: 500;
  background: #0b0605;
  overflow-y: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(16px, 4vw, 48px);
}
.ev-detail[hidden]{ display: none; }

.ev-panel{
  position: relative;
  width: 100%; max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(240px, 400px) 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: start;
  padding-top: 8px;
  margin: auto 0;
}
.ev-close{
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--bg-elev);
  color: var(--cream); font-size: 1.5rem; line-height: 1; cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), background .2s ease, border-color .2s ease;
}
.ev-close:active{ transform: scale(0.94); }
@media (hover: hover) and (pointer: fine){
  .ev-close:hover{ background: var(--wine); border-color: var(--wine); }
}

.ev-flyer img{
  display: block; width: 100%; height: auto;
  border-radius: 14px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.7);
}
.ev-info{ padding-top: 6px; padding-right: 52px; }
.ev-info h2{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05;
  margin: 10px 0 12px;
}
.ev-when{ font-size: 1.05rem; color: var(--cream); margin: 0 0 4px; }
.ev-where{ color: var(--cream-dim); margin: 0 0 18px; }
.ev-desc{ color: var(--cream-dim); max-width: 520px; margin: 0 0 24px; }

.ev-map{ margin-top: 28px; }
.ev-map h3{ font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; margin: 0 0 12px; }
.ev-map-frame{
  position: relative; overflow: hidden;
  height: clamp(220px, 34vw, 320px);
  border: 1px solid var(--line-strong); border-radius: 14px;
  background: var(--bg-elev-2);
}
/* Pushed up by 170px so the embed's place card sits above the visible window. */
.ev-map-frame iframe{
  position: absolute; left: 0; top: -170px;
  width: 100%; height: calc(100% + 170px);
  border: 0;
}
.ev-map-link{
  display: inline-block; margin-top: 12px;
  color: var(--coral); font-size: .9rem; text-decoration: underline; text-underline-offset: 3px;
}

/* Cards: the flyer is the click target. */
[data-open-detail]{ cursor: zoom-in; }
[data-open-detail]:focus-visible{ outline: 2px solid var(--coral); outline-offset: -2px; }

@media (max-width: 760px){
  .ev-panel{ grid-template-columns: 1fr; }
  .ev-flyer{ max-width: 360px; margin: 0 auto; }
  .ev-info{ padding-right: 0; }
  .ev-close{ position: fixed; top: 12px; right: 12px; }
}

/* A party without a flyer: single column, no empty space where the flyer would be. */
.ev-panel.no-flyer{ grid-template-columns: 1fr; max-width: 640px; }
.ev-panel.no-flyer .ev-info{ padding-right: 52px; }