.country-hero {
  position: relative;
  isolation: isolate;
  min-height: 570px;
  margin-top: 34px;
  padding: clamp(42px, 6vw, 78px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 36px;
  background: #07162e;
  color: #fff;
  box-shadow: 0 32px 90px rgba(8,23,47,.24);
}

.country-hero-media {
  position: absolute;
  z-index: -4;
  inset: 0 0 0 38%;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 2px;
  background: #07162e;
}

.country-hero-media img {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: cover;
  object-position: 50% 28%;
  filter: saturate(.92) contrast(1.06);
}

.country-hero-media img:nth-child(2),
.country-hero-media img:nth-child(4) { transform: translateY(6%); }

.country-hero-shade {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(90deg,#07162e 0%,rgba(7,22,46,.98) 29%,rgba(7,22,46,.78) 53%,rgba(7,22,46,.22) 100%),
    linear-gradient(0deg,rgba(7,22,46,.9) 0%,transparent 58%),
    linear-gradient(145deg,rgba(var(--country-rgb,0,56,168),.25),transparent 52%);
}

.country-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: radial-gradient(circle at 77% 18%,rgba(var(--country-rgb,0,56,168),.2),transparent 38%);
  pointer-events: none;
}

.country-hero::after {
  content: attr(data-country-name);
  position: absolute;
  z-index: -1;
  right: 28px;
  bottom: 18px;
  color: rgba(255,255,255,.11);
  font-size: clamp(54px,8vw,116px);
  font-weight: 950;
  line-height: .8;
  letter-spacing: -.07em;
  text-align: right;
  text-transform: uppercase;
  pointer-events: none;
}

.country-hero .flagline {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 8px;
  border-radius: 36px 36px 0 0;
}

.country-hero-content { position: relative; z-index: 1; max-width: 920px; }

.country-identity {
  display: grid;
  width: fit-content;
  max-width: 100%;
  padding: 13px 17px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  background: rgba(7,22,46,.58);
  box-shadow: 0 14px 36px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
}

.country-identity small {
  color: rgba(255,255,255,.68);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.country-identity strong {
  margin-top: 4px;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -.04em;
}

.country-identity span {
  margin-top: 6px;
  color: rgba(255,255,255,.62);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.country-hero .eyebrow { margin-top: 34px; color: rgba(255,255,255,.7); }
.country-hero h1 { position: relative; z-index: 1; margin-bottom: 28px; color: #fff; text-shadow: 0 5px 28px rgba(0,0,0,.22); }
.country-hero h1 span { color: var(--country-accent,var(--red)); }
.country-hero .hero-copy { position: relative; z-index: 1; align-items: center; }
.country-hero p { color: rgba(255,255,255,.76); }
.country-hero .metric {
  background: rgba(7,22,46,.58);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 12px 32px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.country-hero .metric b { color: #fff; }
.country-hero .metric small { color: rgba(255,255,255,.62); }

@media (max-width: 950px) {
  .country-hero { min-height: 600px; }
  .country-hero-media { inset: 0; opacity: .78; }
  .country-hero-shade { background:linear-gradient(90deg,rgba(7,22,46,.98),rgba(7,22,46,.72)),linear-gradient(0deg,#07162e 0%,transparent 72%); }
}

@media (max-width: 700px) {
  .country-hero {
    min-height: 620px;
    margin-top: 18px;
    padding: 30px 20px 26px;
    border-radius: 26px;
  }
  .country-hero .flagline { border-radius: 26px 26px 0 0; }
  .country-hero-media { inset: 0 0 42% 0; grid-template-columns:repeat(3,minmax(0,1fr)); }
  .country-hero-media img:nth-child(n+4) { display:none; }
  .country-hero-media img:nth-child(2) { transform:none; }
  .country-hero-shade {
    background:
      linear-gradient(0deg,#07162e 4%,rgba(7,22,46,.96) 38%,rgba(7,22,46,.26) 100%),
      linear-gradient(90deg,rgba(7,22,46,.52),transparent),
      linear-gradient(145deg,rgba(var(--country-rgb,0,56,168),.22),transparent 60%);
  }
  .country-identity { padding: 10px 13px; border-radius: 13px; }
  .country-identity strong { font-size: 17px; }
  .country-identity span { display:none; }
  .country-hero .eyebrow { margin-top: 112px; }
  .country-hero h1 { margin: 10px 0 20px; font-size: clamp(48px,16vw,68px); }
  .country-hero .hero-copy { gap:20px; }
  .country-hero::after { right:16px; bottom:14px; font-size:52px; }
}

@media (max-width: 450px) {
  .country-hero { min-height: 600px; }
  .country-hero .eyebrow { margin-top: 96px; }
  .country-hero h1 { font-size: 47px; }
}
