/* ============================================================================
 * m-events.css — /events cards (visual 60% / body 40%) and the details drawer
 * layout, all widths. Loaded after events.css and mobile.css.
 * ============================================================================ */
/* ---- 1. Cards: visual 60% / body 40% --------------------------------- */
.event-card {
  display: grid;
  /* One full-width column: an implicit track sized to the visual's content
     (cards without a flagship badge got a narrow panel). */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
  height: 580px;
  padding: 0;
  min-width: 0;
  /* Off-screen cards skip style/layout/paint. The height is fixed above, so
     skipping never changes the page length (anchors and scroll stay put);
     overflow is already hidden, so paint containment clips nothing new. */
  content-visibility: auto;
  contain-intrinsic-size: none auto 580px;
}

.event-card .event-card-visual {
  aspect-ratio: auto;
  min-height: 0;
  height: 100%;
}

.event-card .event-visual-num {
  font-size: 128px;
}

.event-card .event-card-body {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  padding: 16px 16px 16px;
}

.event-card .event-badge-category {
  margin-bottom: 4px;
  font-size: 11px;
}

.event-card .event-card-title {
  font-size: 22px;
  margin: 0 0 6px;
  /* 2-line clamp comes from events.css */
}

.event-card .event-card-tagline {
  font-size: 13px;
  line-height: 1.45;
  min-height: 0;
  margin: 0 0 10px;
}

.event-card .event-card-chips {
  flex-wrap: nowrap;
  min-width: 0;
  margin: 0 0 12px;
}

/* Date chip only. */
.event-card .event-chip + .event-chip {
  display: none;
}

.event-card .event-chip {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.event-card .event-card-actions {
  margin-top: auto;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

/* VIEW DETAILS fills the row; the cart toggle sits at its end. */
.event-card .event-btn-details {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: var(--tap);
  white-space: nowrap;
}

/* ---- 1b. Cart: icon-only toggle (cards + drawer) and floating button -- */
.event-card-actions .event-cart-toggle,
.event-cart-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--motion-150) var(--ease-out), background-color var(--motion-150) ease, color var(--motion-150) ease;
}

.event-cart-toggle svg,
.events-cart-fab svg {
  width: 20px;
  height: 20px;
  flex: none;
}

.event-cart-toggle.is-added {
  background: var(--ink);
  color: var(--ink-on-dark);
}

.event-cart-toggle:focus-visible,
.events-cart-fab:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Drawer: REGISTER fills the row, the cart toggle at its end. */
.event-cta-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-cta-row .event-action-large {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: var(--tap);
  margin-top: 0;
}

/* Floating cart button: icon + count, quiet (white, icon only) when empty. */
.events-cart-fab {
  gap: 8px;
  min-width: var(--tap);
  min-height: var(--tap);
  justify-content: center;
  padding: 0 12px;
}

.events-cart-fab:not(.has-items) {
  padding: 0;
}

.events-cart-fab:not(.has-items) .events-cart-fab-count {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .event-cart-toggle:hover {
    background: var(--surface);
    background: color-mix(in srgb, var(--ink) 6%, var(--surface));
    transform: translateY(-1px);
  }

  .event-cart-toggle.is-added:hover {
    background: var(--ink);
    background: color-mix(in srgb, var(--ink) 87%, var(--surface));
  }

  .events-cart-fab:hover {
    transform: translateY(-1px);
  }
}

/* ---- 2. Details drawer -------------------------------------------- */
.event-dossier-panel {
  --mpad: 24px;
  padding: 0 var(--mpad) calc(24px + env(safe-area-inset-bottom));
}

.event-dossier-mbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 calc(-1 * var(--mpad)) 16px;
  padding: 10px var(--mpad);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.event-dossier-mbar .event-dossier-close {
  margin: 0;
  align-self: auto;
  min-height: var(--tap);
}

.event-dossier-back {
  min-height: var(--tap);
  padding: 0 8px 0 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}

.event-dossier-back:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

/* The category glyph panel stands in for an event photo. */
.event-dossier-visual {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: 44vh;
  margin-bottom: 20px;
  border-radius: 20px;
  overflow: hidden;
  color: var(--ink-on-dark);
  background-color: var(--cat, var(--ink));
  background-image:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.2px);
  background-size: auto, 14px 14px;
}

.event-dossier-visual .event-visual-num {
  font-size: 140px;
}

.event-dossier-kicker {
  display: block;
  margin-bottom: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.event-dossier-panel .event-dossier-tagline {
  margin-bottom: 16px;
}

.event-dossier-facts {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
}

.event-dossier-facts > div {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
}

.event-dossier-facts dt {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
}

.event-dossier-facts dd {
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* The CTA sits in the flow under when/where (events.css pins it on phones). */
.event-dossier-panel .event-dossier-cta {
  position: static;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  background: none;
}

.event-org-link {
  display: inline-block;
  padding: 10px 0;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

/* Desktop (>= 992px): the events.css grid (auto-fill, 320px min) gives 2–3
   columns, 335–460px wide. 560px tall keeps the visual near 60% without a
   tall empty panel; the body track never drops below its content, so the
   wider title can't push VIEW DETAILS out of the card. */
@media (min-width: 992px) {
  .event-card {
    grid-template-rows: minmax(0, 3fr) minmax(min-content, 2fr);
    height: 560px;
    contain-intrinsic-size: none auto 560px;
  }

  .event-card .event-card-body {
    padding: 18px 20px 20px;
  }

  .event-card .event-card-title {
    font-size: 24px;
  }

  /* Drawer keeps its events.css width (620px) and slide-in. */
  .event-dossier-panel {
    --mpad: 32px;
    padding-bottom: 40px;
  }

  .event-dossier-visual {
    aspect-ratio: 16 / 9;
    max-height: 40vh;
  }
}

@media (max-width: 379px) {
  .event-dossier-panel {
    --mpad: 16px;
  }

  .event-card .event-card-body {
    padding: 14px 14px 14px;
  }
}

/* ---- Event posters (images/events/<id>.webp) ------------------------------ */
/* Cards: the poster fills the 60% visual, cropped from slightly above centre
   (titles usually sit high on the poster). */
.event-card-visual.has-poster {
  padding: 0;
  overflow: hidden;
  /* Blurred copy of the poster fills the box around the whole poster. */
  background: var(--poster-bg, none) center / cover no-repeat, #000;
}
.event-card-visual.has-poster .event-poster {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Whole poster, never cropped; the backdrop fills the rest. */
  object-fit: contain;
}
/* Details: the whole poster, uncropped, over its blurred backdrop. */
.event-dossier-visual.has-poster {
  aspect-ratio: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  display: block;
  overflow: hidden;
  background: var(--poster-bg, none) center / cover no-repeat, #000;
}
.event-dossier-visual.has-poster .event-poster {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
  margin: 0 auto;
}
@media (hover: hover) and (pointer: fine) {
  .event-card-visual.has-poster .event-poster {
    transition: transform var(--motion-300, 300ms) var(--ease-out, ease);
  }
  .event-card:hover .event-card-visual.has-poster .event-poster {
    transform: scale(1.03);
  }
}
@media (prefers-reduced-motion: reduce) {
  .event-card-visual.has-poster .event-poster {
    transition: none;
    transform: none !important;
  }
}

/* ---- Accommodation strip above the grid (not an event card) ----------- */
.events-stay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 24px;
  padding: 12px 12px 12px 20px;
  border: 1.5px solid var(--line-strong);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
}

.events-stay-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.events-stay-text strong {
  font-size: 16px;
  line-height: 1.3;
}

.events-stay-text span {
  font-size: 13px;
  color: var(--ink-muted);
}

.events-stay-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.events-stay-status {
  font-size: 11px;
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
}

.events-stay-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-on-dark);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.events-stay-link:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (max-width: 767px) {
  .events-stay {
    margin-bottom: 16px;
    padding: 12px;
  }
}