/* Reusable "beautiful" city card — the image card with a hover stats overlay,
   score badge, climate + cost. Shared by the homepage teaser and the /cities
   browse grid. (Extracted from the original homepage explorer so both pages use
   one source.) Relies on base.css design tokens. */

.city-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.city-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}
.city-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.city-card.hidden { display: none; }
.city-card.fade-in { animation: cardFadeIn 0.4s ease forwards; }
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.city-card-image-container { position: relative; overflow: hidden; }
.city-card-image { width: 100%; height: 180px; object-fit: cover; transition: transform 0.3s ease; background: var(--color-sand); }
.city-card:hover .city-card-image { transform: scale(1.05); }

/* stats overlay on hover */
.city-card-overlay {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.city-card:hover .city-card-overlay { opacity: 1; }
.overlay-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 8px; padding: 10px; width: 100%; }
.overlay-stat { display: flex; flex-direction: column; gap: 3px; }
.overlay-stat-header { display: flex; justify-content: space-between; align-items: center; }
.overlay-stat-label { font-size: 9px; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: 0.3px; font-weight: var(--font-medium); }
.overlay-stat-value { font-size: 9px; font-weight: var(--font-semibold); color: var(--color-white); }
.overlay-stat-bar { height: 3px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; }
.overlay-stat-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.overlay-stat-fill.excellent { background: #4ade80; }
.overlay-stat-fill.good { background: #facc15; }
.overlay-stat-fill.average { background: #fb923c; }
.overlay-stat-fill.below { background: #f87171; }

.city-card-body { padding: var(--space-5); }
.city-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-2); }
.city-card-location { display: flex; align-items: center; gap: var(--space-2); }
.city-card-flag { font-size: var(--text-2xl); display: inline-flex; }
.city-card-name { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-ink); margin: 0; line-height: 1.2; }
.city-card-country { font-size: var(--text-sm); color: var(--color-stone); }

/* nomad score badge */
.nomad-score { display: flex; flex-direction: column; align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); min-width: 50px; }
.nomad-score-value { font-size: var(--text-lg); font-weight: var(--font-semibold); line-height: 1; }
.nomad-score-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.9; }
.nomad-score.excellent { background-color: var(--color-forest); color: var(--color-white); }
.nomad-score.good { background-color: var(--color-forest-muted); color: var(--color-white); }
.nomad-score.average { background-color: var(--color-warning); color: var(--color-ink); }
.nomad-score.below { background-color: var(--color-sand-dark); color: var(--color-charcoal); }

/* weather + cost info row */
.city-card-info { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); margin-bottom: var(--space-3); background-color: var(--color-sand); border-radius: var(--radius-md); }
.city-card-climate-type { font-size: var(--text-xs); font-weight: var(--font-medium); color: var(--color-white); background-color: var(--color-stone); padding: 2px 8px; border-radius: var(--radius-sm); text-transform: uppercase; letter-spacing: 0.5px; }
.city-card-cost { display: flex; align-items: baseline; gap: 2px; }
.cost-label { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-terracotta); }
.cost-period { font-size: var(--text-xs); color: var(--color-stone); }
.city-card-action { width: 100%; }