/* ══════════════════════════════════════════════════════════════════════════
   HejMap v2 — country profile pages (countries/<slug>.html, v2 template).
   Loaded after countries.css (map/phrasebook/chart internals) and base.css.
   ══════════════════════════════════════════════════════════════════════════ */

.v2 [hidden] { display: none !important; }
.v2-country main { display: block; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.cpv-hero {
  position: relative;
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + 36px) 0 48px;
  overflow: hidden;
  isolation: isolate;
}
.cpv-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(160% 100% at 50% 188%, var(--canvas) 46%, color-mix(in srgb, var(--blue) 32%, var(--line-strong)) 46.1%, color-mix(in srgb, var(--cyan) 14%, transparent) 46.8%, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 11%, var(--canvas)) 0%, var(--canvas) 78%);
}
.cpv-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 40px;
}
.cpv-hero-copy { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.cpv-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--text-3); font-size: 12.5px; }
.cpv-breadcrumb a { color: var(--text-2); text-decoration: none; }
.cpv-breadcrumb a:hover { color: var(--text); }
.cpv-title {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 760;
  letter-spacing: -0.04em;
  line-height: 1.02;
  text-wrap: balance;
}
.cpv-title .cp-flag-img { flex: 0 0 auto; width: 64px; height: 46px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), var(--shadow-sm); }
.cpv-lead { max-width: 560px; margin: 0; color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.cpv-hero .v2-greet { width: min(100%, 520px); background: color-mix(in srgb, var(--surface) 80%, transparent); }

.cpv-shape { position: relative; margin: 0; aspect-ratio: 640 / 520; }
.cpv-shape svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cpv-shape-fill { fill: url(#cpvFill); fill-rule: evenodd; stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; }
.cpv-shape-shadow { fill: color-mix(in srgb, var(--text) 10%, transparent); fill-rule: evenodd; transform: translate(10px, 14px); }
.cpv-shape { animation: cpv-drop 0.8s var(--ease) both; }
@keyframes cpv-drop { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
.cpv-pin { position: absolute; width: 0; height: 0; pointer-events: none; }
.cpv-pin i {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--text);
  animation: v2-ping 2.2s ease-out infinite;
}
.cpv-pin span {
  position: absolute;
  left: 12px;
  top: -13px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
@keyframes v2-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--text) 40%, transparent); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ── Key facts: flat stat cards ───────────────────────────────────────────── */
.v2 .cp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.v2 .cp-fact {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: none;
  transition: border-color 0.15s, transform 0.2s var(--ease), box-shadow 0.2s;
}
.v2 .cp-fact--link:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.v2 .cp-fact-l { color: var(--text-3); font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
.v2 .cp-fact-v { color: var(--text); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.25; }
.v2 .cp-fact-meta { color: var(--text-2); font-size: 11.5px; }
.v2 .cp-fact-arrow { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; fill: none; stroke: var(--blue); stroke-width: 2.2; opacity: 0; transition: opacity 0.15s; }
.v2 .cp-fact--link:hover .cp-fact-arrow { opacity: 1; }
.v2 .v2-sec-head .unit-switch { margin-left: auto; }
.cpv-note {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line));
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.5;
}

/* ── Map card ─────────────────────────────────────────────────────────────── */
.v2 .cp-map {
  height: clamp(380px, 62vh, 620px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #eef2f7;
  box-shadow: var(--shadow-xs);
}
:root.v2[data-theme="dark"] .cp-map { background: #0b0e13; }
.v2 .cp-map::after { box-shadow: none; }
.v2 .cp-map .hejmap-sym.cp-country-map-name { font-weight: 700; }

/* ── Body sections as cards ───────────────────────────────────────────────── */
.cpv-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 26px 0 8px; }
.cpv-body > * { min-width: 0; }
.v2 .cpv-body .cp-section,
.cpv-compare {
  margin: 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.v2 .cpv-body .cp-trends,
.v2 .cpv-body .cp-faq,
.v2 .cpv-body .cp-maplinks,
.v2 .cpv-body .cp-travel-widget { grid-column: 1 / -1; }
.v2 .cp-section-title { margin: 0 0 14px; color: var(--text); font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }

/* Trends */
.v2 .cp-trend-grid { gap: 12px; }
.v2 .cp-trend { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-2); }
.v2 .cp-trend-label { color: var(--text-3); font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
.v2 .cp-trend-now { color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.v2 .cp-chart-line { stroke: var(--blue); }
.v2 .cp-chart-dot, .v2 .cp-chart-hoverdot { fill: var(--blue); }
.v2 .cp-trend-cap { color: var(--text-2); font-size: 12px; }

/* Phrasebook */
.v2 .cp-pb-tab {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
}
.v2 .cp-pb-tab.is-active,
.v2 .cp-pb-langtabs .cp-pb-tab.is-active { border-color: var(--text); background: var(--text); color: var(--surface); }
.v2 .cp-pb-panels { border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); padding: 4px 12px; }
.v2 .cp-pb-row { padding: 9px 0; }
.v2 .cp-pb-text { color: var(--text); font-weight: 600; }
.v2 .cp-pb-play { background: var(--text); color: var(--surface); }

/* Neighbours */
.v2 .cp-nb-list { gap: 6px; }
.v2 .cp-nb {
  height: 32px;
  padding: 0 11px 0 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}
.v2 .cp-nb:hover { border-color: var(--line-strong); background: var(--surface-2); }

/* Compare */
.cpv-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cpv-compare > div { display: grid; gap: 3px; flex: 1 1 220px; }
.cpv-compare label { color: var(--text); font-size: 15px; font-weight: 650; }
.cpv-compare select {
  flex: 1 1 200px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}
.cpv-compare .v2-btn { height: 38px; }

/* FAQ */
.v2 .cp-faq-item { border-color: var(--line); }
.v2 .cp-faq-q { color: var(--text); font-weight: 600; }
.v2 .cp-faq-a { color: var(--text-2); }

/* Map links */
.v2 .cpv-body .cp-maplinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.v2 .cp-maplinks-label { margin-right: 6px; color: var(--text-3); font-size: 11px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
.v2 .cp-maplink {
  height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 550;
  text-decoration: none;
}
.v2 .cp-maplink:hover { border-color: color-mix(in srgb, var(--blue) 40%, var(--line)); color: var(--blue); }

/* Shared with the landing: persistent title between the tour and this page. */
.v2.vt-on .cpv-title { view-transition-name: country-title; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .v2 .cp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .cpv-hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .cpv-shape { order: -1; width: min(100%, 460px); justify-self: center; }
  .v2-floaters { --fs: 0.72; }
  .v2-floater--wide { display: none; }
  .cpv-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cpv-hero { padding-top: calc(var(--nav-h) + 16px); }
  .cpv-title { font-size: 34px; gap: 12px; }
  .cpv-title .cp-flag-img { width: 46px; height: 33px; }
  .v2 .cp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2 .v2-sec-head { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .cpv-shape, .cpv-pin i { animation: none; }
}

.v2 .cp-section-title { text-transform: none; }
.cpv-shape--flag { display: grid; place-items: center; aspect-ratio: auto; }
.cpv-shape--flag .cp-flag-img { width: min(100%, 360px); height: auto; box-shadow: 10px 14px 0 color-mix(in srgb, var(--text) 10%, transparent), 0 0 0 1px rgba(0, 0, 0, 0.06); }
.v2 .cp-fact-meta { text-transform: none; letter-spacing: 0; }

/* "Compare with …" bubbles: a column beside the outline on wide screens, a row
   under the hero (scrollable on phones) elsewhere. */
@media (min-width: 1180px) {
  .cpv-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 236px; gap: 28px; }
}
@media (max-width: 1179px) {
  .cpv-cmp { grid-column: 1 / -1; grid-template-columns: auto repeat(3, minmax(0, 220px)); align-items: center; justify-content: start; }
}
@media (max-width: 760px) {
  .cpv-cmp { grid-template-columns: repeat(3, minmax(190px, 1fr)); overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
  .cpv-cmp .v2-cmp-kicker { grid-column: 1 / -1; }
  .cpv-cmp .v2-cmp-bubble { animation: none; }
}
.cpv-cmp .v2-cmp-bubble { animation: v2-cmp-pop 0.45s var(--ease) backwards, v2-cmp-float 7s ease-in-out 0.6s infinite; animation-delay: calc(0.5s + var(--i, 0) * 110ms), calc(var(--i, 0) * -2.3s); }