/* events.css — the Events page (events.html) only. Loaded after tokens.css and styles.css.
   Colours come from tokens.css only. Radii and shadows follow the existing components
   in styles.css (.mcard, .vcard, .panel) so the page reads as part of the same site. */

[hidden]{display:none !important}
.ev-vh{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html.ev-lock,html.ev-lock body{overflow:hidden}
.btn:focus-visible,.ev-card-link:focus-visible,.ev-mini:focus-visible,.ev-d-close button:focus-visible,.ev-fact a:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}

/* ---------- Hero + section heads ---------- */
.ev-hero{padding-bottom:clamp(1.2rem,3vw,2rem)}
.ev-section{padding-top:clamp(1rem,2.5vw,1.6rem);padding-bottom:clamp(1.6rem,3vw,2.6rem)}
.ev-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;padding-bottom:.9rem;margin-bottom:clamp(1.3rem,3vw,2rem);border-bottom:1px solid var(--line)}
.ev-h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--ink)}
.ev-stale{font-size:.86rem;color:var(--muted)}
.ev-older{margin-top:1.6rem;font-size:.95rem}
.ev-older a{font-weight:600}

/* ---------- Timeline: one row per day, a date rail on the left (Luma's calendar list) ---------- */
.ev-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.4rem,3vw,2.2rem)}
.ev-day{display:grid;grid-template-columns:140px minmax(0,1fr);gap:clamp(.8rem,2.5vw,1.6rem);animation:evIn .5s ease both;animation-delay:calc(var(--i,0) * 70ms)}
.ev-rail{padding-top:.35rem}
.ev-rail time{display:block;position:sticky;top:104px}
.ev-rail-m{display:block;font-family:var(--font-display);font-weight:700;font-size:1.4rem;line-height:1.1;color:var(--ink)}
.ev-rail-d{display:block;font-size:.92rem;color:var(--muted);margin-top:.15rem}
.ev-day-cards{position:relative;display:grid;gap:1rem;padding-left:1.6rem;border-left:2px dashed var(--line)}
.ev-day-cards::before{content:"";position:absolute;left:-8px;top:.75rem;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.ev-day.is-past .ev-day-cards::before{background:var(--line)}
@keyframes evIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- Event card ---------- */
.ev-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -32px rgba(18,30,90,.5);transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease}
.ev-card:hover{transform:translateY(-2px);border-color:var(--orange-80);box-shadow:0 24px 50px -28px rgba(18,30,90,.45)}
.ev-card-link{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.3rem;align-items:start;padding:1.15rem 1.15rem 1.15rem 1.4rem;color:inherit;text-decoration:none;border-radius:inherit}
.ev-card-link:hover{text-decoration:none}
.ev-card-time{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;font-size:.92rem;font-weight:600;color:var(--muted)}
.ev-tz{font-weight:500;opacity:.85}
.ev-card-title{font-size:clamp(1.35rem,2.2vw,1.7rem);color:var(--ink);margin:.35rem 0 .6rem}
.ev-card:hover .ev-card-title{color:var(--accent-2)}
.ev-card-meta{display:flex;align-items:center;gap:.5rem;margin-top:.3rem;font-size:.93rem;line-height:1.4;color:var(--muted)}
.ev-card-meta svg{flex:0 0 auto;width:15px;height:15px;fill:var(--orange)}
.ev-card-meta img{flex:0 0 auto;width:18px;height:18px;border-radius:50%}
.ev-card-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.ev-card-cover{width:clamp(170px,22vw,250px);aspect-ratio:1200/630;border-radius:10px;overflow:hidden;background:var(--panel)}
.ev-card-cover img{width:100%;height:100%;object-fit:cover}
.ev-day.is-past .ev-card-cover img{filter:grayscale(.55);opacity:.85}

/* ---------- Status chips ---------- */
.ev-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .78rem;border:1.5px solid transparent;border-radius:999px;font-size:.8rem;font-weight:600;line-height:1;white-space:nowrap;background:var(--orange-60);color:var(--blue-300)}
.ev-chip-free{background:var(--cobalt);color:var(--surface)}
.ev-chip-low,.ev-chip-live{background:var(--orange);color:var(--surface)}
.ev-chip-out{background:var(--navy);color:var(--snow)}
.ev-chip-wait{background:transparent;border-color:var(--cobalt);color:var(--cobalt)}
.ev-chip-soon{background:transparent;border-color:var(--orange);color:var(--orange)}
.ev-chip-past{background:transparent;border-color:var(--line);color:var(--muted)}
.ev-chip-live::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:evPulse 1.6s ease-in-out infinite}
@keyframes evPulse{50%{opacity:.35}}

/* ---------- Placeholder cover (an event with no "Social media image" in pretix) ---------- */
.ev-ph{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.15rem;padding:8% 9%;overflow:hidden;color:var(--snow);background:radial-gradient(130% 120% at 85% 0%,var(--cobalt) 0%,var(--blue-300) 48%,var(--navy) 100%)}
.ev-ph::after{content:"";position:absolute;right:-16%;top:-38%;width:62%;aspect-ratio:1;border-radius:50%;border:clamp(7px,1.3vw,16px) solid var(--orange)}
.ev-ph small{position:relative;z-index:1;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.ev-ph b{position:relative;z-index:1;font-family:var(--font-display);font-weight:700;font-size:1.9rem;line-height:.95;letter-spacing:.02em}
.ev-d-cover .ev-ph small{font-size:.8rem}
.ev-d-cover .ev-ph b{font-size:clamp(2.6rem,7vw,4.6rem)}

/* ---------- Loading skeleton ---------- */
.ev-skel{animation:none}
.ev-sk{display:block;border-radius:6px;background:linear-gradient(90deg,var(--panel) 0%,var(--line) 50%,var(--panel) 100%);background-size:200% 100%;animation:evShimmer 1.3s linear infinite}
.ev-sk-date{width:70%;height:1.3rem}
.ev-sk-sm{width:38%;height:.8rem}
.ev-sk-lg{width:78%;height:1.5rem;margin:.7rem 0}
.ev-sk-md{width:55%;height:.8rem}
.ev-skel .ev-card-cover{animation:evShimmer 1.3s linear infinite;background:linear-gradient(90deg,var(--panel) 0%,var(--line) 50%,var(--panel) 100%);background-size:200% 100%}
.ev-skel .ev-card:hover{transform:none}
@keyframes evShimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* ---------- Empty / error panels ---------- */
.ev-empty h3,.ev-fallback h3{font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--ink);margin:.2rem 0 .6rem}
.ev-empty .btn,.ev-fallback .btn{margin-top:1.3rem}

/* ---------- Detail popup (native <dialog>, Luma's section order) ---------- */
.ev-dialog{margin:auto;padding:0;border:0;border-radius:22px;width:min(980px,calc(100vw - 2rem));max-width:none;max-height:calc(100dvh - 2rem);overflow:hidden;background:var(--surface);color:var(--ink);box-shadow:0 40px 90px -30px rgba(12,18,54,.65)}
.ev-dialog[open]{display:flex;flex-direction:column;animation:evPop .22s ease}
.ev-dialog::backdrop{background:rgba(18,30,90,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@keyframes evPop{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.ev-d-inner{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.ev-d-close{position:absolute;top:.9rem;right:.9rem;z-index:3;margin:0}
.ev-d-close button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--surface);color:var(--ink);box-shadow:0 8px 20px -8px rgba(18,30,90,.55)}
.ev-d-close button:hover{background:var(--snow)}
.ev-d-close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;fill:none}
.ev-d-cover{width:100%;aspect-ratio:1200/630;max-height:min(60vh,560px);overflow:hidden;background:var(--panel)}
.ev-d-cover img{width:100%;height:100%;object-fit:cover;object-position:center top}
.ev-d-body{padding:clamp(1.3rem,3.5vw,2.4rem)}
.ev-d-kicker{font-size:.8rem;margin-bottom:.55rem}
.ev-d-title{font-size:clamp(2rem,4.2vw,2.9rem);color:var(--ink);outline:none}
.ev-d-host{display:flex;align-items:center;gap:.55rem;margin-top:.85rem;font-size:.95rem;color:var(--muted)}
.ev-d-host img{width:28px;height:28px;border-radius:50%}
.ev-d-host b{color:var(--ink);font-weight:600}
.ev-d-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"facts tickets" "about tickets";column-gap:clamp(1.4rem,3.5vw,2.6rem);row-gap:1.8rem;align-items:start;margin-top:1.7rem}
.ev-d-facts{grid-area:facts;display:grid;gap:1.05rem}
.ev-d-about{grid-area:about}
.ev-fact{display:flex;align-items:flex-start;gap:.95rem}
.ev-fact-cal,.ev-fact-ico{flex:0 0 auto;width:50px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.ev-fact-cal{text-align:center}
.ev-fact-cal small{display:block;padding:.2rem 0;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:var(--panel)}
.ev-fact-cal b{display:block;font-family:var(--font-display);font-size:1.4rem;line-height:1.55;color:var(--ink)}
.ev-fact-ico{height:50px;display:grid;place-items:center}
.ev-fact-ico svg{width:21px;height:21px;fill:var(--orange)}
.ev-fact-text{min-width:0;padding-top:.1rem}
.ev-fact-text b{display:block;font-size:1.02rem;font-weight:600;line-height:1.35;color:var(--ink)}
.ev-fact-text span{display:block;margin-top:.1rem;font-size:.93rem;line-height:1.45;color:var(--muted)}
.ev-fact-text a{display:inline-block;margin-top:.25rem;font-size:.92rem;font-weight:600;color:var(--accent-2)}
.ev-d-actions{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.2rem}
.ev-mini{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .95rem;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:600 .86rem/1 var(--font-body);cursor:pointer;text-decoration:none;transition:border-color .15s ease,background .15s ease}
.ev-mini:hover{border-color:var(--ink);text-decoration:none}
.ev-mini svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Tickets card: same chrome as .vcard (white, hairline, orange top border) */
.ev-tickets{grid-area:tickets;position:sticky;top:0;padding:1.3rem 1.3rem 1.15rem;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:16px;box-shadow:0 18px 40px -32px rgba(18,30,90,.5)}
.ev-tickets h3{font-size:1.35rem;color:var(--ink);margin-bottom:.5rem}
.ev-ticket-list{list-style:none;margin:0 0 1.1rem;padding:0}
.ev-ticket{padding:.85rem 0;border-top:1px solid var(--line)}
.ev-ticket:first-child{border-top:0;padding-top:.25rem}
.ev-ticket-top{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem}
.ev-ticket-name{font-size:.97rem;font-weight:600;line-height:1.35;color:var(--ink)}
.ev-ticket-price{font-weight:700;white-space:nowrap;color:var(--ink)}
.ev-ticket-desc{margin-top:.3rem;font-size:.86rem;line-height:1.5;color:var(--muted)}
.ev-ticket-desc>*+*{margin-top:.4rem}
.ev-ticket-state{display:inline-block;margin-top:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ev-ticket.is-out .ev-ticket-name,.ev-ticket.is-out .ev-ticket-price{color:var(--muted)}
.ev-ticket.is-out .ev-ticket-state{color:var(--muted)}
.ev-sales-note{margin-bottom:1rem;padding:.75rem .9rem;border-radius:10px;background:var(--panel);font-size:.9rem;line-height:1.5;color:var(--ink)}
.ev-get{display:block;width:100%;text-align:center}
.ev-tickets-foot{margin-top:.75rem;font-size:.8rem;line-height:1.45;text-align:center;color:var(--muted)}
.ev-tickets-foot a{font-weight:600}

/* About: pretix "Frontpage text" (Markdown), sanitised in events.js */
.ev-d-about>h3{font-size:1.35rem;color:var(--ink);padding-bottom:.65rem;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.ev-rich{font-size:1rem;line-height:1.7;color:var(--ink);overflow-wrap:anywhere}
.ev-rich>*+*{margin-top:.85rem}
.ev-rich h4,.ev-rich h5{font-family:var(--font-display);font-size:1.25rem;line-height:1.2;color:var(--ink);margin-top:1.5rem}
.ev-rich h5{font-size:1.08rem}
.ev-rich p,.ev-rich li{color:var(--ink)}
.ev-rich a{color:var(--accent-2);text-decoration:underline}
.ev-rich ul,.ev-rich ol{padding-left:1.3rem}
.ev-rich li+li{margin-top:.3rem}
.ev-rich hr{border:0;border-top:1px solid var(--line);margin:1.5rem 0}
.ev-rich blockquote{padding-left:1rem;border-left:4px solid var(--orange-80);color:var(--muted)}
.ev-rich table{border-collapse:collapse;width:100%;font-size:.92rem}
.ev-rich th,.ev-rich td{padding:.4rem .5rem;border-bottom:1px solid var(--line);text-align:left}

/* ---------- Phones and small tablets (the site's main breakpoint) ---------- */
@media (max-width:880px){
  .ev-day{grid-template-columns:1fr;gap:.55rem}
  .ev-rail{padding-top:0}
  .ev-rail time{position:static;display:flex;align-items:baseline;gap:.55rem}
  .ev-rail-m{font-size:1.2rem}
  .ev-rail-d{margin-top:0}
  .ev-day-cards{padding-left:0;border-left:0}
  .ev-day-cards::before{display:none}
  .ev-card-link{grid-template-columns:1fr;gap:0;padding:0}
  .ev-card-cover{order:-1;width:100%;border-radius:14px 14px 0 0}
  .ev-card-body{padding:1rem 1.1rem 1.2rem}
  .ev-dialog{width:100%;height:100%;height:100dvh;max-width:100%;max-height:100dvh;margin:0;border-radius:0}
  .ev-d-cover{height:auto;aspect-ratio:1200/630}
  .ev-d-close{top:max(.75rem,env(safe-area-inset-top));right:.75rem}
  .ev-d-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"facts" "tickets" "about"}
  .ev-tickets{position:static}
  .ev-d-inner{padding-bottom:env(safe-area-inset-bottom)}
}

@media (prefers-reduced-motion:reduce){
  .ev-day,.ev-dialog[open],.ev-chip-live::before,.ev-sk,.ev-skel .ev-card-cover{animation:none}
  .ev-card,.ev-mini{transition:none}
  .ev-card:hover{transform:none}
}