/* ==========================================================================
   ao-event-card.css — THE Around OECTA event card (.ao-evc)
   One component for every surface that shows a calendar-stream event: the admin
   composer preview, Workspace rows and Agenda, the member/events portals' tiles,
   workspace preview and Up Next. Rendered by AoShared.eventCardHtml (ao-shared.js).
   Vendored to Meeting Registrations 2 by sync-ao-writer-from-admin.sh — edit HERE.

   Rules (DESIGN-SYSTEM.md): tokens only (every colour is a var() with a fallback
   so the member portal, which lacks the Console roles, still resolves), No-Line
   (tonal surfaces, no 1px dividers), amber never as text, status never by colour
   alone (chips carry words), sans only (no serifs in Events, Paul 2026-09-27),
   44px targets, geometry mirrors the approved registration .ev-card family.
   Theme: the per-event --ao-ev-* custom props set inline on the root by the
   caller; a legacy/default event sets none and renders calm navy.
   ========================================================================== */

.ao-evc {
  --aoe-surface: var(--ao-ev-card-tint, var(--surface-card, var(--oecta-surface-lowest, #ffffff)));
  --aoe-sunk: var(--surface-sunk, var(--oecta-surface-low, #f4f3f6));
  --aoe-ink: var(--ink, var(--oecta-on-surface, #1a1c1e));
  --aoe-ink-2: var(--ink-2, var(--oecta-on-surface-variant, #43474e));
  --aoe-ink-mute: var(--ink-mute, var(--oecta-text-muted, #64748b));
  --aoe-brand: var(--brand, var(--oecta-primary-container, #204164));
  --aoe-hero: var(--ao-ev-hero, var(--aoe-brand));
  --aoe-date-bg: var(--ao-ev-datecard-bg, var(--aoe-sunk));
  --aoe-date-ink: var(--ao-ev-datecard-text, var(--aoe-ink));
  --aoe-title: var(--ao-ev-title, var(--aoe-ink));
  --aoe-title-font: var(--ao-ev-title-font, var(--oecta-font-display, Manrope, Inter, sans-serif));
  --aoe-body-font: var(--oecta-font-body, Inter, system-ui, sans-serif);
  --aoe-num-font: var(--con-mono, var(--oecta-font-display, Manrope, sans-serif));
  --aoe-radius: var(--oecta-radius-lg, 12px);
  --aoe-shadow: var(--con-shadow-card, var(--oecta-shadow-sm, 0 2px 8px rgba(32, 65, 100, 0.08)));
  --aoe-shadow-hover: var(--oecta-shadow-md, 0 6px 20px rgba(32, 65, 100, 0.12));
  --aoe-gap: var(--oecta-space-md, 12px);
  --aoe-pad: var(--oecta-space-lg, 16px);

  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "media media media" "date head actions" "facts facts facts" "foot foot foot";
  column-gap: var(--aoe-gap);
  row-gap: 0;
  align-content: start;   /* a stretched grid cell must not inflate the media/tint row */
  padding: var(--aoe-pad);
  background: var(--aoe-surface);
  border: 0;
  border-radius: var(--aoe-radius);
  box-shadow: var(--aoe-shadow);
  color: var(--aoe-ink);
  font-family: var(--aoe-body-font);
  transition: box-shadow var(--oecta-duration-fast, 150ms) var(--oecta-ease, ease), transform var(--oecta-duration-fast, 150ms) var(--oecta-ease, ease);
}
.ao-evc * { box-sizing: border-box; }
.ao-evc:hover { box-shadow: var(--aoe-shadow-hover); }
.ao-evc.is-selected { background: color-mix(in srgb, var(--aoe-brand) 7%, var(--aoe-surface)); }

/* ── Media: a real 16:9 cover, or the event's own tint (its hero colour) + emoji ── */
.ao-evc__media {
  grid-area: media;
  position: relative;
  margin: calc(-1 * var(--aoe-pad)) calc(-1 * var(--aoe-pad)) var(--aoe-gap);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--aoe-radius) var(--aoe-radius) 0 0;
  background: var(--aoe-sunk);
}
.ao-evc__media--tint {
  aspect-ratio: auto;
  min-block-size: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline: var(--aoe-pad);
  background: var(--aoe-hero);
}
.ao-evc__tint-emoji { font-size: 28px; line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); }
.ao-evc__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.ao-evc__scrim {
  position: absolute; inset: 0;
  background: var(--ao-ev-coverscrim, linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--aoe-brand) 35%, transparent)));
  pointer-events: none;
}

/* ── Date box: MON / day / "to DD" — the tear-off ── */
.ao-evc__datebox {
  grid-area: date;
  align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-inline-size: 48px;
  padding: 8px 6px;
  border-radius: var(--oecta-radius-md, 8px);
  background: var(--aoe-date-bg);
  color: var(--aoe-date-ink);
}
.ao-evc__month, .ao-evc__to {
  font-family: var(--aoe-num-font);
  font-variant-numeric: tabular-nums;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.2;
  text-transform: uppercase;
  opacity: 0.85;
}
.ao-evc__day {
  font-family: var(--aoe-num-font);
  font-variant-numeric: tabular-nums;
  font-size: 1.375rem; font-weight: 700; line-height: 1.1;
}

/* ── Title: the ONE open target, stretched over the card (::after); actions sit above it ── */
.ao-evc__head { grid-area: head; min-inline-size: 0; align-self: start; }
.ao-evc__title { margin: 0; font-size: inherit; }
.ao-evc__open {
  appearance: none;
  padding: 0; margin: 0;
  background: none; border: 0;
  cursor: pointer; text-align: start;
  font-family: var(--aoe-title-font);
  font-weight: 700; font-size: var(--oecta-text-md, 15px); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--aoe-title);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-block-size: 0;
}
.ao-evc__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; }
.ao-evc__open:hover { color: var(--aoe-brand); }
.ao-evc__open:focus-visible { outline: none; box-shadow: none; }
.ao-evc:has(.ao-evc__open:focus-visible) { box-shadow: var(--aoe-shadow), 0 0 0 2px var(--aoe-surface), 0 0 0 4px var(--aoe-brand); }
.ao-evc__tagline {
  margin: 4px 0 0;
  font-size: var(--oecta-text-sm, 13px); line-height: 1.4;
  color: var(--aoe-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Facts: when · where ── */
.ao-evc__facts {
  grid-area: facts;
  margin: var(--aoe-gap) 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--aoe-gap);
  font-size: var(--oecta-text-sm, 13px); line-height: 1.4;
  color: var(--aoe-ink-2);
}
.ao-evc__fact--when { font-family: var(--aoe-num-font); font-variant-numeric: tabular-nums; font-size: var(--oecta-text-xs, 12px); color: var(--aoe-ink-mute); }
.ao-evc__fact--where { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Footer chips (words, never colour alone) and caller extras ── */
.ao-evc__foot, .ao-evc__actions { position: relative; z-index: 1; }
.ao-evc__foot {
  grid-area: foot;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-block-start: var(--aoe-gap);
  min-block-size: 0;
}
.ao-evc__chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 9px; border: 0; border-radius: var(--oecta-radius-pill, 99px);
  font-family: var(--aoe-body-font); font-weight: 600; font-size: var(--oecta-text-xs, 12px); line-height: 1.3;
  color: var(--aoe-ink-2); background: var(--aoe-sunk);
}
.ao-evc__chip::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--con-dot-idle, var(--oecta-text-subtle, #94a3b8)); flex-shrink: 0; }
.ao-evc__chip--draft::before { background: var(--con-dot-warn, var(--oecta-accent, #f39c12)); }
.ao-evc__chip--members::before { background: var(--aoe-brand); }
.ao-evc__chip--hidden::before { background: var(--con-dot-bad, var(--oecta-error, #ba1a1a)); }
.ao-evc__chip--multi::before { display: none; }

/* ── Actions (admin controls) above the stretched target ── */
.ao-evc__actions {
  grid-area: actions;
  align-self: start;
  display: inline-flex; align-items: center; gap: 2px;
  margin: -6px -6px 0 0;
}
.ao-evc__actions > button, .ao-evc__actions > a {
  min-inline-size: 44px; min-block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── ROW variant: list rows (admin Workspace, member workspace) — datebox · text · thumb · actions ── */
.ao-evc--row {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "date head thumb actions" "date facts thumb actions" "date foot thumb actions";
  padding: var(--aoe-gap) var(--aoe-pad);
  align-items: start;
}
.ao-evc--row .ao-evc__facts { margin-block-start: 4px; }
.ao-evc--row .ao-evc__foot { margin-block-start: 6px; }
.ao-evc--row .ao-evc__open { font-size: var(--oecta-text-base, 14px); }
.ao-evc__thumb {
  grid-area: thumb;
  align-self: center;
  inline-size: 120px; aspect-ratio: 16 / 9;
  overflow: hidden; border-radius: var(--oecta-radius-md, 8px);
  background: var(--aoe-sunk);
}

/* ── FEATURE variant: Up Next — bigger date, room for a CTA row in footHtml ── */
.ao-evc--feature { padding: var(--oecta-space-xl, 24px); column-gap: var(--oecta-space-lg, 16px); }
.ao-evc--feature .ao-evc__media { margin: calc(-1 * var(--oecta-space-xl, 24px)) calc(-1 * var(--oecta-space-xl, 24px)) var(--aoe-pad); }
.ao-evc--feature .ao-evc__datebox { min-inline-size: 56px; padding: 10px 8px; }
.ao-evc--feature .ao-evc__day { font-size: 1.75rem; }
.ao-evc--feature .ao-evc__open { font-size: var(--oecta-text-lg, 18px); }

/* ── Phones ── */
@media (max-width: 768px) {
  .ao-evc__thumb { display: none; }
  .ao-evc--row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "date head actions" "date facts actions" "date foot actions"; }
  .ao-evc--feature { padding: var(--aoe-pad); }
  .ao-evc--feature .ao-evc__media { margin: calc(-1 * var(--aoe-pad)) calc(-1 * var(--aoe-pad)) var(--aoe-gap); }
}

@media (prefers-reduced-motion: reduce) {
  .ao-evc { transition: none; }
}

/* ── Small meta in the footer (views, counts) supplied by the caller ── */
.ao-evc__meta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--aoe-num-font); font-variant-numeric: tabular-nums;
  font-size: var(--oecta-text-xs, 12px); color: var(--aoe-ink-mute);
}
.ao-evc__meta .material-icons, .ao-evc__meta .material-icons-outlined { font-size: 14px; color: var(--aoe-ink-mute); }