/* ==========================================================================
   Headfirst embed — the house style, asserted.
   Ported from the Lanes rebuild (same `lanes` feed; selectors verified there
   against the real injected DOM: hf__event-listing cards, hf-modal/hf-panel
   checkout, number-stepper). Only the payment iframe is out of reach. Their
   <style> tags land after ours, hence the !importants — deliberate, not lazy.
   Tokens re-pointed at the Motel's --rb-* system.
   ========================================================================== */

/* ------------------------------------------------ token interception ----- */
/* Headfirst themes itself with CSS custom properties (--hf__* on the embed
   root, --color-* in the react modal). Re-pointing their tokens at ours
   restyles every HF component at the source — including ones we haven't
   met yet. Their venue-config block lands after our stylesheet, hence
   !important. */
.hf__embed-root,
.HDFST_STYLE_PARENT,
.hf-modal-layer,
[class*="REACTMODAL"] {
  --hf__colour-accent: var(--rb-amber) !important;
  --hf__white: var(--rb-ink-2) !important;
  --hf__black: var(--rb-cream) !important;
  --hf__grey-light: rgba(247, 239, 226, 0.16) !important;
  --hf__grey-medium: rgba(247, 239, 226, 0.45) !important;
  --hf__grey-dark: rgba(247, 239, 226, 0.72) !important;

  /* react-modal token set */
  --color-accent: var(--rb-amber) !important;
  --color-accent-foreground: var(--rb-ink) !important;
  --color-accent-dark: #d99425 !important;
  --color-white: var(--rb-ink-2) !important;
  --color-black: var(--rb-cream) !important;
  --color-charcoal: var(--rb-cream) !important;
}

/* ------------------------------------------------------------- listings -- */
.hf__event-listings {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)) !important;
  gap: 1.1rem !important;
}

.hf__event-listing {
  background: var(--rb-ink-2) !important;
  border: 1px solid var(--rb-line-soft) !important;
  border-radius: var(--rb-radius) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.3s !important;
}
.hf__event-listing:hover {
  transform: translateY(-4px) rotate(-0.4deg);
  border-color: color-mix(in srgb, var(--rb-amber) 55%, transparent) !important;
}

.hf__event-listing--image-wrapper {
  display: block !important;
  aspect-ratio: 3 / 2;
  overflow: hidden !important;
}
.hf__event-listing--image {
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  filter: saturate(0.92);
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.hf__event-listing:hover .hf__event-listing--image { transform: scale(1.045); }

.hf__event-listing--content {
  padding: 1.05rem 1.15rem 1.15rem !important;
  display: flex !important; flex-direction: column !important; gap: 0.5rem !important;
  flex: 1 !important;
  font-family: var(--rb-font-body) !important;
}

/* date + time — scoreboard voice */
.hf__cr__event-listing--top {
  font-family: var(--rb-font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--rb-amber) !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 1em !important;
}
.hf__cr__event-listing--top span { color: var(--rb-cream-50) !important; }

/* the act, on the marquee */
.hf__event-listing--name {
  font-family: var(--rb-font-display) !important;
  font-style: italic !important;
  font-weight: 650 !important;
  font-size: 1.22rem !important;
  line-height: 1.16 !important;
  letter-spacing: -0.01em !important;
  color: var(--rb-cream) !important;
  text-decoration: none !important;
  text-transform: none !important;
}
.hf__event-listing--name:hover { color: var(--rb-amber) !important; }

/* info / tickets row — stub edge above */
.hf__cr__event-listing--bottom {
  margin-top: auto !important;
  display: flex !important; align-items: center !important; gap: 0.55rem !important;
  padding-top: 0.8rem !important;
  padding-bottom: 0.35rem !important;
  border-top: 1.5px dashed var(--rb-line-soft) !important;
  border-bottom: 0 !important; /* HF draws a 2px solid line flush under the buttons — off */
}
.hf__cr__event-listing--bottom .hf__event-listing--link {
  font-family: var(--rb-font-body) !important;
  font-weight: 600 !important; font-size: 0.85rem !important;
  color: var(--rb-cream-70) !important;
  text-decoration: none !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: 999px !important;
  padding: 0.5em 1.2em !important;
  transition: color 0.2s, border-color 0.2s;
}
.hf__cr__event-listing--bottom .hf__event-listing--link:hover {
  color: var(--rb-cream) !important;
  border-color: var(--rb-cream-50) !important;
}
.hf__ticket-button {
  background: var(--rb-amber) !important;
  color: var(--rb-ink) !important;
  font-family: var(--rb-font-body) !important;
  font-weight: 700 !important; font-size: 0.85rem !important;
  border: 0 !important; border-radius: 999px !important;
  padding: 0.55em 1.3em !important;
  cursor: pointer !important;
  text-transform: none !important;
  transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.25s !important;
}
.hf__ticket-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--rb-amber) 40%, transparent);
}

/* HF's "button" is a div — give keyboard users a focus ring anyway */
.hf__ticket-button:focus-visible,
.hf__event-listing--link:focus-visible,
.hf__event-listing--name:focus-visible {
  outline: 2px solid var(--rb-amber) !important;
  outline-offset: 3px;
}

.hf__event-listings[data-hf__no-events="false"] .hf__event-listings--no-events { display: none !important; }
.hf__event-listings--no-events {
  font-family: var(--rb-font-mono) !important;
  color: var(--rb-cream-50) !important;
  grid-column: 1 / -1;
}

/* ------------------------------------------- event detail dialog (info) -- */
.hf__embed-root-dialog-inner {
  background: var(--rb-ink-2) !important;
  color: var(--rb-cream) !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: var(--rb-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}

/* the token flip turns HF's white close button ink-on-ink — keep it visible */
.hf__embed-root-dialog-close-button {
  color: var(--rb-cream) !important;
  background: transparent !important;
}

/* the act's name gets the display voice */
.hf__event-listing-detail--title {
  font-family: var(--rb-font-display) !important;
  font-style: italic !important;
  font-weight: 650 !important;
  font-size: clamp(1.6rem, 3vw, 2.3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--rb-cream) !important;
}

/* date / times / genres speak scoreboard */
.hf__event-listing-detail--info,
.hf__event-listing-detail--date {
  font-family: var(--rb-font-mono) !important;
  font-size: 0.8rem !important;
  color: var(--rb-cream-70) !important;
}
.hf__event-listing-genre {
  font-family: var(--rb-font-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.1em !important;
  color: var(--rb-amber) !important;
  border: 1px solid color-mix(in srgb, var(--rb-amber) 45%, transparent) !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 2px 10px !important;
}

/* section labels (“Audio / Video”, “Images”) become eyebrows */
.hf__event-listing-detail--media-title,
.hf__event-listing-detail--images-title,
.hf__event-listing-detail--media h3,
.hf__event-listing-detail--images h3 {
  font-family: var(--rb-font-mono) !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--rb-amber) !important;
}

/* the playlist — these rows swap the video in the player. Make them look
   like it: play glyph in amber, full-strength text, hover state, pointer. */
.hf__event-listing-detail--launch-media,
.hf__event-listing-detail--media-list-item {
  color: var(--rb-cream-70) !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: background 0.2s, color 0.2s !important;
}
.hf__event-listing-detail--media-list-item-inner {
  color: inherit !important;
  padding: 0.45rem 0.6rem !important;
  gap: 0.6em !important;
  align-items: center !important;
  font-size: 0.9rem !important;
}
/* the ⏵ glyph lives in the first child of the row */
.hf__event-listing-detail--media-list-item-inner > :first-child {
  color: var(--rb-amber) !important;
  font-size: 1rem !important;
}
.hf__event-listing-detail--launch-media:hover,
.hf__event-listing-detail--media-list-item:hover {
  background: color-mix(in srgb, var(--rb-amber) 12%, transparent) !important;
  color: var(--rb-cream) !important;
}
.hf__event-listing-detail--launch-media:focus-visible {
  outline: 2px solid var(--rb-amber) !important;
  outline-offset: 2px;
}

/* the player itself: give it proper presence */
.hf__embed-media-player-iframe {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: calc(var(--rb-radius) - 4px) !important;
  background: #000 !important;
}

/* gallery thumbs */
.hf__event-listing-detail--images { gap: 0.6rem !important; }
.hf__event-listing-detail--image { border-radius: 8px !important; }

.hf__event-listing-detail--long-description {
  color: var(--rb-cream-70) !important;
  line-height: 1.65 !important;
}
.hf__event-listing-detail--long-description a { color: var(--rb-amber) !important; }

/* --------------------------------------------- checkout / ticket modal -- */
.hf-modal-layer { background: rgba(13, 8, 8, 0.8) !important; }

.hf-modal, .hf-panel {
  background: var(--rb-ink-2) !important;
  color: var(--rb-cream) !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: var(--rb-radius) !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
  font-family: var(--rb-font-body) !important;
}

.hf-panel__title, .hf-modal__title-bar,
.hf-panel__title .hf-typography, .hf-modal__title-bar .hf-typography {
  font-family: var(--rb-font-display) !important;
  font-style: italic !important;
  font-weight: 650 !important;
  color: var(--rb-cream) !important;
  background: transparent !important;
  border-bottom-color: var(--rb-line-soft) !important;
}

/* HF's typography nodes default to black inside the modal — force readable
   cream, then re-assert the stronger voices below (names, titles, prices). */
.hf-modal .hf-typography,
.hf-panel .hf-typography,
.checkout-product-selector__wrapper .hf-typography {
  color: var(--rb-cream-70) !important;
  font-family: inherit !important;
}
.hf-modal .checkout-product-listing__product-name,
.hf-panel .checkout-product-listing__product-name {
  color: var(--rb-cream) !important;
}

.checkout-product-listing {
  border-bottom: 1.5px dashed var(--rb-line-soft) !important;
  background: transparent !important;
}
.checkout-product-listing__product-name {
  font-weight: 600 !important;
  color: var(--rb-cream) !important;
}
.checkout-product-listing__not-available-message { color: var(--rb-cream-50) !important; }

/* prices & numbers speak mono wherever they appear */
.checkout-product-listing [class*="price"],
.hf-modal [class*="price"],
.hf-modal [class*="total"] {
  font-family: var(--rb-font-mono) !important;
  color: var(--rb-amber) !important;
}

.hf-button {
  background: var(--rb-amber) !important;
  color: var(--rb-ink) !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-family: var(--rb-font-body) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  transition: transform 0.25s cubic-bezier(0.19, 1, 0.22, 1) !important;
}
.hf-button:hover { transform: translateY(-1px); }
.hf-icon-button, .hf-modal-close {
  background: transparent !important;
  color: var(--rb-cream-70) !important;
  border: 1px solid var(--rb-line) !important;
  border-radius: 999px !important;
}
.hf-icon-button:hover, .hf-modal-close:hover { color: var(--rb-cream) !important; }

.hf-input, .hf-input__wrapper, .number-stepper__input {
  background: var(--rb-ink-3) !important;
  color: var(--rb-cream) !important;
  border-color: var(--rb-line) !important;
  border-radius: 8px !important;
  font-family: var(--rb-font-mono) !important;
}
.hf-input-frame { background: transparent !important; border-color: var(--rb-line) !important; }

/* headline voices stay full cream (must follow the generic typography rule) */
.hf-panel__title .hf-typography,
.hf-modal__title-bar .hf-typography {
  color: var(--rb-cream) !important;
}