/* hero banner */
.hero-banner-module {
  --scrollingThreshold: 0;
  --banner-bottom-threshold: 30px;
  --banner-bottom-reduce: 150px;
  --banner-height: calc(100vh - var(--header-height) - var(--banner-bottom-threshold));
  --left-content-width: 500px;
  --right-content-width: 830px;
  --right-col-width: 350px;
  position: relative;
  height: var(--banner-height);
}

.hero-banner {
  height: 100%;
  position: relative;
}

.hero-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.hero-bg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
  height: 100%;
  display: grid;
  align-items: center;
  grid-template-columns: 1fr;
  margin-bottom: var(--sp10);
}

.hero-content:has(.hero-content-right) {
  display: grid;
  grid-template-columns: var(--left-content-width) 1fr;
  width: 100%;
}

.hero-content-right {
  display: flex;
  justify-content: flex-end;
}

.hero-content-right .country-data-block {
  max-width: var(--right-content-width);
  width: 100%;
}

.hero-content-right .grid-layout-block {
  --grid-template-columns: 1fr var(--right-col-width);
}

/* parallax */
.parallax .hero-image {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: calc(100vh - var(--header-height) - var(--banner-bottom-threshold));
}

.hero-banner-module:has(.parallax),
.parallax.hero-banner,
.parallax .hero-content {
  height: auto;
  min-height: 100%;
}

.padding-around .parallax .hero-image {
  max-width: calc(100% - (2 * var(--arround-padding)));
}

.hero-banner-module:has(.parallax) {
  min-height: calc(100vh - var(--header-height) - var(--banner-bottom-threshold));
}

.parallax.hero-banner {
  height: 100%;
  min-height: calc(100vh - var(--header-height) - var(--banner-bottom-threshold));
  display: flex;
  width: 100%;
}

.parallax .hero-content {
  width: 100%;
}

.pin-spacer {
  z-index: 2 !important;
}

.hero-banner .bottom-radiouses {
  display: none;
}

/* response */
@media only screen and (min-width: 992px) and (max-width: 1550px) {

  [lang="fr"]:has(.country-name[data-code="CAF"]) .hero-content-left .hero-title,
  [lang="fr"]:has(.country-name[data-code="COD"]) .hero-content-left .hero-title {
    font-size: 32px;
  }

  [lang="fr"]:has(.country-name[data-code="CAF"]) .country-name.selected-field-name {
    width: min-content;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1500px) {
  [lang="fr"]:has(.country-name[data-code="COD"]) .country-name.selected-field-name {
    width: min-content;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1500px) {
  .hero-content-left .hero-title {
    font-size: 40px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1300px) {
  html:not([lang='en']) .hero-banner-module {
    --left-content-width: 300px;
  }
}

@media only screen and (min-width: 1201px) {

  .hero-banner,
  .main-container {
    overflow: unset;
  }

  .country-scorecard-block {
    align-self: flex-start;
    /* position: sticky;
    top: calc(var(--header-height) + 20px);
 */
    transition: top 0.2s linear 0s;
    overflow: unset;
  }

  .hero-text.hero-content-left {
    align-self: flex-start;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 0;
  }

  /* banner-scroll-area */
  .banner-scroll-area {
    max-height: calc(100vh - var(--header-height) - var(--banner-bottom-reduce) - var(--banner-bottom-threshold));
    overflow: hidden;
  }

  .banner-scroll-area-inner {
    transition: transform 0.2s linear 0s;
  }

  .hero-content {
    margin-bottom: var(--sp6);
  }

  /* gsap */
  .padding-around .pin-spacer .parallax .hero-image {
    max-width: 100%;
  }

  .parallax .hero-image {
    position: absolute;
    top: 0;
    max-width: none !important;
  }

}

@media only screen and (min-width: 1201px) and (max-height: 850px) {
  .hero-banner-module {
    --banner-bottom-reduce: 160px;
  }
}

@media only screen and (min-width: 1201px) and (max-height: 700px) {

  .hero-banner {
    padding-top: var(--sp9);
    padding-bottom: var(--sp9);
  }

  .hero-banner-module {
    --banner-bottom-reduce: 135px;
    --sp6: 15px;
    --sp7: 20px;
    --sp9: 30px;
  }

  .hero-banner-module .score-item-link .icn-btn-item,
  .hero-banner-module .score-item-value {
    --fs-34: 28px;
    height: 50px;
    width: 50px;
  }

  .hero-banner-module .hero-content-right {
    --fs-50: var(--fs-48);
  }

}

@media only screen and (min-width: 1201px) and (max-height:650px) {
  .hero-banner-module {
    --banner-bottom-reduce: 110px;
    --fs-14: 13px;
    --sp5: 12px;
    --sp6: 13px;
    --sp7: 13px;
    --sp9: 20px;
  }

  .hero-banner-module .score-item-link .icn-btn-item,
  .hero-banner-module .score-item-value {
    --fs-34: 22px;
    height: 40px;
    width: 40px;
  }

  .hero-banner-module .hero-content-right {
    --fs-50: var(--fs-46);
  }

  .hero-banner-module .score-item-link {
    gap: 20px;
  }

  .hero-banner-module .scorecard-section ul {
    font-size: 14px;
  }

  .hero-banner-module .scorecard-section .li-separation-border {
    --min-height: 40px;
  }

  .hero-banner-module .scorecard-section .li-separation-border {
    --min-height: 50px;
    --li-py: var(--sp2);
    --li-px: var(--sp2);
  }
}