/* One event's page (since 22 Oct 2026). After the Luma app (Ian's screen recording, 21 Oct 2026) and
   Luma's, Partiful's, Posh's, Eventbrite's and Meetup's web event pages; notes in the vault,
   projects/schulich-entrepreneurship-club/website/event-page-research-2026-10-21.md.

   A phone reads top to bottom: the poster, the title, who runs it, when, where, the buttons, who is
   hosting, then the rest. A laptop has Luma's two columns at Luma's measured size (a 332 px poster
   column, a 36 px gap, about 930 px in all), the poster and the hosts staying in view while the
   details scroll. Below the two columns, anything else the event has (photographs, the run of the
   day, the registration box) keeps the layout it had.

   Behind the page: a moving gradient in SEC's oranges, drawn by event.js, different on every event
   page. A gradient goes against the brand kit; Ian asked for it for event pages (21 Oct 2026). On it
   the grey is darker than elsewhere (#525252), because the site's #6B6B6B fell to about 3.5:1 where
   the orange is strongest; #525252 holds 4.5:1 on the strongest colour the gradient is allowed.
   Every class here starts with "ev" or sits under .evp, so nothing reaches the rest of the site. */

.evp { position: relative; --muted: #525252; padding: 22px var(--inset) 40px; }

/* the gradient: a canvas when WebGL is there, soft colour fields when it is not */
.evbg { position: fixed; top: 0; left: 0; right: 0; height: 125vh; height: calc(100lvh + 25vh); z-index: -1; overflow: hidden; pointer-events: none; background: #FFF6F0; }
/* taller than the screen: on a phone the address bar slides away while a finger scrolls, and a layer sized to the
   screen only catches up when the finger lifts (Ian saw a white band). The page underneath is cream for the same reason. */
body:has(main.evp) { background: #FFF6F0; }   /* on body only: a background on html would stop body's from reaching the page canvas, and body would then paint over the gradient */
.evbg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.evbg i { position: absolute; width: 75vmax; height: 75vmax; border-radius: 50%; opacity: .4;
          background: radial-gradient(closest-side, var(--c), transparent); }
.evbg.gl i { display: none; }
/* (a grain layer sat here until 23 Oct 2026; Ian found the gradient blotchy on his phone, and it went) */

.evp .evgrid { display: grid; gap: 22px; }
.evp .evside { display: contents; }
.evp .evcover { order: 1; } .evp .evtop { order: 2; } .evp .evhost { order: 3; } .evp .evrest { order: 4; }

/* the poster: made from type, in the SEC kit, so every event has one */
.evp .evposter { position: relative; aspect-ratio: 5 / 4; width: 100%; border-radius: 28px; overflow: hidden; background: var(--ink); color: var(--white);
                 padding: 26px; display: flex; flex-direction: column; justify-content: space-between; }
.evp .evposter .k { font-weight: 600; font-size: 11px; line-height: 16px; letter-spacing: .22em; text-transform: uppercase; color: var(--orange-d); }
.evp .evposter .t { font-weight: 500; font-size: clamp(34px, 10vw, 46px); line-height: 1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.evp .evposter .t span { color: var(--orange-d); }
.evp .evposter .b { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; font-weight: 500; font-size: 14px; line-height: 18px; }
.evp .evposter .b img { width: 64px; height: auto; flex: none; }
/* when the event has a photograph, it goes under the type, darkened as the kit asks (62%) */
.evp .evposter .evphoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.evp .evposter.photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(17, 17, 17, .62); }
.evp .evposter.photo > p { position: relative; z-index: 2; }
.evp .evunder { margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--muted); }

/* the title block */
.evp h1 { font-weight: 600; font-size: 30px; line-height: 36px; letter-spacing: -.02em; color: var(--ink); }
.evp .evby { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--muted); text-decoration: none; }
.evp .evdisc { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.evp .evdisc img { width: 15px; height: auto; }
.evp .evdisc.big { width: 30px; height: 30px; }
.evp .evdisc.big img { width: 20px; }
.evp .evrows { display: grid; gap: 12px; margin-top: 16px; }
.evp .evrows li { display: flex; align-items: center; gap: 12px; }
.evp .evrows .tile { width: 40px; height: 40px; display: grid; place-items: center; text-align: center; background: rgba(255, 255, 255, .7); }
.evp .evrows li > span:last-child { display: grid; font-size: 14px; line-height: 20px; color: var(--muted); }
.evp .evrows strong { font-weight: 500; color: var(--ink); font-size: 15px; }
.evp .evchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.evp .evchips span { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .7); font-weight: 500; font-size: 13px; line-height: 20px; color: var(--ink); }

/* the buttons: the main one, then Share (and Calendar, once an event has a calendar file) */
.evp .evacts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 16px; }
.evp .evacts > :first-child { grid-column: span 2; }
.evp .evacts a, .evp .evacts button, .evp .evacts > span { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 56px; padding: 9px 8px; border-radius: 16px;
               border: 1px solid var(--rule); background: rgba(255, 255, 255, .78); color: var(--ink); font: 500 13px/16px Outfit, sans-serif; text-decoration: none; text-align: center; cursor: pointer; }
.evp .evacts .main { background: var(--ink); border-color: var(--ink); color: var(--white); }
.evp .evacts .off { background: rgba(255, 255, 255, .55); color: var(--muted); cursor: default; }
.evp .evacts svg { width: 18px; height: 18px; }

/* sections under small labels, as in Luma */
.evp .evsec { margin-top: 32px; padding-top: 18px; border-top: 1px solid rgba(17, 17, 17, .1); }
.evp .evlbl { font-weight: 500; font-size: 13px; line-height: 18px; color: var(--muted); margin-bottom: 12px; }
.evp .evabout p { font-size: 16px; line-height: 25px; color: var(--body); }
.evp .evabout p + p { margin-top: 12px; }
.evp .evsoon { font-size: 15px; line-height: 22px; color: var(--muted); }
.evp .evpeople li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-weight: 500; font-size: 15px; line-height: 20px; color: var(--ink); }
.evp .evpeople .evav { flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .8); display: grid; place-items: center; font-size: 12px; color: var(--muted); }
.evp .evhost .evsec { margin-top: 8px; }
.evp .evcards { display: grid; gap: 10px; }
.evp .evcard { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--rule); border-radius: 20px; background: rgba(255, 255, 255, .7); text-decoration: none; }
.evp .evcard .tile { width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.evp .evcard span:last-child { display: grid; font-size: 14px; line-height: 20px; color: var(--muted); }
.evp .evcard strong { font-weight: 500; color: var(--ink); font-size: 15px; }
.evp .evlinks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.evp .evlinks a, .evp .evlinks span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--rule); background: rgba(255, 255, 255, .7); font-size: 13px; line-height: 20px; color: var(--muted); text-decoration: none; }
.evp .evlinks a { color: var(--ink); }

/* what the event had before this template (photographs, the run of the day): kept as it was, under the two columns */
.evmore { position: relative; }
.evmore .part:first-child { padding-top: 56px; }

/* on a phone, a bar at the bottom whenever the main button is off the screen (Eventbrite, Posh, Partiful) */
.evbar { position: fixed; z-index: 35; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
         padding: 10px 10px 10px 18px; border-radius: 22px; background: var(--white); border: 1px solid var(--rule);
         transform: translateY(140%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.evbar.on { transform: none; }
.evbar > span { display: grid; min-width: 0; font-size: 13px; line-height: 18px; color: #525252; }
.evbar strong { font-weight: 500; color: var(--ink); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evbar .btn { flex: none; }

/* the footer fades in from the gradient, not from white */
main.evp ~ footer.end { margin-top: 0; background: linear-gradient(transparent 0, var(--orange-l) 96px); }

@media (min-width: 900px) {
  .evp { padding: 28px var(--inset) 24px; }
  .evp .evposter { aspect-ratio: 1; }
  .evp .evgrid { grid-template-columns: 332px minmax(0, 1fr); grid-template-areas: "side top" "side rest"; column-gap: 36px; row-gap: 0; max-width: 930px; margin: 0 auto; align-items: start; }
  .evp .evside { display: block; grid-area: side; position: sticky; top: 104px; }
  .evp .evtop { grid-area: top; } .evp .evrest { grid-area: rest; }
  .evp .evhost .evsec { margin-top: 20px; padding-top: 16px; }
  .evp h1 { font-size: 46px; line-height: 50px; margin-top: 6px; }
  .evp .evrows, .evp .evacts { margin-top: 18px; }
  .evp .evsec { margin-top: 28px; padding-top: 16px; }
  .evbar { display: none; }
  main.evp ~ footer.end { background: linear-gradient(transparent 0, var(--orange-l) 172px); }
}
@media (prefers-reduced-motion: reduce) { .evbar { transition: none; } }

/* a registration box (UEC 2026) sitting in the right-hand column */
.evp .evsec .reg { margin-top: 0; background: rgba(255, 255, 255, .75); }

/* a short list of what you learn (Case & Career Kickstart) */
.evp .evlearn { display: grid; gap: 10px; padding-left: 18px; list-style: disc; font-size: 16px; line-height: 24px; color: var(--body); }
.evp .evlearn strong { font-weight: 600; color: var(--ink); }