/* Homepage practice launcher, Explore highlights, and resource shortcuts */

.home-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.25rem, 7vw, 5.25rem);
}

.home-hero .hero__inner {
  position: relative;
  z-index: 1;
}

.home-hero .lede {
  max-width: 48rem;
}

.home-practice-launcher {
  margin-top: 2rem;
}

.home-practice-launcher h2 {
  margin: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.home-practice-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.home-practice-button {
  min-width: 7rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.9rem;
}

.home-hero__explore {
  margin-top: 1rem;
}

.home-latest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

.home-latest-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}

.home-latest-card h3 {
  margin-top: 0;
  font-size: clamp(1.2rem, 1.7vw, 1.45rem);
}

.home-section-action {
  margin-top: 1.5rem;
}

#home-explore .section-heading {
  margin-left: auto;
  text-align: right;
}

#home-explore .home-section-action {
  text-align: right;
}

/* Desktop-only Explore atmosphere: visible on the left, quiet behind right-aligned copy. */
@media screen and (min-width: 64rem) {
  #home-explore {
    background-image:
      linear-gradient(
        90deg,
        rgb(8 14 22 / 0.35) 0%,
        rgb(8 14 22 / 0.45) 18%,
        rgb(8 14 22 / 0.64) 34%,
        rgb(8 14 22 / 0.82) 48%,
        rgb(8 14 22 / 0.94) 60%,
        rgb(8 14 22 / 0.985) 72%,
        rgb(8 14 22) 100%
      ),
      linear-gradient(
        180deg,
        rgb(8 14 22 / 0.72) 0%,
        rgb(8 14 22 / 0.20) 14%,
        rgb(8 14 22 / 0.05) 50%,
        rgb(8 14 22 / 0.24) 86%,
        rgb(8 14 22 / 0.80) 100%
      ),
      url("/assets/home/explore/certhappens-explore-background-1280x720.webp");
    background-position: center, center, left center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-size: 100% 100%, 100% 100%, auto 100%;
  }

  @supports (
    background-image:
      image-set(
        url("/assets/home/explore/certhappens-explore-background-1280x720.avif") type("image/avif"),
        url("/assets/home/explore/certhappens-explore-background-1280x720.webp") type("image/webp")
      )
  ) {
    #home-explore {
      background-image:
        linear-gradient(
          90deg,
          rgb(8 14 22 / 0.35) 0%,
          rgb(8 14 22 / 0.45) 18%,
          rgb(8 14 22 / 0.64) 34%,
          rgb(8 14 22 / 0.82) 48%,
          rgb(8 14 22 / 0.94) 60%,
          rgb(8 14 22 / 0.985) 72%,
          rgb(8 14 22) 100%
        ),
        linear-gradient(
          180deg,
          rgb(8 14 22 / 0.72) 0%,
          rgb(8 14 22 / 0.20) 14%,
          rgb(8 14 22 / 0.05) 50%,
          rgb(8 14 22 / 0.24) 86%,
          rgb(8 14 22 / 0.80) 100%
        ),
        image-set(
          url("/assets/home/explore/certhappens-explore-background-1280x720.avif") type("image/avif"),
          url("/assets/home/explore/certhappens-explore-background-1280x720.webp") type("image/webp")
        );
    }
  }
}

@media screen and (min-width: 90rem) {
  #home-explore {
    background-image:
      linear-gradient(
        90deg,
        rgb(8 14 22 / 0.35) 0%,
        rgb(8 14 22 / 0.45) 18%,
        rgb(8 14 22 / 0.64) 34%,
        rgb(8 14 22 / 0.82) 48%,
        rgb(8 14 22 / 0.94) 60%,
        rgb(8 14 22 / 0.985) 72%,
        rgb(8 14 22) 100%
      ),
      linear-gradient(
        180deg,
        rgb(8 14 22 / 0.72) 0%,
        rgb(8 14 22 / 0.20) 14%,
        rgb(8 14 22 / 0.05) 50%,
        rgb(8 14 22 / 0.24) 86%,
        rgb(8 14 22 / 0.80) 100%
      ),
      url("/assets/home/explore/certhappens-explore-background-1600x900.webp");
  }

  @supports (
    background-image:
      image-set(
        url("/assets/home/explore/certhappens-explore-background-1600x900.avif") type("image/avif"),
        url("/assets/home/explore/certhappens-explore-background-1600x900.webp") type("image/webp")
      )
  ) {
    #home-explore {
      background-image:
        linear-gradient(
          90deg,
          rgb(8 14 22 / 0.35) 0%,
          rgb(8 14 22 / 0.45) 18%,
          rgb(8 14 22 / 0.64) 34%,
          rgb(8 14 22 / 0.82) 48%,
          rgb(8 14 22 / 0.94) 60%,
          rgb(8 14 22 / 0.985) 72%,
          rgb(8 14 22) 100%
        ),
        linear-gradient(
          180deg,
          rgb(8 14 22 / 0.72) 0%,
          rgb(8 14 22 / 0.20) 14%,
          rgb(8 14 22 / 0.05) 50%,
          rgb(8 14 22 / 0.24) 86%,
          rgb(8 14 22 / 0.80) 100%
        ),
        image-set(
          url("/assets/home/explore/certhappens-explore-background-1600x900.avif") type("image/avif"),
          url("/assets/home/explore/certhappens-explore-background-1600x900.webp") type("image/webp")
        );
    }
  }
}

@media screen and (min-width: 120rem) {
  #home-explore {
    background-image:
      linear-gradient(
        90deg,
        rgb(8 14 22 / 0.35) 0%,
        rgb(8 14 22 / 0.45) 18%,
        rgb(8 14 22 / 0.64) 34%,
        rgb(8 14 22 / 0.82) 48%,
        rgb(8 14 22 / 0.94) 60%,
        rgb(8 14 22 / 0.985) 72%,
        rgb(8 14 22) 100%
      ),
      linear-gradient(
        180deg,
        rgb(8 14 22 / 0.72) 0%,
        rgb(8 14 22 / 0.20) 14%,
        rgb(8 14 22 / 0.05) 50%,
        rgb(8 14 22 / 0.24) 86%,
        rgb(8 14 22 / 0.80) 100%
      ),
      url("/assets/home/explore/certhappens-explore-background-1920x1080.webp");
  }

  @supports (
    background-image:
      image-set(
        url("/assets/home/explore/certhappens-explore-background-1920x1080.avif") type("image/avif"),
        url("/assets/home/explore/certhappens-explore-background-1920x1080.webp") type("image/webp")
      )
  ) {
    #home-explore {
      background-image:
        linear-gradient(
          90deg,
          rgb(8 14 22 / 0.35) 0%,
          rgb(8 14 22 / 0.45) 18%,
          rgb(8 14 22 / 0.64) 34%,
          rgb(8 14 22 / 0.82) 48%,
          rgb(8 14 22 / 0.94) 60%,
          rgb(8 14 22 / 0.985) 72%,
          rgb(8 14 22) 100%
        ),
        linear-gradient(
          180deg,
          rgb(8 14 22 / 0.72) 0%,
          rgb(8 14 22 / 0.20) 14%,
          rgb(8 14 22 / 0.05) 50%,
          rgb(8 14 22 / 0.24) 86%,
          rgb(8 14 22 / 0.80) 100%
        ),
        image-set(
          url("/assets/home/explore/certhappens-explore-background-1920x1080.avif") type("image/avif"),
          url("/assets/home/explore/certhappens-explore-background-1920x1080.webp") type("image/webp")
        );
    }
  }
}

.home-resource-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}


@media screen and (min-width: 49rem) {
  .home-hero {
    background-image:
      linear-gradient(
        90deg,
        rgb(8 14 22 / 0.99) 0%,
        rgb(8 14 22 / 0.96) 36%,
        rgb(8 14 22 / 0.78) 54%,
        rgb(8 14 22 / 0.3) 72%,
        rgb(8 14 22 / 0.06) 100%
      ),
      url("/assets/home/hero/certhappens-home-hero-1280x720.webp");
    background-position: center, right center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 100%, auto 100%;
  }

  @supports (
    background-image:
      image-set(
        url("/assets/home/hero/certhappens-home-hero-1280x720.avif") type("image/avif"),
        url("/assets/home/hero/certhappens-home-hero-1280x720.webp") type("image/webp")
      )
  ) {
    .home-hero {
      background-image:
        linear-gradient(
          90deg,
          rgb(8 14 22 / 0.99) 0%,
          rgb(8 14 22 / 0.96) 36%,
          rgb(8 14 22 / 0.78) 54%,
          rgb(8 14 22 / 0.3) 72%,
          rgb(8 14 22 / 0.06) 100%
        ),
        image-set(
          url("/assets/home/hero/certhappens-home-hero-1280x720.avif") type("image/avif"),
          url("/assets/home/hero/certhappens-home-hero-1280x720.webp") type("image/webp")
        );
    }
  }
}

@media screen and (min-width: 90rem) {
  .home-hero {
    background-image:
      linear-gradient(
        90deg,
        rgb(8 14 22 / 0.99) 0%,
        rgb(8 14 22 / 0.96) 36%,
        rgb(8 14 22 / 0.78) 54%,
        rgb(8 14 22 / 0.3) 72%,
        rgb(8 14 22 / 0.06) 100%
      ),
      url("/assets/home/hero/certhappens-home-hero-1600x900.webp");
  }

  @supports (
    background-image:
      image-set(
        url("/assets/home/hero/certhappens-home-hero-1600x900.avif") type("image/avif"),
        url("/assets/home/hero/certhappens-home-hero-1600x900.webp") type("image/webp")
      )
  ) {
    .home-hero {
      background-image:
        linear-gradient(
          90deg,
          rgb(8 14 22 / 0.99) 0%,
          rgb(8 14 22 / 0.96) 36%,
          rgb(8 14 22 / 0.78) 54%,
          rgb(8 14 22 / 0.3) 72%,
          rgb(8 14 22 / 0.06) 100%
        ),
        image-set(
          url("/assets/home/hero/certhappens-home-hero-1600x900.avif") type("image/avif"),
          url("/assets/home/hero/certhappens-home-hero-1600x900.webp") type("image/webp")
        );
    }
  }
}

@media screen and (min-width: 120rem) {
  .home-hero {
    background-image:
      linear-gradient(
        90deg,
        rgb(8 14 22 / 0.99) 0%,
        rgb(8 14 22 / 0.96) 36%,
        rgb(8 14 22 / 0.78) 54%,
        rgb(8 14 22 / 0.3) 72%,
        rgb(8 14 22 / 0.06) 100%
      ),
      url("/assets/home/hero/certhappens-home-hero-1920x1080.webp");
  }

  @supports (
    background-image:
      image-set(
        url("/assets/home/hero/certhappens-home-hero-1920x1080.avif") type("image/avif"),
        url("/assets/home/hero/certhappens-home-hero-1920x1080.webp") type("image/webp")
      )
  ) {
    .home-hero {
      background-image:
        linear-gradient(
          90deg,
          rgb(8 14 22 / 0.99) 0%,
          rgb(8 14 22 / 0.96) 36%,
          rgb(8 14 22 / 0.78) 54%,
          rgb(8 14 22 / 0.3) 72%,
          rgb(8 14 22 / 0.06) 100%
        ),
        image-set(
          url("/assets/home/hero/certhappens-home-hero-1920x1080.avif") type("image/avif"),
          url("/assets/home/hero/certhappens-home-hero-1920x1080.webp") type("image/webp")
        );
    }
  }
}

@media screen and (max-width: 48rem) {
  .home-hero {
    padding-block: 2.75rem 2.5rem;
  }

  .home-practice-launcher {
    margin-top: 1.75rem;
  }

  .home-practice-buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-practice-button {
    width: 100%;
    min-width: 0;
  }

  #home-certifications .section-heading,
  #home-explore .section-heading,
  #home-references .section-heading {
    margin-bottom: 1.25rem;
  }

  #home-certifications .section-heading h2,
  #home-explore .section-heading h2,
  #home-references .section-heading h2 {
    font-size: clamp(2.2rem, 8.8vw, 2.8rem);
    line-height: 1.08;
  }

  #home-certifications .card-grid,
  .home-latest-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  #home-certifications .card,
  .home-latest-card {
    display: block;
    min-width: 0;
    padding: 1.25rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  #home-certifications .card + .card,
  .home-latest-card + .home-latest-card {
    border-top: 1px solid rgb(154 177 204 / 0.14);
  }

  #home-certifications .card__meta {
    display: none;
  }

  #home-certifications .card h3,
  .home-latest-card h3 {
    margin: 0 0 0.45rem;
    font-size: clamp(1.25rem, 6.4vw, 1.7rem);
    line-height: 1.12;
  }

  #home-certifications .card p:last-child,
  .home-latest-card p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.65;
  }

  .home-section-action {
    margin-top: 1.1rem;
  }

  .home-resource-links {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .home-resource-links .button {
    width: 100%;
  }
}