/* ==========================================================================
   Table of Contents
   ========================================================================== */
/*
  1.  Global Styles (Body, Main, & Background Wrapper)
  2.  Careers Hero Section
      2.1 .careers-hero
      2.2 .careers-hero__black-blur
      2.3 .careers-hero__title
      2.4 .careers-vector
  3.  Interns and Volunteers Section
      3.1  .interns-and-volunteers
      3.2  .interns-and-volunteers__title-wrapper
      3.3  .interns-and-volunteers__title
      3.4  .interns-and-volunteers__wrapper
      3.5  .interns, .volunteers
      3.6  .interns__image, .volunteers__image
      3.7  .interns__wrapper, .volunteers__wrapper 
      3.8  .interns__wrapper h3, .volunteers__wrapper h3 
      3.9  .interns__wrapper p, .interns__info-list li, .volunteers__wrapper p, .volunteers__info-list li
      3.10 .interns__info-list, .volunteers__info-list 
      3.11 .interns__info-list li:first-child, .volunteers__info-list li:first-child
      3.12 .careers-buttons
  4. Testimonials Section
      4.1 .testimonials
      4.2 .testimonial-slide
      4.3 .testimonials__image
      4.4 .testimonials__story-wrapper
      4.5 .testimonials__name
      4.6 .testimonials__role
      4.7 .testimonials__quote
      4.8 #rakesh (ID-specific overrides)
  5. Color Bar Section
      5.1 .color-bar
      5.2 .color-bar [color-class]
*/

/* ==========================================================================
   1. Global Styles (Body, Main, & Background Wrapper)
   ========================================================================== */

body {
  margin: 0;
  font-family: var(--font-primary), sans-serif;
  background-color: #fbfbfc;
}
main {
  display: block;
}
.background-wrapper {
  background-image: url("/assets/images/careers/careers-background.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 3;
}
@media (min-width: 576px) {
  .background-wrapper {
    background-image: url("/assets/images/careers/careers-background-576.svg");
  }
}

@media (min-width: 768px) {
  .background-wrapper {
    background-image: url("/assets/images/careers/careers-background-768.svg");
  }
}
@media (min-width: 992px) {
  .background-wrapper {
    background-image: url("/assets/images/careers/careers-background-992.svg");
  }
}
@media (min-width: 1200px) {
  .background-wrapper {
    background-image: url("/assets/images/careers/careers-background-1200.svg");
  }
}
@media (min-width: 1400px) {
  .background-wrapper {
    background-image: url("/assets/images/careers/careers-background-1400.svg");
    margin-top: 14rem;
  }
}
@media (min-width: 1920px) {
  .background-wrapper {
    background-image: url("/assets/images/careers/careers-background-1920.svg");
  }
}
/* ==========================================================================
   2. Careers Hero Section
   ========================================================================== */
/* ------------------------------   2.1 .careers-hero   ------------------------------ */
/* 1.1 .careers-hero (Container) */
.careers-hero {
  position: relative;
  display: grid;
  align-items: center; /* Vertically centers the content */
  /* No fixed height needed; grid takes height of the image */
}

/* The Magic Sauce:
   This selects all direct children (the picture and the h1)
   and stacks them in the same grid cell.
*/
.careers-hero > *:not(.careers-hero__black-blur) {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}
/* ------------------------------   2.2 .careers-hero__black-blur   ------------------------------ */

.careers-hero__black-blur {
  width: 100%;
  min-height: 6.08333333rem;
  background: linear-gradient(
    180deg,
    rgba(71, 78, 115, 0.65) 25%,
    rgba(71, 78, 115, 0) 100%
  );
  backdrop-filter: blur(0.897009551525116px);
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 768px) {
  .careers-hero__black-blur {
    height: 7.75rem;
  }
}
@media (min-width: 1200px) {
  .careers-hero__black-blur {
    height: 12.5rem;
  }
}
@media (min-width: 1920px) {
  .careers-hero__black-blur {
    height: 16.66666667rem;
  }
}
/* ------------------------------    2.3 .careers-hero__title   ------------------------------ */

.careers-hero__title {
  z-index: 0;
  width: 100%;
  text-align: center;
  text-shadow: 0 2.187px 7.655px rgba(0, 0, 0, 0.25);
  font-style: normal;
  line-height: normal;
  letter-spacing: 3.338px;
  text-transform: uppercase;
  margin: 0;
}
@media (min-width: 768px) {
  .careers-hero__title {
    letter-spacing: 4.292px;
  }
}
@media (min-width: 1200px) {
  .careers-hero__title {
    letter-spacing: 5.245px;
  }
}

@media (min-width: 1920px) {
  .careers-hero__title {
    letter-spacing: 5.722px;
  }
}
/* ------------------------------    2.4 .careers-hero__image  ------------------------------ */
.careers-hero__image,
.careers-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   3. Interns and Volunteers Section
   ========================================================================== */
/* ------------------------------    3.1 .interns-and-volunteers  ------------------------------ */

.interns-and-volunteers {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 23.333333333rem;
  margin: 0 auto;
  gap: 4.16666667rem;
}
@media (min-width: 768px) {
  .interns-and-volunteers {
    width: 54rem;
    gap: 6.66666667rem;
  }
}
@media (min-width: 992px) {
  .interns-and-volunteers {
    margin-top: 10rem;
  }
}
@media (min-width: 1200px) {
  .interns-and-volunteers {
    min-width: 86.666666rem;
    margin-top: 11rem;
    gap: 8.33333333rem;
  }
}

@media (min-width: 1920px) {
  .interns-and-volunteers {
    min-width: 146.6665rem;
  }
}
/* ------------------------------    3.2 .interns-and-volunteers__title-wrapper  ------------------------------ */
.interns-and-volunteers__title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 1.667rem;
}
@media (min-width: 768px) {
  .interns-and-volunteers__title-wrapper {
    width: 47.25rem;
    gap: 2.5rem;
  }
}
@media (min-width: 1200px) {
  .interns-and-volunteers__title-wrapper {
    width: 88.333rem;
    gap: 3.3rem;
  }
}
@media (min-width: 1621px) {
  .interns-and-volunteers__title-wrapper {
    width: 96.33333333rem;
  }
}
/* ------------------------------    3.3 .interns-and-volunteers__title  ------------------------------ */

.interns-and-volunteers__title {
  color: #192147;
  text-align: center;
  font-style: normal;
  line-height: normal;
  letter-spacing: 1.25px;
  margin: 0;
  width: 100%;
}
/* ------------------------------       3.4   .interns-and-volunteers__wrapper   ------------------------------ */
.interns-and-volunteers__wrapper {
  display: flex;
  flex-direction: column;
  gap: 2.08333333rem;
}
@media (min-width: 768px) {
  .interns-and-volunteers__wrapper {
    width: 26.66666667rem;
  }
}
@media (min-width: 992px) {
  .interns-and-volunteers__wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    width: 54rem;
  }
}
@media (min-width: 1200px) {
  .interns-and-volunteers__wrapper {
    min-width: 86.666666rem;
  }
}
@media (min-width: 1920px) {
  .interns-and-volunteers__wrapper {
    min-width: 140rem;
    gap: 4.16666667rem;
  }
}
/* ------------------------------       3.5 .interns, .volunteers   ------------------------------ */
.interns,
.volunteers {
  box-sizing: border-box;
  display: flex;
  box-shadow: none;
  flex-direction: column;
  align-self: center;
  gap: 0;
  border-radius: 1.66666667rem;
}

@media (min-width: 768px) {
  .interns,
  .volunteers {
    width: 26.666667rem;
    min-height: 53.25rem;
    align-self: unset;
  }
}
@media (min-width: 1200px) {
  .interns,
  .volunteers {
    width: 41.66666667rem;
    min-height: 100rem;
  }
}

@media (min-width: 1920px) {
  .interns,
  .volunteers {
    min-width: 67.91666667rem;
    min-height: 106.66666667rem;
  }
}

/* ------------------------------       3.6 .interns__image, .volunteers__image   ------------------------------ */

.interns__image,
.volunteers__image {
  display: block;
  width: 100%;
  min-height: 16.25rem;
  margin: 0;
  padding: 0;
  border-radius: 1.66666667rem 1.66666667rem 0 0;
  overflow: hidden;
  box-sizing: border-box;
  border-bottom: none;
}

.interns__image img,
.volunteers__image img {
  display: block;
  width: 100%;
  min-height: 16.25rem;
  object-fit: cover;
}

.interns__image {
  background-color: #38499c;
  border-top: 2px solid #38499c;
  border-left: 2px solid #38499c;
  border-right: 2px solid #38499c;
}
.volunteers__image {
  background-color: #5f3c9b;
  border-top: 2px solid #5f3c9b;
  border-left: 2px solid #5f3c9b;
  border-right: 2px solid #5f3c9b;
}
@media (min-width: 768px) {
  .interns__image {
    background-color: #38499c;
    border-top: 4px solid #38499c;
    border-left: 4px solid #38499c;
    border-right: 4px solid #38499c;
  }
  .volunteers__image {
    background-color: #5f3c9b;
    border-top: 4px solid #5f3c9b;
    border-left: 4px solid #5f3c9b;
    border-right: 4px solid #5f3c9b;
  }
}
@media (min-width: 1200px) {
  .interns__image,
  .volunteers__image {
    width: 100%;
    min-height: 35.41666667rem;
    /* bottom: -35.83333333%;
    left: 50%; */
    /* transform: translate(-50%, -50%); */
    border-radius: 2.5rem 2.5rem 0 0;
  }
  .interns__image {
    background-color: #38499c;
    border-top: 6px solid #38499c;
    border-left: 6px solid #38499c;
    border-right: 6px solid #38499c;
  }
  .volunteers__image {
    background-color: #5f3c9b;
    border-top: 6px solid #5f3c9b;
    border-left: 6px solid #5f3c9b;
    border-right: 6px solid #5f3c9b;
  }
}

@media (min-width: 1920px) {
  .interns__image,
  .volunteers__image {
    width: 67.91666667rem;
    min-height: 45rem;
  }
}

/* ------------------------------   3.7 .interns__wrapper, .volunteers__wrapper   ------------------------------ */
.interns__wrapper {
  background: #38499c;
}
.volunteers__wrapper {
  background-color: #5f3c9b;
}
.interns__wrapper,
.volunteers__wrapper {
  box-sizing: border-box;
  display: flex;
  flex-grow: 1; /* Rather than setting a height or min-height, 
  which resulted in differing heights when side by side 
  starting at 1200, this allows the two elements to grow 
  inside their parent's size. To Change the height, go to 
  the parent containers .interns and .volunteers and set their min-height */
  width: 100%;
  padding: 1.25rem 1.75em 3.25rem 1.75rem;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.08333333rem;
  border-bottom-left-radius: 1.66666667rem;
  border-bottom-right-radius: 1.66666667rem;
  margin: 0;
}
@media (min-width: 1200px) {
  .interns__wrapper,
  .volunteers__wrapper {
    width: 41.666666667rem;
    min-height: 54.16666667rem;
    padding: 4.16666667rem;
    border-bottom-left-radius: 2.5rem;
    border-bottom-right-radius: 2.5rem;
  }
}

@media (min-width: 1920px) {
  .interns__wrapper,
  .volunteers__wrapper {
    width: 67.91666667rem;
    padding: 2.97125rem 3.41691667rem 4.94291667rem 3.41691667rem;
  }
}

/* ------------------------------    3.8 .interns__wrapper h3, .volunteers__wrapper h3  ------------------------------ */

.interns__wrapper h3,
.volunteers__wrapper h3 {
  margin-bottom: 0;
  color: var(--font-color-heading);
  font-family: "Barlow", sans-serif;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* ------------------------------    3.9 .interns__wrapper p, .interns__info li, .volunteers__wrapper p, .volunteers__info-list li   ------------------------------ */

.interns__wrapper p,
.interns__info-list-item,
.volunteers__wrapper p,
.volunteers__info-list-item {
  color: var(--font-color-heading);
  font-weight: 500;
  line-height: 1.66666667rem;
  letter-spacing: 0.7px;
  margin: 0;
}
@media (min-width: 1200px) {
  .interns__wrapper p,
  .interns__info-list-item,
  .volunteers__wrapper p,
  .volunteers__info-list-item {
    line-height: 28px; /* 127.273% */
    letter-spacing: 1.1px;
  }
}
/* ------------------------------    3.10 .interns__info-list, .volunteers__info-list  ------------------------------ */

.interns__info-list,
.volunteers__info-list {
  padding-left: 2rem;
  margin: 0 0 0 -0.3rem;
}
.interns__notice,
.volunteers__notice {
  font-style: italic;
}
@media (min-width: 768px) {
  .interns__notice,
  .volunteers__notice {
    width: 280px;
  }
}
@media (min-width: 1200px) {
  .interns__notice,
  .volunteers__notice {
    width: 486px;
  }
}
/* ------------------------------    3.11 .interns__info-list li:first-child, .volunteers__info-list li:first-child  ------------------------------ */

.interns__info-list li:first-child,
.volunteers__info-list li:first-child {
  margin-bottom: 0.75rem;
}

/* ------------------------------    3.12 .careers-buttons  ------------------------------ */

.careers-buttons {
  /* Layout Settings*/
  display: flex;
  height: 2.08333333333rem;
  min-height: 0.83333333rem;
  max-height: 7.08333333rem;
  width: 7.58333333rem;
  padding: 0.66666667rem;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  /* Border & Color Settings */
  border-radius: 0.5rem;
  border: 1.25px solid var(--Neutral-Indigo-100);
  background-color: transparent;
  /* Font Settings */
  color: var(--Neutral-Indigo-100);
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: 0.218px;
  text-transform: uppercase;
  text-decoration: none;
  margin-top: auto;
}
.careers-buttons:hover {
  border: none;
  color: var(--Neutral-Indigo-1000);
  background-color: var(--Neutral-Indigo-100);
}
@media (min-width: 768px) {
  .careers-buttons {
    width: 10.41666667rem;
    height: 2.91666667rem;
  }
}
@media (min-width: 1200px) {
  .careers-buttons {
    width: 12.5rem;
    height: 3.33333333rem;
  }
}
/* ==========================================================================
   4. Testimonials Section
   ========================================================================== */

/* ------------------------------    4.1 .testimonials  ------------------------------ */

.testimonials__title {
  font-family: var(--font-tertiary) !important;
  font-weight: 400;
  margin: 0 0 6rem 0;
  text-transform: uppercase;
}

/* ==========================================================================
   4. Testimonials Section (Carousel Adapted)
   ========================================================================== */

/* Shared Flex Column Centering */
.testimonials,
.testimonial-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.testimonials {
  width: 23.33333333rem;
  margin: 5rem auto 0;
}

/* --- HEADER & NAV --- */
.testimonials__title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.83333333rem;
  width: 100%;
  margin-bottom: 2rem;
}

.carousel-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 12.9166666667rem;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) {
  .carousel-navigation {
    width: 14rem;
  }
}
@media (min-width: 1200px) {
  .carousel-navigation {
    width: 16.25rem;
  }
}
@media (min-width: 1621px) {
  .carousel-navigation {
    width: 19.5rem;
  }
}
/* Grouped Button Logic */
.js-carousel-prev,
.js-carousel-next {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.js-carousel-prev:disabled,
.js-carousel-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* --- CAROUSEL & SLIDE LOGIC --- */
.testimonials__wrapper {
  position: relative;
  width: 100%;
  min-height: 60rem;
}
@media (min-width: 1200px) {
  .testimonials__wrapper,
  .testimonial-slide,
  .testimonial-slide.active {
    min-height: 35.165rem;
    display: flex;
    flex-direction: column;
    gap: 5.83333333rem;
  }
}
.testimonial-slide {
  position: absolute;
  inset: 0; /* Shorthand for top/left 0 and width/height 100% */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease-in-out,
    visibility 0.4s ease-in-out;
  z-index: 1;
}

.testimonial-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 2;
  margin: 6rem auto 0 auto;
  min-height: 60rem;
}
@media (min-width: 768px) {
  .testimonial-slide.active {
    width: 38.33333333rem;
    padding: 10rem 0;
  }
  /* hack to get rid of widow */
}
@media (min-width: 1200px) {
  .testimonial-slide.active,
  .testimonial-slide {
    width: 78.66666667rem;
    min-height: 25rem;
    flex-direction: row;
    margin: 0;
    padding: 0;
  }
}
@media (min-width: 1920px) {
  .testimonial-slide.active,
  .testimonial-slide {
    gap: 6.25rem;
    width: 95.416666667rem;
  }
}
/* --- TESTIMONIAL BOX STYLING --- */
.testimonial-slide {
  box-sizing: border-box;
  padding: 10rem 1.25rem 2.5rem;
  margin: 6rem auto 0 auto;
  min-height: 60rem;
}

/* --- LAYERED IMAGE COMPONENT --- */
.c-layered-image.testimonial-image {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22rem;
  height: 22rem;
  z-index: 10;
}
@media (min-width: 768px) {
  .c-layered-image.testimonial-image {
    width: 25.58333333rem !important;
    height: 25.58333333rem !important;
  }
}
@media (min-width: 1200px) {
  .c-layered-image.testimonial-image {
    width: 28.5rem !important;
    height: 28.5rem !important;
    /* position: absolute; */
    /* top: 53%; */
    /* left: 20%; */
    position: static;
    /* display: flex; */
    align-self: center;
    justify-self: center;
    transform: none;
  }
}
@media (min-width: 1920px) {
  .c-layered-image.testimonial-image {
    width: 31.66666666667rem !important;
    height: 31.66666666667rem !important;
  }
}
/* Grouped positioning for bg/frame */
.c-layered-image__bg,
.c-layered-image__frame {
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
  top: 50%;
  left: 50%;
}

.c-layered-image__bg {
  width: 20.8rem !important;
  height: 20.8rem !important;
  z-index: 1;
  background: linear-gradient(
    135deg,
    #eceef6 34.82%,
    #ccd0e6 51.96%,
    #adb4d6 69.1%,
    #8f99c8 86.23%
  );
  position: relative;
  top: 50%;
  left: 50%;
}
@media (min-width: 768px) {
  .c-layered-image__bg {
    width: 25.58333333rem !important;
    height: 25.58333333rem !important;
  }
}
@media (min-width: 1920px) {
  .c-layered-image__bg {
    width: 31.66666666667rem !important;
    height: 31.66666666667rem !important;
  }
}
.c-layered-image__frame {
  width: 19.66666667rem !important;
  height: 19.66666667rem !important;
  top: 3%;
  left: 9%;
  overflow: hidden;
  z-index: 2;
}
@media (min-width: 768px) {
  .c-layered-image__frame {
    width: 24.25rem !important;
    height: 24.25rem !important;
    top: 1%;
    left: 6%;
  }
}
@media (min-width: 1200px) {
  .c-layered-image__frame {
    width: 24.25rem !important;
    height: 24.25rem !important;
    top: 16%;
    left: 4%;
  }
}
@media (min-width: 1920px) {
  .c-layered-image__frame {
    width: 30rem !important;
    height: 30rem !important;
    top: 6%;
    left: 2%;
  }
}
.testimonials__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* --- TEXT STYLING --- */
.testimonials__story-wrapper {
  width: 21.66666667rem;
  margin: 3rem auto 0 auto;
}
@media (min-width: 768px) {
  .testimonials__story-wrapper {
    width: 38.5rem;
  }
}
@media (min-width: 1200px) {
  .testimonials__story-wrapper {
    width: 42.5rem;
    min-height: 35.165rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.66666667rem;
  }
}
@media (min-width: 1920px) {
  .testimonials__story-wrapper {
    width: 57.5rem;
  }
}
/* Grouped shared text properties */
.testimonials__quote,
.testimonials__attribution {
  display: block;
  width: 100%;
  text-align: left;
  font-style: italic;
  margin-bottom: 1.5rem;
  line-height: 1.66666667rem;
  letter-spacing: 0.7px;
  margin-left: 0;
}
@media (min-width: 768px) {
  .testimonials__quote,
  .testimonials__attribution {
    line-height: 26px;
    letter-spacing: 0.9px;
  }
}
@media (min-width: 1200px) {
  .testimonials__quote,
  .testimonials__attribution {
    margin: 0;
    line-height: 28px;
    letter-spacing: 1.1px;
  }
}
/* --- MEDIA QUERIES --- */
@media (min-width: 768px) {
  .testimonials {
    width: 38.5rem;
  }
  .testimonial-slide {
    min-height: 28.75rem;
    width: 38.5rem;
    padding: 10rem 0;
  }
}

@media (min-width: 1200px) {
  .testimonials {
    min-width: 78.66666667rem;
  }
  .testimonial-slide {
    min-width: 78.66666667rem;
    min-height: 35.165rem;
    margin: 0;
    padding: 0;
  }

  /* .testimonial-slide {
    width: 500px;
    padding: 103px 40px 40px 40px;
  } */
}
@media (min-width: 1920px) {
  .testimonials {
    min-width: 95.416666667rem;
  }
}
/* ==========================================================================
   5. Color Bar Section
   ========================================================================== */
/* ------------------------------    5.1 .color-bar    ------------------------------ */
.color-bar {
  width: 100%;
  display: flex;
}
@media (min-width: 1200px) {
  .color-bar {
    width: 65rem;
    margin: 0 auto;
  }
}

/* ------------------------------    5.2 .color-bar [color-class]    ------------------------------ */
.color-bar .blue,
.color-bar .green,
.color-bar .purple,
.color-bar .yellow {
  min-height: 0.6rem;
  flex: 1;
}
@media (min-width: 768px) {
  .color-bar .blue,
  .color-bar .green,
  .color-bar .purple,
  .color-bar .yellow {
    min-height: 1rem;
  }
}