/**
 * @benlowrey/events-directory-css — shared design system for Events Engine consumers.
 *
 * Extracted from Real Awake's scripts/build-directory.js (2026-08-05), which is the
 * reference implementation — its card layout, timeline grid, glass-blur cards, hover
 * states, and native view-transitions went through real iteration and bug fixes this
 * session (row-packing day-bucketing, sticky headers, height-cap removal, scroll-snap).
 * Real Awake now imports THIS file rather than keeping its own independent copy, so a
 * fix here reaches every consumer instead of needing to be hand-ported N times.
 *
 * Every colour is a CSS custom property with an --evd- prefix and a sensible fallback —
 * a consumer applies its own brand by overriding these on :root (or any wrapping scope),
 * typically sourced from branding-engine-api's cssVariables() emitter. Nothing in this
 * file hardcodes a brand colour; Real Awake's pink and Phantom Finance's cyan are both
 * just override sets on top of the same rules.
 *
 * Class names are unchanged from Real Awake's existing markup on purpose — both the
 * static-HTML site and any React consumer emit the SAME class names against this SAME
 * stylesheet, which is what makes this a genuine shared design system rather than a
 * theming convention two different rule-sets happen to follow.
 */

/* No universal *{...} reset here on purpose — a shared package must not leak a global
   reset into a consumer's OTHER, unrelated pages (Phantom Finance's existing pages
   already get box-sizing/margin/padding reset from Tailwind's own preflight). Each
   consumer keeps its own baseline reset locally; this file only ever targets its own
   specific classes below. */

:root {
  --evd-primary: #d94780;
  --evd-primary-hover: #c23b70;
  --evd-bg-dark: #06060c;
  --evd-bg-card: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  --evd-bg-card-sub: linear-gradient(145deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  --evd-border: rgba(255, 255, 255, 0.15);
  --evd-text-muted: rgba(255, 255, 255, 0.6);
  /* Light backing behind card/hero <img> tags — a no-op for opaque photos (object-fit:cover
     hides it entirely) but stops a transparent-PNG logo with a dark mark from vanishing
     into a dark theme. Override to a brand's own neutral if it isn't dark-themed. */
  --evd-img-backing: #f0eef2;
  --evd-font-display: 'Outfit', sans-serif;
  --evd-font-body: 'Inter', sans-serif;
}

/* Native cross-document view transitions — a smooth cross-fade between page loads on a
   static multi-page site, no JS/framework needed. Browsers without support just do a
   normal instant navigation — pure progressive enhancement. A React/SPA consumer won't
   use this (client-side routing has its own transition story), but it's harmless to
   include and free for any consumer that IS a plain multi-page site. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:7.5rem 1.5rem 4rem}
.grid{max-width:1200px;margin:0 auto;padding:3rem 1.5rem 4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}

.region{color:rgba(255,255,255,.55);font-size:.9rem;margin-bottom:1.6rem}
.crumb{font-size:.78rem;color:rgba(255,255,255,.45);margin-bottom:1rem;font-family:var(--evd-font-display)}
.crumb a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s}
.crumb a:hover{color:#fff}

.cats{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 1rem}
.cats a{padding:.3rem .85rem;border:1px solid color-mix(in srgb, var(--evd-primary) 35%, transparent);border-radius:999px;color:rgba(255,255,255,.9);text-decoration:none;font-size:.8rem;background:color-mix(in srgb, var(--evd-primary) 6%, transparent);transition:border-color .2s,background-color .2s,color .2s;font-family:var(--evd-font-display)}
.cats a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 12%, transparent)}

/* Profile page layout grid */
.profile-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-top:2rem}
@media(min-width:860px){ .profile-grid{grid-template-columns:1.8fr 1fr;gap:3.5rem} }
.profile-main{display:flex;flex-direction:column;gap:2rem}
.profile-sidebar{position:relative}
@media(min-width:860px){ .profile-sidebar{position:sticky;top:6rem;height:fit-content} }

/* Hero cover image */
.cover{width:100%;max-height:450px;object-fit:cover;object-position:center;background:var(--evd-img-backing);border-radius:16px;border:1px solid rgba(255,255,255,.08);margin:0;box-shadow:0 12px 36px rgba(0,0,0,.4);transition:transform 0.4s ease}
.mono{width:100%;height:320px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:var(--evd-font-display);font-weight:700;font-size:4.5rem;letter-spacing:.06em;color:rgba(255,255,255,.92);background:linear-gradient(135deg,#2e0f21 0%,#1b1326 55%,#06060c 100%);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 36px rgba(0,0,0,.4)}

p.evd-body{color:rgba(255,255,255,.85);margin-bottom:1.4rem;font-size:1.05rem;line-height:1.8;letter-spacing:0.01em}
h2.evd-heading{font-family:var(--evd-font-display);font-size:1.5rem;font-weight:600;color:#fff;margin:2rem 0 1.2rem;border-top:1px solid rgba(255,255,255,.06);padding-top:2rem}

/* Sidebar (organiser profile page) */
.sidebar-card{background:var(--evd-bg-card);border:1px solid var(--evd-border);border-radius:24px;padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1.8rem;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);transition:border-color .3s, transform .3s, box-shadow .3s}
.sidebar-card:hover{border-color:color-mix(in srgb, var(--evd-primary) 30%, transparent);transform:translateY(-2px);box-shadow:0 12px 40px color-mix(in srgb, var(--evd-primary) 15%, transparent)}
.sidebar-logo-container{display:flex;justify-content:center;margin-bottom:-0.2rem}
.sidebar-logo{width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid var(--evd-primary);padding:3px;background:var(--evd-img-backing);box-shadow:0 0 20px color-mix(in srgb, var(--evd-primary) 25%, transparent)}
.sidebar-info{display:flex;flex-direction:column;gap:.9rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:1.5rem}
.info-item{display:flex;align-items:center;gap:.8rem;font-size:.95rem;color:rgba(255,255,255,.85)}
.info-icon{font-size:1.15rem}
.info-link{color:#fff;text-decoration:none;border-bottom:1px dashed var(--evd-primary);transition:color .2s}
.info-link:hover{color:var(--evd-primary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.4rem;border-radius:99px;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:.95rem}
.btn.primary{background:linear-gradient(135deg,var(--evd-primary),color-mix(in srgb, var(--evd-primary) 60%, white));color:#fff;box-shadow:0 4px 15px color-mix(in srgb, var(--evd-primary) 30%, transparent);border:none}
.btn.primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 25px color-mix(in srgb, var(--evd-primary) 50%, transparent)}
.btn.secondary{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
.btn.secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}

.sidebar-socials h3, .sidebar-cta h3{font-family:var(--evd-font-display);font-size:1.1rem;margin-bottom:.8rem;color:#fff;font-weight:600;letter-spacing:0.02em}
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}
.social-grid a{display:block;text-align:center;padding:.5rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:.82rem;color:rgba(255,255,255,.8);text-decoration:none;transition:background .2s,border-color .2s,color .2s;background:rgba(255,255,255,.01)}
.social-grid a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 5%, transparent)}

.sidebar-cta{background:linear-gradient(135deg,color-mix(in srgb, var(--evd-primary) 8%, transparent) 0%,rgba(36,26,51,.2) 100%);border:1px solid color-mix(in srgb, var(--evd-primary) 18%, transparent);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:.8rem}
.sidebar-cta p{font-size:.88rem;color:rgba(255,255,255,.8);margin-bottom:.4rem;line-height:1.6}
.cta-btn{display:block;text-align:center;background:var(--evd-primary);color:#fff;padding:.75rem;border-radius:10px;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 4px 12px color-mix(in srgb, var(--evd-primary) 25%, transparent)}
.cta-btn:hover{background:var(--evd-primary-hover);transform:translateY(-2px);box-shadow:0 6px 16px color-mix(in srgb, var(--evd-primary) 40%, transparent)}

.links{display:flex;flex-wrap:wrap;gap:.6rem;margin:.5rem 0 1rem}
.links a{display:inline-block;padding:.5rem 1.2rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.85);text-decoration:none;font-size:.9rem;transition:border-color .2s,color .2s,background-color .2s;background:var(--evd-bg-card-sub);backdrop-filter:blur(10px)}
.links a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 8%, transparent)}

/* Event list item (organiser profile page's "Upcoming Events") */
.ev{border:1px solid var(--evd-border);border-radius:14px;padding:1.4rem;margin-bottom:1rem;background:var(--evd-bg-card-sub);transition:border-color .3s, transform .2s, background .3s;backdrop-filter:blur(10px);scroll-margin-top:90px}
.ev:hover{border-color:color-mix(in srgb, var(--evd-primary) 30%, transparent);transform:translateX(4px);background:rgba(255,255,255,.04)}
.ev:target{border-color:var(--evd-primary);background:color-mix(in srgb, var(--evd-primary) 12%, transparent);animation:evd-target-flash 2s ease-out}
@keyframes evd-target-flash{0%{box-shadow:0 0 0 3px color-mix(in srgb, var(--evd-primary) 50%, transparent)}100%{box-shadow:0 0 0 3px transparent}}
.ev-name{font-weight:600;color:#fff;font-family:var(--evd-font-display);font-size:1.1rem;margin-bottom:0.2rem}
.ev-meta{color:rgba(255,255,255,.6);font-size:.88rem;margin-top:.15rem;display:flex;align-items:center;gap:0.4rem}

/* Organiser cards (directory grid) */
.org-card{display:flex;flex-direction:column;background:var(--evd-bg-card);border:1px solid var(--evd-border);border-radius:20px;overflow:hidden;text-decoration:none;transition:border-color .3s,transform .3s,box-shadow .3s;box-shadow:0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(16px) saturate(180%)}
.org-card:hover{border-color:color-mix(in srgb, var(--evd-primary) 40%, transparent);transform:translateY(-6px);box-shadow:0 12px 36px color-mix(in srgb, var(--evd-primary) 15%, transparent)}
.org-card-img-wrapper{position:relative}
.org-card img,.org-ph{width:100%;height:180px;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.05)}
.org-card img{background:var(--evd-img-backing)}
.org-ph{display:flex;align-items:center;justify-content:center;font-family:var(--evd-font-display);font-weight:700;font-size:2.5rem;color:rgba(255,255,255,.9);letter-spacing:.05em;background:linear-gradient(135deg,#240a1b,#130a21 60%,#06060c)}
.org-card-badges{position:absolute;bottom:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap}
.org-card-badge{background:rgba(6,6,12,0.65);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);color:#fff;font-size:0.7rem;font-family:var(--evd-font-display);padding:0.25rem 0.65rem;border-radius:99px;letter-spacing:0.02em}
.org-b{padding:1.2rem 1.4rem}
.org-t{font-family:var(--evd-font-display);font-weight:600;color:#fff;font-size:1.15rem;letter-spacing:0.01em}
.org-r{color:rgba(255,255,255,.45);font-size:.85rem;margin-top:.25rem;display:flex;align-items:center;gap:0.3rem}
.org-d{color:rgba(255,255,255,.65);font-size:.88rem;margin-top:.65rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.55}

/* Page intro/header block */
.intro{max-width:1200px;margin:0 auto;padding:7.5rem 1.5rem 0;text-align:center}
.intro h1{margin-bottom:.6rem}
.intro p{max-width:640px;margin:0 auto;color:rgba(255,255,255,.7)}
.intro .crumb{text-align:center;margin-bottom:.8rem}

.areas{max-width:1200px;margin:1.8rem auto 0;padding:0 1.5rem;display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;justify-content:center}
.areas span{color:rgba(255,255,255,.45);font-size:.85rem;font-family:var(--evd-font-display);margin-right:.2rem}
.areas a{padding:.4rem .9rem;border:1px solid rgba(255,255,255,.1);border-radius:999px;color:rgba(255,255,255,.8);text-decoration:none;font-size:.85rem;transition:border-color .2s,color .2s,background-color .2s;background:rgba(255,255,255,.01)}
.areas a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 5%, transparent)}

.foot{text-align:center;padding:2.5rem;color:rgba(255,255,255,.3);font-size:.78rem;border-top:1px solid rgba(255,255,255,.05);margin-top:4rem}
.foot a{color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--evd-primary)}

/* ---------------------------------------------------------------------------------
   Timeline (day-grid calendar) — pairs with @benlowrey/events-timeline-logic's
   packTimelineRows()/clampToWindow() for the row-packing math. This is styling only.
   ----------------------------------------------------------------------------------- */
.tl-scroll{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
.timeline{position:relative;display:grid;grid-auto-rows:var(--evd-row-h,44px)}
.tl-day{grid-row:1;border-right:1px solid rgba(255,255,255,.05);padding:.4rem .3rem;position:sticky;top:0;background:var(--evd-bg-dark);z-index:2;display:flex;flex-direction:column;align-items:center;font-family:var(--evd-font-display)}
.tl-day.tl-weekend{background:rgba(255,255,255,.02)}
.tl-day.tl-today .tl-daynum{color:var(--evd-primary);font-weight:700}
.tl-month-row{grid-row:1;display:flex;pointer-events:none;height:0;overflow:visible}
.tl-month-cell{flex-shrink:0;position:relative}
.tl-month-label{position:sticky;left:0;top:0;z-index:3;display:inline-block;background:var(--evd-bg-dark);border-right:1px solid rgba(255,255,255,.08);padding:.4rem .5rem .4rem .6rem;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--evd-primary);white-space:nowrap;font-family:var(--evd-font-display)}
.tl-weekday-letter{font-size:.58rem;color:rgba(255,255,255,.35);text-transform:uppercase;line-height:1.3}
.tl-daynum{font-size:.72rem;color:rgba(255,255,255,.55)}
.tl-today-line{border-left:2px solid var(--evd-primary);pointer-events:none;z-index:1;opacity:.5}

.tl-bar{position:relative;margin:3px 2px;border-radius:8px;background:linear-gradient(135deg,var(--evd-primary) 0%,color-mix(in srgb, var(--evd-primary) 60%, white) 100%);display:flex;align-items:center;gap:.5rem;padding:0 .5rem;text-decoration:none;overflow:hidden;box-shadow:0 2px 8px color-mix(in srgb, var(--evd-primary) 25%, transparent);transition:transform .15s,box-shadow .15s;min-width:0;min-height:28px}
.tl-bar:hover{transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb, var(--evd-primary) 40%, transparent);z-index:3}
.tl-thumb{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;display:none;background:var(--evd-img-backing)}
span.tl-thumb.tl-mono{background:#1a1a1a}
.tl-mono{align-items:center;justify-content:center;font-family:var(--evd-font-display);font-weight:700;font-size:.6rem;color:#fff}
.tl-text{min-width:0;overflow:hidden;white-space:nowrap;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.tl-name{font-size:.72rem;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis}
.tl-meta,.tl-meta-short{font-size:.62rem;color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;display:none}

.timeline[data-density="compact"] .tl-name{font-size:.62rem}
.timeline[data-density="cosy"] .tl-thumb{display:flex}
.timeline[data-density="cosy"] .tl-meta-short{display:block}
.timeline[data-density="roomy"] .tl-thumb{width:34px;height:34px;display:flex}
.timeline[data-density="roomy"] .tl-meta{display:block}

.tl-controls{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:.3rem auto .6rem;max-width:1200px;padding:0 1.5rem}
.tl-nav-btn{background:var(--evd-bg-card-sub);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);color:#fff;padding:.5rem 1rem;border-radius:999px;font-family:var(--evd-font-display);font-weight:600;font-size:.85rem;cursor:pointer;transition:background .2s}
.tl-nav-btn:hover{background:color-mix(in srgb, var(--evd-primary) 15%, transparent);border-color:var(--evd-primary)}
.tl-empty{padding:3rem 1.5rem;text-align:center;color:rgba(255,255,255,.5)}
@media (max-width:640px){ .tl-controls{gap:.4rem} .tl-nav-btn{padding:.4rem .8rem;font-size:.78rem} }