/* Helvi event page (<lang>/events/<id>.html) — the dialog from events.html as a page of its own.
   The photo, facts, prices and buttons reuse the dialog's classes in events.css. */

.ev-single .ev-main { padding-top: 112px; }
.ev-crumbs { max-width: 760px; margin: 0 auto 16px; }
.ev-back { display: inline-flex; align-items: center; gap: 8px; padding: 6px 2px; font-weight: 700; color: var(--muted); text-decoration: none; transition: color .2s; }
.ev-back::before { content: "←"; transition: transform .3s var(--spring); }
.ev-back:hover { color: var(--ink); }
.ev-back:hover::before { transform: translateX(-3px); }

.ev-article { max-width: 760px; margin: 0 auto; overflow: hidden; border-radius: 32px; color: var(--ink); background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 40px 70px -40px rgba(30, 5, 8, .45); }
/* The dialog fades its photo in once it has loaded; here the photo is part of the page. */
.ev-single .ev-photo img { opacity: 1; }
.ev-photo h1 { position: relative; z-index: 1; padding: 0 clamp(20px, 4vw, 32px) clamp(20px, 3.4vw, 28px); color: #fff; font-size: clamp(27px, 4.6vw, 40px); letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.ev-single .ev-share { right: 14px; }
.ev-single .ev-photo .ev-chips { right: 64px; }
.ev-desc + .ev-desc { margin-top: 12px; }
/* Add to calendar: a download, so it takes the full row under the two links. */
.ev-actions .ev-calendar { flex-basis: 100%; }
/* More events: three cards under the article, in the list's own style (rows on a phone). */
.ev-more { max-width: 760px; margin: clamp(34px, 6vw, 56px) auto 0; }
.ev-more h2 { margin-bottom: 16px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; }
.ev-more .ev-grid { --cols: 3; --gap: 14px; }
.ev-more .ev-card h3 { font-size: 18px; }
.ev-single .ev-thumb img { opacity: 1; }
.ev-ended { margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; font-weight: 700; color: var(--red-ink); background: var(--red-tint); }

@media (max-width: 620px) {
  .ev-more .ev-grid { --cols: 1; --gap: 0px; }
  .ev-single .ev-main { padding-top: 96px; }
  .ev-article { border-radius: 24px; }
}