/* ============================================================ EVENT ============================================================ */
.tm-ev-page { position: relative; }
.tm-ev-bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.tm-ev-bg img {
  position: absolute; top: -8%; left: -8%; width: 116%; height: 116%;
  object-fit: cover; transform: translateY(0) scale(1.04);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1); will-change: transform;
}
/* Darkens the photo enough for white text to stay readable regardless of how
   bright/busy that particular event's photo is — stronger than a typical hero
   overlay since this sits behind a full page of body copy, not just a headline. */
.tm-ev-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,5,6,0.72) 0%, rgba(5,5,6,0.8) 40%, rgba(5,5,6,0.92) 100%);
}
@media (hover: none) { .tm-ev-bg img { transform: none !important; transition: none; } }

.tm-ev-col { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 170px 7vw 140px; }

.tm-ev-back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(247,242,232,0.6); margin: 0 0 34px; }
.tm-ev-back:hover { color: var(--ink); }

/* Card sits beside the title from the very top instead of appearing only after a
   full-width header block — one grid for the whole hero, not header-then-grid. */
.tm-ev-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px, 360px); gap: 60px; align-items: start; }
@media (max-width: 860px) { .tm-ev-hero { grid-template-columns: 1fr; } }

/* One labeled "badge" box on the left (Upcoming/Past show, then the date) with the
   title beside it — was two mismatched-height blocks (a short date block next to a
   taller eyebrow+title+venue block) leaving a dead gap under the shorter one. */
.tm-ev-heading { display: flex; align-items: flex-start; gap: 26px; margin-bottom: 50px; }
.tm-ev-daynum { margin-top:12px; flex: none; text-align: left; border-left: 2px solid var(--primary); padding: 2px 0 2px 18px; }
.tm-ev-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin: 0 0 10px; }
.tm-ev-day-line { display: flex; align-items: baseline; gap: 8px; }
.tm-ev-day { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 4vw, 2.5rem); line-height: 1; color: var(--ink); text-shadow: 0 4px 24px rgba(0,0,0,0.5); }
.tm-ev-month { font-family: var(--font-mono); font-weight: 500; font-size: 14px; text-transform: uppercase; color: rgba(247,242,232,0.75); }
.tm-ev-year { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: rgba(247,242,232,0.5); margin-top: 4px; }

/* No display:flex here — with a long title that wraps to two lines, a flex layout
   let the trailing cursor span break onto its own line instead of staying glued to
   the last word, the way normal inline text (this, plain block flow) always does.
   min-height reserves room for 2 lines up front, so typing a title that only wraps
   once enough characters land doesn't shove the venue line/description down mid-type. */
.tm-ev-title { font-family: var(--font-mono); font-weight: 500; font-size: clamp(1.9rem, 4.6vw, 3rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 12px; text-shadow: 0 4px 30px rgba(0,0,0,0.6); }
/* Cursor as generated content on the title-text span itself, not a separate
   sibling <span> — two adjacent inline elements can still get a soft wrap point
   between them with nothing to stop it (narrow/mobile widths made this visible:
   the "_" landing alone on its own line). ::after content is part of the same
   inline box as the typed text, so it can never separate from its last letter. */
.tm-ev-title span[id^="tm-ev-title-text-"]::after { content: '_'; display: inline-block; margin-left: 0.05em; animation: tm-blink 1s steps(1) infinite; }
.tm-ev-subline { display: flex; align-items: center; gap: 8px; font-family: var(--font-text); font-size: 14px; color: rgba(247,242,232,0.75); margin: 0; }
.tm-ev-subline i { color: var(--primary); font-size: 12px; }
.tm-ev-subline a { color: inherit; }
.tm-ev-subline a:hover { color: var(--ink); }

.tm-ev-body p { font-size: 15px; color: rgba(247,242,232,0.85); margin: 0 0 30px; line-height:20px; }
.tm-ev-body p:last-child { margin-bottom: 0; }

/* Pinned while the (often much taller) description scrolls beside it. */
.tm-ev-card { position: sticky; top: 24px; background: rgba(5,5,6,0.6); box-shadow: 0 24px 60px rgba(0,0,0,0.5); backdrop-filter: blur(6px); }
@media (max-width: 860px) { .tm-ev-card { position: static; } }
.tm-ev-cover { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.tm-ev-cover img {
  width: 110%; height: 110%; margin: -5%; object-fit: cover; display: block;
  transform: translate(0, 0) scale(1); transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.tm-ev-details { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.tm-ev-detail-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247,242,232,0.45); margin: 0 0 3px; }
.tm-ev-detail-value { font-family: var(--font-text); font-size: 14px; font-weight: 500; color: var(--ink); }
.tm-ev-ticket { padding: 0 24px 24px; }
/* .tm-cta's own border only shows up on hover (its glitch effect) — on its own,
   resting on a card that's nearly the same near-black as the button itself, it
   read as barely-there text with no visible button around it at all. */
.tm-ev-ticket .tm-cta__link { border: 1px solid rgba(255,255,255,0.4); box-sizing: border-box; }

.tm-ev-empty { text-align: center; padding: 60px 0; }
.tm-ev-empty p { font-size: 15px; color: rgba(247,242,232,0.7); margin: 0 0 26px; }

@media (max-width: 560px) {
  .tm-ev-col { padding: 140px 6vw 100px; }
}