/* Grantees Hub Styles */
.grantees-hub {
  overflow: unset;
}

.grantees__hero {
  padding: 0;
  color: var(--ltf-color-white);
  background-color: var(--ltf-color-primary);
}

@media screen and (min-width: 786px) {
  .grantees__hero {
    width: 100%;
  }
}

.grantees__hero--wrap {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 40px;
}

@media screen and (min-width: 786px) {
  .grantees__hero--wrap {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 120px;
    align-items: center;
  }
}

.grantees__hero--image-wrap {
  position: relative;
  right: -2.5%;
}

@media screen and (min-width: 786px) {
  .grantees__hero--image-wrap {
    grid-column: 6 / span 7;
    grid-row: 1 / span 2;
    margin-top: 0;
    right: 0;
  }
}

.grantees__hero--text-wrap {
  position: relative;
  padding: 0 10px;
  z-index: 1;
}

@media screen and (min-width: 786px) {
  .grantees__hero--text-wrap {
    grid-column: 1 / span 4;
    grid-row: 1 / span 2;
    padding: 40px 0 40px 60px;
  }
}

.grantees__hero--text-wrap h3 {
  font-weight: normal;
  text-transform: none;
}

.grantees__hero--image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  object-position: center;
}

@media screen and (min-width: 786px) {
  .grantees__hero--image {
    aspect-ratio: 16/9;
  }
}

.grantees__filters {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  margin: 0 auto 2rem;
  background-color: var(--ltf-color-white);
}

@media screen and (max-width: 767px) {
  .grantees__filters {
    padding: 1.5rem 0;
    border-top: 2px solid var(--ltf-color-primary);
    border-bottom: 2px solid var(--ltf-color-primary);
  }
}

@media screen and (min-width: 768px) {
  .grantees__filters {
    position: sticky;
    top: 0;
    z-index: 10;
    width: 100%;
    flex-flow: row;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 auto;
    padding: 2.5rem 0;
  }
}

.grantees__filters--header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.grantees__filters--header.desktop-only {
  display: none;
}

@media screen and (min-width: 768px) {
  .grantees__filters--header.mobile-only {
    display: none;
  }

  .grantees__filters--header.desktop-only {
    display: flex;
  }
}

.grantees__filters--toggle {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ltf-color-primary);
  cursor: pointer;
}

.grantees__filters--toggle .h6 {
  margin: 0;
}

.grantees__filters--toggle.open .vertical-rect {
  display: none;
}

.grantees__filters--buttons--wrap {
  display: flex;
  flex-flow: column;
  gap: 1rem;
  overflow: hidden;
  transition: height 0.2s ease-in-out;
}

@media screen and (max-width: 767px) {
  .grantees__filters--buttons--wrap {
    display: none;
    height: 0;
  }

  .grantees__filters--buttons--wrap.show {
    display: flex;
    height: auto;
  }
}

@media screen and (min-width: 768px) {
  .grantees__filters--buttons--wrap {
    flex-flow: row;
    flex-wrap: wrap;
  }
}

.grantees__filter--checkbox {
  position: absolute;
  opacity: 0;
  z-index: -1;
  width: 0;
  height: 0;
  pointer-events: none;
  margin: 0;
}

.grantees__filter--label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.grantees__filter--label.button svg path,
.grantees__filter--label.button svg rect {
  transition: all 0.2s ease-in-out;
}

.grantees__filter--label.button--white-outline:hover svg path,
.grantees__filter--label.button--white-outline:hover svg rect,
.grantees__filter--label.button--yellow svg path,
.grantees__filter--label.button--yellow svg rect {
  fill: var(--ltf-color-primary);
}

.grantees__filter--label.button--white-outline svg path,
.grantees__filter--label.button--white-outline svg rect,
.grantees__filter--label.button--yellow:hover svg path,
.grantees__filter--label.button--yellow:hover svg rect {
  fill: var(--ltf-color-white);
}

.grantees__filter--label .close {
  display: none;
  margin: -5px -15px -5px auto;
  padding: 0.5rem;
  border-radius: 100%;
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--ltf-color-gray), transparent 70%);
  text-align: center;
  line-height: 0;
}

.grantees__filter--checkbox:checked + .grantees__filter--label .close {
  display: block;
}

.grantees__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2.5rem;
  margin-top: 2.5rem;
}

@media screen and (min-width: 768px) {
  .grantees__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto);
  }
}

.grantees__bucket--image {
  margin-bottom: 1.5rem;
  width: 100%;
  border: none;
  aspect-ratio: 1;
  object-fit: cover;
  background-color: lightgray;
}

@media screen and (max-width: 767px) {
  .grantees__grid .grantees__bucket:nth-child(5n - 4) {
    grid-column: 1 / 3;
  }
}

@media screen and (min-width: 768px) {
  .grantees__grid:nth-of-type(odd) .grantees__bucket:nth-child(5n - 4) {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .grantees__grid:nth-of-type(even) .grantees__bucket:nth-child(5n) {
    grid-column: 3 / 5;
    grid-row: 1 / 3;
  }
}

.grantees__bucket--name {
  margin-bottom: 0.5rem;
}

.grantees__bucket--location {
  margin-bottom: 0.5rem;
}

.grantees__bucket--focus-areas {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.grantees__bucket--focus-areas svg path {
  fill: var(--ltf-color-primary);
}

.grantees__bucket--excerpt {
  margin-bottom: 0.5rem;
}

.grantees__bucket--link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--ltf-color-primary);
  text-decoration: none;
}

.grantees__bucket--link svg path {
  stroke: var(--ltf-color-primary);
}

.grantees__load-more-posts {
  margin-top: 2rem;
  text-align: center;
}

.button--load-more-posts.hide {
  display: none;
}

/*Single Grantee Styles*/
/* Hero */
.grantee-hero {
  width: 95%;
  margin: 0 auto;
  padding-bottom: 40px;
}

@media screen and (min-width: 786px) {
  .grantee-hero {
    width: 100%;
    padding-top: 100px;
    padding-bottom: 0;
  }
}

.grantee-hero__wrap {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  row-gap: 40px;
}

@media screen and (min-width: 786px) {
  .grantee-hero__wrap {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 120px;
    align-items: center;
  }
}

.grantee-hero__image-wrap {
  position: relative;
  left: -2.5%;
}

@media screen and (min-width: 786px) {
  .grantee-hero__image-wrap {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
    margin-top: 0;
    left: 0;
  }
}

.grantee-hero__text-wrap {
  position: relative;
  padding: 0 10px;
  z-index: 1;
}

@media screen and (min-width: 786px) {
  .grantee-hero__text-wrap {
    grid-column: 7 / span 5;
    grid-row: 1 / span 2;
    padding: 40px 60px 40px 0;
  }
}

.grantee-hero__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  object-position: center;
}

.grantee-hero__location-wrap {
  display: flex;
  gap: 2rem;
  align-items: center;
  margin-bottom: 1rem;
}

.focus-areas {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.focus-areas__focus-area {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 100%;
  aspect-ratio: 1;
  background: var(--ltf-color-secondary);
}

/* About */
.grantee-about {
  padding-top: 60px;
  padding-bottom: 60px;
}

@media screen and (min-width: 768px) {
  .grantee-about {
    padding-top: 150px;
  }
}

.grantee-about__wrap {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 60px;
}

@media screen and (min-width: 768px) {
  .grantee-about__wrap {
    grid-gap: 88px;
  }
}

.grantee-about__headline-image-wrap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 45px;
  align-items: center;
}

@media screen and (min-width: 768px) {
  .grantee-about__headline-image-wrap {
    grid-template-columns: repeat(12, 1fr);
  }
}

.grantee-about__headline-wrap {
  grid-column: 2 / 7;
  margin-left: -34px;
}

@media screen and (min-width: 768px) {
  .grantee-about__headline-wrap {
    grid-column: 2 / 4;
    margin-left: 0;
  }
}

.grantee-about__image-wrap {
  grid-column: 2 / 8;
}

@media screen and (min-width: 768px) {
  .grantee-about__image-wrap {
    grid-column: 5 / -1;
  }
}

.grantee-about__image {
  width: 100%;
  aspect-ratio: 1/1.25;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .grantee-about__image {
    aspect-ratio: 16/9;
  }
}

.grantee-about__buckets,
.grantee-stats__buckets {
  display: grid;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
  grid-template-columns: repeat(12, 1fr);
}

.grantee-about__buckets-wrap,
.grantee-stats__buckets-wrap {
  --buckets-wrap-grid-gap: 44px;

  display: flex;
  flex-flow: column;
  grid-gap: var(--buckets-wrap-grid-gap);
  grid-column: span 12;
}

@media screen and (min-width: 768px) {
  .grantee-about__buckets-wrap,
  .grantee-stats__buckets-wrap {
    --buckets-wrap-grid-gap: 88px;
  }

  .grantee-about__buckets-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--buckets-wrap-grid-gap);
    grid-column: 4 / -1;
  }

  .grantee-stats__buckets-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--buckets-wrap-grid-gap);
    grid-column: 1 / -1;
  }
}

@media screen and (min-width: 1400px) {
  .grantee-about__buckets-wrap {
    grid-column: 5 / -1;
  }
}

.grantee-about__bucket,
.grantee-stats__bucket {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  position: relative;
}

@media screen and (min-width: 768px) {
  .grantee-about__bucket,
  .grantee-stats__bucket {
    padding: 30px 0;
  }
}

.grantee-about__bucket h3,
.grantee-stats__bucket h3 {
  margin: 0;
}

.grantee-about__bucket h3 {
  color: var(--ltf-color-primary);
}

.grantee-stats__bucket h3 {
  font-weight: bold;
}

.grantee-about__bucket p:last-child,
.grantee-stats__bucket p:last-child {
  padding-bottom: 0;
}

.grantee-about__bucket:not(:last-child)::after,
.grantee-stats__bucket:not(:last-child)::after {
  content: '';
  width: 100%;
  border-top: 1px solid var(--ltf-color-primary);
  position: absolute;
  bottom: calc(var(--buckets-wrap-grid-gap) / 2 * -1);
}

.grantee-stats__bucket:not(:last-child)::after {
  border-color: var(--ltf-color-white);
}

@media screen and (min-width: 768px) {
  .grantee-about__bucket:not(:last-child)::after,
  .grantee-stats__bucket:not(:last-child)::after {
    border-top: none;
    border-right: 1px solid var(--ltf-color-primary);
    bottom: unset;
    right: calc(var(--buckets-wrap-grid-gap) / 2 * -1);
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
  }

  .grantee-stats__bucket:not(:last-child)::after {
    border-color: var(--ltf-color-white);
  }
}

/* Video */
.section-video .video {
  padding-top: 60px;
  padding-bottom: 60px;
}

@media screen and (min-width: 768px) {
  .section-video .video {
    padding-top: 150px;
  }
}

.video__wrap {
  position: relative;
}

.video__wrap video {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center;
}

.video__play-button {
  all: unset;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  width: 87px;
  height: 87px;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: var(--ltf-color-white);
  text-align: center;
  cursor: pointer;
}

.video__play-button svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-40%, -50%);
}

/* Related Grantees */
.grantees-carousel__wrap {
  padding-top: 60px;
  padding-bottom: 60px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 60px;
}

@media screen and (min-width: 768px) {
  .grantees-carousel__wrap {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 88px;
    align-items: flex-end;
  }
}

.grantees-carousel__headline {
  grid-column: 2 / 7;
  margin-left: -34px;
}

@media screen and (min-width: 768px) {
  .grantees-carousel__headline {
    grid-column: 2 / 5;
    margin-left: 0;
    margin-bottom: 45px;
  }
}

.grantees-carousel__slider-wrap {
  grid-column: 2 / 8;
  margin-left: -34px;
}

@media screen and (min-width: 768px) {
  .grantees-carousel__slider-wrap {
    grid-column: 5 / -1;
    margin-left: 0;
  }
}

.grantees-carousel__bucket-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
  padding-right: 16px;
  color: inherit;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
}

.grantees-carousel__bucket-link:hover {
  font-weight: 700 !important;
}

.grantees-carousel__nav-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
  margin: 30px auto;
  width: 50px;
}

@media screen and (min-width: 768px) {
  .grantees-carousel__nav-controls {
    margin: 30px 0 0;
  }
}

.grantees-carousel__nav-button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.grantees-carousel__bucket-link svg path,
.grantees-carousel__nav-button svg path {
  transition: all 0.2s ease-in-out;
  stroke-width: 0;
  fill: var(--ltf-color-gray);
  stroke: var(--ltf-color-primary);
  stroke-miterlimit: 10;
}

.grantees-carousel__bucket-link:hover svg path,
.grantees-carousel__nav-button:hover svg path {
  stroke-width: 1.5;
}

.grantees-carousel__bucket-picture {
  display: block;
}

.grantees-carousel__bucket-image {
  width: 100%;
  aspect-ratio: 9/12;
  object-fit: cover;
  object-position: center;
  margin-bottom: 20px;
}

.grantees-carousel__bucket-content-row h3 {
  margin: 0;
}

.grantees-carousel__bucket-button {
  white-space: nowrap;
}