/* =========================================================================
   TT Card — base + Vehicle/Destination/Airport variants share one shell.
   ========================================================================= */
.tt-card {
  display: flex;
  flex-direction: column;
  background: var(--tt-color-bg);
  border-radius: var(--tt-radius-lg);
  box-shadow: var(--tt-shadow-1);
  overflow: hidden;
  transition: box-shadow var(--tt-duration) var(--tt-ease),
              transform var(--tt-duration) var(--tt-ease);
}
.tt-card:hover { box-shadow: var(--tt-shadow-3); transform: translateY(-2px); }

.tt-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--tt-color-surface); overflow:hidden; }
.tt-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Subtle texture over flat gradient placeholders so they read as intentional */
.tt-card__media::after { content:""; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.3px);
  background-size: 18px 18px; opacity:.35; }
.tt-card__media img + ::after, .tt-card__media:has(img)::after { display:none; }

.tt-card__badge {
  position: absolute;
  inset-block-start: var(--tt-space-12);
  inset-inline-start: var(--tt-space-12);
  padding: var(--tt-space-4) var(--tt-space-12);
  font-size: var(--tt-fs-caption);
  font-weight: var(--tt-fw-semibold);
  color: var(--tt-color-text-invert);
  background: var(--tt-color-primary);
  border-radius: var(--tt-radius-pill);
}
.tt-card__badge--popular { background: var(--tt-color-secondary); }

.tt-card__body { display: flex; flex-direction: column; gap: var(--tt-space-12); padding: var(--tt-space-32); flex: 1; }
.tt-card__title { font-family: var(--tt-font-heading); font-size: var(--tt-fs-h6); font-weight: var(--tt-fw-bold); }
.tt-card__meta { display: flex; flex-wrap: wrap; gap: var(--tt-space-16); color: var(--tt-color-text-soft); font-size: var(--tt-fs-small); }
.tt-card__meta span { display: inline-flex; align-items: center; gap: var(--tt-space-4); }

.tt-card__price { margin-top: auto; display: flex; align-items: baseline; gap: var(--tt-space-8); }
.tt-card__price b { font-family: var(--tt-font-heading); font-size: var(--tt-fs-h5); }
.tt-card__price small { color: var(--tt-color-text-soft); }

/* =========================================================================
   Photo Card (Design System v2 §2 / Component Library §2) — additive.
   Honest empty state: flat surface + centered icon, NEVER a gradient
   pretending to be a finished design. Applied via .tt-card--photo,
   which any card variant (route/vehicle/destination/hotel/driver) can
   opt into without altering the base .tt-card shell above.
   ========================================================================= */
.tt-card--photo .tt-card__media {
  aspect-ratio: var(--tt-photo-aspect-card);
  border-radius: var(--tt-photo-radius) var(--tt-photo-radius) 0 0;
}
.tt-card--photo .tt-card__media img {
  transition: transform var(--tt-motion-base) var(--tt-motion-ease);
}
.tt-card--photo:hover .tt-card__media img { transform: scale(1.03); }

.tt-card__media--empty {
  background: var(--tt-photo-fallback-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tt-card__media--empty svg {
  width: 32px;
  height: 32px;
  color: var(--tt-photo-fallback-icon-color);
}
/* No texture overlay on the honest-empty-state variant — the flat
   surface + icon IS the intentional design, not a placeholder for one. */
.tt-card__media--empty::after { content: none; }