/* ============================================
   NOMADCOMPASS - CITY PAGE STYLES
   Styles for individual city detail pages
   ============================================ */

/* --------------------------------------------
   HERO SECTION
   Full-width hero with image, gradient, and city info
   -------------------------------------------- */
.city-hero {
  position: relative;
  height: 60vh;
  min-height: 400px;
  max-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

.city-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.city-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.9) 0%,
    rgba(15, 23, 42, 0.5) 50%,
    rgba(15, 23, 42, 0.2) 100%
  );
}

.city-hero-content {
  position: relative;
  z-index: 1;
  padding: var(--space-8) var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.city-hero-flag {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-2);
}

.city-hero-title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  color: var(--color-white);
  margin: 0 0 var(--space-1);
  line-height: var(--leading-tight);
}

.city-hero-country {
  font-size: var(--text-xl);
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 var(--space-4);
  font-weight: var(--font-medium);
}

.city-hero-tagline {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  max-width: 600px;
  line-height: var(--leading-relaxed);
}

/* --------------------------------------------
   QUICK STATS SECTION
   Key metrics displayed below hero
   -------------------------------------------- */
.quick-stats {
  background: var(--color-ink);
  padding: var(--space-6);
}

.quick-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.quick-stat {
  padding: var(--space-3);
}

.quick-stat-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

.quick-stat-label {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------------------------------------------
   SCORE SECTION
   Animated circular gauge with description
   -------------------------------------------- */
.score-section {
  padding: var(--space-16) var(--space-6);
  background: var(--color-sand);
}

.score-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.score-gauge {
  position: relative;
  flex-shrink: 0;
}

.score-gauge svg {
  transform: rotate(-90deg);
}

.score-gauge-bg {
  fill: none;
  stroke: var(--color-sand-dark);
  stroke-width: 8;
}

.score-gauge-fill {
  fill: none;
  stroke: var(--color-terracotta);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray 1.5s ease-out;
}

.score-gauge-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-gauge-value {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  color: var(--color-ink);
  line-height: 1;
}

.score-gauge-label {
  font-size: var(--text-sm);
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: var(--space-1);
}

.score-description {
  flex: 1;
}

.score-description h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

.score-description p {
  font-size: var(--text-lg);
  color: var(--color-charcoal);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* --------------------------------------------
   SECTION HEADER
   Reusable header for content sections
   -------------------------------------------- */
.section-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.section-header h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.section-header p {
  font-size: var(--text-lg);
  color: var(--color-stone);
  margin: 0;
}

/* --------------------------------------------
   CATEGORIES SECTION
   Radar chart and category breakdown
   -------------------------------------------- */
.categories-section {
  padding: var(--space-16) var(--space-6);
  background: var(--color-cream);
}

/* Radar Chart Container */
.radar-chart-container {
  max-width: 320px;
  margin: 0 auto var(--space-8);
  position: relative;
}

.radar-chart-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  background: radial-gradient(circle, var(--color-white) 0%, var(--color-sand) 60%, var(--color-sand-dark) 100%);
  border-radius: 50%;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
}

.radar-chart {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
}

/* Radar chart web lines */
.radar-web {
  fill: none;
  stroke: var(--color-sand-dark);
  stroke-width: 1;
  opacity: 0.8;
}

.radar-web-outer {
  stroke-width: 1.5;
  stroke: var(--color-stone);
  opacity: 0.5;
}

/* Radar chart data fill */
.radar-fill {
  fill: rgba(0, 102, 255, 0.25);
  stroke: var(--color-terracotta);
  stroke-width: 2.5;
}

/* Radar chart data points */
.radar-point {
  fill: var(--color-terracotta);
  stroke: var(--color-white);
  stroke-width: 2;
  cursor: pointer;
  transition: r 0.2s ease;
}

.radar-point:hover {
  r: 8;
}

/* Radar chart labels */
.radar-label {
  font-family: var(--font-display);
  font-size: 11px;
  fill: var(--color-charcoal);
  dominant-baseline: middle;
  font-weight: 500;
}

.radar-label-value {
  font-size: 10px;
  fill: var(--color-stone);
  font-weight: var(--font-medium);
}

/* Responsive radar */
@media (max-width: 640px) {
  .radar-chart-container {
    max-width: 320px;
  }

  .radar-label {
    font-size: 10px;
  }

  .radar-label-value {
    font-size: 8px;
  }
}

.categories-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.category-item {
  background: var(--color-sand);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.category-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.category-icon {
  font-size: var(--text-2xl);
  flex-shrink: 0;
}

.category-name {
  font-weight: var(--font-semibold);
  color: var(--color-ink);
  flex: 1;
}

.category-score {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-terracotta);
}

.category-bar {
  height: 8px;
  background: var(--color-sand-dark);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-3);
}

.category-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-terracotta), var(--color-terracotta-dark));
  border-radius: var(--radius-full);
  transition: width 1s ease-out;
}

.category-description {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Category score adjustments */
.category-adjustment {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-left: var(--space-1);
}

.category-adjustment.positive {
  color: var(--color-success);
}

.category-adjustment.negative {
  color: var(--color-error);
}

.category-meta {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
}

.category-base {
  color: var(--color-stone);
}

.category-votes {
  color: var(--color-terracotta);
}

/* Category voting (integrated into tiles) */
.category-voting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-sand-dark);
}

.category-voting-label {
  font-size: var(--text-xs);
  color: var(--color-stone);
}

.category-voting-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.category-vote-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--color-sand-dark);
  cursor: pointer;
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.category-vote-btn:hover {
  transform: scale(1.1);
}

.category-vote-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.category-vote-btn.upvote.active {
  background: var(--color-success);
  color: var(--color-white);
}

.category-vote-btn.downvote.active {
  background: var(--color-error);
  color: var(--color-white);
}

.category-vote-count {
  min-width: 24px;
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-charcoal);
}

.category-vote-count.positive {
  color: var(--color-success);
}

.category-vote-count.negative {
  color: var(--color-error);
}

/* Hide separate voting section */
.voting-section {
  display: none;
}

/* --------------------------------------------
   NEIGHBORHOODS SECTION
   Interactive map and neighborhood cards
   -------------------------------------------- */
.neighborhoods-section {
  padding: var(--space-16) var(--space-6);
  background: linear-gradient(180deg, var(--color-sand) 0%, var(--color-cream) 100%);
}

.neighborhoods-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-8);
}

@media (min-width: 1024px) {
  .neighborhoods-layout {
    grid-template-columns: 400px 1fr;
  }
}

/* Map container */
.neighborhoods-map-container {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
  height: 400px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

@media (min-width: 1024px) {
  .neighborhoods-map-container {
    height: calc(100vh - var(--nav-height) - var(--space-16));
    max-height: 600px;
  }
}

.neighborhoods-map {
  width: 100%;
  height: 100%;
}

/* Custom map markers */
.neighborhood-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-charcoal);
  border: 3px solid var(--color-white);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}

.neighborhood-marker span {
  transform: rotate(45deg);
  color: var(--color-white);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
}

.neighborhood-marker.active {
  background: var(--color-terracotta);
  transform: rotate(-45deg) scale(1.2);
  z-index: 1000 !important;
}

/* Neighborhoods list */
.neighborhoods-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Neighborhood cards */
.neighborhood-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-base);
}

.neighborhood-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-sand-dark);
}

.neighborhood-card.active {
  border-color: var(--color-terracotta);
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(192, 86, 45, 0.1);
}

.neighborhood-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.neighborhood-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.neighborhood-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 0;
}

.neighborhood-price {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-white);
  background: var(--color-forest);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  letter-spacing: 1px;
}

.neighborhood-vibe {
  font-size: var(--text-sm);
  color: var(--color-terracotta);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.neighborhood-tagline {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3) 0;
  line-height: var(--leading-relaxed);
}

.neighborhood-description {
  font-size: var(--text-base);
  color: var(--color-stone);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4) 0;
}

.neighborhood-best-for {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  background: var(--color-sand);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.neighborhood-best-for strong {
  color: var(--color-ink);
}

.neighborhood-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.neighborhood-pros,
.neighborhood-cons {
  font-size: var(--text-sm);
}

.pros-label,
.cons-label {
  display: block;
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.pros-label {
  color: var(--color-forest);
}

.cons-label {
  color: var(--color-error);
}

.neighborhood-pros ul,
.neighborhood-cons ul {
  margin: 0;
  padding-left: var(--space-4);
  color: var(--color-stone);
}

.neighborhood-pros li,
.neighborhood-cons li {
  margin-bottom: var(--space-1);
}

/* Leaflet popup customization */
.leaflet-popup-content-wrapper {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.leaflet-popup-content {
  margin: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.leaflet-popup-content strong {
  font-family: var(--font-display);
  font-size: var(--text-base);
  color: var(--color-ink);
}

/* --------------------------------------------
   AFFILIATE SECTIONS
   Where to Stay, Coworking, Eat & Drink
   -------------------------------------------- */
.affiliate-section {
  padding: var(--space-16) var(--space-6);
  background: var(--color-cream);
}

.affiliate-section:nth-child(even) {
  background: var(--color-sand);
}

.affiliate-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Stay Cards */
.stay-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stay-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.stay-card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.stay-card-body {
  padding: var(--space-5);
}

.stay-card-type {
  font-size: var(--text-xs);
  color: var(--color-terracotta);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.stay-card-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.stay-card-price {
  font-size: var(--text-sm);
  color: var(--color-stone);
  margin: 0 0 var(--space-4);
}

/* Coworking Cards */
.cowork-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cowork-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.cowork-card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.cowork-card:hover .cowork-card-image {
  transform: scale(1.05);
}

.cowork-card-name {
  padding: var(--space-4) var(--space-6) 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-4);
}

.cowork-card-prices {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
  padding: 0 var(--space-6);
}

.cowork-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.cowork-price-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-terracotta);
}

.cowork-price-label {
  font-size: var(--text-sm);
  color: var(--color-stone);
}

.cowork-wifi {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  margin: 0 var(--space-6) var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-sand);
  border-radius: var(--radius-md);
  display: inline-block;
}

.cowork-card .btn {
  margin: 0 var(--space-6) var(--space-6);
  width: calc(100% - var(--space-6) * 2) !important;
}

/* Eat & Drink Cards */
.eat-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.eat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.eat-card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.eat-card:hover .eat-card-image {
  transform: scale(1.05);
}

.eat-card-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 0 0 var(--space-1);
  padding: var(--space-4) var(--space-4) 0;
}

.eat-card-type {
  font-size: var(--text-sm);
  color: var(--color-terracotta);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
  padding: 0 var(--space-4);
}

.eat-card-rating {
  font-size: var(--text-sm);
  color: var(--color-gold, #d4a373);
  margin-bottom: var(--space-3);
  padding: 0 var(--space-4);
  letter-spacing: 0.5px;
}

.eat-card-description {
  font-size: var(--text-sm);
  color: var(--color-charcoal);
  line-height: var(--leading-relaxed);
  margin: 0 0 var(--space-4);
  padding: 0 var(--space-4);
  flex: 1;
}

.eat-card .btn {
  margin: 0 var(--space-4) var(--space-4);
  width: calc(100% - var(--space-8)) !important;
}

/* --------------------------------------------
   VOTING SECTION
   Community voting on category accuracy
   -------------------------------------------- */
.voting-section {
  padding: var(--space-16) var(--space-6);
  background: var(--color-sand);
}

.voting-grid {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.vote-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.vote-category {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-medium);
  color: var(--color-ink);
}

.vote-category span:first-child {
  font-size: var(--text-xl);
}

.vote-buttons {
  display: flex;
  gap: var(--space-2);
}

.vote-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-sand);
  cursor: pointer;
  font-size: var(--text-lg);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vote-btn:hover {
  background: var(--color-sand-dark);
}

.vote-btn.voted {
  background: var(--color-terracotta);
  color: var(--color-white);
}

.vote-btn.voted-down {
  background: var(--color-error);
  color: var(--color-white);
}

/* Alternative voting class names (used by generated pages) */
.voting-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.voting-category {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-medium);
  color: var(--color-ink);
}

.voting-icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.voting-name {
  font-weight: var(--font-semibold);
  color: var(--color-ink);
}

.voting-score {
  font-size: var(--text-sm);
  color: var(--color-stone);
}

.voting-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.vote-count {
  min-width: 32px;
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-charcoal);
}

.vote-btn.active {
  background: var(--color-terracotta);
  color: var(--color-white);
}

.vote-btn.upvote.active {
  background: var(--color-success);
  color: var(--color-white);
}

.vote-btn.downvote.active {
  background: var(--color-error);
  color: var(--color-white);
}

.voting-base {
  font-size: var(--text-xs);
  color: var(--color-stone);
  opacity: 0.8;
}

.vote-count.positive {
  color: var(--color-success);
}

.vote-count.negative {
  color: var(--color-error);
}

.vote-total {
  font-size: var(--text-xs);
  color: var(--color-stone);
  min-width: 20px;
  text-align: center;
}

.vote-total.upvotes {
  color: var(--color-success);
}

.vote-total.downvotes {
  color: var(--color-error);
}

.vote-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.voting-login-prompt {
  max-width: 500px;
  margin: var(--space-8) auto 0;
  text-align: center;
  padding: var(--space-6);
  background: var(--color-white);
  border-radius: var(--radius-lg);
}

.voting-login-prompt p {
  margin: 0 0 var(--space-4);
  color: var(--color-charcoal);
}

/* --------------------------------------------
   RELATED CITIES SECTION
   3 similar cities based on score vectors
   Full city cards matching main page EXACTLY
   -------------------------------------------- */
.related-section {
  padding: var(--space-16) var(--space-6);
  background: var(--color-cream);
}

/* Related Cities Carousel */
.related-carousel-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.related-carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-white);
  border: none;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.related-carousel-nav:hover {
  background: var(--color-coral);
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.related-carousel-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.related-carousel-nav:disabled:hover {
  background: var(--color-white);
  color: inherit;
  transform: translateY(-50%);
}

.related-carousel-nav.prev {
  left: -22px;
}

.related-carousel-nav.next {
  right: -22px;
}

.related-carousel-nav svg {
  width: 20px;
  height: 20px;
}

.related-grid {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: var(--space-2) 0;
}

.related-grid::-webkit-scrollbar {
  display: none;
}

.related-grid .city-card {
  flex: 0 0 calc((100% - 2 * var(--space-6)) / 3);
  min-width: 280px;
}

/* City Card - EXACT copy from index.html */
.related-section .city-card {
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  display: block;
}

.related-section .city-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.related-section .city-card-image-container {
  position: relative;
  overflow: hidden;
}

.related-section .city-card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.related-section .city-card:hover .city-card-image {
  transform: scale(1.05);
}

/* Stats overlay on hover */
.related-section .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;
}

.related-section .city-card:hover .city-card-overlay {
  opacity: 1;
}

.related-section .overlay-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px 8px;
  padding: 10px;
  width: 100%;
}

.related-section .overlay-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.related-section .overlay-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.related-section .overlay-stat-value {
  font-size: 9px;
  font-weight: var(--font-semibold);
  color: var(--color-white);
}

.related-section .overlay-stat-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

.related-section .overlay-stat-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.related-section .overlay-stat-fill.excellent { background: #4ade80; }
.related-section .overlay-stat-fill.good { background: #facc15; }
.related-section .overlay-stat-fill.average { background: #fb923c; }
.related-section .overlay-stat-fill.below { background: #f87171; }

.related-section .city-card-body {
  padding: var(--space-5);
}

.related-section .city-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-2);
}

.related-section .city-card-location {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.related-section .city-card-flag {
  font-size: var(--text-2xl);
}

.related-section .city-card-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-ink);
  margin: 0;
  line-height: 1.2;
}

.related-section .city-card-country {
  font-size: var(--text-sm);
  color: var(--color-stone);
}

/* Nomad Score badge - exact match */
.related-section .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;
}

.related-section .nomad-score-value {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: 1;
}

.related-section .nomad-score-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.9;
}

/* Score color variants - exact match */
.related-section .nomad-score.excellent {
  background-color: var(--color-forest);
  color: var(--color-white);
}

.related-section .nomad-score.good {
  background-color: var(--color-forest-muted);
  color: var(--color-white);
}

.related-section .nomad-score.average {
  background-color: var(--color-warning);
  color: var(--color-ink);
}

.related-section .nomad-score.below {
  background-color: var(--color-sand-dark);
  color: var(--color-charcoal);
}

/* Weather and Cost Info Row - exact match */
.related-section .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);
}

.related-section .city-card-weather {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.related-section .weather-icon {
  font-size: var(--text-xl);
}

.related-section .weather-temp {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-charcoal);
}

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

.related-section .city-card-cost {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.related-section .cost-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-terracotta);
}

.related-section .cost-period {
  font-size: var(--text-xs);
  color: var(--color-stone);
}

.related-section .city-card-action {
  width: 100%;
}

/* --------------------------------------------
   RESPONSIVE ADJUSTMENTS
   Mobile-first breakpoints
   -------------------------------------------- */
@media (max-width: 1024px) {
  .affiliate-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-carousel-nav.prev {
    left: 8px;
  }

  .related-carousel-nav.next {
    right: 8px;
  }

  .related-grid .city-card {
    flex: 0 0 calc((100% - var(--space-6)) / 2);
    min-width: 280px;
  }
}

@media (max-width: 768px) {
  .city-hero {
    height: 50vh;
    min-height: 350px;
  }

  .city-hero-title {
    font-size: var(--text-4xl);
  }

  .city-hero-tagline {
    font-size: var(--text-base);
  }

  .quick-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .quick-stat-value {
    font-size: var(--text-xl);
  }

  .score-container {
    flex-direction: column;
    text-align: center;
    gap: var(--space-8);
  }

  .score-gauge svg {
    width: 160px;
    height: 160px;
  }

  .score-description h2 {
    font-size: var(--text-2xl);
  }

  .categories-grid {
    grid-template-columns: 1fr;
  }

  .affiliate-grid {
    grid-template-columns: 1fr;
  }

  .voting-grid {
    grid-template-columns: 1fr;
  }

  .related-carousel-nav {
    width: 36px;
    height: 36px;
  }

  .related-carousel-nav.prev {
    left: 4px;
  }

  .related-carousel-nav.next {
    right: 4px;
  }

  .related-grid .city-card {
    flex: 0 0 85%;
    min-width: 260px;
  }

  .section-header h2 {
    font-size: var(--text-2xl);
  }
}

@media (max-width: 480px) {
  .city-hero-content {
    padding: var(--space-6) var(--space-4);
  }

  .city-hero-flag {
    font-size: var(--text-3xl);
  }

  .city-hero-title {
    font-size: var(--text-3xl);
  }

  .quick-stats {
    padding: var(--space-4) var(--space-2);
  }

  .score-section,
  .categories-section,
  .affiliate-section,
  .voting-section,
  .related-section {
    padding: var(--space-10) var(--space-4);
  }
}