/* ==========================================================
   IMISI FOUNDATION — GET INVOLVED HERO
   ========================================================== */

.get-involved-hero {
  --imisi-teal: #0a6970;
  --imisi-green: #0c9268;
  --imisi-lime: #bed639;
  --imisi-bone: #f4f1e8;

  position: relative;

  min-height: 100svh;
  height: 100svh;

  overflow: hidden;

  background: var(--imisi-teal);
  color: var(--imisi-bone);
}

/* ==========================================================
   MEDIA
   ========================================================== */

.get-involved-hero__media {
  position: absolute;
  inset: 0;

  overflow: hidden;
}

.get-involved-hero__image {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1.08);

  will-change: transform;
}

/* ==========================================================
   OVERLAY
   ========================================================== */

.get-involved-hero__overlay {
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(5, 47, 51, 0.82) 0%,
      rgba(5, 47, 51, 0.58) 42%,
      rgba(5, 47, 51, 0.24) 100%
    ),
    linear-gradient(
      0deg,
      rgba(5, 47, 51, 0.7) 0%,
      transparent 48%,
      rgba(5, 47, 51, 0.2) 100%
    );
}

/* ==========================================================
   INNER
   ========================================================== */

.get-involved-hero__inner {
  position: relative;
  z-index: 2;

  height: 100%;

  padding: clamp(120px, 15vh, 170px) 6vw 8vh;

  display: flex;
  flex-direction: column;
}

/* ==========================================================
   EYEBROW
   ========================================================== */

.get-involved-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;

  font-family: "Manrope", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;

  letter-spacing: 0.17em;
  text-transform: uppercase;

  color: var(--imisi-lime);
}

.get-involved-hero__eyebrow-line {
  width: 42px;
  height: 1px;

  background: var(--imisi-lime);

  transform-origin: left;
}

/* ==========================================================
   TITLE
   ========================================================== */

.get-involved-hero__title {
  width: min(1000px, 90%);

  margin: auto 0 0;

  font-family: "Marcellus", serif;
  font-size: clamp(5rem, 10.5vw, 11rem);
  font-weight: 400;

  line-height: 0.84;
  letter-spacing: -0.055em;

  color: var(--imisi-bone);
}

.get-involved-hero__title-line {
  display: block;

  overflow: hidden;
}

.get-involved-hero__title em {
  color: var(--imisi-lime);
  font-style: italic;
}

/* ==========================================================
   BOTTOM
   ========================================================== */

.get-involved-hero__bottom {
  display: grid;

  grid-template-columns: minmax(280px, 0.8fr) 1fr;

  gap: 50px;

  align-items: end;

  margin-top: 55px;
}

.get-involved-hero__intro {
  max-width: 430px;

  margin: 0;

  font-family: "Manrope", sans-serif;
  font-size: clamp(0.95rem, 1.25vw, 1.15rem);
  font-weight: 400;

  line-height: 1.7;

  color: rgba(244, 241, 232, 0.82);
}

.get-involved-hero__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 35px;

  font-family: "Manrope", sans-serif;
  font-size: 0.58rem;
  font-weight: 700;

  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: rgba(244, 241, 232, 0.55);
}

/* ==========================================================
   SCROLL
   ========================================================== */

.get-involved-hero__scroll {
  position: absolute;

  z-index: 5;

  right: 6vw;
  bottom: 7vh;

  display: flex;
  align-items: center;
  gap: 18px;

  font-family: "Manrope", sans-serif;
  font-size: 0.58rem;
  font-weight: 700;

  letter-spacing: 0.15em;
  text-transform: uppercase;

  color: rgba(244, 241, 232, 0.65);
}

.get-involved-hero__scroll-line {
  position: relative;

  width: 75px;
  height: 1px;

  background: rgba(244, 241, 232, 0.35);
}

.get-involved-hero__scroll-dot {
  position: absolute;

  top: 50%;
  left: 0;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: var(--imisi-lime);

  transform: translateY(-50%);
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 700px) {
  .get-involved-hero {
    min-height: 100svh;
    height: 100svh;
  }

  .get-involved-hero__inner {
    padding: 110px 5vw 80px;
  }

  .get-involved-hero__overlay {
    background:
      linear-gradient(90deg, rgba(5, 47, 51, 0.78), rgba(5, 47, 51, 0.4)),
      linear-gradient(0deg, rgba(5, 47, 51, 0.78), transparent 60%);
  }

  .get-involved-hero__title {
    width: 100%;

    margin-top: auto;

    font-size: clamp(4.3rem, 17vw, 7rem);
    line-height: 0.87;
  }

  .get-involved-hero__bottom {
    display: block;

    margin-top: 35px;
  }

  .get-involved-hero__intro {
    max-width: 330px;

    font-size: 0.9rem;
  }

  .get-involved-hero__meta {
    justify-content: flex-start;

    margin-top: 22px;

    font-size: 0.5rem;
  }

  .get-involved-hero__scroll {
    right: auto;
    left: 5vw;
    bottom: 25px;
  }

  .get-involved-hero__scroll-line {
    width: 55px;
  }
}