/** 25 page **/
.twentyfive-template #hero .lines {background: linear-gradient(to bottom, rgba(0,53,71,0) 0%, rgba(0,53,71,0) 50%, rgba(0,53,71,0.5) 100%)}
.twentyfive-template #hero .special-hero-content {text-align: left; max-width: 65%; width: 100%; margin: 0 auto; top: calc(100% - 360px); position: relative;}
@media screen and (max-width: 1450px) {
    .twentyfive-template #hero .special-hero-content {max-width: 75%;}
}
@media screen and (max-width: 1000px) {
    .twentyfive-template #hero .special-hero-content {max-width: 85%; top: calc(100% - 260px);}
}

.twentyfive-template #hero .special-hero-content p {font-weight: 600; font-style: italic; color: #fff; font-size: 1.1em; max-width: 51ch; position: relative;}
.twentyfive-template #hero .special-hero-content img {fill:#fff; padding-bottom:50px;}
.twentyfive-template #hero .special-hero-content p:before {
    content: '';
    position: absolute;
    width: 65px;
    height: 0;
    border-bottom: 4px solid #00a6e4;
    top: -25px;
}
.twentyfive-template #generic-wrap {padding-top: 20px;}

.twentyfive-template #hero .inner-wrapper {
    position: relative; /* anchor for overlay */
}

/* the tint */
.twentyfive-template #hero .inner-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
    z-index: 0;
    pointer-events: none;
}

/* ensure hero content sits above overlay */
.twentyfive-template #hero .inner-wrapper > * {
    position: relative;
    z-index: 1;
}



       .banner-with-bottom-content .inner-wrapper {
            width: 100%;
            min-height: 65vh;
        }
        body#generic #hero.banner-with-bottom-content #triangle {
            bottom: auto;
            top: -48px;
        }
        body#generic #hero.banner-with-bottom-content .lines {
            height: 65vh;
        }
        body#generic.new #hero.banner-with-bottom-content .wrapper {
            padding-top: 30px;
        }
        body#generic.new #hero.banner-with-bottom-content .wrapper .content {
            max-width: 100%;
            padding-bottom: 0;
        }
        body#generic.new #hero.banner-with-bottom-content {
            background: transparent;
        }
        body#generic #hero.banner-with-bottom-content .wrapper h1,
        body#generic #hero.banner-with-bottom-content #intro p {
            color: #00AEEF;
        }
        .grantee-stories {background-color: #96DEF8 !important;}
        .grantee-stories #generic-wrap {padding: 70px 0;}
        .grantee-stories .featured-grantee-story-headline {position: relative; text-align: center;}
        .grantee-stories .featured-grantee-story-headline h2 {font-size: 36px; margin-bottom: 20px;}
.grantee-stories .featured-grantee-story-headline p {
    max-width: 75ch;
    margin: 0 auto;
}
        .grantee-stories .featured-grantee-story-content {}
        .grantee-stories .featured-grantee-story-content-image {}
        .grantee-stories .featured-grantee-story-content-cta {}
        .grantee-stories .featured-grantee-story-content-cta h3 {font-size: 17px; font-weight: 800; color: #000 !important;}
        .grantee-stories .featured-grantee-story-content-cta p {font-size: 11px; font-weight: 800; color: #000;}


.featured-grantee-story {
  position: relative;
  text-align: center;
    margin-top:70px;
}

.featured-grantee-story-content {
  position: relative;
  display: inline-block;
    z-index: 1;
}
.featured-grantee-story-content-image {
  width: 532px;
  height: auto;
  display: block;
    position: relative;
/*  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.15));*/
}
.featured-grantee-story-content-cta {
  position: absolute;
  left: -28px;
  bottom: 48px;
  z-index: 30;
  width: 250px;
  box-sizing: border-box;
  padding: 14px 18px;
  background: #ece9e4;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 5px;
  row-gap: 0px;
  align-items: center;
}
.featured-grantee-story-content-cta h3,
.featured-grantee-story-content-cta p {
  margin: 0;
  display: block;
  width: 100%;
    max-width: 240px;
}
.featured-grantee-story-content-cta h3 {
      grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 16px;
    line-height: 1;
  font-weight: 700 !important;
  color: #1a2e35;
    padding-bottom: 0px !important;
}

.featured-grantee-story-content-cta p {
      grid-column: 1;
  grid-row: 2;
  margin: 0;
  font-size: 12px;
    line-height: 1;
    font-weight: 700 !important;
  color: #4a5a60;
}
.featured-grantee-story-content-cta::after {
  content: "+";
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: center;
  align-self: center;
  font-size: 36px;
  line-height: 1;
  color: #00a9e6;
}
.featured-grantee-story-content-cta {
  flex-wrap: nowrap;
}

.featured-grantee-story-content-cta > div {
  display: flex;
  flex-direction: column;
}

.featured-grantee-story-content-cta h3,
.featured-grantee-story-content-cta p {
  float: none;
  clear: none;
  position: static;
  width: auto;
  max-width: none;
}
@media (max-width: 768px) {
  .featured-grantee-story-content-image {
    width: 260px;
  }

.twentyfive-template #hero .special-hero-content p:before {
    top: -15px;
}

  .featured-grantee-story-content-cta {
    bottom: 10px;
    padding: 12px 16px;
  }
}
/* 
        .grantee-stories .featured-grantee-story {position: relative; text-align: center;}
        .grantee-stories .featured-grantee-story::before, .grantee-stories .featured-grantee-story::after {
          content: "";
          position: absolute;
          top: 50%;
          width: 532px;
          height: 405px;
          background-image: url('/wp-content/themes/bcbs/svg/heart-blank.svg');
          background-size: contain;
          background-repeat: no-repeat;
          opacity: 1;
          z-index: 0;
        }
        .grantee-stories .featured-grantee-story::before {
            left: -110px;
            transform: translateY(-50%) rotate(-19deg);
        }
        .grantee-stories .featured-grantee-story::after {
            right: -200px;
            transform: translateY(-50%) rotate(-19deg);
        }
 */


.grantee-stories .featured-grantee-story {
  position: relative;
  isolation: isolate;
  /* control spacing from the center heart */
  --heart-gap-l: 80% /* clamp(140px, 18vw, 260px) */;
  --heart-gap-r: 100% /* clamp(140px, 18vw, 260px) */;
  /* size of the side hearts */
  --side-heart-w: clamp(70px, 532px, 532px);
  --side-heart-h: auto;
}

@media screen and (max-width: 768px) {
    .grantee-stories .featured-grantee-story {
    --side-heart-w: 260px;
    }


}





.grantee-stories .featured-grantee-story a {z-index: 10; position: relative;}
/* center heart image */
.grantee-stories .featured-grantee-story .featured-grantee-story-content-image {
  display: block;
  margin-inline: auto;
  position: relative;
  z-index: 10;
}

/* side hearts */
.grantee-stories .featured-grantee-story::before,
.grantee-stories .featured-grantee-story::after {
  content: "";
  position: absolute;
  top: 50%; /* or set a specific top value if needed */
  left: 50%;
  width: var(--side-heart-w);
  aspect-ratio: 1 / 1; /* adjust if your SVG isn't square */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}

.grantee-stories .featured-grantee-story::before {
  background-image: url("/wp-content/themes/bcbs/svg/heart-blank.svg");
  transform: translate(calc(-50% - var(--heart-gap-l)), -50%)  rotate(-19deg);
}

.grantee-stories .featured-grantee-story::after {
  background-image: url("/wp-content/themes/bcbs/svg/heart-blank.svg");
  transform: translate(calc(-50% + var(--heart-gap-r)), -50%)  rotate(-19deg);
}










        @media(max-width:1000px) {
            body#generic.new #hero.banner-with-bottom-content {
                padding-top: 0;
            }
            body#generic #hero.banner-with-bottom-content #triangle {
                bottom: auto;
                top: -39px;
            }
            body#generic #hero.banner-with-bottom-content .lines {
                height: 50vh;
            }
            .banner-with-bottom-content .inner-wrapper {
                width: 100%;
                min-height: 50vh;
            }
        }