/**
 * Block Auctioneer (4-lane) UX — loaded only for auctions with format=block_auctioneer.
 * Column count follows --lane-count (set by auction-list-lanes.js from the server).
 */

/* Classic list controls don't apply to the lane view — hide them. The ended
   ("Enchères terminées") section is KEPT so sold lots / results stay visible
   below the lanes as blocks close and at the end of the auction. */
.auction-list .summary-cards,
.auction-list .filter-bar,
.auction-list .auction-empty-filter {
  display: none !important;
}

/* Sold / ended section: full-width panel spanning under the lanes */
.auctions-container > .ended-section {
  grid-column: 1 / -1 !important;
  margin-top: 20px;
}

/* Top banner + lane title row (normal flow, scrolls away) */
.lanes-header { margin-bottom: 16px; }
/* Mirrors the site hero (.auctions-hero): same blue→navy gradient, serif Lora
   heading and the brand gold accent, pulled from the theme tokens so it tracks
   the palette instead of hardcoding a second blue. */
.lanes-banner {
  background: linear-gradient(135deg, var(--color-primary, #0099FF) 0%, var(--color-dark, #0F172A) 100%);
  color: #fff; padding: 22px 24px; border-radius: 10px 10px 0 0;
  text-align: center; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  border-bottom: 3px solid var(--color-accent, #C9A962);
}
.lanes-banner h2 {
  margin: 0 0 6px 0;
  font-family: var(--font-family-heading, 'Lora', Georgia, 'Times New Roman', serif);
  font-size: 24px; font-weight: 700; letter-spacing: 0.3px;
  color: #fff; /* override the theme's dark heading color (h2 { color: var(--color-text) }) */
}
.lanes-banner p  {
  margin: 0 auto; max-width: 640px;
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.85);
}
.lanes-titles {
  display: grid; grid-template-columns: repeat(var(--lane-count, 4), 1fr); gap: 12px;
  background: #fff; padding: 12px 0 4px 0;
}
.lanes-titles > div {
  text-align: center; font-weight: 800; font-size: 17px; padding: 12px 8px;
  color: #fff; border-radius: 6px; box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  letter-spacing: 0.5px;
}
.lanes-titles > [data-lane="0"] { background: #1976D2; }
.lanes-titles > [data-lane="1"] { background: #388E3C; }
.lanes-titles > [data-lane="2"] { background: #F57C00; }
.lanes-titles > [data-lane="3"] { background: #D32F2F; }

/* Grid container — column count follows the server-provided lane count */
.auctions-container {
  display: grid !important;
  grid-template-columns: repeat(var(--lane-count, 4), 1fr) !important;
  gap: 16px !important;
  padding: 16px !important;
  border-radius: 8px !important;
  background: linear-gradient(to right,
    rgba(25,118,210,0.06) 0% 25%,
    rgba(56,142,60,0.06) 25% 50%,
    rgba(245,124,0,0.06) 50% 75%,
    rgba(211,47,47,0.06) 75% 100%
  ) !important;
}
.auctions-container > .ended-section,
.auctions-container > .auction-empty-filter {
  grid-column: 1 / -1 !important;
}

/* Card lane borders */
.auctions-container > [id^="auction-"] {
  position: relative;
  border-left-width: 6px !important;
  border-left-style: solid !important;
  background: #fff !important;
}
.auctions-container > [id^="auction-"][data-lane="0"] { border-left-color: #1976D2 !important; }
.auctions-container > [id^="auction-"][data-lane="1"] { border-left-color: #388E3C !important; }
.auctions-container > [id^="auction-"][data-lane="2"] { border-left-color: #F57C00 !important; }
.auctions-container > [id^="auction-"][data-lane="3"] { border-left-color: #D32F2F !important; }

/* Block (top of each lane) — lane color all around */
.auctions-container > [id^="auction-"][data-is-block="true"] {
  border: 2px solid var(--lane-color, #1976D2) !important;
  border-left-width: 6px !important;
}

/* Pinned only in the closing window. A block set to half an hour has nothing
   urgent to say for its first twenty minutes, and pinning four heads under the
   bar that whole time costs the screen the waiting list needs. data-closing-soon
   is stamped from the card's own live timer, so each lane pins on its own clock. */
.auctions-container > [id^="auction-"][data-is-block="true"][data-closing-soon="true"] {
  position: sticky;
  /* Clear of the bar by the watched outline (4px + 3px offset), or its top edge hides under it. */
  top: calc(var(--lanes-sticky-top, 0px) + 8px);
  z-index: 50;
}
.auctions-container > [id^="auction-"][data-is-block="true"][data-lane="0"] { --lane-color: #1976D2; }
.auctions-container > [id^="auction-"][data-is-block="true"][data-lane="1"] { --lane-color: #388E3C; }
.auctions-container > [id^="auction-"][data-is-block="true"][data-lane="2"] { --lane-color: #F57C00; }
.auctions-container > [id^="auction-"][data-is-block="true"][data-lane="3"] { --lane-color: #D32F2F; }

/* Waypoint for the stuck state, read by IntersectionObserver. Absolute so it claims no
   grid cell and adds no height: it marks where the row begins and never moves when a
   card resizes, which is the whole point of it. */
.auctions-container { position: relative; }
.lanes-stuck-sentinel {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 1px;
  visibility: hidden; pointer-events: none;
}

/* Stuck — per-card backdrop + box-shadow */
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck { box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck::before {
  content: ''; position: absolute;
  top: -8px; left: -8px; right: -8px; bottom: -8px;
  background: rgba(245, 247, 250, 0.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: -1; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  pointer-events: none;
}

/* Compact when stuck — only the vehicle, timer, current amount and the status. The
   photo goes: the year, make and model say which car it is in far less room.

   __badge stays visible on purpose. It is the only thing that says EN TÊTE or
   SURENCHÉRI, and the moment it is needed most is exactly this one: scrolled down the
   running order, watching other lots, unaware the lead has changed. It costs no height
   — it is absolutely positioned over the media, which shrinks to a strip that carries it
   and the SUR LE BLOCK label. Heads pin on their own clocks, so a pinned one can share
   its row with a full-height sibling; align-self keeps it compact. */
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck { align-self: start; }
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__media {
  aspect-ratio: auto !important; height: 38px; background: transparent !important;
}
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__title {
  order: -1; min-height: 0; margin: 0 0 4px; text-align: center;
  display: block; white-space: nowrap; text-overflow: ellipsis;
}
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__media .carousel,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__image-placeholder,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__meta,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__user-bid,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__proxy,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__damage,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .carousel-control-prev,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .carousel-control-next,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__bid-count,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__actions,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__bid-form,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__winning-badge,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__bid-label,
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .lanes-quick-bids {
  display: none !important;
}
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__content { padding: 6px 8px !important; }
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__bid-row { margin: 4px 0 !important; display: block !important; }
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__bid-block { text-align: center; }
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck .auction-card__bid-value { font-size: 20px !important; font-weight: 800; display: block; }

/* "SUR LE BLOCK" gold badge (shown when stuck) */
.auctions-container > [id^="auction-"][data-is-block="true"].is-stuck::after {
  content: attr(data-block-label); position: absolute; top: 10px; right: 10px;
  background: linear-gradient(135deg, #FFD700, #FFA500); color: #000;
  font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 3px;
  z-index: 10; letter-spacing: 0.4px;
  animation: lanes-pulse 1.2s infinite; pointer-events: none;
}
@keyframes lanes-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 165, 0, 0.6); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(255, 165, 0, 0); }
}

/* Closing — the timer reached zero and the server has not returned the outcome yet.
   An explicit state, not a delay: it ends when the real result arrives. The clock icon
   and the 00:00:00 digits are swapped out so the box reads as one centered "adjudicating"
   banner (⏳ + label + gentle pulse) instead of cramming the label beside the digits. */
.auction-card__closing { display: none; }
.auctions-container > [id^="auction-"][data-closing="1"] [data-timer] {
  justify-content: center;
  background: rgba(240, 173, 0, 0.12);
  border-color: #f0ad00;
}
.auctions-container > [id^="auction-"][data-closing="1"] [data-timer] > i,
.auctions-container > [id^="auction-"][data-closing="1"] [data-timer-display] {
  display: none !important;
}
.auctions-container > [id^="auction-"][data-closing="1"] .auction-card__closing {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; font-weight: 800; font-size: 13px; letter-spacing: 0.4px;
  color: #8a6d00; white-space: nowrap;
  animation: lanes-adjudicating 1.15s ease-in-out infinite;
}
.auctions-container > [id^="auction-"][data-closing="1"] .auction-card__closing::before {
  content: '\23F3'; /* ⏳ hourglass — distinct from the 🔨 "on the block" badge */
  font-size: 14px;
  animation: lanes-adjudicating 1.15s ease-in-out infinite;
}
@keyframes lanes-adjudicating {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
.auctions-container > [id^="auction-"][data-closing="1"] .auction-card__bid-form,
.auctions-container > [id^="auction-"][data-closing="1"] .lanes-quick-bids {
  display: none !important;
}

/* Handing over: this lot sold and is holding the block until the next one starts. Its
   own result belongs in the clock's place — the lane label would say nothing about what
   just happened, and an empty slot is what this whole state exists to avoid.
   The :not() pair is carried over from the rule below on purpose: without matching its
   specificity this one loses and the slot renders empty, which is the bug it fixes. */
.auctions-container > [id^="auction-"][data-handover="1"]:not([data-running="1"]):not([data-closing="1"]) .auction-card__waiting,
.auctions-container > [id^="auction-"][data-handover="1"]:not([data-running="1"]):not([data-closing="1"]) [data-timer] > i {
  display: none !important;
}
.auctions-container > [id^="auction-"][data-handover="1"]:not([data-running="1"]):not([data-closing="1"]) [data-timer-display] {
  display: block !important;
  width: 100%;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.auctions-container > [id^="auction-"][data-handover="1"] [data-timer] {
  background: rgba(0,0,0,0.05) !important;
  border-color: rgba(0,0,0,0.12) !important;
  color: var(--color-text-muted, #6c757d) !important;
  animation: none !important;
}

/* No running clock — the lane label replaces the timer digits.
   Keyed on data-running, not on data-is-block: since the head of a lane is derived from
   position, a head can exist before its AuctionBlockStarted arrives. It has no seconds,
   and the server-rendered placeholder is 00:00:00 — which reads as "ended" on the one
   lot still taking bids. Digits are shown only when a clock is really counting; a head
   without one keeps its block frame but says which lane it is.
   [data-closing] is excluded because it has its own "adjudicating" treatment below.

   A real element, not a ::after with attr(): attr() resolves against the element the
   pseudo-element belongs to ([data-timer]), while the label lives on the card, so the
   old rule rendered an empty string and waiting cards showed a blank gap. A real
   element is also readable by screen readers, which generated content is not. */
.auction-card__waiting { display: none; }
.auctions-container > [id^="auction-"]:not([data-running="1"]):not([data-closing="1"]) [data-timer-display],
.auctions-container > [id^="auction-"]:not([data-running="1"]):not([data-closing="1"]) [data-timer] > i,
.auctions-container > [id^="auction-"]:not([data-running="1"]):not([data-closing="1"]) [data-timer] > svg {
  display: none !important;
}
.auctions-container > [id^="auction-"]:not([data-running="1"]):not([data-closing="1"]) .auction-card__waiting {
  display: block; font-weight: 700; font-size: 14px;
  letter-spacing: 0.5px; text-align: center; width: 100%;
}
.auctions-container > [id^="auction-"][data-lane="0"]:not([data-running="1"]) .auction-card__waiting { color: #1976D2; }
.auctions-container > [id^="auction-"][data-lane="1"]:not([data-running="1"]) .auction-card__waiting { color: #388E3C; }
.auctions-container > [id^="auction-"][data-lane="2"]:not([data-running="1"]) .auction-card__waiting { color: #F57C00; }
.auctions-container > [id^="auction-"][data-lane="3"]:not([data-running="1"]) .auction-card__waiting { color: #D32F2F; }

/* Quick-bid buttons (+100 / +500) */
.lanes-quick-bids { display: flex; gap: 6px; margin-top: 6px; }
.lanes-quick-bids button {
  flex: 1; padding: 7px 4px; border: 1.5px solid #1976D2; background: #fff;
  color: #1976D2; font-weight: 700; font-size: 12px; border-radius: 4px;
  cursor: pointer; transition: all 0.1s ease-out; letter-spacing: 0.3px; white-space: nowrap;
}
.lanes-quick-bids button:hover {
  background: #1976D2; color: #fff; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(25,118,210,0.3);
}
.lanes-quick-bids button:active { transform: scale(0.96); }
.lanes-quick-bids button.is-loading { opacity: 0.5; pointer-events: none; }
.auction-card--winning .lanes-quick-bids { display: none; }

/* Mobile layout — 2 columns of block tiles, vertical waiting list, no sticky */
@media (max-width: 768px) {
  .auctions-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important; padding: 8px !important; background: transparent !important;
  }
  .lanes-titles { display: none !important; }
  .lanes-banner { padding: 12px 16px !important; border-radius: 6px !important; }
  .lanes-banner h2 { font-size: 15px !important; }
  .lanes-banner p  { font-size: 11px !important; }
  .auctions-container > [id^="auction-"][data-is-block="true"] {
    position: relative !important; top: auto !important; margin: 0 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  }
  .auctions-container > [id^="auction-"][data-is-block="false"] {
    grid-column: 1 / -1 !important; position: static !important; margin: 0 !important;
  }

  /* Lane identity chip on each block tile — the desktop title row is hidden on
     mobile, so name the lane per tile for consistency. Colour follows the lane. */
  .auctions-container > [id^="auction-"][data-is-block="true"]::before {
    content: attr(data-lane-name);
    position: absolute; top: 0; right: 0; z-index: 20;
    background: var(--lane-color, #1976D2); color: #fff;
    font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
    padding: 3px 8px; border-radius: 0 0 0 8px; pointer-events: none;
  }

  /* Stack the bid controls so they fit the narrow tile instead of overflowing:
     "$ + amount" on row 1, MISER / AUTO on row 2. */
  .auctions-container > [id^="auction-"] .auction-card__bid-form .input-group { flex-wrap: wrap; }
  .auctions-container > [id^="auction-"] .auction-card__bid-form .input-group > .form-control {
    flex: 1 1 60%; min-width: 0; border-radius: 0 6px 6px 0 !important;
  }
  .auctions-container > [id^="auction-"] .auction-card__bid-form .input-group > .btn {
    flex: 1 1 40%; margin-top: 6px; border-radius: 6px !important;
  }
}

/* ── Lanes intro modal ─────────────────────────────────────────────────────
   One-time explainer. The header mirrors .lanes-banner (and through it the
   site hero) so the modal reads as part of the page, and each legend chip
   uses the exact colour of the thing it names on the cards. */
.lanes-intro__content {
  border: none; border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.35);
}
.lanes-intro__header {
  background: linear-gradient(135deg, var(--color-primary, #0099FF) 0%, var(--color-dark, #0F172A) 100%);
  border-bottom: 3px solid var(--color-accent, #C9A962);
  padding: 22px 24px 18px; text-align: center; color: #fff;
}
.lanes-intro__eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 10px;
}
.lanes-intro__eyebrow-line {
  height: 1px; width: 34px; background: var(--color-accent, #C9A962);
}
.lanes-intro__eyebrow-label {
  font-family: var(--font-family-body, 'Inter', sans-serif);
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--color-accent, #C9A962); text-transform: uppercase;
}
.lanes-intro__title {
  margin: 0;
  font-family: var(--font-family-heading, 'Lora', Georgia, serif);
  font-size: 22px; font-weight: 700; line-height: 1.3; color: #fff;
}
.lanes-intro__body {
  padding: 20px 24px 4px;
  font-family: var(--font-family-body, 'Inter', sans-serif);
}
.lanes-intro__lead {
  margin: 0 0 18px; font-size: 14px; line-height: 1.55;
  color: var(--color-text, #1F2937);
}
.lanes-intro__row { margin-bottom: 15px; }
.lanes-intro__row p {
  margin: 0; font-size: 13.5px; line-height: 1.5;
  color: var(--color-text-muted, #4B5563);
}
.lanes-intro__badge {
  display: inline-block; margin-bottom: 6px; padding: 4px 10px;
  border-radius: 5px; color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.4px;
}
/* Matches the gold badge the stuck block card carries (see .is-stuck::after) */
.lanes-intro__badge--block   { background: linear-gradient(135deg, #FFD700, #FFA500); color: #000; }
.lanes-intro__badge--waiting { background: #1976D2; }
.lanes-intro__badge--auto    { background: var(--color-primary, #0099FF); }
.lanes-intro__handover {
  margin: 18px 0 0; padding-top: 15px;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  font-size: 13px; line-height: 1.5; color: var(--color-text-muted, #4B5563);
}
.lanes-intro__footer { padding: 18px 24px 22px; text-align: center; }
.lanes-intro__confirm {
  min-width: 190px; padding: 11px 26px; border-radius: 6px;
  font-weight: 700; letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  .lanes-intro__header { padding: 18px 18px 15px; }
  .lanes-intro__title  { font-size: 18px; }
  .lanes-intro__body   { padding: 17px 18px 4px; }
  .lanes-intro__footer { padding: 15px 18px 19px; }
  .lanes-intro__confirm { width: 100%; }
}