/* Events page — shares the design system with the new heat list.
   Apple-pass (2026-10-10): press feedback on pointer-down, strong ease-out
   curves, sub-300ms motion, soft first-load entrances, translucent app bar
   with a scroll-edge shadow, hover gating, reduced-motion support.
   Brand tokens (Lexend, navy/gold) untouched. Previous design backed up in
   _design-backup/2026-10-10-pre-apple/. */
@import url('new-heatlist.css');

/* ---- Motion tokens (Apple-style strong curves; built-ins are too weak) ---- */
:root{
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
}

/* ---- Platform feel (webview tells) ---- */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}
.events a,.events button{touch-action:manipulation}
.seg button,.user-chip,.flyer,.hero-ev{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* 16px floor stops iOS Safari zooming the page into the search field. */
.events .search input{font-size:16px}

/* ---- App bar: translucent navy material + scroll-edge shadow ----
   Same brand navy, now a material: content scrolls under it with a soft
   edge that only appears once there is something underneath to separate. */
.events .appbar{
  background:linear-gradient(120deg,rgba(18,16,71,.92),rgba(36,32,136,.88));
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  backdrop-filter:blur(14px) saturate(160%);
}
.events .stickytop{box-shadow:none;transition:box-shadow 200ms ease}
.events .stickytop.scrolled{box-shadow:0 10px 24px -18px rgba(18,16,71,.55)}

/* Segmented control: color change eases; press responds on pointer-down. */
.events .seg button{transition:background 150ms ease,color 150ms ease,transform 120ms var(--ease-out)}
.events .seg button:active{transform:scale(.95)}

/* User chip (filled by am-user.js). The member's first name must never
   truncate — the titles block yields space instead. */
.user-chip{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-family:var(--font);font-weight:700;font-size:13.5px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm);white-space:nowrap;flex:0 0 auto;transition:transform 140ms var(--ease-out),border-color 150ms ease}
.user-chip .uc-ico{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:0 0 auto}
body.am-authed .user-chip .uc-ico{background:#2fae62}
.user-chip:active{transform:scale(.96)}
.appbar-in .titles{min-width:0}
.appbar-in .titles h1,.appbar-in .titles .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Anything tag-gated stays hidden until am-user.js proves the tag. */
[data-requires-auth],[data-requires-tag]{display:none !important}
body.am-authed [data-requires-auth]{display:revert !important}
.tag-ok{display:revert !important}

/* Live badge (hero + flyer tiles) */
.badge-live{position:absolute;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:var(--blue);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;box-shadow:0 6px 18px -6px rgba(255,191,59,.8);z-index:1}
.badge-live .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);animation:evpulse 1.4s infinite}
@keyframes evpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Hero card — the next upcoming competition (DOR-app style):
   flyer thumb on the left, name / dates / location on the right.
   Responds the instant it's pressed; the whole card is one touch target. */
.hero-ev{display:flex;gap:16px;align-items:stretch;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:14px;margin-bottom:16px;text-decoration:none;color:inherit;transition:transform 160ms var(--ease-out),border-color 150ms ease,box-shadow 200ms ease}
.hero-ev:active{transform:scale(.985)}
.hposter{position:relative;flex:0 0 36%;max-width:230px;aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:linear-gradient(140deg,var(--blue),var(--blue-2))}
.hposter img{width:100%;height:100%;object-fit:cover;display:block}
.hbody{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;padding:4px 2px}
.hname{font-weight:800;font-size:21px;line-height:1.2;letter-spacing:.02em;color:var(--ink)}
.hdates{color:var(--blue-2);font-weight:700;font-size:14.5px}
.hloc{color:var(--muted);font-weight:500;font-size:13.5px}
.hcta{margin-top:6px;color:var(--gold-deep);font-weight:800;font-size:13px;letter-spacing:.02em}

/* Flyer grid — every other event is just its featured image, flyer ratio. */
.fly-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.flyer{position:relative;display:block;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:linear-gradient(140deg,var(--blue),var(--blue-2));border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:transform 160ms var(--ease-out),border-color 150ms ease,box-shadow 200ms ease}
.flyer:active{transform:scale(.97)}
.flyer img{width:100%;height:100%;object-fit:cover;display:block}

/* Hover is desktop-only: touch fires false hovers on tap. */
@media (hover:hover) and (pointer:fine){
  .user-chip:hover{border-color:var(--blue-2)}
  .hero-ev:hover{border-color:var(--blue-2);box-shadow:var(--shadow)}
  .flyer:hover{border-color:var(--blue-2);transform:translateY(-2px);box-shadow:var(--shadow)}
}

/* Posters fade in once loaded (no pop-in); .ld is added by events.js on
   load, with a complete-check fallback so cached images never stay hidden. */
.hposter img,.flyer img{opacity:0;transition:opacity 300ms var(--ease-out)}
.hposter img.ld,.flyer img.ld{opacity:1}

/* No-artwork fallback (hero + flyer): event name on the navy gradient. */
.hposter .noimg,.flyer .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:800;font-size:17px;letter-spacing:.04em;text-align:center;padding:0 14px}

/* ---- Soft entrance: first content render only (events.js adds .ein with a
   30–80ms stagger via --d). Never from scale(0); never re-fires on search
   keystrokes or tab switches — those re-render without the class. ---- */
.ein{animation:evin 320ms var(--ease-out) both;animation-delay:var(--d,0ms)}
@keyframes evin{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

/* Skeleton shimmer (shell-first loading) */
.hero-ev.skel .hposter,.flyer.skel{background:linear-gradient(90deg,#e7e9f3 25%,#f3f4fa 50%,#e7e9f3 75%);background-size:200% 100%;animation:evsk 1.1s infinite linear}
.sk-line{height:13px;border-radius:7px;background:linear-gradient(90deg,#e7e9f3 25%,#f3f4fa 50%,#e7e9f3 75%);background-size:200% 100%;animation:evsk 1.1s infinite linear;margin:5px 0}
.sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w80{width:80%}
@keyframes evsk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Reduced motion: keep the fades that aid comprehension, drop movement. */
@media (prefers-reduced-motion:reduce){
  .ein{animation:evfade 180ms ease both;animation-delay:0ms}
  .hero-ev,.flyer,.seg button,.user-chip{transition:none}
  .hero-ev:active,.flyer:active,.seg button:active,.user-chip:active{transform:none}
  .badge-live .dot{animation:none}
}
@keyframes evfade{from{opacity:0}to{opacity:1}}

@media (max-width:560px){
  .hero-ev{gap:12px;padding:11px}
  .hposter{flex-basis:41%}
  .hname{font-size:17.5px}
  .hdates{font-size:13.5px}
  .hloc{font-size:12.5px}
  .fly-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}