/* pp-country.css — the country page's own rules.

   These lived in a <style> block inside country.html. The page is generated
   176 times over now (country/<slug>.html, by tools/gen-country.mjs), so a
   style that lived in the template would be copied into every one of them and
   a tweak would touch every file. Loaded after pp-theme and pp-wow. */

.cg-hero{position:relative;min-height:460px;display:flex;align-items:flex-end;overflow:hidden}
.cg-hero .pp-photo{position:absolute;inset:0}
.cg-hero-in{position:relative;z-index:2;width:100%;padding-bottom:38px}
.cg-hero-in h1,.cg-hero-in .pp-kicker{color:#F2F6FB}
.cg-hero-in .pp-lead{color:#E8EFF7}
.cg-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cg-map{position:relative;border-radius:var(--pb-r-card-lg);overflow:hidden;border:1px solid var(--pb-border);background:var(--pb-map-ocean)}
.cg-partial{border:1px dashed var(--pb-border-strong);border-radius:var(--pb-r-card);padding:18px;background:var(--pb-inset)}
@media (max-width:900px){.cg-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.cg-hero{min-height:340px}.cg-citygrid{grid-template-columns:1fr !important}}

/* ── the flag ───────────────────────────────────────────────────
   An emoji flag is two regional-indicator letters, and Windows draws exactly
   that: "HR" where the flag should be. Where assets/flags/<iso2>.svg exists the
   page shows the image; the emoji stays as the fallback for the rest. */
.cg-flagimg{display:block;width:40px;height:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}

/* ── the baked city list, before the cards arrive ─────────────── */
.cg-citylist{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cg-citylist a{color:var(--pb-text);font-weight:600}
.cg-citylist .pp-cap{margin-left:8px}

/* ── landmark chips that open a card ────────────────────────────
   The chip keeps .pp-tag (the audit counts them) and becomes a button. The
   card is a .pp-pop baked beside it: an anchored panel on a desktop, a sheet
   on a phone, both via pp-pop.js. It carries a real surface colour, so it
   carries the glow too (README, "Rules that bite"). */
.cg-lm-wrap{display:inline-block}
button.cg-lm{cursor:pointer;font:inherit;font-size:var(--pb-fs-caption);font-weight:600;transition:border-color var(--pp-t-ui) var(--pp-ease),color var(--pp-t-ui) var(--pp-ease),background var(--pp-t-ui) var(--pp-ease)}
button.cg-lm:hover,button.cg-lm[aria-expanded="true"]{border-color:var(--pb-accent-border);color:var(--pb-text);background:var(--pb-accent-tint)}
button.cg-lm::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--pb-accent-ink);margin-left:2px;opacity:.7}
.cg-lm-pop{padding:0;width:340px;min-width:0;max-width:calc(100vw - var(--pp-gutter) * 2);background:var(--pb-surface);box-shadow:var(--pp-card-glow),0 24px 60px rgba(8,12,20,.28);overflow:hidden;max-height:min(70vh,560px)}
.cg-lm-img{display:block;width:100%;height:190px;object-fit:cover;background:var(--pb-inset)}
div.cg-lm-img{position:relative;overflow:hidden}
div.cg-lm-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cg-lm-body{padding:14px 16px 16px}
.cg-lm-body .pp-kicker{margin-bottom:6px}
.cg-lm-title{font-size:18px;line-height:1.2;margin-top:2px}
.cg-lm-text{margin-top:8px;font-size:var(--pb-fs-body);line-height:1.55;color:var(--pb-text-2)}
.cg-lm-src,.cg-lm-credit{margin-top:8px;line-height:1.45}
.cg-lm-src a,.cg-lm-credit a{color:var(--pb-accent-ink);font-weight:600}
@media (max-width:640px){
  .cg-lm-pop.is-sheet{width:auto;max-width:none;padding:0 0 calc(20px + env(safe-area-inset-bottom))}
  .cg-lm-pop.is-sheet .cg-lm-img{height:220px;border-radius:0}
  .cg-lm-pop.is-sheet .cg-lm-body{padding:14px var(--pp-gutter) 0}
  .cg-lm-pop.is-sheet .pp-sheet-head{margin:0;padding-left:var(--pp-gutter);padding-right:var(--pp-gutter)}
}

/* ── fly there ──────────────────────────────────────────────────── */
.cg-fly{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cg-fly-body{flex:1;min-width:260px}
.cg-fly-ports{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cg-fly-ports .pp-chip{text-decoration:none}
.cg-fly-ports .pp-chip b{font-weight:700;color:var(--pb-accent-ink);margin-left:4px}