/* ============================================================
   Trips — shared public country page template.

   Used by trips/country.php for every country pack. Nothing here is
   written for one country: the layout adapts to however many regions,
   routes, places, facts and photographs a pack supplies, and every
   panel degrades cleanly when a value is missing.
   ============================================================ */

.country,
.country-sticky,
.country-planning,
.country-dialog,
.country-mapsheet,
.country-action-dialog,
/* The shared Place Info popup is rendered outside .country, so it is named
   here too — scoped to this page, which is the only one loading this file. */
body[data-page="country"] .place-info-modal {
  --c-accent: #ec6a12;
  --c-accent-deep: #c9540b;
  --c-accent-soft: #fdf0e4;
  --c-navy: #0b1a31;
  --c-navy-deep: #061122;
  --c-blue: #2563eb;
  --c-blue-soft: #eaf1ff;
  --c-ink: #0f1b2d;
  --c-muted: #5f7089;
  --c-quiet: #8695ab;
  --c-line: #e5ebf5;
  --c-page: #f5f8fc;
  --c-wrap: min(1320px, 100% - 40px);
}

body[data-page="country"] { background: var(--c-page); }

/* The page owns its own full-bleed rhythm; each band re-centres itself. */
body[data-page="country"] .ws-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 0 clamp(64px, 8vw, 110px);
}

body[data-page="country"] .ws-main > .guest-readonly-banner {
  width: min(1320px, 100% - 40px);
  margin: 20px auto 0;
}

.country { display: block; min-width: 0; }

/* These panels set their own display value, which would otherwise win over
   the browser's [hidden] rule and leave every dialog open on load. */
.country [hidden],
.country-sticky[hidden],
.country-dialog[hidden],
.country-mapsheet[hidden],
.country-action-dialog[hidden] { display: none !important; }

.country-action-dialog {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, .7);
  backdrop-filter: blur(7px);
}
.country-action-dialog > section { position:relative;width:min(540px,100%);max-height:min(760px,90dvh);overflow:auto;padding:26px;border:1px solid rgba(255,255,255,.3);border-radius:22px;color:var(--c-ink);background:#fffaf5;box-shadow:0 28px 80px rgba(15,23,42,.35); }
.country-action-dialog h2 { margin:3px 42px 8px 0;font:800 clamp(1.35rem,5vw,1.85rem)/1.12 var(--font-display); }
.country-action-dialog p:not(.eyebrow) { margin:0 0 16px;color:var(--c-muted);line-height:1.5; }
.country-action-dialog__close { position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:12px;color:var(--c-muted);background:#f4e9de;font-size:1.4rem;cursor:pointer; }
.country-action-dialog__actions { display:flex;flex-wrap:wrap;gap:8px;margin-top:18px; }
.country-action-dialog__days { margin-top:16px; }
.country-trip-options, .country-day-options { display:grid;gap:9px; }
.country-trip-option, .country-day-option { display:grid;gap:3px;width:100%;padding:13px 14px;border:1px solid #e7d5c4;border-radius:14px;color:var(--c-ink);background:#fff;text-align:left;cursor:pointer; }
.country-trip-option:hover, .country-day-option:hover { border-color:var(--c-accent);background:var(--c-accent-soft); }
.country-trip-option strong { font-size:.94rem; }
.country-trip-option span { color:var(--c-muted);font-size:.8rem; }
.country-trip-option small { color:var(--c-accent-deep);font-weight:800; }
.country-day-options { grid-template-columns:repeat(auto-fit,minmax(min(105px, 100%),1fr));margin-bottom:16px; }
.country-day-option { place-items:center;min-height:48px;font:800 .88rem var(--font-body);text-align:center; }
.country-trip-options__empty { padding:14px;border-radius:12px;background:#f4e9de; }
.country-report-types { display:grid;gap:8px;margin:18px 0 16px;padding:0;border:0; }
.country-report-types legend { margin-bottom:9px;font-weight:800; }
.country-report-types label { display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border:1px solid var(--c-line);border-radius:12px;cursor:pointer; }
.country-report-types input { width:18px;height:18px;accent-color:var(--c-accent); }
.country-report-details { display:grid;gap:7px;font-weight:800; }
.country-report-details small { color:var(--c-muted);font-weight:500; }
.country-report-details textarea { width:100%;resize:vertical;padding:12px;border:1px solid var(--c-line);border-radius:12px;color:var(--c-ink);background:#fff;font:inherit; }
.country-report-status { min-height:21px;margin:10px 0 0!important;font-weight:800; }
.country-report-status.is-error { color:#9f2d35!important; }
.country-report-status.is-ok { color:#207345!important; }
.country-report-note { margin:18px 0 0!important;padding-top:14px;border-top:1px solid var(--c-line);font-size:.78rem; }
body.country-action-open { overflow:hidden; }

body[data-page="country"] .ui-toast.country-action-toast {
  display:grid;
  gap:10px;
  width:min(460px,calc(100vw - 24px));
  padding:14px 16px;
  pointer-events:auto;
}
.country-action-toast__actions { display:flex;flex-wrap:wrap;gap:8px; }
.country-action-toast__actions a,
.country-action-toast__actions button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:9px;
  color:#fff;
  background:transparent;
  font:800 .82rem var(--font-body);
  text-decoration:none;
  cursor:pointer;
}
.country-action-toast__actions a { background:#fff;color:#0b1a31; }

/* ---------- Shared buttons ---------- */

.country-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 22px;
  border: 0;
  border-radius: 14px;
  font: 800 0.95rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.country-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.country-btn > span { min-width: 0; }
.country-btn:hover { transform: translateY(-2px); }
.country-btn:active { transform: translateY(0); }

.country-btn--primary {
  background: linear-gradient(135deg, #f7862e 0%, #e2600c 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(214, 90, 10, 0.34);
}
.country-btn--primary:hover { box-shadow: 0 18px 38px rgba(214, 90, 10, 0.42); }

.country-btn--light {
  background: #fff;
  color: var(--c-navy);
  box-shadow: 0 14px 30px rgba(6, 17, 34, 0.26);
}
.country-btn--light svg:last-child { color: var(--c-accent); }

.country-btn--soft {
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
}
.country-btn--soft:hover { background: #fbe3cf; }

.country-btn--ghost {
  background: #fff;
  color: var(--c-ink);
  border: 1.5px solid var(--c-line);
}
.country-btn--ghost:hover { border-color: #c9d5e8; }

.country-btn--sm { padding: 10px 16px; border-radius: 11px; font-size: 0.85rem; gap: 8px; }
.country-btn--sm svg { width: 16px; height: 16px; }
.country-btn[disabled] { opacity: 0.55; cursor: progress; transform: none; }

/* ---------- Hero ---------- */

.country-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(640px, 76svh);
  padding: clamp(38px, 5vw, 76px) 0 clamp(78px, 8vw, 118px);
  color: #fff;
  background: linear-gradient(140deg, var(--c-navy-deep) 0%, var(--c-navy) 46%, #16375e 100%);
}

.country-hero__photo { position: absolute; inset: 0; z-index: -2; }

.country-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--country-hero-focus, 50% 50%);
}

/* A controlled left-side gradient only: the photograph stays bright and
   clearly visible from the middle of the frame outwards. */
.country-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg,
      rgba(5, 15, 31, 0.9) 0%,
      rgba(5, 15, 31, 0.8) 26%,
      rgba(6, 18, 36, 0.44) 52%,
      rgba(6, 18, 36, 0.12) 74%,
      rgba(6, 18, 36, 0) 92%);
}

/* Premium fallback when a pack has no photograph yet. */
.country-hero--plain::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  opacity: 0.2;
  background-image:
    repeating-radial-gradient(circle at 76% 20%, rgba(255, 255, 255, 0.55) 0 1px, transparent 1px 38px),
    repeating-radial-gradient(circle at 10% 86%, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 52px);
}
.country-hero--plain .country-hero__shade {
  background: radial-gradient(110% 90% at 84% 10%, rgba(236, 106, 18, 0.24), transparent 58%);
}

.country-hero__inner {
  position: relative;
  width: var(--c-wrap);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(min(320px, 100%), 0.7fr);
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
}

.country-hero__copy { min-width: 0; }

.country-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.84);
}

.country-hero__code {
  display: grid;
  place-items: center;
  min-width: 46px;
  height: 32px;
  padding: 0 10px;
  border-radius: 9px;
  background: var(--c-accent);
  color: #fff;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  box-shadow: 0 8px 20px rgba(214, 90, 10, 0.45);
}

.country-hero h1 {
  margin: 0 0 14px;
  font: 800 clamp(2.5rem, 5.6vw, 4.5rem)/0.98 var(--font-display);
  letter-spacing: -0.015em;
  text-shadow: 0 4px 30px rgba(3, 11, 24, 0.42);
}

.country-hero__lede {
  margin: 0 0 12px;
  max-width: 22ch;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  font-weight: 800;
  line-height: 1.24;
  text-shadow: 0 2px 18px rgba(3, 11, 24, 0.4);
}

.country-hero__intro {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 2px 16px rgba(3, 11, 24, 0.45);
}

.country-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.country-hero__actions .country-btn { padding: 16px 26px; font-size: 1rem; }
.country-hero__actions .country-btn svg:last-child { width: 16px; height: 16px; opacity: 0.72; }

.country-hero__highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}

.country-hero__highlights li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 24px 4px 0;
  margin-right: 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.24);
}
.country-hero__highlights li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.country-hero__glyph { display: grid; place-items: center; }
.country-hero__glyph svg { width: 27px; height: 27px; color: rgba(255, 255, 255, 0.94); }

.country-hero__stat { display: grid; gap: 2px; min-width: 0; }
.country-hero__stat strong { font-size: 1rem; font-weight: 800; }
.country-hero__stat small { font-size: 0.82rem; color: rgba(255, 255, 255, 0.74); }

/* ---------- Page choices ---------- */

.country-section-anchor { scroll-margin-top: 16px; }
.country-section-nav {
  width:var(--c-wrap);
  margin:16px auto 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:8px;
  border:1px solid var(--c-line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(9,25,50,.07);
}
.country-section-nav a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 15px;
  border-radius:11px;
  color:var(--c-navy);
  font-size:.84rem;
  font-weight:800;
  text-align:center;
  text-decoration:none;
}
.country-section-nav a:hover,
.country-section-nav a:focus-visible { background:var(--c-accent-soft);color:var(--c-accent-deep); }

/* ---------- Map panel ---------- */

.country-map-panel {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 34px 74px rgba(3, 12, 27, 0.42);
}

/* Above Leaflet's own controls, which sit at z-index 800-1000. */
.country-map-panel__bar {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
.country-map-panel__bar > * { pointer-events: auto; }

.country-map-panel__pick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 56px);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(4, 14, 30, 0.2);
  color: var(--c-navy);
}
.country-map-panel__pick svg { width: 16px; height: 16px; color: var(--c-accent); }

.country-map-panel__pick select {
  min-width: 0;
  max-width: 190px;
  border: 0;
  background: transparent;
  font: 800 0.86rem var(--font-body);
  color: inherit;
  cursor: pointer;
}

.country-map-panel__expand {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 20px rgba(4, 14, 30, 0.2);
  color: var(--c-navy);
  cursor: pointer;
}
.country-map-panel__expand:hover { background: #fff; }
.country-map-panel__expand svg { width: 17px; height: 17px; }

.country-map-panel__frame {
  position: relative;
  aspect-ratio: 4 / 3.1;
  min-height: 300px;
  background: #e8eef7;
}
/* Leaflet draws its vector markers into an <svg> sized by width/height
   attributes. The shared `.trips-ui svg` rule sets every svg to 18px, which
   collapsed that layer and hid every marker — including the full-screen and
   route maps. Restoring `auto` lets Leaflet's own sizing apply again. */
body[data-page="country"] .leaflet-pane svg { width: auto; height: auto; }

.country-map-panel__map { width: 100%; height: 100%; }
/* Clear of the floating destination chip above it. */
.country-map-panel__map .leaflet-top.leaflet-left { top: 46px; }
.country-map-panel__map .leaflet-control-zoom { margin: 12px; border: 0; }
.country-map-panel__map .leaflet-control-zoom a {
  border: 0;
  border-radius: 10px !important;
  color: var(--c-navy);
  box-shadow: 0 6px 16px rgba(4, 14, 30, 0.18);
}
.country-map-panel__map .leaflet-control-attribution { font-size: 0.62rem; background: rgba(255, 255, 255, 0.82); }

.country-map-panel__fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-weight: 700;
  color: var(--c-muted);
}

/* Marker popup: the place name and the same shared Place Info action. */
.country-map-pop { display: grid; gap: 3px; min-width: 150px; }
.country-map-pop strong { font-size: 0.95rem; font-weight: 800; color: var(--c-ink); }
.country-map-pop small { font-size: 0.78rem; color: var(--c-muted); }
.country-map-pop__info {
  justify-self: start;
  margin-top: 7px;
  padding: 7px 13px;
  border: 0;
  border-radius: 9px;
  background: var(--c-accent);
  color: #fff;
  font: 800 0.78rem var(--font-body);
  cursor: pointer;
}
.country-map-pop__info:hover { background: var(--c-accent-deep); }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-popup-content-wrapper { border-radius: 14px; }

.country-map-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  color: var(--c-muted);
  font-size: 0.85rem;
}
.country-map-panel__foot strong { color: var(--c-ink); font-weight: 800; }

.country-map-panel__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1.5px solid var(--c-line);
  border-radius: 11px;
  background: #fff;
  font: 800 0.84rem var(--font-body);
  color: var(--c-navy);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.country-map-panel__open:hover { border-color: #c9d5e8; background: #f7faff; }
.country-map-panel__open svg { width: 15px; height: 15px; color: var(--c-muted); }

/* ---------- Travel information ---------- */

.country-facts {
  position: relative;
  z-index: 3;
  scroll-margin-top: 16px;
  width: var(--c-wrap);
  margin: clamp(-72px, -5vw, -46px) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(196px, 100%), 1fr));
  padding: 20px 8px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 26px 62px rgba(8, 22, 45, 0.15);
}

.country-fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 14px;
  border-right: 1px solid var(--c-line);
}
.country-fact:last-child { border-right: 0; }

.country-fact__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-blue-soft);
  color: var(--c-blue);
}
.country-fact__icon svg { width: 17px; height: 17px; }

.country-fact__text { min-width: 0; display: grid; gap: 2px; }
.country-fact__label { margin: 0; font-size: 0.76rem; font-weight: 700; color: var(--c-blue); }

/* ---------- Active trip ---------- */

.country-planning {
  width:var(--c-wrap);
  margin:18px auto 0;
  display:grid;
  grid-template-columns:minmax(min(180px, 100%),1fr) auto auto;
  align-items:center;
  gap:14px 22px;
  padding:14px 16px;
  border:1px solid #d8e3f2;
  border-radius:17px;
  color:var(--c-ink);
  background:#fff;
  box-shadow:0 12px 30px rgba(8,22,45,.09);
}
.country-planning__identity { display:flex;align-items:baseline;gap:6px;min-width:0; }
.country-planning__identity span { color:var(--c-muted);font-size:.82rem;font-weight:750; }
.country-planning__identity strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem; }
.country-planning__counts { display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px; }
.country-planning__counts span { padding:7px 9px;border-radius:999px;background:#f2f6fc;color:var(--c-muted);font-size:.75rem;font-weight:700;white-space:nowrap; }
.country-planning__counts strong { color:var(--c-ink);font-size:.86rem; }
.country-planning__actions { display:flex;gap:7px; }
.country-planning__actions .country-btn { min-height:44px;white-space:nowrap; }
.country-fact__value { margin: 0; font-size: 0.93rem; font-weight: 800; color: var(--c-ink); line-height: 1.3; }

/* A pack can supply a long supporting line; hold it to two lines so one
   fact never sets the height of the whole strip. */
.country-fact__note {
  margin: 0;
  font-size: 0.76rem;
  color: var(--c-quiet);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Sections ---------- */

.country-section {
  width: var(--c-wrap);
  margin: clamp(48px, 6vw, 78px) auto 0;
  scroll-margin-top: 16px;
}

.country-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.country-section__head h2 {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 12px;
  font: 800 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--font-display);
  color: var(--c-ink);
}
.country-section__head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 58px;
  height: 4px;
  border-radius: 99px;
  background: var(--c-accent);
}
.country-section__head p { margin: 0; max-width: 62ch; color: var(--c-muted); line-height: 1.55; }

.country-section__meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }

.country-section__count {
  flex: 0 0 auto;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--c-line);
  background: #fff;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--c-muted);
}
.country-section__count--button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.country-section__count--button small {
  padding-left: 8px;
  border-left: 1px solid var(--c-line);
  color: var(--c-accent);
  font-size: 0.72rem;
  font-weight: 800;
}
.country-section__count--button:hover {
  color: var(--c-ink);
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  transform: translateY(-1px);
}
.country-section__count--button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--c-accent) 42%, transparent);
  outline-offset: 3px;
}

/* The standing reminder beside the count: how many are saved, and that they
   are only kept for this browser session. */
.country-favs {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 12px;
  border: 1.5px solid #f3d9c3;
  border-radius: 999px;
  background: var(--c-accent-soft);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.country-favs:hover { border-color: var(--c-accent); background: #fbe3cf; }
.country-favs__heart { font-size: 1rem; line-height: 1; color: var(--c-accent); }
.country-favs__text { display: grid; gap: 1px; }
.country-favs__text strong { font: 800 0.82rem var(--font-body); color: var(--c-accent-deep); }
.country-favs__text small { font-size: 0.7rem; font-weight: 600; color: #a9764a; }

.place-card__action--fav.is-active {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
}

/* ---------- Guest favourites notice ----------
   A quiet panel, not a modal: it never covers the page or takes focus away,
   and it appears only once in a session. */

.country-fav-notice {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 70;
  width: min(380px, calc(100% - 40px));
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 54px rgba(6, 18, 38, 0.24);
  border: 1px solid var(--c-line);
  animation: country-fav-notice-in 0.25s ease both;
}
.country-fav-notice[hidden] { display: none; }

@keyframes country-fav-notice-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.country-fav-notice__copy {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--c-ink);
}
.country-fav-notice__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.country-fav-notice__actions .country-btn { flex: 1 1 auto; }

/* ---------- Tone backgrounds used when a photograph is missing ----------
   Deep, low-saturation duotones with a soft light source, so a catalogue
   that is still gathering photographs reads as designed rather than empty. */

[data-tone] {
  background-color: #33465f;
  background-image:
    radial-gradient(120% 100% at 22% 8%, rgba(255, 255, 255, 0.22), transparent 62%),
    linear-gradient(152deg, var(--tone-from, #47607f) 0%, var(--tone-to, #22344c) 100%);
}

[data-tone="sea"] { --tone-from: #3f9dc4; --tone-to: #0f3f63; }
[data-tone="water"] { --tone-from: #35a9ac; --tone-to: #0d4152; }
[data-tone="peak"] { --tone-from: #7f93af; --tone-to: #2a3648; }
[data-tone="heritage"] { --tone-from: #c39355; --tone-to: #63421a; }
[data-tone="culture"] { --tone-from: #8f7ec4; --tone-to: #3b2c66; }
[data-tone="city"] { --tone-from: #5b87c6; --tone-to: #1d3563; }
[data-tone="food"] { --tone-from: #d18a4f; --tone-to: #703c17; }
[data-tone="green"] { --tone-from: #4fa583; --tone-to: #16453a; }

/* ---------- Ready-made routes ---------- */

.country-routes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 24px;
}

.route-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 40px rgba(9, 25, 50, 0.1);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.route-card:hover { transform: translateY(-5px); box-shadow: 0 28px 62px rgba(9, 25, 50, 0.18); }

.route-card__media {
  position: relative;
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
  color: #fff;
}
.route-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.route-card:hover .route-card__media img { transform: scale(1.05); }

.route-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(4, 13, 28, 0.9) 0%, rgba(4, 13, 28, 0.44) 44%, rgba(4, 13, 28, 0.04) 76%);
}

.route-card__media--map { background: #dce5ec; }
.route-card__map { position: absolute; inset: 0; background: #dce5ec; pointer-events: none; }
.route-card__map .leaflet-bottom.leaflet-right { top: 0; bottom: auto; }
.route-card__map .leaflet-control-attribution { z-index: 2; max-width: 76%; font-size: 8px; }
.route-card__map.is-unavailable::before {
  content: "Map unavailable";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #46576a;
  font: 800 0.75rem var(--font-body);
}

.route-card__media--drawn { display: grid; place-items: center; }
.route-card__media--drawn .tone-glyph { width: 64px; height: 64px; opacity: 0.55; }

/* Beats the shared `.trips-ui svg` sizing rule, which would otherwise
   shrink the drawn route to an icon. */
.route-card__media .route-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-shape__line { fill: none; stroke: rgba(255, 255, 255, 0.62); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.route-shape__stop { fill: rgba(255, 255, 255, 0.82); }
.route-shape__end { fill: #fff; }

.route-card__days {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--c-navy);
  font: 800 0.78rem var(--font-body);
  box-shadow: 0 6px 16px rgba(4, 14, 30, 0.22);
}

.route-card__caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  min-width: 0;
}
.route-card__caption h3 {
  margin: 0 0 5px;
  font: 800 clamp(1.05rem, 1.5vw, 1.24rem)/1.2 var(--font-display);
  color: #fff;
}
.route-card__caption p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.84);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* space-between pins the actions to the bottom, so buttons line up across a
   row whether a route's meta wraps to one line or two. */
.route-card__body { padding: 16px 18px 18px; display: grid; gap: 14px; align-content: space-between; }

/* The route's own one-line description. Clamped so a long one cannot push the
   buttons of one card out of line with its neighbours. */
.route-card__summary {
  margin: 0;
  color: var(--c-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.route-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--c-muted);
}
.route-card__meta li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.route-card__meta svg { width: 16px; height: 16px; color: var(--c-accent); }

.route-card__actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;align-items:start; }
.route-card__action { display:grid;gap:6px;min-width:0; }
.route-card__action .country-btn { width:100%;min-height:44px;padding:12px 10px;white-space:normal; }
.route-card__action small { color:var(--c-muted);font-size:.75rem;line-height:1.35; }

.route-more { position:relative;grid-column:1 / -1;justify-self:end; }
.route-more summary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  min-height:44px;
  padding:10px 14px;
  border:1px solid var(--c-line);
  border-radius:11px;
  color:var(--c-muted);
  background:#fff;
  font-size:.82rem;
  font-weight:800;
  cursor:pointer;
  list-style:none;
}
.route-more summary::-webkit-details-marker { display:none; }
.route-more summary::after { content:"+";margin-left:8px;font-size:1rem;line-height:1; }
.route-more[open] summary::after { content:"−"; }
.route-more__menu { margin-top:6px;padding:7px;border:1px solid var(--c-line);border-radius:11px;background:#fff;box-shadow:0 10px 24px rgba(9,25,50,.12); }
.route-more__menu button { width:100%;min-height:44px;padding:9px 13px;border:0;border-radius:8px;color:var(--c-navy);background:#f5f8fc;font:800 .82rem var(--font-body);cursor:pointer;white-space:nowrap; }
.route-more__menu button:hover { background:var(--c-accent-soft);color:var(--c-accent-deep); }

.country-status { margin: 18px 0 0; font-weight: 700; color: var(--c-muted); }
.country-status.is-ok { color: #067a5b; }
.country-status.is-error { color: #c0392b; }

/* ---------- Places ---------- */

.country-filters {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
  padding: 16px 18px 18px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 6px 22px rgba(9, 25, 50, 0.06);
}

.country-filters > * { min-width: 0; }
.country-filters__mobile-summary { display:none; }
.country-filters__controls { display:grid;gap:14px; }
.country-filters__row { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }

.country-search {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 11px 15px;
  border: 1.5px solid var(--c-line);
  border-radius: 13px;
  background: #fff;
}
.country-search svg { width: 17px; height: 17px; color: var(--c-quiet); }
.country-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: 600 0.92rem var(--font-body);
  color: var(--c-ink);
}

/* A <select> sizes itself to its widest option, so region names have to be
   held inside the control rather than allowed to widen the row. */
.country-select { display: flex; align-items: center; flex: 0 1 250px; min-width: 0; }
.country-select select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 12px 15px;
  border: 1.5px solid var(--c-line);
  border-radius: 13px;
  background: #fff;
  font: 700 0.88rem var(--font-body);
  color: var(--c-ink);
  cursor: pointer;
  text-overflow: ellipsis;
}
/* The interest chips drive this control, so it stays in the page for the
   single filtering routine but is never shown twice. */
.country-select--interest { display: none; }

/* Chips wrap onto as many rows as they need, so no category is ever cut off.
   Only narrow phones fall back to a single scrolling row. */
.country-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.country-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1.5px solid var(--c-line);
  border-radius: 999px;
  background: #fff;
  font: 700 0.84rem var(--font-body);
  color: var(--c-muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.country-chip:hover { border-color: #c9d5e8; color: var(--c-ink); }
.country-chip small { font-weight: 700; opacity: 0.6; }
.country-chip.is-active {
  background: var(--c-navy);
  border-color: var(--c-navy);
  color: #fff;
  box-shadow: 0 6px 14px rgba(11, 26, 49, 0.24);
}
.country-chip.is-active small { opacity: 0.72; }

/* Four across on a large desktop, two on a tablet, one on a phone. */
.country-places {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.place-card {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 26px rgba(9, 25, 50, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.place-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(9, 25, 50, 0.15); }
.place-card.is-capped { display: none; }

/* The media is a button: the photograph opens Place Info like the title does. */
.place-card__media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  color: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.place-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.place-card:hover .place-card__media img { transform: scale(1.05); }
.place-card__media:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -3px; }

/* Elegant category fallback: the tone wash, its line-art glyph and the name. */
.place-card__drawn {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 14px;
}
.place-card__drawn::before,
.place-card__drawn::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.place-card__drawn::before {
  inset: 10% 7%;
  opacity: 0.16;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 46% 54% 58% 42% / 38% 43% 57% 62%;
  transform: rotate(-7deg);
}
.place-card__drawn::after {
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(28deg, transparent 48%, rgba(255,255,255,.32) 49%, transparent 51%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.65) 0 2px, transparent 3px);
  background-size: 48px 48px, 72px 72px;
}
.place-card__drawn .tone-glyph { width: 42px; height: 42px; opacity: 0.85; }
.place-card__drawn-country {
  font: 800 0.62rem/1 var(--font-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.place-card__drawn-name {
  max-width: 90%;
  font: 700 0.82rem/1.3 var(--font-body);
  text-align: center;
  color: rgba(255, 255, 255, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.place-card__drawn-location {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 90%;
  font: 650 0.68rem/1.2 var(--font-body);
  color: rgba(255, 255, 255, 0.76);
}
.place-card__drawn-location svg { width: 11px; height: 11px; }

.place-card__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--c-navy);
  font: 800 0.71rem var(--font-body);
  box-shadow: 0 4px 12px rgba(4, 14, 30, 0.18);
}

.place-card__time {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(6, 17, 34, 0.7);
  color: #fff;
  font: 700 0.72rem var(--font-body);
}
.place-card__time svg { width: 13px; height: 13px; }

/* space-between holds the action row to the foot of every card, so a short
   description and a long one still line up across a row. */
.place-card__body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 8px;
  align-content: space-between;
  grid-template-rows: auto auto 1fr auto;
}
.place-card__body h3 { margin: 0; font: 800 1.02rem/1.28 var(--font-body); color: var(--c-ink); }

.place-card__title {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.place-card__title:hover { color: var(--c-accent-deep); }

.place-card__where {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--c-muted);
}
.place-card__where svg { width: 14px; height: 14px; margin-top: 2px; flex: 0 0 auto; color: var(--c-accent); }
.place-card__where small { display: block; font-size: 0.76rem; font-weight: 600; color: var(--c-quiet); }

.place-card__summary {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--c-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.place-card__trust { margin:0;color:var(--c-quiet);font-size:.68rem;line-height:1.45; }
.place-card__trust a { color:inherit;text-underline-offset:2px; }

/* Every action is visible without hovering, on every screen size. */
.place-card__actions {
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid #eef2f8;
}

.place-card__info { width: 100%; }
.place-card__info svg { width: 15px; height: 15px; }

.place-card__quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }

.place-card__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 6px 4px;
  border: 1px solid var(--c-line);
  border-radius: 11px;
  background: #fff;
  font: 700 0.68rem/1.1 var(--font-body);
  color: var(--c-muted);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.place-card__action span:first-child { font-size: 0.95rem; line-height: 1; }
.place-card__action:hover { border-color: var(--c-accent); color: var(--c-accent-deep); background: var(--c-accent-soft); }
.place-card__action.is-active { border-color: var(--c-accent); color: var(--c-accent-deep); background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px rgba(197,111,43,.08); }
.place-card__action:disabled { cursor: wait; opacity: .58; }

/* More is written out deliberately: an ellipsis or a menu icon conceals the
   bucket-list route from people who do not already know its convention. */
.place-card__action--more span:first-child { font-size: 1.05rem; font-weight: 400; }
.country-bucket-menu,
.country-bucket-list-options { display: grid; gap: 9px; }
.country-bucket-menu .country-btn { width: 100%; justify-content: flex-start; }
.country-bucket-list-option { display: grid; gap: 3px; width: 100%; padding: 13px 14px; border: 1px solid var(--c-line); border-radius: 14px; color: var(--c-ink); background: #fff; text-align: left; cursor: pointer; }
.country-bucket-list-option:hover,
.country-bucket-list-option:focus-visible { border-color: var(--c-accent); background: var(--c-accent-soft); }
.country-bucket-list-option strong { font: 800 .94rem/1.2 var(--font-body); }
.country-bucket-list-option span,
.country-bucket-status { color: var(--c-muted); font-size: .82rem; }
.country-bucket-status { min-height: 1.2em; margin: 12px 0 0; }

.country-places__more { display: flex; justify-content: center; margin-top: 26px; }

.country-empty {
  margin-top: 20px;
  padding: 26px;
  border-radius: 18px;
  background: #fff;
  text-align: center;
  font-weight: 700;
  color: var(--c-muted);
}

/* ---------- Sticky mobile action ---------- */

.country-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
}
.country-sticky .country-btn { flex: 1 1 auto; }
.country-sticky .country-btn--ghost { flex: 0 0 auto; }

/* ---------- Dialogs ---------- */

.country-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 14, 29, 0.72);
  backdrop-filter: blur(6px);
}

.country-dialog__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88svh, 900px);
  display: grid;
  grid-template-rows: 1fr auto;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 40px 90px rgba(3, 12, 27, 0.5);
}

.country-dialog__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--c-navy);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(4, 14, 30, 0.24);
}

.country-dialog__body { overflow: auto; -webkit-overflow-scrolling: touch; }

.country-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--c-line);
  background: #f9fbff;
}
.country-dialog__actions > .country-btn { min-height:44px; }
.route-more--sheet { grid-column:auto;align-self:center;justify-self:auto; }
.route-more--sheet .route-more__menu { position:absolute;right:0;bottom:calc(100% + 6px);min-width:150px;margin:0;z-index:4; }

/* Route sheet */

.route-sheet { display: grid; gap: 18px; padding: 26px 24px 28px; }
.route-sheet__head { display: grid; gap: 6px; padding-right: 46px; }
.route-sheet__eyebrow { margin: 0; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent); }
.route-sheet__head h2 { margin: 0; font: 800 clamp(1.4rem, 3vw, 1.9rem)/1.12 var(--font-display); color: var(--c-ink); }
.route-sheet__path { margin: 0; color: var(--c-muted); font-weight: 600; }
.route-sheet__summary { margin: 0; color: var(--c-ink); line-height: 1.6; max-width: 62ch; }

/* Tall enough for Leaflet to reach the next zoom step on a north–south
   route: a short, wide box forces the whole region into view instead. */
.route-sheet__map { height: 340px; border-radius: 18px; overflow: hidden; background: #e8eef7; }

.route-sheet__notes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.route-sheet__notes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 13px;
  background: #fff7ec;
  color: #8a4b06;
  font-size: 0.87rem;
  font-weight: 600;
}
.route-sheet__notes svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }

.route-sheet__days { display: grid; gap: 14px; }

.route-day { padding: 16px; border-radius: 18px; background: #f6f9fe; }
.route-day__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.route-day__number {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--c-navy);
  color: #fff;
  font: 800 0.76rem var(--font-body);
}
.route-day__head h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--c-ink); }
.route-day__head p { margin: 2px 0 0; font-size: 0.82rem; color: var(--c-muted); }

.route-day__stops { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.route-day__stops li { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 12px; background: #fff; }
.route-day__index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-accent-soft);
  color: var(--c-accent-deep);
  font: 800 0.76rem var(--font-body);
}
.route-day__name { display: grid; gap: 1px; min-width: 0; font-size: 0.9rem; font-weight: 700; color: var(--c-ink); }
.route-day__name small { font-size: 0.76rem; font-weight: 600; color: var(--c-quiet); }

/* ---------- Travelling in this country ----------

   Reference reading rather than a catalogue, so the cards are quiet: no
   photography, no hover lift, and a column count that follows how many
   guidance groups a pack actually supplies. */

.country-guidance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr));
  gap: 16px;
  align-items: start;
}

.country-guidance__card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 22px 24px 24px;
  border: 1px solid var(--c-line);
  border-radius: 20px;
  background: #fff;
}

.country-guidance__card h3 {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
  font: 800 1.05rem/1.25 var(--font-display);
  color: var(--c-ink);
}

.country-guidance__item { display: grid; gap: 4px; min-width: 0; }

.country-guidance__label {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
}

.country-guidance__line { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--c-muted); }

.country-guidance__lines { margin: 0; padding-left: 18px; display: grid; gap: 5px; }
.country-guidance__lines li { font-size: 0.9rem; line-height: 1.55; color: var(--c-muted); }
.country-guidance__lines li::marker { color: var(--c-accent); }

/* ---------- Full-screen map ---------- */

.country-mapsheet {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--c-navy);
}

.country-mapsheet__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  color: #fff;
}
.country-mapsheet__bar p { margin: 0; font-weight: 800; }
.country-mapsheet__bar .country-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.country-mapsheet__map { width: 100%; height: 100%; }

.country-pin-wrap { background: none; border: 0; }
.country-pin {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font: 800 0.74rem var(--font-body);
  box-shadow: 0 3px 10px rgba(4, 14, 30, 0.4);
}

/* ---------- Responsive ---------- */

@media (max-width: 1120px) {
  .country-hero { min-height: 0; align-items: flex-start; }
  .country-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .country-map-panel { width: 100%; max-width: 620px; }
}

/* Once the map sits below the hero copy it spans the full column, so a
   landscape ratio keeps it in proportion. Capping the height instead would
   make Chrome narrow the frame rather than the panel. Phones keep the taller
   ratio further down, where a wide strip would show too little country. */
@media (min-width: 561px) and (max-width: 1120px) {
  .country-map-panel__frame { aspect-ratio: 16 / 9; }
}

/* Place cards: four across a large desktop, three on a laptop, two on a
   tablet, one on a phone — always a whole number, never a ragged last row. */
@media (max-width: 1180px) {
  .country-places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .country-fact { border-right: 0; }
  .country-facts { gap: 6px 0; padding: 16px 6px; }
  .country-planning { grid-template-columns:minmax(0,1fr) auto; }
  .country-planning__counts { grid-column:1 / -1;grid-row:2;justify-content:flex-start; }
}

@media (max-width: 900px) {
  .country-places { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .country,
  .country-sticky,
  .country-dialog,
  .country-mapsheet { --c-wrap: min(1320px, 100% - 32px); }
  .country-section__head { flex-direction: column; align-items: flex-start; }
  .country-map-panel { max-width: none; }
  .country-hero__highlights li { padding-right: 18px; margin-right: 18px; }
  /* The photograph sits behind the whole column on a phone, so the shade
     becomes vertical to keep every line readable without dulling the image. */
  .country-hero__shade {
    background:
      linear-gradient(180deg, rgba(5, 15, 31, 0.78) 0%, rgba(5, 15, 31, 0.66) 48%, rgba(5, 15, 31, 0.5) 100%);
  }
  .country-routes { grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); }
}

@media (max-width: 780px) {
  .country-sticky:not([hidden]) { display: flex; }
  body[data-page="country"] .ws-main { padding-bottom: 108px; }
  /* Clear of the sticky trip bar at the foot of the page. */
  .country-fav-notice { left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); width: auto; }
  .country-hero__actions .country-btn { flex: 1 1 240px; padding: 15px 20px; font-size: 0.95rem; }
  .country-hero__highlights { gap: 14px 0; }
  .country-hero__highlights li {
    flex: 1 1 calc(50% - 18px);
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
  }
  .country-places { gap: 16px; }
  .route-sheet { padding: 22px 18px 24px; }
  .route-sheet__map { height: 300px; }
  .country-dialog { padding: 0; }
  .country-dialog__panel { width: 100%; max-height: 100svh; border-radius: 0; }
}

@media (max-width: 560px) {
  .country-action-dialog { align-items:end;padding:0; }
  .country-action-dialog > section { width:100%;max-height:92dvh;padding:22px 16px max(20px,env(safe-area-inset-bottom));border-radius:22px 22px 0 0; }
  .country-action-dialog__actions { display:grid; }
  .country-action-dialog__actions .country-btn { width:100%;justify-content:center; }
  .country-action-dialog .trip-type-options { grid-template-columns:minmax(0,1fr); }
  .country-action-dialog .trip-type-card { min-height:76px; }
  body[data-page="country"] .ui-toast.country-action-toast { bottom:calc(82px + env(safe-area-inset-bottom,0px)); }
  .country,
  .country-sticky,
  .country-dialog,
  .country-mapsheet { --c-wrap: min(1320px, 100% - 24px); }
  .country-hero { padding-bottom: 96px; }
  .country-hero h1 { font-size: clamp(2.15rem, 10vw, 2.9rem); }
  .country-hero__lede { max-width: none; }
  .country-hero__actions .country-btn { flex: 1 1 100%; }
  .country-section-nav { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:6px; }
  .country-section-nav a { min-width:0;padding:9px 4px;font-size:.72rem;line-height:1.2; }
  /* Two per row keeps six facts to three tidy rows instead of a long column. */
  .country-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -64px; padding: 14px 4px; }
  .country-planning { grid-template-columns:minmax(0,1fr);gap:10px;margin-top:12px;padding:13px; }
  .country-planning__identity { flex-wrap:wrap; }
  .country-planning__identity strong { flex:1 1 100%;white-space:normal; }
  .country-planning__counts { grid-column:auto;grid-row:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%; }
  .country-planning__counts span { display:grid;place-items:center;gap:2px;padding:7px 4px;text-align:center;white-space:normal;line-height:1.2; }
  .country-planning__actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
  .country-planning__actions .country-btn { width:100%;padding:12px 8px; }
  .country-fact { padding: 8px 10px; gap: 8px; }
  .country-fact__icon { width: 30px; height: 30px; }
  .country-fact__icon svg { width: 15px; height: 15px; }
  .country-fact__label { font-size: 0.72rem; }
  .country-fact__value { font-size: 0.88rem; }
  .country-fact__note { font-size: 0.72rem; }
  .country-map-panel__frame { aspect-ratio: 4 / 3.4; min-height: 260px; }
  .country-places { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .place-card__body { padding: 13px 14px 15px; }
  .place-card__body h3 { font-size: 1rem; }
  .place-card__summary { -webkit-line-clamp: 2; }
  /* Only here do the chips become one scrolling row, so a narrow phone keeps
     the filter panel short without ever cutting a category off. */
  .country-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  .country-chips::-webkit-scrollbar { display: none; }
  .country-chip { flex: 0 0 auto; }
  /* Region and Reset share a row so the panel stays short on a phone. */
  .country-filters__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .country-search { grid-column: 1 / -1; }
  .country-select { flex: none; }
  .country-filters { display:block;padding:0; }
  .country-filters__mobile-summary { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:11px 13px;cursor:pointer;list-style:none; }
  .country-filters__mobile-summary::-webkit-details-marker { display:none; }
  .country-filters__mobile-summary::after { content:"+";font-size:1.2rem;font-weight:800; }
  .country-filters[open] .country-filters__mobile-summary::after { content:"−"; }
  .country-filters__mobile-summary span { min-width:0;overflow:hidden;color:var(--c-muted);font-size:.72rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap; }
  .country-filters__controls { padding:0 12px 13px; }
  .route-card__caption h3 { font-size: 1.05rem; }
  .route-card__actions { grid-template-columns:minmax(0,1fr); }
  .route-more { grid-column:auto;justify-self:stretch; }
  .route-more summary { width:100%; }
  .country-dialog__actions { display:grid;grid-template-columns:minmax(0,1fr); }
  .country-dialog__actions .country-btn,
  .country-dialog__actions .route-more,
  .country-dialog__actions .route-more summary { width:100%; }
  .route-more--sheet .route-more__menu { position:static;margin-top:6px; }
  .country-section__count { font-size: 0.8rem; }
}