/* ==========================================================================
   EventVault — card & shelf system
   One card, three sizes (hero / standard / compact), used everywhere.

   Deliberately independent of Crafto's Isotope grid: containers here carry no
   .grid / .grid-item / .blog-wrapper classes, so main.js never attaches to
   them. That is what allows horizontal rails and a real hero, which a JS
   masonry grid cannot do.

   Colours come from the brand SVGs: coral #EE365B, turquoise #68C9CF,
   wordmark #333. Turquoise measures ~1.9:1 on white so it is used for FILLS
   only, with --ev-aqua-ink for text; white-on-coral is 3.96:1 (below AA) so
   controls use --ev-coral-deep at 5.7:1. The logo itself is never altered.
   ========================================================================== */

:root{
  --ev-coral:#EE365B;
  --ev-coral-deep:#C9143F;   /* interactive: white text passes AA */
  --ev-coral-ink:#CE1E42;    /* coral text on light backgrounds */
  --ev-coral-soft:#FDE8EC;
  --ev-aqua:#68C9CF;         /* fills only */
  --ev-aqua-ink:#15797F;     /* aqua text */
  --ev-aqua-soft:#E7F7F8;
  --ev-ink:#333333;
  --ev-ink-2:#5F5F61;
  --ev-ink-3:#909093;
  --ev-surface:#FFFFFF;
  --ev-paper:#FAF9F9;
  --ev-line:#E6E3E4;
  --ev-radius:11px;
  --ev-shadow:0 1px 2px rgba(46,46,46,.06), 0 8px 24px rgba(46,46,46,.05);
  --ev-ui:system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Editorial serif for hero titles — you are a media company, and it is the
     one place a display face earns its keep without slowing anything down. */
  --ev-display:Georgia,'Iowan Old Style','Times New Roman',serif;
  --ev-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- shelf ---------------------------------------------------- */
 /* One rule owns vertical rhythm. Previously .ev-section padding stacked on top
   of this margin, so the gap between two shelves was 34px inside a section and
   94px across one — the same visual relationship spaced two different ways. */
.ev-shelf{margin:0 0 28px}
.ev-shelf__head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ev-shelf__head h2,.ev-shelf__head h3{font:700 19px/1.2 var(--ev-ui);letter-spacing:-.015em;margin:0;color:var(--ev-ink)}
.ev-shelf__count{font:400 13px/1 var(--ev-ui);color:var(--ev-ink-3)}
.ev-shelf__all{margin-left:auto;font:600 13px/1 var(--ev-ui);color:var(--ev-coral-ink);text-decoration:none}
.ev-shelf__all:hover{text-decoration:underline}
.ev-shelf__pres{margin-left:auto;display:flex;align-items:center;gap:8px;
  font:600 10.5px/1 var(--ev-ui);letter-spacing:.09em;text-transform:uppercase;color:var(--ev-ink-3)}
.ev-shelf__pres img{max-height:26px;width:auto}

/* horizontal rail — deliberately shows 3–4 cards, per the Netflix finding
   that fewer, larger cards force the ranking to be right */
.ev-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);
  gap:16px;overflow-x:auto;padding:2px 2px 6px;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch}
.ev-rail>*{scroll-snap-align:start}
.ev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}

/* ---------- card: shared ---------------------------------------------- */
.ev-card{position:relative;background:var(--ev-surface);border:1px solid var(--ev-line);
  border-radius:var(--ev-radius);overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;transition:box-shadow .18s ease,transform .18s ease}
.ev-card:hover,.ev-card:focus-within{box-shadow:var(--ev-shadow);transform:translateY(-2px)}
/* The media carries its own corners rather than relying on the card's
   overflow:hidden to clip it. Inside a rail (a scroll container) combined with
   contain:paint, that ancestor clip is not applied reliably — the same card
   rendered square-topped in a rail and rounded in a grid. */
.ev-card__media{position:relative;flex:none;background:var(--ev-paper);aspect-ratio:16/10;
  overflow:hidden;border-radius:var(--ev-radius) var(--ev-radius) 0 0}
/* Events carry either a landscape photo or a square logo. `cover` crops a logo
   to pieces; `contain` letterboxes a photo. So: the image is contained on top of
   a blurred, scaled copy of itself — photos read as full-bleed, logos stay whole
   and sit on a tint drawn from their own colours. */
/* The image and its backdrop round THEMSELVES. The blur below promotes this
   element to a composited layer, and rounded overflow:hidden does not clip
   composited children — so an image whose content reaches the edge showed
   square corners, while a letterboxed one appeared fine purely because its
   corners happened to be transparent. */
.ev-card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  display:block;z-index:1;border-radius:inherit}
.ev-card__media::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--ev-img);background-size:cover;background-position:center;
  filter:blur(18px) saturate(1.25);opacity:.55;border-radius:inherit;
  /* inset:0 not a negative inset: bleeding the blur outward re-introduced the
     overflow it cannot be clipped out of. Scale instead, from the centre. */
  transform:scale(1.25)}
.ev-card__media--plain::before{display:none}
/* Many events carry a square logo rather than a landscape photo. Letting the
   image's intrinsic height size the row produced a 1000px hero; absolute
   positioning decouples the two so the layout owns the height. */
.ev-card__media{contain:paint}

/* time chip: urgency by fill weight, not a second hue */
.ev-when{position:absolute;left:10px;top:10px;z-index:2;background:var(--ev-surface);
  color:var(--ev-ink-2);border:1.5px solid var(--ev-line);border-radius:7px;
  padding:4px 9px;font:700 11px/1 var(--ev-mono);letter-spacing:.02em;white-space:nowrap}
.ev-when--soon{border-color:var(--ev-coral);color:var(--ev-coral-ink)}
.ev-when--now{background:var(--ev-coral-deep);border-color:var(--ev-coral-deep);color:#fff}

.ev-card__body{padding:13px 14px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
.ev-card__kicker{font:700 11px/1.3 var(--ev-ui);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ev-coral-ink);margin-bottom:2px;
  /* Derived kickers can run long ("Old Spanish Days Fiesta · Fiesta 2026") —
     one line, clipped, so a small card never reflows around it. */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-card--hero .ev-card__kicker{white-space:normal}
.ev-card__title{font:700 16px/1.3 var(--ev-ui);letter-spacing:-.01em;color:var(--ev-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ev-card__where{font:400 13.5px/1.35 var(--ev-ui);color:var(--ev-ink-2)}
.ev-card__meta{display:flex;gap:6px;align-items:center;margin-top:auto;padding-top:9px;flex-wrap:wrap}
.ev-card__price{margin-left:auto;font:700 13.5px/1 var(--ev-mono);color:var(--ev-ink);font-variant-numeric:tabular-nums}

.ev-chip{font:600 11px/1 var(--ev-ui);padding:5px 9px;border-radius:20px;white-space:nowrap;
  background:var(--ev-coral-soft);color:var(--ev-coral-ink)}
.ev-chip--free{background:var(--ev-aqua-soft);color:var(--ev-aqua-ink)}
.ev-chip--why{background:transparent;color:var(--ev-ink-3);border:1px solid var(--ev-line);font-weight:500}

/* actions — cheap to click on purpose: every tap is a signal */
.ev-acts{position:absolute;right:9px;top:9px;z-index:2;display:flex;gap:6px;opacity:0;transition:opacity .15s ease}
.ev-card:hover .ev-acts,.ev-card:focus-within .ev-acts,.ev-acts--pinned{opacity:1}
@media (hover:none){.ev-acts{opacity:1}}
.ev-act{width:32px;height:32px;border-radius:50%;border:1px solid var(--ev-line);background:var(--ev-surface);
  color:var(--ev-ink-2);display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-size:14px;line-height:1;padding:0}
.ev-act:hover{border-color:var(--ev-coral);color:var(--ev-coral-ink)}
.ev-act[aria-pressed="true"]{background:var(--ev-coral-deep);border-color:var(--ev-coral-deep);color:#fff}
.ev-act:focus-visible{outline:2px solid var(--ev-coral-deep);outline-offset:2px}

/* ---------- size: hero ------------------------------------------------ */
.ev-card--hero{display:grid;grid-template-columns:1.25fr 1fr;min-height:300px;max-height:360px}
.ev-card--hero .ev-card__media{aspect-ratio:auto;height:100%;min-height:300px;
  border-radius:var(--ev-radius) 0 0 var(--ev-radius)}
.ev-card--hero .ev-card__body{padding:28px;gap:9px;justify-content:center}
.ev-card--hero .ev-card__title{font-family:var(--ev-display);font-weight:400;font-size:30px;
  line-height:1.14;letter-spacing:-.005em;-webkit-line-clamp:2}
.ev-card--hero .ev-card__where{font-size:15.5px;margin-top:2px}
.ev-card--hero .ev-card__kicker{font-size:11.5px}
.ev-card--hero .ev-card__blurb{font:400 14.5px/1.55 var(--ev-ui);color:var(--ev-ink-2);margin:2px 0 0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- size: compact --------------------------------------------- */
.ev-list{display:flex;flex-direction:column;gap:1px;background:var(--ev-line);
  border:1px solid var(--ev-line);border-radius:var(--ev-radius);overflow:hidden}
.ev-card--compact{flex-direction:row;align-items:center;gap:14px;border:0;border-radius:0;
  padding:11px 14px;background:var(--ev-surface)}
.ev-card--compact:hover{transform:none;box-shadow:none;background:var(--ev-paper)}
.ev-card--compact .ev-cal{flex:none;width:48px;text-align:center;font-family:var(--ev-mono);line-height:1.1}
.ev-card--compact .ev-cal__m{font:700 10px/1 var(--ev-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ev-coral-ink)}
.ev-card--compact .ev-cal__d{font-size:21px;font-weight:700;color:var(--ev-ink)}
.ev-card--compact .ev-cal__t{font-size:10px;color:var(--ev-ink-3)}
.ev-card--compact .ev-card__body{padding:0;min-width:0;gap:2px}
.ev-card--compact .ev-card__title{font-size:14.5px;-webkit-line-clamp:1}
.ev-card--compact .ev-card__where{font-size:12.5px}
.ev-card--compact .ev-card__meta{margin:0;padding:0}

/* ---------- sponsor ---------------------------------------------------- */
.ev-sponsor{min-height:100%;border:1px dashed var(--ev-line);border-radius:var(--ev-radius);
  background:linear-gradient(180deg,var(--ev-coral-soft),transparent);
  display:flex;flex-direction:column;justify-content:center;gap:7px;padding:20px 17px;text-decoration:none;color:inherit}
.ev-sponsor__tag{font:700 10px/1 var(--ev-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--ev-coral-ink)}
.ev-sponsor__name{font:700 18px/1.25 var(--ev-ui);color:var(--ev-ink)}
.ev-sponsor__line{font:400 13px/1.45 var(--ev-ui);color:var(--ev-ink-2)}
.ev-sponsor img{max-width:100%;height:auto;border-radius:6px}

/* ---------- guest prompt ---------------------------------------------- */
.ev-guest{margin-top:auto;padding-top:11px;border-top:1px dashed var(--ev-line);
  display:flex;flex-direction:column;gap:5px;font:400 12.5px/1.45 var(--ev-ui);color:var(--ev-ink-2)}
.ev-guest b{font-size:13.5px;color:var(--ev-ink)}
.ev-btn{display:inline-block;font:600 13px/1 var(--ev-ui);padding:10px 15px;border-radius:8px;
  text-decoration:none;border:0;cursor:pointer;background:var(--ev-coral-deep);color:#fff;align-self:flex-start;margin-top:4px}
.ev-btn:hover{background:var(--ev-coral-ink);color:#fff}
.ev-btn--ghost{background:transparent;color:var(--ev-ink);border:1px solid var(--ev-line)}

@media (prefers-reduced-motion:reduce){
  .ev-card,.ev-acts{transition:none}
  .ev-card:hover,.ev-card:focus-within{transform:none}
}
@media (max-width:760px){
  .ev-card--hero{grid-template-columns:1fr}
  .ev-card--hero{max-height:none}
  .ev-card--hero .ev-card__media{aspect-ratio:16/10;min-height:0;
    border-radius:var(--ev-radius) var(--ev-radius) 0 0}
  .ev-card--hero .ev-card__body{padding:20px}
  .ev-card--hero .ev-card__title{font-size:22px}
}

/* ---------- page shell ------------------------------------------------- */
/* One measure shared by header, content and footer. Applied once here rather
   than per-template, which is how the old inconsistency crept in. */
.ev-container{max-width:1320px;margin:0 auto;padding:0 20px}
.ev-section{padding:0}          /* spacing comes from .ev-shelf, never from here */
.ev-container > .ev-section:first-child{padding-top:20px}
.ev-container > .ev-section:last-child .ev-shelf:last-child{margin-bottom:8px}
.ev-band{background:var(--ev-coral-soft);border-radius:14px;padding:20px 24px;margin:6px 0 30px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;text-align:center}
.ev-band__tag{font:700 10px/1 var(--ev-ui);letter-spacing:.13em;text-transform:uppercase;color:var(--ev-coral-ink)}
.ev-band a{display:inline-block}
.ev-band img{max-height:90px;width:auto;border-radius:8px}
.ev-empty{color:var(--ev-ink-3);font:400 14px/1.5 var(--ev-ui);padding:8px 0 20px}
@media (max-width:620px){.ev-container{padding:0 14px}}

/* ---------- franchise block -------------------------------------------- */
/* Hero and list read as one object: the list tucks under the hero with a
   shared edge, so a festival is visibly a single thing rather than a shelf
   that happens to contain related events. */
.ev-franchise .ev-card--hero{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.ev-franchise .ev-card--hero .ev-card__media{border-bottom-left-radius:0}
.ev-franchise__list{border-top-left-radius:0;border-top-right-radius:0}
.ev-franchise__more{display:block;text-align:center;padding:12px;margin-top:9px;
  border:1px solid var(--ev-line);border-radius:var(--ev-radius);
  font:600 13.5px/1 var(--ev-ui);color:var(--ev-coral-ink);text-decoration:none;background:var(--ev-surface)}
.ev-franchise__more:hover{background:var(--ev-coral-soft);border-color:var(--ev-coral)}

/* ---------- superuser edit ---------------------------------------------- */
.ev-act--edit{text-decoration:none;font-size:13px}
.ev-act--edit:hover{background:var(--ev-ink);border-color:var(--ev-ink);color:#fff}
/* A compact row is one big link, and an anchor cannot legally contain another,
   so the pencil is a sibling overlaid on the row via a wrapper. */
.ev-row{position:relative;display:block;background:var(--ev-surface)}
.ev-act--rowend{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;font-size:12px;z-index:2}
.ev-row:has(.ev-act--rowend) .ev-card--compact{padding-right:48px}