/* 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; }
}

/* A link from an event to everything in its city, opposite "All events". */
.ev-crumbs { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; }
.ev-city-link { padding: 6px 2px; font-weight: 700; color: var(--red-text); text-decoration: none; }
.ev-city-link::after { content: " →"; }
.ev-city-link:hover { text-decoration: underline; }

/* /<lang>/cities/<city>/: the events and places of one city. */
.ev-city .ev-main { padding-top: 112px; }
.ev-crumbs--wide { max-width: none; }
.ev-city-head { max-width: 760px; margin: 8px 0 clamp(28px, 5vw, 44px); }
.ev-city-head h1 { margin: 6px 0 14px; font-size: clamp(34px, 6vw, 56px); letter-spacing: -.04em; line-height: 1.02; text-wrap: balance; }
.ev-city-head .sub { max-width: 60ch; color: var(--muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.5; }
.ev-city-head .ev-actions { margin-top: 20px; }
.ev-city-section { margin-top: clamp(30px, 5vw, 52px); }
.ev-city-section > h2 { margin-bottom: 16px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -.03em; }
.ev-city-section.ev-plain { padding-top: 0; }
.ev-city-others ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ev-city-others a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line); color: var(--ink); font-weight: 700; text-decoration: none; }
.ev-city-others a:hover { box-shadow: 0 0 0 1.5px var(--ink); }
.ev-city .ev-thumb img { opacity: 1; }
@media (max-width: 620px) { .ev-city .ev-main { padding-top: 96px; } }

/* /<lang>/places/<id>/: one place, the list's card as a page. */
.pl-single-card { max-width: 760px; }
.pl-single-card h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.pl-single .ev-city-section { max-width: 760px; }