/**
 * HOTFIX UI-005 — LIVE CARD FINAL POLISH
 *
 * Authoritative presentation layer for the SINGLE Marketplace Card.
 * Loaded LAST (priority 103) so every rule here is the final word,
 * safely overriding: marketplace-feed → fr-0172a → vehicle-media-card
 * → ui-004-card-unification → vinago-branding.
 *
 * BUG FIXES:
 *   BUG 1 — Text overlap (P0):
 *     Time is its OWN row. Status is its OWN row. Price is pinned to the
 *     right of the Status row. They can NEVER share a line → never overlap.
 *   BUG 2 — Long route (P0):
 *     Route caps at 2 lines (line-height 1.25 → max-height 2.5em),
 *     ellipsis on each cell, overflow hidden. Never pushes blocks below.
 *   BUG 3 — Unused card width (P1):
 *     Content (.mp-media-body) uses flex:1 — fills the ENTIRE remaining
 *     width after the fixed 72-80px image. No fixed content widths.
 *   BUG 4 — Block spacing (P1):
 *     Fixed rhythm: Badge ↓10px ↓ Route ↓10px ↓ Time ↓10px ↓ Status ↓10px
 *     ↓ Name ↓16px ↓ Button. No random margins.
 *
 * RULE — NO position:absolute for price / badge / buttons / name / route.
 * The whole card is built with CSS Grid + Flexbox and responds naturally
 * on every screen size.
 *
 * @package XOS\Presentation\Styles
 * @version 1.0.0 — HOTFIX UI-005
 * @since   HOTFIX UI-005
 */

/* ===========================================================
   1. CARD CONTAINER — one unified card, no wasted space
   =========================================================== */

.mp-card,
.mp-card--transaction,
.mp-card--hero,
.mp-card--opportunity,
.mp-card--insight,
.mp-card--activity {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  /* Neutralize any legacy height caps / contain that could clip rows */
  contain: none !important;
  content-visibility: visible !important;
  overflow: visible !important;
  min-height: 0;
  height: auto;
}

/* HOTFIX UI-005B — neutralise the global Market-Pulse `.mp-card` leak
   (market-pulse.css: display:flex / flex:1 1 0 / gap:3px) which collapses
   the marketplace/live feed card-link + media-body to 0 width.
   Scoped to FEED cards only — the Market Pulse grid cards (.ep12-market-pulse
   .mp-card) keep their flex row layout. The unified feed card is a plain
   block container; the internal .mp-media-row handles its own flex layout. */
.ep12-live-matching .mp-card,
.mp-feed-section .mp-card {
  display: block !important;
  flex: none !important;
  gap: 0 !important;
}

.mp-card-link {
  box-sizing: border-box;
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 10px 10px;
  text-decoration: none;
  color: inherit;
  min-height: 0;
  max-height: none;
  height: auto;
}

/* ===========================================================
   2. MEDIA ROW — image fixed 72-80px, content flex:1 (BUG 3)
   =========================================================== */

.mp-media-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.mp-media-body {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  /* Fixed vertical rhythm (BUG 4) — every block separated by 10px/16px */
}

.mp-media,
.mp-card--hero .mp-media,
.mp-card--transaction .mp-media {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  align-self: flex-start;
  border-radius: 12px;
  overflow: hidden;
  background: #F5F5F5;
}

.mp-media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mp-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-media-placeholder-icon {
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.55;
}

/* ===========================================================
   3. FIXED SPACING RHYTHM (BUG 4)
      Header ↓10 ↓ Route ↓10 ↓ Time ↓10 ↓ Status ↓10 ↓ Name ↓16 ↓ Buttons
   =========================================================== */

.mp-media-body .mp-header   { margin-bottom: 10px; }
.mp-media-body .mp-route    { margin-bottom: 10px; }
.mp-media-body .mp-time-row { margin-bottom: 10px; }
.mp-media-body .mp-status-row { margin-bottom: 10px; }
.mp-media-body .mp-driver-row { margin-bottom: 16px; }
.mp-media-body .mp-actions-row { margin-bottom: 0; }

/* ===========================================================
   4. HEADER — badge left, meta right (flex, no absolute)
   =========================================================== */

.mp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.mp-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 6px;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-header-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  min-width: 0;
}

.mp-source-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  line-height: 1.5;
  white-space: nowrap;
  flex-shrink: 0;
}

.mp-time-ago {
  font-size: 0.7rem;
  color: #9CA3AF;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===========================================================
   5. ROUTE — max 2 lines, line-height 1.25, ellipsis (BUG 2)
      Never pushes blocks below.
   =========================================================== */

.mp-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 1rem;
  font-weight: 700;
  color: #1F2937;
  line-height: 1.25;            /* exactly 2 lines => 2.5em max-height */
  min-width: 0;
  max-width: 100%;
  max-height: 2.5em;            /* 2 lines hard cap */
  overflow: hidden;
}

.mp-route-origin,
.mp-route-dest {
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-route-arrow {
  flex-shrink: 0;
  color: #9CA3AF;
  min-width: 14px;
}

.mp-card--hero .mp-route {
  font-size: 1.0625rem;
}

/* ===========================================================
   6. TIME ROW — its OWN line, never shares with status/price
      (BUG 1: time can never be overlapped)
   =========================================================== */

.mp-time-row {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.mp-time-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  color: #4B5563;
  line-height: 1.4;
}

.mp-time-label svg {
  flex-shrink: 0;
}

/* ===========================================================
   7. STATUS ROW — status LEFT, price RIGHT (BUG 1)
      Price flex-shrink:0 → pinned to the right corner at ALL times.
      Status flex:1 + min-width:0 + ellipsis → NEVER overlaps price.
   =========================================================== */

.mp-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.mp-status {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.8125rem;
  color: #4B5563;
  line-height: 1.4;
}

.mp-status--fomo {
  font-weight: 700;
}

.mp-status--capacity {
  font-weight: 500;
}

.mp-price {
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  text-align: right;
  font-weight: 700;
  color: #DC2626;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.mp-card--hero .mp-price {
  font-size: 1rem;
}

/* ===========================================================
   8. DRIVER NAME ROW — own row, always inside card (BUG 1)
   =========================================================== */

.mp-driver-row {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.mp-driver-name {
  display: inline-flex !important; /* beat vinago-branding inline-block !important */
  align-items: center;
  gap: 3px;
  min-width: 0;
  max-width: 100% !important; /* beat vinago-branding max-width rule */
  flex: 0 1 auto !important;  /* beat vinago-branding flex !important */
  flex-shrink: 1 !important;
  margin-left: 0 !important;  /* beat vinago-branding margin-left:auto — name stays LEFT */
  width: auto !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.75rem;
  color: #6B7280;
  line-height: 1.4;
}

/* ===========================================================
   9. ACTIONS ROW — two buttons, same row, inside card (BUG 1)
   =========================================================== */

.mp-actions-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
}

.mp-actions-row .mp-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 8px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  touch-action: manipulation;
  min-height: 34px;
  box-sizing: border-box;
}

.mp-actions-row .mp-btn--outline {
  border: 1.5px solid #D1D5DB;
  color: #374151;
  background: #FFFFFF;
}

.mp-actions-row .mp-btn--primary {
  border: 1.5px solid #2563EB;
  color: #FFFFFF;
  background: #2563EB;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
}

/* ===========================================================
   10. RESPONSIVE — image 72 → 76 → 80; content always flex:1
   =========================================================== */

/* Mobile base (already 72px above) — nothing extra needed here */

/* Tablet: 641px – 768px — image 76px */
@media (min-width: 641px) and (max-width: 768px) {
  .mp-media,
  .mp-card--hero .mp-media,
  .mp-card--transaction .mp-media {
    width: 76px;
    height: 76px;
  }

  .mp-media-placeholder-icon {
    font-size: 1.625rem;
  }

  .mp-media-row {
    gap: 11px;
  }
}

/* Desktop: ≥ 769px — image 80px, comfortable rhythm */
@media (min-width: 769px) {
  .mp-media,
  .mp-card--hero .mp-media,
  .mp-card--transaction .mp-media {
    width: 80px;
    height: 80px;
  }

  .mp-media-placeholder-icon {
    font-size: 1.75rem;
  }

  .mp-media-row {
    gap: 12px;
  }

  .mp-card-link {
    padding: 12px;
  }

  .mp-route {
    font-size: 1.0625rem;
  }

  .mp-price {
    font-size: 1rem;
  }
}

/* ===========================================================
   11. OVERRIDE GUARD — neutralize legacy row styles that could
       leak into the unified card (mp-info-row / mp-price-row).
   =========================================================== */

.mp-card .mp-info-row,
.mp-card .mp-price-row {
  display: none !important;
}

/* ===========================================================
   12. REDUCED MOTION
   =========================================================== */

@media (prefers-reduced-motion: reduce) {
  .mp-card,
  .mp-card-link,
  .mp-actions-row .mp-btn {
    transition: none !important;
    animation: none !important;
  }
}