/* FREE SAILING — countries.html (the index) and country.html (one country).
   Layered on site.css; no colours or tokens of its own. */

/* ---------------------------------------------------------------- index */
.ctry-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:12px; margin-top:18px;
}
.ctry-card{
  display:block; padding:15px 16px; border:1px solid var(--line); border-radius:var(--r-s);
  background:#fff; box-shadow:var(--shadow-1);
}
.ctry-card:hover{ text-decoration:none; box-shadow:var(--shadow-2); transform:translateY(-2px); }
.ctry-card h3{ font-size:15.5px; color:var(--navy); letter-spacing:-.014em; }
.ctry-card .iso{ font-size:11px; color:var(--ink-25); text-transform:uppercase;
  letter-spacing:.06em; margin-left:6px; font-weight:600; }
.ctry-stats{ margin-top:9px; display:flex; flex-wrap:wrap; gap:5px 10px; }
.ctry-stats span{ font-size:12px; color:var(--ink-40); font-variant-numeric:tabular-nums; }
.ctry-stats b{ color:var(--ink-60); font-weight:700; }
.ctry-card.is-zero{ opacity:.72; }
.ctry-card.is-zero .ctry-stats{ color:var(--ink-25); }

.ctry-az{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.ctry-az .count{ color:var(--ink-40); font-size:13px; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------- one page */
.ctry-lede{ margin-top:8px; }
.ctry-facts.facts div span{ text-transform:none; }

.ctry-kinds{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ctry-kind{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border:1px solid var(--line); border-radius:999px; background:#fff; font-size:13px;
}
.ctry-kind:hover{ text-decoration:none; border-color:var(--cyan); }
.ctry-kind b{ color:var(--navy); font-variant-numeric:tabular-nums; }

.ctry-note{ color:var(--ink-40); font-size:13.5px; margin-top:10px; max-width:64ch; }

.ctry-op{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.ctry-op a{
  display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:999px;
  background:#fff; font-size:12.5px; color:var(--ink-60);
}
.ctry-op a:hover{ text-decoration:none; border-color:var(--cyan); color:var(--navy); }

@media (max-width:640px){
  .ctry-grid{ grid-template-columns:1fr 1fr; }
}