/* Programs page hero and card treatment based on the approved classroom mockup. */

.roots-programs-page .roots-programs-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(34rem, 57vw, 44rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 0.3rem solid var(--roots-page-gold);
  background: var(--roots-page-cream);
}

.roots-programs-hero-image {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
}

.roots-programs-hero-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(255, 250, 240, 0.99) 0%,
      rgba(255, 250, 240, 0.97) 24%,
      rgba(255, 250, 240, 0.84) 37%,
      rgba(255, 250, 240, 0.48) 49%,
      rgba(255, 250, 240, 0.08) 64%,
      transparent 76%
    ),
    linear-gradient(0deg, rgba(6, 79, 51, 0.2), transparent 30%);
}

.roots-programs-hero-grid {
  display: flex;
  min-height: clamp(34rem, 57vw, 44rem);
  align-items: center;
  padding-block: clamp(4rem, 7vw, 6.5rem);
}

.roots-programs-hero-copy {
  width: min(45rem, 48%);
  max-width: 45rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.roots-programs-page .roots-programs-hero .roots-inner-eyebrow {
  position: relative;
  width: fit-content;
  margin-bottom: 1.4rem;
  padding-bottom: 0.8rem;
  color: var(--roots-page-green-deep);
  letter-spacing: 0.13em;
}

.roots-programs-page .roots-programs-hero .roots-inner-eyebrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 7rem;
  height: 0.2rem;
  background: var(--roots-page-gold);
}

.roots-programs-page .roots-programs-hero h1 {
  max-width: 11ch;
  font-size: clamp(3.75rem, 6.2vw, 6.6rem);
  line-height: 0.9;
}

.roots-programs-page .roots-programs-hero h1 span {
  display: block;
  margin-top: 0.09em;
  color: var(--roots-page-gold);
}

.roots-programs-page .roots-programs-hero .roots-inner-lead {
  max-width: 37rem;
  margin-top: 1.55rem;
  color: #25352d;
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  font-weight: 500;
  line-height: 1.68;
}

.roots-programs-page .roots-programs-hero .roots-inner-actions {
  margin-top: 1.8rem;
}

.roots-programs-page .roots-programs-hero .roots-inner-button {
  min-height: 3.35rem;
  padding-inline: 1.35rem;
  box-shadow: 0 8px 18px rgba(6, 79, 51, 0.12);
}

.roots-programs-page #program-list {
  position: relative;
  padding-top: clamp(3.8rem, 5.6vw, 5.7rem);
  background:
    radial-gradient(circle at 92% 4%, rgba(233, 163, 0, 0.07), transparent 20rem),
    var(--roots-page-paper);
}

.roots-programs-page #program-list::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--roots-page-border);
}

.roots-programs-page .roots-inner-section-heading {
  margin-bottom: 2.4rem;
}

.roots-programs-page .roots-inner-section-heading h2 {
  max-width: none;
  color: var(--roots-page-green-deep);
  font-size: clamp(2.8rem, 4.5vw, 4.75rem);
  letter-spacing: -0.045em;
}

.roots-programs-page .roots-inner-section-heading > p {
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.75;
}

.roots-programs-page .roots-card-grid {
  gap: 1.45rem;
}

.roots-programs-page .roots-public-card {
  min-height: 25rem;
  border-top-width: 0.42rem;
  border-radius: 0.28rem !important;
  box-shadow: 0 10px 26px rgba(6, 79, 51, 0.065);
}

.roots-programs-page .roots-public-card:nth-child(3n) {
  border-top-color: var(--roots-page-rust);
}

.roots-programs-page .roots-card-media {
  min-height: 10.25rem;
  background:
    radial-gradient(circle at 78% 18%, rgba(233, 163, 0, 0.2), transparent 7rem),
    #eef3e8;
}

.roots-programs-page .roots-card-media img {
  height: 10.25rem;
}

.roots-programs-page .roots-card-media i {
  font-size: 3.35rem;
}

.roots-programs-page .roots-card-body {
  padding: 1.5rem 1.55rem 1.6rem;
}

.roots-programs-page .roots-card-body h2 {
  font-size: 1.8rem;
}

.roots-programs-page .roots-card-meta span {
  border-radius: 0.15rem;
}

.roots-programs-page .roots-card-link {
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.15rem;
}

@media (max-width: 1199.98px) {
  .roots-programs-hero-copy {
    width: min(52%, 42rem);
  }

  .roots-programs-hero-shade {
    background:
      linear-gradient(
        90deg,
        rgba(255, 250, 240, 0.99) 0%,
        rgba(255, 250, 240, 0.96) 30%,
        rgba(255, 250, 240, 0.72) 48%,
        rgba(255, 250, 240, 0.12) 68%,
        transparent 82%
      ),
      linear-gradient(0deg, rgba(6, 79, 51, 0.2), transparent 30%);
  }
}

@media (max-width: 960px) {
  .roots-programs-page .roots-programs-hero {
    min-height: 40rem;
  }

  .roots-programs-hero-grid {
    min-height: 40rem;
  }

  .roots-programs-hero-copy {
    width: min(100%, 39rem);
  }

  .roots-programs-hero-image {
    object-position: 62% center;
  }

  .roots-programs-hero-shade {
    background:
      linear-gradient(
        90deg,
        rgba(255, 250, 240, 0.99) 0%,
        rgba(255, 250, 240, 0.97) 42%,
        rgba(255, 250, 240, 0.72) 67%,
        rgba(255, 250, 240, 0.28) 100%
      ),
      linear-gradient(0deg, rgba(6, 79, 51, 0.22), transparent 36%);
  }
}

@media (max-width: 680px) {
  .roots-programs-page .roots-programs-hero {
    min-height: 39rem;
  }

  .roots-programs-hero-grid {
    min-height: 39rem;
    padding-block: 3rem;
  }

  .roots-programs-hero-image {
    object-position: 66% center;
  }

  .roots-programs-hero-shade {
    background:
      linear-gradient(
        90deg,
        rgba(255, 250, 240, 0.98) 0%,
        rgba(255, 250, 240, 0.94) 65%,
        rgba(255, 250, 240, 0.72) 100%
      ),
      linear-gradient(0deg, rgba(6, 79, 51, 0.28), transparent 42%);
  }

  .roots-programs-page .roots-programs-hero h1 {
    font-size: clamp(3rem, 14vw, 4.25rem);
  }

  .roots-programs-page .roots-programs-hero .roots-inner-lead {
    max-width: 32rem;
    font-size: 0.96rem;
  }

  .roots-programs-page .roots-inner-section-heading h2 {
    font-size: clamp(2.55rem, 11vw, 3.7rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .roots-programs-page .roots-public-card {
    transition: none;
  }
}