@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500&display=swap');

/*
  The event card: one card for every event or plan idea on the website,
  drawn the way the app draws events on its Home screen
  (apps/garden/app/index.html, .sp2-ev: spotkaHomeEventCard in app.js).
  Added 2026-09-28 on the Ambassadors page, meant for any page that shows
  events. Link this file after site.css; it only adds `ecard` classes.

  What the app shows, and so what the card shows:
  - a 4:3 picture with round corners, no card frame around it;
  - a small pill on the picture, bottom left (the app: "3 places left");
  - the title on one line, then the day and time in small capitals
    (the app: "SAT, OCT 3 · 18:00"), then one or two lines saying why.

  One change from the app: the website's action is an "I would go" button
  under the text (.ecard-vote), not the app's heart on the picture. Sonia,
  2026-09-28: "I would go is more clear". The button is a sibling of the
  card's link, never inside it, and every button in a row sits on the same
  line. The heart (.ecard-heart) stays here for a page that needs it.

  No picture? The app leaves a tinted tile. Here the tile carries the
  activity's line icon (.ecard-icon), which is how the page stays within the
  picture rules: only pictures already used and approved, no generated faces.

  Markup:
    <ul class="ecard-row">
      <li class="ecard">
        <a class="ecard-open" href="...">            (a <div> when it opens nothing)
          <span class="ecard-pic">
            <img src="..." alt="">                 (or <svg class="ecard-icon">)
            <span class="ecard-pill">3 places left</span>
          </span>
          <span class="ecard-title">Picnic and frisbee</span>
          <span class="ecard-when">Sat, 3 Oct · 18:00</span>
          <span class="ecard-why">One line on why.</span>
        </a>
        <button class="ecard-vote" type="button" aria-pressed="false">
          <svg class="vote-plus" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5v9M3.5 8h9"/></svg>
          <svg class="vote-check" viewBox="0 0 16 16" aria-hidden="true"><path d="m3.5 8.5 3 3 6-7"/></svg>
          I would go
        </button>
      </li>
    </ul>

  .ecard-row is a sideways row you swipe on a phone (the next card cut off at
  the edge, as in the app) and a grid from 700px up.
*/

.ecard-row{list-style:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;
  margin:20px -20px 0;padding:0 20px 6px;scroll-padding:0 20px;scrollbar-width:none;
  overscroll-behavior-x:contain;overflow-anchor:none}
/* overflow-anchor: a page that adds cards in front with JS would otherwise
   keep the phone row scrolled to the old first card (home page, 2026-09-28).
   The row bleeds to the screen edge: its negative margin equals .page's side padding */
@media (max-width:390px){.ecard-row{margin-left:-17px;margin-right:-17px;padding-left:17px;padding-right:17px;scroll-padding:0 17px}}
.ecard-row::-webkit-scrollbar{display:none}
.ecard-row:focus-visible{outline:2px solid rgba(45,121,81,.35);outline-offset:4px}

.ecard{position:relative;flex:none;width:230px;scroll-snap-align:start;display:flex;flex-direction:column}
.ecard-open{display:block;color:inherit;text-decoration:none;border-radius:22px}
a.ecard-open:hover .ecard-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a.ecard-open:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.ecard-pic{display:flex;align-items:center;justify-content:center;position:relative;aspect-ratio:4/3;
  border-radius:22px;overflow:hidden;background:var(--soft);color:var(--accent)}
.ecard-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ecard-icon{width:30%;height:auto;aspect-ratio:1;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.85}

/* quieter than the picture, as in the app */
.ecard-pill{position:absolute;left:10px;bottom:10px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:var(--muted);
  font-size:11px;font-weight:500;line-height:1;padding:5px 9px;border-radius:999px;white-space:nowrap}

/* 34px drawn; a transparent frame around it makes a 44px tap target */
.ecard-heart{position:absolute;right:10px;top:10px;width:34px;height:34px;min-height:0;border-radius:50%;
  border:0;padding:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted)}
.ecard-heart::before{content:"";position:absolute;inset:-5px;border-radius:50%}
.ecard-heart svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.ecard-heart[aria-pressed="true"]{color:var(--accent)}
.ecard-heart[aria-pressed="true"] svg{fill:currentColor}
.ecard-heart:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.ecard-title{display:block;font-size:16px;font-weight:600;letter-spacing:-.02em;line-height:1.3;
  margin:12px 2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.ecard-when{display:block;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-size:12px;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;color:var(--muted);margin:5px 2px 0}
.ecard-why{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-size:13px;color:var(--muted);line-height:1.4;margin:4px 2px 0}

/* "I would go": a ghost button in the pill shape, pinned to the card's
   bottom (margin-top:auto) so a row's buttons line up. Pressed, it fills
   with the accent and the plus becomes a check; the words stay the same. */
.ecard-vote{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:auto 2px 0;
  min-height:44px;padding:0 14px;border-radius:99px;border:1px solid var(--accent);background:transparent;
  color:var(--accent);font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}
.ecard-open:has(+ .ecard-vote){margin-bottom:12px}
@media (hover:hover){.ecard-vote:hover{background:var(--soft)}}
.ecard-vote[aria-pressed="true"]{background:var(--accent);color:#fff}
.ecard-vote:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ecard-vote[aria-pressed="true"] .vote-plus,.ecard-vote[aria-pressed="false"] .vote-check{display:none}
.ecard-vote svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){.ecard-vote{transition:background-color .15s,color .15s}}

@media (min-width:700px){
  .ecard-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;
    margin:24px 0 0;padding:0;overflow:visible}
  .ecard{width:auto}
}
@media (min-width:1000px){
  .ecard-row{grid-template-columns:repeat(4,minmax(0,1fr))}
}