/* Country slideshow: visible country photo, readiness panel, project counts. */

/* --- Background photo: let the country actually show --------------------- */
.country-explorer-image {
  filter:saturate(1.02) contrast(1.04);
  transition:opacity 1.1s ease;
  animation:country-photo-drift 26s ease-in-out infinite alternate;
  will-change:opacity,transform;
}
.country-explorer-image.active { opacity:.95; }
.country-explorer-scrim {
  background:
    linear-gradient(90deg,rgba(3,16,23,.9) 0%,rgba(3,16,23,.62) 24%,rgba(3,16,23,.18) 52%,rgba(3,16,23,.5) 78%,rgba(3,16,23,.82) 100%),
    linear-gradient(0deg,rgba(3,15,22,.9),rgba(3,15,22,0) 42%,rgba(3,15,22,0) 78%,rgba(3,15,22,.55)),
    linear-gradient(135deg,color-mix(in srgb,var(--region-color,#A7B0C0) 14%,transparent),transparent 50%);
}
/* Slow drift on every layer, so the outgoing photo never snaps mid-fade. */
@keyframes country-photo-drift {
  from { transform:scale(1.04) translate3d(0,0,0); }
  to { transform:scale(1.1) translate3d(-1.5%,-1%,0); }
}

/* Glass card so the photo reads through it */
.hero-explorer.has-country-background .hero-info-card {
  background:linear-gradient(145deg,rgba(7,31,40,.66),rgba(3,17,24,.58));
  backdrop-filter:blur(16px) saturate(1.2);
}
[data-theme="light"] .hero-explorer.has-country-background .hero-info-card {
  background:linear-gradient(145deg,rgba(7,31,40,.7),rgba(3,17,24,.62));
}
.country-project-slide.active { animation:country-slide-in .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes country-slide-in {
  from { opacity:0; transform:translate3d(14px,0,0); }
  to { opacity:1; transform:none; }
}

/* --- Project count on the slide card ------------------------------------ */
.country-project-top { flex-wrap:wrap; }
.country-project-count {
  margin-left:auto;
  padding:3px 8px;
  border:1px solid color-mix(in srgb,var(--region-color,var(--cyan)) 45%,transparent);
  border-radius:99px;
  color:var(--region-color,var(--cyan));
  background:rgba(3,17,24,.4);
  white-space:nowrap;
}
.chapter-card-projects { color:var(--region-color,var(--cyan)); }

/* --- Readiness panel (right column) ------------------------------------- */
.hero-explorer .hero-side {
  grid-column:3;
  display:grid;
  gap:22px;
  align-content:start;
  padding-top:8px;
}
.hero-explorer .hero-side .hero-legend { grid-column:auto; padding:0; }

.country-readiness-panel {
  padding:16px 16px 14px;
  border:1px solid color-mix(in srgb,var(--region-color,var(--cyan)) 30%,rgba(255,255,255,.08));
  border-radius:18px;
  background:linear-gradient(160deg,rgba(7,31,40,.6),rgba(3,17,24,.5));
  backdrop-filter:blur(14px) saturate(1.2);
  color:#eaf8f4;
}
.country-readiness-panel:empty { display:none; }
.country-readiness-head { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:baseline; }
.country-readiness-head .eyebrow { grid-column:1 / -1; color:var(--region-color,var(--cyan)); }
.country-readiness-head strong {
  overflow:hidden;
  font-size:15px;
  text-overflow:ellipsis;
  white-space:nowrap;
  animation:readiness-in .45s ease both;
}
.country-readiness-score { color:rgba(226,246,242,.72); font:500 10px var(--font-mono); white-space:nowrap; }
.country-readiness-bar {
  grid-column:1 / -1;
  height:4px;
  margin-top:8px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.1);
}
.country-readiness-bar i {
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--region-color,var(--cyan));
  box-shadow:0 0 10px var(--region-color,var(--cyan));
  transform-origin:left center;
  transform:scaleX(var(--ready,0));
  animation:readiness-bar 1s .15s cubic-bezier(.2,.7,.2,1) both;
}

.country-readiness { display:grid; gap:4px; margin:14px 0 0; padding:0; list-style:none; }
.country-readiness li {
  display:grid;
  grid-template-columns:18px minmax(0,1fr);
  gap:1px 10px;
  align-items:center;
  padding:7px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.035);
  animation:readiness-in .5s cubic-bezier(.2,.7,.2,1) both;
  animation-delay:calc(.25s + var(--i,0) * 90ms);
}
.country-readiness li > span:not(.sr-only) {
  grid-column:2;
  color:rgba(226,246,242,.66);
  font:500 9px/1.2 var(--font-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.country-readiness strong {
  grid-column:2;
  overflow:hidden;
  font-size:13px;
  font-weight:500;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.country-readiness li > i {
  position:relative;
  grid-row:1 / span 2;
  width:16px;
  height:16px;
  border:1.5px solid var(--region-color,var(--cyan));
  border-radius:50%;
}
.country-readiness .ready > i {
  background:var(--region-color,var(--cyan));
  box-shadow:0 0 9px color-mix(in srgb,var(--region-color,var(--cyan)) 60%,transparent);
  animation:readiness-pop .4s ease both;
  animation-delay:calc(.45s + var(--i,0) * 90ms);
}
.country-readiness .ready > i::after {
  content:"";
  position:absolute;
  left:4.5px;
  top:1.5px;
  width:3.5px;
  height:7px;
  border:solid #04151d;
  border-width:0 1.8px 1.8px 0;
  transform:rotate(45deg);
}
.country-readiness .pending > i { border-style:dashed; opacity:.7; }
.country-readiness .pending strong { color:rgba(234,248,244,.7); }

@keyframes readiness-in {
  from { opacity:0; transform:translate3d(16px,0,0); }
  to { opacity:1; transform:none; }
}
@keyframes readiness-bar { from { transform:scaleX(0); } }
@keyframes readiness-pop {
  0% { transform:scale(.4); }
  70% { transform:scale(1.18); }
  100% { transform:scale(1); }
}

@media (max-width:1120px) {
  .hero-explorer .hero-side { grid-column:1 / -1; grid-template-columns:minmax(0,560px); }
  .hero-explorer .hero-side .hero-legend { grid-template-columns:repeat(2,max-content); }
}
@media (max-width:820px) {
  .country-explorer-image.active { opacity:.8; }
  .hero-explorer .hero-side { grid-column:auto; grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .country-explorer-image,
  .country-project-slide.active,
  .country-readiness li,
  .country-readiness .ready > i,
  .country-readiness-bar i,
  .country-readiness-head strong { animation:none; }
}

/* --- Slide card carries the country photo -------------------------------- */
.hero-explorer .hero-info-card.has-card-photo { position:relative; isolation:isolate; overflow:hidden; }
.hero-explorer .hero-info-card.has-card-photo::before,
.hero-explorer .hero-info-card.has-card-photo::after { content:""; position:absolute; inset:0; pointer-events:none; }
.hero-explorer .hero-info-card.has-card-photo::before {
  z-index:-2;
  background:var(--card-photo) center / cover no-repeat;
  transform:scale(1.04);
  transition:background-image .8s ease;
}
.hero-explorer .hero-info-card.has-card-photo::after {
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(4,18,26,.42) 0%,rgba(4,18,26,.7) 42%,rgba(4,18,26,.9) 100%),
    linear-gradient(90deg,rgba(4,18,26,.5),transparent 75%);
}
.hero-explorer .hero-info-card.has-card-photo .country-project-slide h3,
.hero-explorer .hero-info-card.has-card-photo .country-project-slide p { text-shadow:0 1px 12px rgba(0,0,0,.45); }

/* --- Legible type on country cards and buttons ---------------------------
   Display face for names, body face for every supporting line. Mono only
   survives in the slide counter, where tabular digits help. */
.country-project-top,
.country-project-count,
.country-slide-hint,
.country-project-slide .eyebrow,
.country-project-slide .status-dot,
.country-project-slide .tag,
.country-readiness li > span:not(.sr-only),
.country-readiness-score,
.hero-sidebar-card small,
.network-chip small,
.country-card-stats { font-family:var(--font-body); }

.hero-explorer .country-project-top { font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; color:rgba(232,246,243,.86); }
.hero-explorer .country-project-index { font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; }
.hero-explorer .country-project-country { font-size:13px; }
.country-project-count { font-size:12px; font-weight:600; letter-spacing:0; text-transform:none; }
.country-project-slide .eyebrow { font-size:11px; font-weight:700; letter-spacing:.12em; }
.country-project-slide .status-dot { font-size:12.5px; font-weight:600; }
.country-project-slide .tag { padding:6px 11px; font-size:12px; font-weight:700; letter-spacing:.01em; }
.hero-explorer .country-slide-hint { max-width:none; font-size:12.5px; font-weight:500; color:rgba(226,246,242,.72); }
.country-readiness li > span:not(.sr-only) { font-size:11px; font-weight:700; letter-spacing:.08em; }
.country-readiness-score { font-size:12px; font-weight:600; }

/* Country buttons in the network list */
.hero-sidebar-card-grid { gap:9px; }
.hero-sidebar-card.chapter-card { gap:12px; padding:12px 14px; }
.hero-sidebar-card.chapter-card .hero-sidebar-icon { font-size:20px; }
.hero-sidebar-card strong { font:600 15px/1.25 var(--font-display); letter-spacing:-.005em; }
.hero-sidebar-card small { margin-top:4px; font-size:12.5px; font-weight:500; line-height:1.35; letter-spacing:0; color:rgba(226,240,238,.76); }
.hero-sidebar-card small.chapter-card-projects {
  display:inline-block;
  margin-top:6px;
  padding:2px 8px;
  border-radius:99px;
  background:color-mix(in srgb,var(--region-color,var(--cyan)) 16%,transparent);
  color:var(--region-color,var(--cyan));
  font-size:11.5px;
  font-weight:700;
}
.hero-sidebar-heading { font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.1em; }
.hero-pulse-group > .eyebrow { font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.12em; }
.network-chip strong { font:600 14px/1.25 var(--font-display); }
.network-chip small { font-size:12px; font-weight:500; color:var(--muted); }
.country-card-stats { font-size:12.5px; font-weight:600; }

[data-theme="light"] .hero-explorer:not(.has-country-background) .hero-sidebar-card small:not(.chapter-card-projects) { color:#47615d; }

@media (max-width:1280px) { .hero-sidebar-card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:980px) { .hero-sidebar-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .hero-sidebar-card-grid { grid-template-columns:1fr; } }