/* =====================================================================
   Event card (Figma 704:8144)
   type:   standard (808 · 20px title · 48px buttons) | compact (420 · 16px title · 40px buttons)
   image:  toggle — 188px photo (standard) / 72px thumbnail (compact), on the right
   actions: Primary icon button "More" + three icon buttons (calendar, share, save) from the Button component
   states: default · hover · pressed · staff pick — same logic as Story cards:
     hover   = no border, deeper shadow, white surface
     pressed = 1px gold border + 3.3px gold ring, pressed surface
     staff   = 2px purple border + highlight, purple tint, purple shadows
   Nothing moves in any state.
   ===================================================================== */
.event-card{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:8px;width:100%;padding:16px;
  background:var(--card-bg-default);border:1px solid var(--card-border-default);border-radius:var(--radius-md);color:var(--card-text-primary);
  box-shadow:0 2px 8px rgba(0,0,0,.03);
  transition:background-color .25s,border-color .25s,box-shadow .25s}
.event-card:is(:hover,.is-hover,:focus-within){background:var(--card-bg-hover);border-color:transparent;box-shadow:0 8px 10px rgba(0,0,0,.08)}
.event-card:is(:active,.is-pressed){background:var(--card-bg-pressed);border-color:var(--card-border-pressed);box-shadow:0 0 var(--elevation-card-pressed-ring-blur,3.3px) 1px var(--card-ring-pressed),0 1px 4px rgba(0,0,0,.04)}

.event-card__date{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none;text-align:center;white-space:nowrap;padding-right:4px}
.event-card__date p{margin:0}
.event-card__day{font:var(--text-xl);color:var(--card-text-primary)}
.event-card__time{display:flex;gap:4px;align-items:baseline;font:var(--text-xs);color:var(--card-text-secondary)}
.event-card__city{font:var(--text-xs);color:var(--card-text-secondary)}
.event-card__divider{align-self:stretch;flex:none;width:1px;background:var(--card-divider);opacity:.5;margin-right:4px}

.event-card__content{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.event-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;width:100%}
.event-card__title{margin:0;width:100%;font:var(--text-xl);color:var(--card-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-card__mmeta{display:none;margin:0;font:var(--text-xs);color:var(--card-text-secondary)}
.event-card__mmeta i{font-style:normal;margin:0 8px}
.event-card__actions{display:flex;align-items:stretch;gap:12px;width:100%}
.event-card__more .btn__label{display:none}
.event-card__actions .btn[aria-pressed="true"] .btn__icon{fill:currentColor}

.event-card__media{position:relative;align-self:stretch;flex:none;width:188px;margin-left:8px;border-radius:6px;overflow:hidden;background:var(--neutral-200)}
.event-card__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}

/* Compact: 420 wide, 36px divider tick, 16/24 title, 40px buttons, 72px thumbnail */
.event-card--compact .event-card__divider{align-self:center;height:36px}
.event-card--compact .event-card__content{gap:8px}
.event-card--compact .event-card__title{font:var(--text-base)}
.event-card--compact .event-card__actions{gap:12px}
.event-card--compact .event-card__media{align-self:center;width:72px;height:72px}

/* Staff pick */
.event-card--staff{border:2px solid var(--card-staff-pick-border);padding:15px;background-image:linear-gradient(180deg,var(--card-staff-pick-tint-start) 0%,var(--card-staff-pick-tint-end) 100%);background-color:var(--card-bg-default);box-shadow:0 2px 8px 0 var(--card-staff-pick-shadow-tight),0 8px 24px -8px var(--card-staff-pick-shadow-soft)}
.event-card--staff:is(:hover,.is-hover,:focus-within){border-color:var(--card-staff-pick-border);box-shadow:0 8px 16px 0 var(--card-staff-pick-shadow-tight),0 8px 24px -8px var(--card-staff-pick-shadow-soft)}
.event-card--staff:is(:active,.is-pressed){border-color:var(--card-staff-pick-border);box-shadow:0 0 3.3px 1px var(--card-staff-pick-highlight)}

/* Mobile (Figma Device=Mobile): date block + divider fold into a "City • Date • Time" line, "More" gets its label */
@media (max-width:640px){
  .event-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:8px;align-items:start}
  .event-card__date,.event-card__divider{display:none}
  .event-card__content{display:contents}
  .event-card__meta{grid-column:1;gap:8px 4px}
  .event-card__title{grid-column:1;white-space:normal}
  .event-card--compact .event-card__title{font:var(--text-xl)}
  .event-card__mmeta{display:block;grid-column:1 / -1}
  .event-card__actions{grid-column:1 / -1;flex-wrap:wrap;gap:4px 12px;padding-top:8px}
  .event-card__more{width:auto;padding:12px 18px}
  .event-card__more .btn__label{display:inline}
  .event-card__more .btn__icon{width:16px;height:16px}
  .event-card--compact .event-card__more{padding:8px 14px}
  .event-card__media{grid-column:2;grid-row:1 / span 2;align-self:start;margin:0;width:80px;height:80px}
}

/* Same rules, forced, for the components page */
.ds__mobile .event-card{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:8px;align-items:start}
.ds__mobile .event-card--compact,.ds__mobile .event-card--standard{max-width:none}
.ds__mobile .event-card__date,.ds__mobile .event-card__divider{display:none}
.ds__mobile .event-card__content{display:contents}
.ds__mobile .event-card__meta{grid-column:1;gap:8px 4px}
.ds__mobile .event-card__title{grid-column:1;white-space:normal}
.ds__mobile .event-card--compact .event-card__title{font:var(--text-xl)}
.ds__mobile .event-card__mmeta{display:block;grid-column:1 / -1}
.ds__mobile .event-card__actions{grid-column:1 / -1;flex-wrap:wrap;gap:4px 12px;padding-top:8px}
.ds__mobile .event-card__more{width:auto;padding:12px 18px}
.ds__mobile .event-card__more .btn__label{display:inline}
.ds__mobile .event-card__more .btn__icon{width:16px;height:16px}
.ds__mobile .event-card--compact .event-card__more{padding:8px 14px}
.ds__mobile .event-card__media{grid-column:2;grid-row:1 / span 2;align-self:start;margin:0;width:80px;height:80px}
.event-card--standard .event-card__date{width:104px}

/* Featured (Figma 745:23001): image-led, 644×420 in the hero; fluid width, fixed 420 height.
   Photo + gradient (transparent to 35%, 85% dark from 68%), content bottom-left, Staff Pick flag top-right. */
.event-card--featured{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0;height:420px;padding:var(--space-24);overflow:hidden;
  background:var(--neutral-900);border:0;color:var(--text-inverse);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.event-card--featured:is(:hover,.is-hover,:focus-within){background:var(--neutral-900);box-shadow:0 8px 20px rgba(0,0,0,.16)}
.event-card--featured:is(:active,.is-pressed){background:var(--neutral-900);box-shadow:0 0 3.3px 1px var(--card-ring-pressed)}
.event-card--featured.event-card--staff{border:0;padding:var(--space-24);background-image:none;background-color:var(--neutral-900)}
.event-card__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out,ease)}
.event-card--featured:hover .event-card__photo{transform:scale(1.03)}
.event-card__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,15,0) 0%,rgba(20,18,15,0) 35%,rgba(20,18,15,.85) 68%,rgba(20,18,15,.85) 100%)}
.event-card__flag{position:absolute;top:var(--space-24);right:var(--space-24)}
.event-card__fcontent{position:relative;display:flex;flex-direction:column;gap:12px;width:100%}
.event-card--featured .event-card__meta{gap:8px}
.event-card--featured .event-card__meta .badge:not(.badge--person){--badge-bg:var(--neutral-900);--badge-border:var(--border-default);--badge-fg:#fff}
.event-card__ftitle{margin:0;font:var(--text-3xl);text-transform:uppercase;color:var(--text-inverse);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.event-card__fdate{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font:var(--text-base);color:var(--text-inverse);opacity:.8}
.event-card__fdate span{display:inline-flex;align-items:center;gap:8px}
.event-card__fdate i{font-style:normal}
.event-card__fdate svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.event-card--featured .event-card__actions{width:auto;gap:12px}
.event-card--featured .event-card__actions .btn[aria-pressed="true"] .btn__icon{fill:currentColor}
@media (max-width:640px){
  .event-card--featured{display:flex;height:360px;padding:var(--space-16)}
  .event-card__flag{top:var(--space-16);right:var(--space-16)}
  .event-card__ftitle{white-space:normal;font:var(--text-2xl)}
}

/* Event modal (basic): photo, badges, title, date lines, actions */
.modal--event .event-modal{position:relative;width:min(560px,100%);max-height:calc(100vh - 48px);overflow:auto;background:var(--surface-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-large-hover);text-align:left;transform:translateY(16px) scale(.96);transition:transform .45s var(--ease-out)}
.modal--event.is-open .event-modal{transform:none}
.event-modal__img{display:block;width:100%;height:240px;object-fit:cover;background:var(--neutral-200)}
.event-modal__x{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.9);border-radius:50%}
.event-modal__body{display:flex;flex-direction:column;gap:12px;padding:var(--space-24)}
.event-modal__meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.event-modal__title{margin:0;font:var(--text-2xl);color:var(--text-primary)}
.event-modal__lines{display:flex;flex-direction:column;gap:6px;margin:0;font:var(--text-base);color:var(--text-secondary)}
.event-modal__lines span{display:flex;align-items:center;gap:8px}
.event-modal__lines svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.event-modal__text{margin:0;font:var(--text-base);color:var(--text-secondary)}
.event-modal__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.modal--event [hidden]{display:none!important}