/**
 * HOTFIX UI-004 — MARKETPLACE CARD UNIFICATION & RESPONSIVE LAYOUT
 *
 * Authoritative presentation layer for the SINGLE Marketplace Card.
 * Loaded LAST (after marketplace-feed.css → fr-0172a-enterprise-polish.css
 * → vehicle-media-card.css) so every rule here is the final word.
 *
 * CARD LAYOUT (ONE component for every surface):
 *
 *   ┌────────────────────────────────────────────┐
 *   │ ┌────────┐  [ XE GHẾP ]        1 ngày      │
 *   │ │        │                               │
 *   │ │ ẢNH XE │  TP.HCM → Hà Nội              │
 *   │ │72-80px │                               │
 *   │ │        │  🕒 Ngày mai • Còn 2 ghế       │
 *   │ └────────┘                               │
 *   │            👤 Hoàn               350.000đ │
 *   │                                          │
 *   │        [ Chi tiết ] [ Ghép ngay ]        │
 *   └──────────────────────────────────────────┘
 *
 * Layout Rules:
 *   - Image: 72~80px, fixed, never larger
 *   - Spacing rhythm: Route ↓ 10px ↓ Info ↓ 10px ↓ Name ↓ 10px ↓ Price ↓ 14px ↓ Buttons
 *   - Price: always right-aligned in its own row — never over route/time/badge
 *   - Buttons: same row, same height, fully inside card, never overflow
 *   - Route: max 2 lines, ellipsis, never overlaps price
 *   - Responsive: ONE layout for mobile / tablet / desktop
 *
 * Presentation Layer ONLY. No business logic, no runtime changes.
 *
 * @package XOS\Presentation\Styles
 * @version 1.0.0 — HOTFIX UI-004
 * @since   HOTFIX UI-004
 */

/* ===========================================================
   1. CARD CONTAINER — single unified card
   =========================================================== */

.mp-card {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}

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

/* ===========================================================
   2. MEDIA ROW — image left (72–80px), content right
   =========================================================== */

.mp-media-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}

.mp-media-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

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

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

/* ===========================================================
   3. SPACING RHYTHM — Route ↓10px ↓ Info ↓10px ↓ Name ↓10px
      ↓ Price ↓14px ↓ Buttons
   =========================================================== */

.mp-media-body .mp-header {
  margin-bottom: 10px;
}

.mp-media-body .mp-route {
  margin-bottom: 10px;
}

.mp-media-body .mp-info-row {
  margin-bottom: 10px;
}

.mp-media-body .mp-price-row {
  margin-bottom: 14px;
}

.mp-media-body .mp-actions-row {
  margin-bottom: 0;
}

/* ===========================================================
   4. HEADER — Badge (left) + time/verify (right)
   =========================================================== */

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

.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: 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;
}

.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;
}

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

/* ===========================================================
   5. ROUTE — 2 lines max, ellipsis, never overlaps price
   =========================================================== */

.mp-route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 1.0625rem;
  font-weight: 700;
  color: #1F2937;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
}

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

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

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

/* ===========================================================
   6. INFO ROW — time + capacity / fomo (NO PRICE here)
   =========================================================== */

/* HOTFIX UI-004 Metadata Spacing:
   - Independent flex items (Date / Time / Seat) — never concatenated text
   - Gap 6-8px guarantees no touching
   - Seat/Capacity is the LAST item and NEVER shrinks (safe priority:
     Date → Time → Seat; seat always fully visible, ellipsis applied to date/time)
   - No negative margins, no absolute positioning */
.mp-info-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
}

.mp-info-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: #4B5563;
  line-height: 1.4;
  min-width: 0;
  white-space: nowrap;
}

.mp-info-date,
.mp-info-time,
.mp-info-fomo {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-info-capacity {
  flex-shrink: 0;
  flex-grow: 0;
  white-space: nowrap;
}

.mp-info-fomo {
  font-weight: 700;
  flex-shrink: 0;
}

.mp-info-item svg {
  flex-shrink: 0;
}

/* ===========================================================
   7. PRICE + DRIVER ROW — name left, price right corner
      Price never overlaps route / time / badge
   =========================================================== */

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

.mp-driver-name {
  font-size: 0.75rem;
  color: #6B7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}

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

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

/* ===========================================================
   8. ACTIONS ROW — two buttons, same row, same height,
      fully inside card, never overflow
   =========================================================== */

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

.mp-actions-row .mp-btn {
  flex: 1 1 0;
  min-width: 0;
  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;
  touch-action: manipulation;
  min-height: 34px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.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);
}

.mp-actions-row .mp-btn:active {
  transform: scale(0.97);
  transition: transform 80ms ease;
}

/* Management variant — wraps action buttons when there are more than 2
   (e.g. My Listings management surface: Xem, Sửa, Gia hạn, Sao chép,
   Hoàn thành, Xóa). Buttons still stay inside, never overflow the card. */
.mp-actions-row--wrap {
  flex-wrap: wrap;
}

.mp-actions-row--wrap .mp-btn {
  flex: 1 1 auto;
  min-width: 96px;
}

/* ===========================================================
   9. OPPORTUNITY / INSIGHT / ACTIVITY — same unified card
   =========================================================== */

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

.mp-card--opportunity .mp-actions-row .mp-btn {
  flex: none;
  min-width: 140px;
}

/* ===========================================================
   10. RESPONSIVE — ONE layout for mobile / tablet / desktop
       Image scales 72 → 80 only; everything else stays identical.
   =========================================================== */

/* Mobile: ≤ 640px — image 72px, tighter horizontal padding */
@media (max-width: 640px) {
  .mp-media,
  .mp-card--hero .mp-media,
  .mp-card--transaction .mp-media {
    width: 72px;
    height: 72px;
  }

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

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

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

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

  .mp-info-item {
    font-size: 0.75rem;
  }

  .mp-info-price {
    font-size: 0.875rem;
  }

  .mp-actions-row .mp-btn {
    font-size: 0.75rem;
    padding: 6px 8px;
    min-height: 32px;
  }
}

/* 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-route {
    font-size: 1.125rem;
  }

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

/* ===========================================================
   11. REDUCED MOTION
   =========================================================== */

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

/* ===========================================================
   12. OVERRIDE GUARD — neutralize legacy dense-feed / ep12-card
       leftovers that could leak into the unified card.
   =========================================================== */

.mp-card .dlc-main,
.mp-card .dlc-overlay,
.mp-card .dlc-bg-wrap,
.mp-card .dlc-top-row,
.mp-card .dlc-thumb {
  display: none;
}

/* Ensure the unified card has no leftover legacy height caps */
.mp-card .mp-card-link,
.mp-card--transaction .mp-card-link,
.mp-card--hero .mp-card-link {
  min-height: 0;
  max-height: none;
  height: auto;
}