/* ============================================
   COUNTRY SHOW PAGE — JustCheckin Design System
   Rose #e94560 + Navy #0f3460
   ============================================ */

/* --- Breadcrumb --- */
.cn-breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.cn-breadcrumb a {
  color: var(--primary);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}
.cn-breadcrumb a:hover { opacity: 0.75; text-decoration: underline; }
.cn-breadcrumb .sep { opacity: 0.35; font-size: 11px; margin: 0 2px; }

/* --- Hero --- */
.cn-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
  background: var(--secondary);
}
.cn-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
  display: block;
}
.cn-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15,52,96,0.35) 0%, rgba(15,52,96,0.72) 100%);
}
.cn-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--space-6);
}
.cn-hero-flag {
  font-size: 52px;
  line-height: 1;
  margin-bottom: var(--space-3);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
.cn-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--font-extrabold);
  color: var(--white);
  letter-spacing: var(--letter-display);
  line-height: var(--leading-tight);
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.cn-hero-dek {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.88);
  margin-top: var(--space-3);
  max-width: 560px;
  line-height: var(--leading-relaxed);
}
.cn-hero-cta {
  margin-top: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 32px;
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-full);
  font-weight: var(--font-bold);
  font-size: var(--text-base);
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(233,69,96,0.4);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.cn-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(233,69,96,0.5);
  color: var(--white);
}

/* --- Quick Stats Bar --- */
.cn-stats-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: var(--space-5) 0;
}
.cn-stats-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.cn-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cn-stat-value {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  color: var(--primary);
  line-height: 1;
}
.cn-stat-label {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: var(--font-medium);
}
.cn-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--border);
}

/* --- Section wrapper --- */
.cn-section {
  padding: var(--space-12) 0;
}
.cn-section-alt {
  background: var(--gray-50);
}
.cn-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.cn-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-extrabold);
  color: var(--text-primary);
  letter-spacing: var(--letter-tight);
}
.cn-section-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 4px;
}
.cn-section-link {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--primary);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-fast);
}
.cn-section-link:hover { opacity: 0.75; text-decoration: underline; }

/* --- City Cards Grid --- */
.cn-cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-5);
}
.cn-city-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}
.cn-city-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.cn-city-card-img-wrap {
  position: relative;
  height: 190px;
  overflow: hidden;
}
.cn-city-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.cn-city-card:hover .cn-city-card-img {
  transform: scale(1.05);
}
.cn-city-card-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(15,52,96,0.85);
  color: var(--white);
  font-size: 11px;
  font-weight: var(--font-bold);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}
.cn-city-card-body {
  padding: var(--space-4);
}
.cn-city-card-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 4px;
}
.cn-city-card-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.cn-city-card-arrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}
.cn-city-card-explore {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--primary);
}

/* --- Hotel Cards --- */
.cn-hotels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-5);
}
.cn-hotel-card {
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.cn-hotel-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.cn-hotel-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.cn-hotel-card-body {
  padding: var(--space-4);
}
.cn-hotel-card-name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cn-hotel-card-loc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.cn-hotel-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cn-hotel-card-price {
  font-size: var(--text-lg);
  font-weight: var(--font-extrabold);
  color: var(--price-green);
}
.cn-hotel-card-price-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: var(--font-normal);
}
.cn-hotel-card-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--secondary);
  color: var(--white);
  font-size: 12px;
  font-weight: var(--font-bold);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.cn-hotel-card-cta {
  display: block;
  margin: var(--space-3) var(--space-4) var(--space-4);
  padding: 10px;
  background: var(--primary);
  color: var(--white);
  text-align: center;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.cn-hotel-card-cta:hover { background: var(--primary-dark); color: var(--white); }

/* --- Guide Cards --- */
.cn-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-5);
}
.cn-guide-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.cn-guide-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.cn-guide-card-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}
.cn-guide-card-body {
  padding: var(--space-4);
}
.cn-guide-card-type {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  background: var(--primary-light);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}
.cn-guide-card-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cn-guide-card-city {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* --- Empty state --- */
.cn-empty {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
  font-size: var(--text-base);
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .cn-hero { height: 300px; }
  .cn-hero-title { font-size: var(--text-3xl); }
  .cn-hero-dek { font-size: var(--text-base); }
  .cn-hero-flag { font-size: 40px; }
  .cn-stat-divider { display: none; }
  .cn-stats-inner { gap: var(--space-6); }
  .cn-cities-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .cn-city-card-img-wrap { height: 140px; }
  .cn-hotels-grid { grid-template-columns: 1fr; }
  .cn-guides-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .cn-section { padding: var(--space-8) 0; }
  .cn-section-header { flex-direction: column; gap: var(--space-1); }
}
@media (max-width: 480px) {
  .cn-cities-grid { grid-template-columns: 1fr; }
  .cn-guides-grid { grid-template-columns: 1fr; }
}

/* ── Cost tier chip on city cards ── */
.cn-cost-chip{font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;white-space:nowrap;background:#f0fdf4;color:#059669}
.cn-cost-chip.cn-cost-ultra-budget,.cn-cost-chip.cn-cost-budget{background:#f0fdf4;color:#059669}
.cn-cost-chip.cn-cost-mid-range{background:#eff6ff;color:#1d4ed8}
.cn-cost-chip.cn-cost-comfortable,.cn-cost-chip.cn-cost-luxury{background:#fef3c7;color:#92400e}
.cn-qs-chip{font-size:11px;font-weight:800;padding:2px 7px;border-radius:4px;margin-left:4px}

/* ── Country Facts ("at a glance" demographic/practical panel) ── */
.cn-facts-section { background: var(--gray-50); }
.cn-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.cn-fact-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cn-fact-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cn-fact-card--accent { background: var(--primary-light); border-color: var(--primary-200); }
.cn-fact-icon { display: block; font-size: 26px; margin-bottom: var(--space-2); }
.cn-fact-value {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-extrabold);
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 2px;
  word-break: break-word;
}
.cn-fact-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cn-facts-note {
  margin-top: var(--space-5);
  font-size: var(--text-xs);
  color: var(--text-muted);
  max-width: 68ch;
}
@media (max-width: 768px) {
  .cn-facts-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--space-3); }
  .cn-fact-card { padding: var(--space-4) var(--space-3); }
}