/**
 * Copyright © 2026 Abdo Ibn Egypt. All rights reserved.
 * Unauthorized copying, modification, distribution, or use of this software,
 * via any medium, is strictly prohibited without prior written permission.
 * Owner Contact (WhatsApp): +201098251005
 */

/**
 * cards.css — Speedo Group Design System v2 — Shared Public Card Base
 * =====================================================================
 * Part Three, Phase 1 (foundation). Every public-facing card type — job
 * cards, administrative-job cards, company cards, product/installment
 * cards, motorcycle/rental cards — was previously a fully bespoke CSS
 * block in public.css with no shared base, which is why long titles broke
 * layouts, card heights drifted row-to-row, and CTA buttons ended up at
 * different vertical positions depending on content length.
 *
 * `.pub-card` here is that shared base. Existing per-vertical classes
 * (`.job-card`, `.admin-job-card`, `.company-card`, `.public-card`,
 * `.rental-card`) are migrated onto this base in Phase 3 — this file only
 * introduces the foundation, it does not yet touch public.css's existing
 * bespoke rules (kept working as-is until each card type is migrated).
 *
 * Three structural fixes baked in, once, instead of five times later:
 *   1. `.pub-card-grid` uses CSS Grid with `align-items: stretch` so every
 *      card in a row is the same height as its tallest sibling — no
 *      arbitrary min-height guess needed.
 *   2. `.pub-card` is a flex column filling that stretched height, with
 *      `.pub-card-footer` pinned to the bottom via `margin-top: auto` —
 *      the CTA button never drifts regardless of how much text is above it.
 *   3. `.pub-card-title` (and any text via `.pub-card-clamp-N`) clamps to a
 *      fixed number of lines with ellipsis instead of breaking the layout.
 */

.pub-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
@media (max-width: 640px) {
  .pub-card-grid { grid-template-columns: 1fr; }
}

.pub-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm), var(--elevation-inset-highlight);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.pub-card:hover {
  box-shadow: var(--shadow-md), var(--elevation-inset-highlight);
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
.pub-card:active { transform: translateY(-1px) scale(.995); }

/* Optional media/cover area — cards without one (e.g. text-only) just omit it */
.pub-card-media { position: relative; aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; flex-shrink: 0; }
.pub-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-card-media-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-faint); }
.pub-card-media-empty svg { width: 32px; height: 32px; }

/* Body — flex:1 so it fills remaining height, letting the footer sit at the true bottom */
.pub-card-body { flex: 1; display: flex; flex-direction: column; padding: var(--space-5); min-width: 0; }

/* Badge row — top-left/top-right corner badges (new/urgent/featured/verified/most-requested) */
.pub-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.pub-card-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: var(--radius-full); white-space: nowrap; }
.pub-card-badge svg { width: 11px; height: 11px; }
.pub-card-badge.new { background: var(--info-soft); color: var(--info); }
.pub-card-badge.urgent { background: var(--danger-soft); color: var(--danger); }
.pub-card-badge.featured { background: var(--brand-gradient-soft); color: var(--primary); }
.pub-card-badge.most-requested { background: var(--warning-soft); color: var(--warning); }
.pub-card-badge.available { background: var(--success-soft); color: var(--success); }

/* Title — clamps to 2 lines max regardless of length, never pushes siblings down unpredictably */
.pub-card-title {
  font-size: var(--text-md); font-weight: 800; line-height: var(--leading-tight);
  margin: 0 0 var(--space-1);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  word-break: break-word;
}
.pub-card-subtitle {
  font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Generic line-clamp utility for any other long text inside a card (description, address) */
.pub-card-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.pub-card-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.pub-card-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* Meta row — icon + label pairs (location, hours, availability...), wraps instead of overflowing */
.pub-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.pub-card-meta-item { display: flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--text-muted); min-width: 0; }
.pub-card-meta-item svg { width: 13px; height: 13px; flex-shrink: 0; }
.pub-card-meta-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Price/salary block — tabular numerals so figures of different lengths still align */
.pub-card-price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: auto 0 var(--space-3); }
.pub-card-price-row .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.pub-card-price-main { font-size: var(--text-lg); font-weight: 900; color: var(--text); }
.pub-card-price-old { font-size: var(--text-sm); color: var(--text-faint); text-decoration: line-through; }
.pub-card-price-unit { font-size: var(--text-xs); color: var(--text-muted); }

/* Footer — pinned to the true bottom of the card via margin-top:auto, so the CTA
   never drifts regardless of how much content sits above it in a given card. */
.pub-card-footer { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.pub-card-cta { flex: 1; } /* combine with .btn/.btn-primary — sizing/padding comes from the shared button scale, not a 6th bespoke size */
.pub-card-icon-action { flex-shrink: 0; } /* combine with .icon-btn for share/favorite/call/WhatsApp secondary actions */

/* Verified/trusted company or provider indicator inline with title (reuses .verify-badge from components.css) */
.pub-card-title-row { display: flex; align-items: flex-start; gap: 6px; }
.pub-card-title-row .pub-card-title { flex: 1; }