/* ===== Zehao Xue — Photography: events (standalone pages + the modal on /photo/) =====
   Consumes tokens from ../../css/theme.css. Content styles are namespaced .ev-* so the same
   markup renders identically inside the modal and on the standalone event page. */

/* ---- content (shared) ---- */
.ev { color: var(--ink); }
.ev-kicker {
  margin: 0 0 .6rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sage-dark);
}
.ev-kicker i { color: var(--sage); margin-right: .3rem; }
.ev-title {
  font-family: var(--head-font); text-transform: uppercase; letter-spacing: .03em;
  font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; margin: 0 0 .8rem;
  color: var(--green-deep);
}
.ev-title span { color: var(--green-mid); }
/* pricing tiers: name · detail · price */
.ev-tiers { list-style: none; margin: .2rem 0 .6rem; padding: 0; border-top: 1px solid var(--line); }
.ev-tiers li { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.ev-tiers .t-name { font-family: var(--head-font); text-transform: uppercase; letter-spacing: .05em; font-size: 1.1rem; color: var(--green-head); }
.ev-tiers .t-detail { font-size: .9rem; color: var(--sage-dark); }
.ev-tiers .t-price { font-weight: 800; color: var(--green-deep); font-size: 1.05rem; }
.ev-price { font-size: .95rem; color: var(--sage-dark); margin: 0 0 .9rem !important; }
.ev-price strong { color: var(--green-deep); }
.ev-price small { font-size: .85em; color: var(--muted); }
.ev-lead { font-size: 1.1rem; max-width: 80ch; margin: 0 0 1.8rem; color: var(--ink); }
.ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.ev-block {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 8px;
  padding: 1.25rem 1.4rem;
}
.ev-block h2 {
  font-family: var(--head-font); text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.35rem; margin: 0 0 .4rem; color: var(--green-head);
}
.ev-block h2 i { color: var(--sage-dark); margin-right: .35rem; font-size: 1rem; }
.ev-block p { margin: 0 0 .8rem; color: var(--ink); font-size: .98rem; }
.ev-block p:last-child { margin-bottom: 0; }
.ev-btn {
  display: inline-block; background: var(--green-mid); color: #fff; text-decoration: none;
  font-family: var(--head-font); text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem;
  padding: .55rem 1.2rem; border-radius: 5px; transition: background .15s;
}
.ev-btn:hover { background: var(--green-deep); color: #fff; }
.ev-link { color: var(--green-mid); font-weight: 800; text-decoration: none; font-size: .95rem; }
.ev-link:hover { color: var(--green-deep); }
.ev-fine { margin: 1.6rem 0 0; font-size: .85rem; color: var(--muted); }
.ev-fine a { color: var(--sage-dark); }

/* phase variants: events.js sets data-phase on the #event-content root; non-matching variants hide */
[data-phase] { display: none; }
.ev[data-phase-now="before"] [data-phase~="before"],
.ev[data-phase-now="during"] [data-phase~="during"],
.ev[data-phase-now="after"]  [data-phase~="after"] { display: block; }

/* ---- floating chip on /photo/ (reopens the modal after dismissal) ---- */
.ev-chip {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 390;
  display: none; align-items: center; gap: .55rem;
  background: var(--green-deep); color: #fff; text-decoration: none;
  border: 1px solid rgba(255,255,255,.15); border-radius: 100px;
  padding: .6rem 1rem .6rem .85rem;
  font-size: .8rem; font-weight: 800; letter-spacing: .04em;
  cursor: pointer; font-family: var(--body-font);
  transition: background .15s, transform .15s;
}
.ev-chip.show { display: inline-flex; }
.ev-chip:hover { background: var(--green-mid); transform: translateY(-2px); }
.ev-chip i { color: var(--sage); }
.ev-chip small { font-weight: 400; opacity: .8; }
@media (max-width: 600px) { .ev-chip { right: .75rem; bottom: .75rem; font-size: .75rem; } .ev-chip small { display: none; } }

/* ---- inline section on /photo/ (injected by events.js before the gallery while an event is live) ---- */
.ph-event { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 3.5rem 0; scroll-margin-top: 56px; }
.ph-event .ev { max-width: 900px; }
.ev-hint { font-size: .8rem; color: var(--muted); margin: 0 0 .9rem !important; }

/* ---- standalone page ---- */
.ev-page { background: var(--bg); }
.ev-page .ph-header { position: sticky; }
.ev-main { max-width: 900px; margin: 0 auto; padding: 4.5rem 1.5rem 5rem; }

/* ---- modal on /photo/ ---- */
.ev-modal {
  position: fixed; inset: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  padding: 1.25rem;
  background: rgba(23,43,23,.55);
}
.ev-modal.open { display: flex; }
.ev-modal-card {
  position: relative;
  width: min(820px, 100%); max-height: min(88vh, 900px); max-height: min(88dvh, 900px); overflow: auto;
  background: #fff; border-radius: 10px;
  padding: 1.9rem 2rem 1.5rem;
  border-top: 5px solid var(--sage);
}
.ev-modal-close {
  position: absolute; top: .6rem; right: .8rem;
  background: none; border: 0; cursor: pointer;
  font-size: 2rem; line-height: 1; color: var(--muted);
}
.ev-modal-close:hover { color: var(--green-deep); }
.ev-modal-foot {
  margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .85rem; color: var(--muted);
}
.ev-modal-foot a { color: var(--green-mid); font-weight: 800; text-decoration: none; }
.ev-modal-foot button {
  background: none; border: 1px solid var(--line); border-radius: 100px; cursor: pointer;
  color: var(--sage-dark); font-family: var(--body-font); font-weight: 800; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .06em; padding: .45rem 1rem;
}
.ev-modal-foot button:hover { border-color: var(--sage); color: var(--green-deep); }
.ev-modal .ev-title { font-size: clamp(2rem, 4vw, 2.8rem); }
.ev-modal .ev-lead { font-size: 1.02rem; margin-bottom: 1.2rem; }
.ev-modal .ev-grid { gap: .9rem; }
.ev-modal .ev-block { padding: 1rem 1.15rem; }
.ev-modal .ev-block p { font-size: .93rem; }
.ev-modal .ev-fine { margin-top: 1.1rem; }
body.ev-lock { overflow: hidden; }
/* jump-to-details button (events.js puts it in the modal); only the phone layout shows it */
.ev-modal-more { display: none; }

@media (max-width: 700px) {
  .ev-grid { grid-template-columns: 1fr; }
  .ev-modal { padding: 0; align-items: flex-end; }
  .ev-modal-card { max-height: 92vh; max-height: 88dvh; border-radius: 14px 14px 0 0;
                   padding: 1.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); }
  /* phones get a trimmed modal - intro only; the button below jumps to the full card on the page */
  .ev-modal .ev-grid, .ev-modal .ev-fine { display: none; }
  .ev-modal-more { display: block; text-align: center; }
  .ev-modal .ev-lead { margin-bottom: 1.4rem; }
  .ev-modal-foot { margin-top: 1.1rem; justify-content: center; }
}