/* ==========================================================================
   Home event card. This file is the only place the card's layout lives.
   Order, top to bottom: flyer, date line, name, venue, price, button.
   Name 34px down to 22px, one line. Gaps (from the spacing tuner): flyer to date 14, date to name 3,
   name to venue 0, venue to price 0, price to button 10, card to card 28.
   ========================================================================== */
.card{background:none;border:0;padding:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:0}
.cardhit{background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:0;width:100%;flex:1 1 auto}
.card .flyer{aspect-ratio:4/4.4;transition:transform .15s}
@media (hover:hover){.card:hover .flyer,.cardhit:hover .flyer{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.card .flyer{transition:none}}

/* Info block grows, so buttons line up across a row of cards. */
.cardrow{display:block;margin-top:14px;padding-bottom:10px;flex:1 1 auto}
.cardtext{display:block;padding:0}

/* Date line: weekday in script, then the day number and month in the same bold font and size. */
.datestub{display:flex;align-items:baseline;gap:2px;font-family:var(--display)}
.datestub .script{position:static;transform:none;margin-right:10px;white-space:nowrap;font-family:'Caveat',cursive;font-weight:700;font-size:19px;line-height:1}
.datestub .d,.datestub .m{margin:0;font-family:var(--display);font-weight:800;font-size:19px;line-height:1;color:var(--text);letter-spacing:0}
.datestub .m{text-transform:uppercase}

.card h3{margin:3px 0 0;font-weight:700;font-size:34px;line-height:1.1}
.cardvenue{margin:0;font-size:13px;line-height:1.3;color:var(--text);font-weight:400}
.cardstat{margin:0;font-size:13px;line-height:1.3;color:var(--text)}
.card .cardvenue.dim{color:var(--text)}
.cardbuy{margin-top:0}

/* Name: up to 34px, shrinking to 22px so it stays on one line (js/cardfit.js sets the size per row). */
.grid{row-gap:28px}

/* Single-event home layout. */
.one-ev-t .cardrow{margin-top:0}
.one-ev-t .cardrow h3,.one-ev-t h3{font-size:36px;line-height:1.05}
