/* Public event page (views/event/page.php), in the donation page v2 language.
   Loaded after css/donation-page-v2.css, whose body.sgv2 chrome (top bar,
   hero, poster, grid, story, trust line, footer) it reuses as is. Only the
   event-specific pieces live here, prefixed .ev-. The accent custom
   properties come from DonationPageBrand::resolveForEvent() on <body>.

   Bootstrap 5 is still loaded on this page for the registration modal, so a
   few rules below restate what Bootstrap's reboot would otherwise change. */

body.sgv2 h1, body.sgv2 h2, body.sgv2 h3, body.sgv2 h4 { font-family: inherit; color: inherit; }
body.sgv2 [hidden] { display: none !important; }

/* ---- hero: date line + tile beside the title ---- */
.ev-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s8); }
.ev-hero-row > div:first-child { min-width: 0; }
.ev-when {
  margin: 0 0 var(--s3); font-size: 13px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.82);
}
.ev-tile {
  flex: 0 0 auto; width: 104px; border-radius: 14px; overflow: hidden; text-align: center;
  background: #fff; color: var(--ink); box-shadow: 0 10px 28px rgba(0,0,0,.22);
}
.ev-tile i {
  display: block; font-style: normal; padding: 6px 0 5px; font-size: 11.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; background: var(--accent); color: var(--on-accent);
}
.ev-tile b { display: block; font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.04em; padding: 12px 0 2px; }
.ev-tile em { display: block; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--muted); padding: 0 0 11px; }

.sgv2-titlerow .ev-lede { margin: var(--s1) 0 0; font-size: 16.5px; line-height: 1.55; color: #48505E; max-width: 56ch; }

/* ---- status notice (closed / cancelled) ---- */
.ev-status {
  display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4) var(--s5);
  border-radius: 14px; border: 1px solid; font-size: 14px; line-height: 1.5;
}
.ev-status svg { flex: 0 0 auto; margin-top: 2px; }
.ev-status b { display: block; font-size: 14.5px; }
.ev-status--cancel { background: #FEF3F2; border-color: #FECDCA; color: #912018; }
.ev-status--closed { background: var(--card); border-color: var(--line); color: var(--ink2); }

/* ---- when / where: one card in place of the old calendar and location cards ---- */
.ev-facts { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.ev-fact { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: var(--s4); align-items: start; padding: var(--s5) var(--s6); }
.ev-fact + .ev-fact { border-top: 1px solid var(--hair); }
.ev-ico {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: var(--tintA); color: var(--accent-ink);
}
.ev-fact-k { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.ev-fact-v { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.ev-fact-s { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 2px; }
body.sgv2 .ev-link {
  align-self: center; white-space: nowrap; font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--ink2); padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
body.sgv2 .ev-link:hover, body.sgv2 .ev-link:focus-visible { border-color: var(--accent-ink); color: var(--accent-ink); }
.ev-map { border-top: 1px solid var(--hair); height: 240px; background: var(--hair); }
.ev-map .venue-map { width: 100%; height: 100%; }
/* Map Position 'bottom' / 'right': the map as a card of its own. */
.ev-map-card .ev-map { border-top: 0; height: 280px; }
.ev-map-card--right { width: 400px; max-width: 100%; margin-top: var(--s6); }
.ev-map-card--right .ev-map { height: 240px; }

/* ---- organizer ---- */
.ev-org {
  display: flex; gap: var(--s4); align-items: center; padding: var(--s5) var(--s6);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.ev-org .sgv2-mono { width: 48px; height: 48px; border: 1px solid var(--hair); }
.ev-org b { display: block; font-size: 15px; line-height: 1.35; }
.ev-org p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ---- story sections: one per event field / custom section ---- */
.ev-sections { display: flex; flex-direction: column; gap: var(--s8); }
.ev-sections > section + section { padding-top: var(--s8); border-top: 1px solid var(--line); }

/* ---- the ask: ticket card, in the donation form's card skin ---- */
.ev-card {
  width: 400px; max-width: 100%; background: #fff; border: 1px solid #F3F4F6; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 6px 16px rgba(16,24,40,.06); overflow: hidden;
}
.ev-card-h { padding: var(--s6) var(--s6) var(--s4); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.ev-card-h h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.ev-card-h span { font-size: 12.5px; color: var(--muted); }

.ev-dates { padding: 0 var(--s6) var(--s4); }
.ev-dates-k { font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: var(--s2); }
.ev-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.ev-chip {
  padding: 9px 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
  font-family: inherit; color: var(--ink); text-align: center; width: auto;
  box-shadow: 0 1px 1px rgba(0,0,0,.03), 0 3px 6px rgba(0,0,0,.02);
}
.ev-chip i { display: block; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ev-chip b { display: block; font-size: 15px; font-weight: 700; margin-top: 1px; }
.ev-chip em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); }
.ev-chip:hover { border-color: var(--accent-ink); }
.ev-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ev-chip[aria-pressed="true"] i, .ev-chip[aria-pressed="true"] em { color: inherit; opacity: .85; }
.ev-chips-more { margin-top: var(--s2); width: 100%; padding: 8px; border: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--accent-ink); cursor: pointer; }
.ev-chip:focus-visible, .ev-step button:focus-visible, .ev-go:focus-visible, .ev-chips-more:focus-visible {
  outline: 2px solid var(--accent-ink); outline-offset: 2px;
}

.ev-list { border-top: 1px solid var(--hair); }
.ev-t { display: flex; align-items: center; gap: var(--s4); padding: 14px var(--s6); border-bottom: 1px solid var(--hair); transition: background .15s; }
.ev-t.is-picked { background: var(--tintA); }
.ev-t-tx { flex: 1 1 auto; min-width: 0; }
.ev-t-n { font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.ev-t-d { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin-top: 3px; }
.ev-t-p { font-size: 14px; color: var(--ink2); margin-top: 2px; display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.ev-t-p b { font-weight: 700; }
.ev-left { font-size: 11.5px; font-weight: 700; color: #B54708; background: #FFFAEB; border: 1px solid #FEDF89; padding: 1px 7px; border-radius: 999px; }
.ev-bundle {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--tintA); padding: 2px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; white-space: nowrap;
}
.ev-t.is-picked .ev-bundle { background: #fff; }
.ev-step { flex: 0 0 auto; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.ev-step button {
  width: 38px; height: 38px; border: 0; background: transparent; font-size: 18px; line-height: 1;
  cursor: pointer; color: var(--ink); font-family: inherit; padding: 0;
}
.ev-step button:disabled { color: #D0D5DD; cursor: default; }
.ev-step button:not(:disabled):hover { background: var(--hair); }
.ev-step output { width: 28px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ev-soldout { flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 9px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.ev-t.is-out .ev-t-n, .ev-t.is-out .ev-t-p { color: var(--faint); }

.ev-foot { padding: var(--s5) var(--s6) var(--s6); }
.ev-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s4); font-size: 14px; color: var(--muted); min-height: 27px; }
.ev-total b { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ev-go {
  width: 100%; height: 49px; border: 0; border-radius: 8px; cursor: pointer;
  font-family: avenirnext-medium, avenirnext, sans-serif; font-size: 16px;
  background: var(--accent); color: var(--on-accent); transition: filter .15s, transform .1s;
}
.ev-go:hover:not(:disabled) { filter: brightness(.95); }
.ev-go:active:not(:disabled) { transform: translateY(1px); }
.ev-go:disabled { background: #EAECF0; color: var(--muted); cursor: default; }
.ev-hint { margin: var(--s3) 0 0; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--muted); min-height: 18px; }
.ev-hint.is-error { color: #B42318; font-weight: 700; }
.ev-empty, .ev-closed { padding: var(--s8) var(--s6); text-align: center; }
.ev-closed b { display: block; font-size: 17px; margin-bottom: var(--s2); }
.ev-empty p, .ev-closed p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ---- inline edit (admins previewing the page in the editor iframe) ---- */
.edit-mode .ev-editable { position: relative; cursor: pointer; border-radius: 8px; outline: 2px dashed transparent; outline-offset: 6px; transition: outline-color .2s, background .2s; }
.edit-mode .ev-editable:hover { outline-color: var(--accent-ink); background: var(--tintA); }
.ev-editable .edit-overlay { display: none; }
.edit-mode .ev-editable .edit-overlay {
  display: block; position: absolute; top: 4px; right: 4px; padding: 4px 9px; border-radius: 6px;
  background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .2s; pointer-events: none;
}
.edit-mode .ev-editable:hover .edit-overlay { opacity: 1; }

/* ---- narrow ---- */
@media (max-width: 900px) {
  .ev-card { width: 100%; }
  /* Stacked: what, when and where first, then the ask, then the long read. */
  body.sgv2 .sgv2-grid--two { display: flex; flex-direction: column; }
  body.sgv2 .sgv2-grid--two > .sgv2-rail { display: contents; }
  .ev-o-title { order: 1; } .ev-o-status { order: 2; } .ev-o-facts { order: 3; }
  .sgv2-ask { order: 4; width: 100%; } .ev-o-story { order: 5; } .ev-o-org { order: 6; } .ev-o-map { order: 7; }
  .ev-map-card--right { width: 100%; }
}
@media (max-width: 600px) {
  .sgv2-sub { font-size: 15.5px; }
  .ev-hero-row { flex-direction: column-reverse; align-items: flex-start; gap: var(--s5); }
  .ev-tile { width: auto; display: flex; align-items: center; border-radius: 10px; }
  .ev-tile i { padding: 9px 10px; }
  .ev-tile b { font-size: 20px; padding: 6px 4px 6px 10px; }
  .ev-tile em { padding: 0 12px 0 4px; }
  .ev-fact { grid-template-columns: 40px minmax(0,1fr); padding: var(--s4); }
  body.sgv2 .ev-link { grid-column: 2; justify-self: start; }
  .ev-card-h, .ev-dates, .ev-t, .ev-foot { padding-left: var(--s4); padding-right: var(--s4); }
  .ev-map { height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .ev-t, .ev-go { transition: none; } }