/* ------------------------------------------------------------------
   COUNTRY PAGES
   ------------------------------------------------------------------ */

/* Hero block — flag + identity side by side */
.country-hero {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.country-flag-wrap {
  flex-shrink: 0;
}

.country-flag-img {
  display: block;
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.country-flag-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 60px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 2rem;
}

.country-identity {
  display: grid;
  gap: var(--spacing-xs);
}

.country-identity-top {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

.country-identity h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}

.country-meta-row {
  font-size: 0.95rem;
  color: var(--muted);
}

.region-link {
  color: var(--muted);
  text-decoration: none;
}

.region-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

.subregion-sep {
  margin: 0 4px;
}

.country-iso {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

.iso-badge {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  font-family: monospace;
}

.formal-name-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
  font-style: italic;
}

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.status-territory  { background: var(--status-territory-bg); color: var(--status-territory-text); border: 1px solid var(--status-territory-border); }
.status-autonomous { background: var(--status-autonomous-bg); color: var(--status-autonomous-text); border: 1px solid var(--status-autonomous-border); }
.status-disputed   { background: var(--status-disputed-bg); color: var(--status-disputed-text); border: 1px solid var(--status-disputed-border); }
.status-uninhabited { background: var(--status-uninhabited-bg); color: var(--status-uninhabited-text); border: 1px solid var(--status-uninhabited-border); }
.status-special    { background: var(--status-special-bg); color: var(--status-special-text); border: 1px solid var(--status-special-border); }

/* Summary sentence */
.country-summary {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: var(--spacing-xl);
  max-width: 72ch;
}

/* Quick facts */
.quick-facts {
  margin-bottom: var(--spacing-xl);
}

.quick-facts h2 {
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-sm);
  margin: 0;
}

.fact-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}

.fact-item dt {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.fact-item dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

/* Bordering countries */
.borders-section {
  margin-bottom: var(--spacing-xl);
}

.borders-section h2 {
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
}

.border-countries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.border-country-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.border-country-link:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.border-country-link img {
  display: block;
  border-radius: 2px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

/* Parent link */
.parent-link {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: var(--spacing-lg);
}

.parent-link a {
  color: var(--accent);
}

/* Rankings section */
.country-rankings {
  margin-bottom: var(--spacing-xl);
}

.country-rankings > h2 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  margin-bottom: var(--spacing-md);
}

.ranking-category {
  margin-bottom: var(--spacing-lg);
}

.ranking-category h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--spacing-sm);
}

.rankings-table {
  margin-bottom: 0;
}

.rankings-table .rank-cell {
  font-weight: 700;
  color: var(--accent-dark);
  white-space: nowrap;
  width: 5rem;
}

.rankings-table .value-cell {
  color: var(--muted);
}

.value-unit {
  font-size: 0.75rem;
  color: var(--muted);
  margin-left: 3px;
  font-weight: 400;
}

/* No rankings state */
.no-rankings {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  text-align: center;
}

.no-rankings-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 var(--spacing-sm);
}

.no-rankings-note {
  color: var(--muted);
  margin: 0;
  max-width: 50ch;
  margin-inline: auto;
}

/* See also */
.see-also {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.see-also h2 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: var(--spacing-xs);
}

.see-also-links {
  font-size: 0.95rem;
}

.see-also-links a {
  color: var(--accent-dark);
}

/* Region explore */
.region-explore {
  margin-bottom: var(--spacing-xl);
}

.region-explore h2 {
  font-size: 1.1rem;
  margin-bottom: var(--spacing-md);
}

.region-explore-all {
  margin-top: var(--spacing-md);
  font-size: 0.9rem;
}

/* Country cards (used in region explore and countries index) */
.country-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--spacing-sm);
}

.region-explore .country-card {
  width: auto;
}

.country-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.03);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  cursor: pointer;
}

.country-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-2px);
}

.country-card-flag {
  display: block;
  width: 32px;
  height: 24px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.country-card-flag-placeholder-sm {
  width: 32px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.country-card-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   COUNTRIES INDEX PAGE
   ------------------------------------------------------------------ */

.countries-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
}

.country-grid {
  display: grid;
  gap: var(--spacing-sm);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

@media (max-width: 640px) {
  .country-grid,
  #countries-grid .country-grid {
    grid-template-columns: 1fr 1fr;
  }

  #countries-grid .list-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Country index cards (larger than compact cards above) */
#countries-grid .country-card {
  padding: var(--spacing-md);
}

.country-card-inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.country-card-flag-wrap {
  flex-shrink: 0;
}

#countries-grid .country-card-flag {
  width: 40px;
  height: 30px;
}

.country-card-body {
  display: grid;
  gap: 2px;
  align-items: start;
}

#countries-grid .country-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
}

#countries-grid .country-card-status {
  font-style: italic;
}

/* Badge shrinks to content width and never wraps — fixes stretched badges on
   long-name cards (e.g. Central African Republic) and broken-line separators
   on Territory cards (e.g. BIOT). display:block is required for text-overflow
   to work; justify-self:start prevents grid stretching to full column width. */
#countries-grid .country-card .meta {
  display: block;
  justify-self: start;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.region-section h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: 2px solid var(--border);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .countries-controls {
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .country-hero {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .country-flag-img {
    width: 60px;
    height: 45px;
  }

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

  /* Stack flag above name+meta so text gets full card width */
  #countries-grid .country-card-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  #countries-grid .country-card-flag {
    width: 32px;
    height: 24px;
  }

  /* Clamp name to 2 lines — keeps all cards in a row the same height */
  #countries-grid .country-card-body .country-card-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 0.85rem;
  }

  /* Single-line meta — change from inline-flex to block so text-overflow works
     on the text node + child span as inline content, not flex items */
  #countries-grid .country-card-body .meta {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 0.78rem;
  }
}

/* Visually hidden (for accessible labels) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 640px) {
  .rankings-table thead {
    display: none;
  }

  .rankings-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    gap: 2px 8px;
  }

  .rankings-table tr:last-child {
    border-bottom: none;
  }

  .rankings-table td {
    padding: 0;
    border: none;
  }

  .rankings-table td:first-child {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.9rem;
  }

  .rankings-table .rank-cell {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    width: auto;
  }

  .rankings-table .value-cell {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.85rem;
  }
}