/* Generic hero (older style) */
.hero{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow);

  /* NEW: keep a consistent 3:2 shape everywhere */
  aspect-ratio: 3 / 2;
  width: 100%;
}

/* Make the image actually fill that box */
.hero img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 50%; /* adjust per-image if needed */
  opacity: .9;
}

/* Gradient label at the bottom */
.hero .overlay{
  position: absolute;
  inset: auto 0 0 0;
  padding: 36px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  color: #fff;
}

.hero .overlay h2{
  margin: 0;
  font-size: 2rem;
}

.hero .overlay p{
  margin: .25rem 0 0;
  font-size: 1.25rem;
}

/* -------------------------------------------------- */
/* Country hero (hero2) – now using the same approach */
/* -------------------------------------------------- */

.hero2{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow);
  background: #000;
  border: 1px solid var(--border);
  margin: 18px 0 10px;

  /* OLD: height: clamp(260px, 42vh, 460px);  (caused odd crops)
     NEW: fixed aspect ratio matching your source images */
  aspect-ratio: 3 / 2;
  width: 100%;
  max-width: 1200px;   /* optional – keeps them from getting gigantic */
  margin-inline: auto; /* centre in the page */
}

.hero2 > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 45%; /* raise or lower focal area */
  display: block;
  filter: saturate(1.02) contrast(1.02) brightness(.95);
  opacity: .92;
}

.hero2 .label{
  position: absolute;
  inset: auto 16px 14px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  padding: 18px 16px;
  border-radius: 12px;
  color: #fff;
}

.hero2 .label h2{
  margin: 0;
  font-size: clamp(20px, 3.2vw, 30px);
}

/* Chips under hero */
.chip{
  display: inline-block;
  margin-top: 6px;
  padding: 6px 10px;
  border: 1px solid var(--chipBorder);
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  font-size: 13px;
}