/* The event card — one design, both audiences.
 *
 * Used by the public What's On grid and the member workshops list. Those two
 * pages extend different bases (public/base.html and tmr/app_base.html) with
 * different class vocabularies, so this file deliberately depends on neither:
 * it styles its own `.ec-` classes and reads only the design tokens both bases
 * define (--ink, --yellow, --border, --muted, --text, --inset, --card). Drop it
 * on a third page and it will look the same there too.
 *
 * Written because the two pages had grown separate cards that were converging
 * by hand. This codebase has paid for that pattern four times — eight nav
 * lists, two EasyMDE toolbars, three registration payloads, two partner
 * blocks — and the cost is always the same: a change lands on one copy.
 */

/* 1 / 2 / 3 columns, matching what the workshops page already did with
   Tailwind. minmax(0,1fr) rather than 1fr: a grid column defaults to
   min-width:auto and a long unbroken word would push it past the container. */
.ec-grid{display:grid;gap:24px;grid-template-columns:minmax(0,1fr);}
@media(min-width:640px){.ec-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1024px){.ec-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

.ec{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;
  background:var(--card,#fff);border:1px solid var(--border);border-radius:16px;
  color:var(--ink);transition:transform .18s ease,box-shadow .18s ease;}
.ec:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.12);}
@media (prefers-reduced-motion:reduce){.ec{transition:none;}.ec:hover{transform:none;}}
.ec.hidden{display:none;}

/* 16:9 by padding-bottom so the box reserves its height before the image
   loads and the grid does not jump as photos arrive. */
.ec-media{position:relative;padding-bottom:56.25%;background:var(--inset);overflow:hidden;}
.ec-media img,.ec-fallback{position:absolute;inset:0;width:100%;height:100%;}
.ec-media img{object-fit:cover;display:block;transition:transform .3s ease;}
.ec:hover .ec-media img{transform:scale(1.05);}
@media (prefers-reduced-motion:reduce){.ec-media img,.ec:hover .ec-media img{transition:none;transform:none;}}
/* Everything on the image sits on this, or it is unreadable over a light photo. */
.ec-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.66) 0%,transparent 56%);}

/* Bottom strip: date chip + day/time on the left, cost on the right. */
.ec-strip{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem;}
/* The whole date block sits on the yellow, not just the day number.
   White type over a photograph is a gamble — it reads on a dark image and
   disappears on a light one, and these are staff uploads we do not control.
   Putting the weekday and time on the same opaque panel makes them legible
   whatever is behind them, and ink-on-yellow is the strongest pairing the
   palette has. */
.ec-when{display:flex;align-items:stretch;gap:9px;min-width:0;
  background:var(--yellow);border-radius:7px;padding:5px 10px 5px 7px;}
.ec-daychip{text-align:center;min-width:34px;flex-shrink:0;
  display:flex;flex-direction:column;justify-content:center;}
.ec-day{font-size:17px;line-height:1;font-weight:700;color:var(--ink);margin:0;}
.ec-mon{font-size:9px;line-height:1.3;color:var(--ink);text-transform:uppercase;
  letter-spacing:.05em;margin:0;}
/* Separates the two halves now they share one background. */
.ec-when > div:last-child{min-width:0;border-left:1px solid rgba(26,26,26,.22);
  padding-left:9px;display:flex;flex-direction:column;justify-content:center;}
.ec-dow{color:var(--ink);font-size:12px;font-weight:700;line-height:1.2;margin:0;}
.ec-time{color:rgba(26,26,26,.78);font-size:11px;line-height:1.3;margin:0;white-space:nowrap;}
/* Never blank: a free event says Free, so "no badge" cannot be misread as
   "nobody filled the price in". */
.ec-cost{color:#fff;font-size:18px;font-weight:700;line-height:1;margin:0;flex-shrink:0;
  text-shadow:0 1px 3px rgba(0,0,0,.45);}

/* Type badge top-left, availability top-right — they used to compete for the
   same corner once the public card gained a type. */
.ec-kind{position:absolute;top:12px;left:12px;text-transform:uppercase;
  letter-spacing:.08em;font-size:10px;font-weight:700;border-radius:999px;
  padding:4px 9px;color:#fff;}
.ec-avail{position:absolute;top:12px;right:12px;text-transform:uppercase;
  letter-spacing:.06em;font-size:10px;font-weight:700;border-radius:5px;
  padding:4px 8px;background:rgba(0,0,0,.72);color:#FBBF24;}
.ec-avail.is-cancelled{background:var(--red,#B23A2A);color:#fff;}

.ec-body{padding:1.15rem 1.25rem 1.25rem;display:flex;flex-direction:column;flex:1;
  gap:.45rem;min-width:0;overflow-wrap:anywhere;}
.ec-title{font-size:1rem;line-height:1.3;margin:0;color:var(--ink);}
.ec-sub{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:0;}
.ec-blurb{font-size:.85rem;line-height:1.5;color:var(--text);font-weight:500;margin:0;}

/* Only rendered when there is something to put in it. The old What's On card
   carried a date-and-lab footer that repeated the chip above it. */
.ec-foot{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;}
.ec-level{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  background:var(--surface);border:1px solid var(--border);border-radius:5px;
  padding:.15rem .45rem;color:var(--muted);white-space:nowrap;}
/* overflow-wrap:anywhere is set on the body for long titles; a person's name
   should break between words, not mid-word. */
.ec-person{font-size:.72rem;color:var(--text);font-weight:700;text-align:right;
  overflow-wrap:normal;word-break:normal;}

/* Past events stay listed — the archive is worth browsing — but must not read
   as something you can still come to. The tag is lifted back out of the
   parent's opacity or it fades with everything else. */
.ec.is-past{opacity:.62;}
.ec.is-past:hover{opacity:1;}
.ec.is-past .ec-title{color:var(--muted);}
.ec-past-tag{opacity:1;border:1px solid var(--ink);border-radius:999px;
  padding:.15rem .5rem;font-size:.62rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;color:var(--ink);white-space:nowrap;}