/*--/------*/
/* --{{ SLIDER PANEL (shared) }}-- */
/*--/------*/
.SliderPanel .slide-title {
  font: var(--text-feature);
}

/*--/------*/
/* --{{ STEP SLIDER }}-- */
/*--/------*/
.StepSlider {
  .slide-inner-wrap {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
    border-radius: var(--spacer-xs);
    padding: var(--spacer-xs);
    overflow: visible;
  }

  /* Same underline mask setup as CampSliderPanel / flip cards */
  .slide-content h3,
  .slide-title {
    position: relative;
    display: inline-block;
    z-index: 1;
    margin: 0;
    padding-bottom: 0.2em;
    --card-color: var(--theme-card-color, var(--yellow));
  }

  p{
    padding-top:var(--spacer);
  }

  .tf_swiper-slide {
    aspect-ratio: 9 / 12;

    /* Background + underline accent pairs */
    &:is(:nth-child(1), :nth-child(9)) {
      --theme-card-color: var(--yellow);

      .slide-inner-wrap {
        background-color: var(--orange);
      }
    }

    &:is(:nth-child(3), :nth-child(13)) {
      --theme-card-color: var(--blue);

      .slide-inner-wrap {
        background-color: var(--yellow);
      }
    }

    &:is(:nth-child(5), :nth-child(11)) {
      --theme-card-color: var(--yellow);

      .slide-inner-wrap {
        background-color: var(--blue);
      }
    }

    &:nth-child(7) {
      --theme-card-color: var(--purple);

      .slide-inner-wrap {
        background-color: var(--green);
      }
    }

    /* Even slides: white with thick blue border */
    &:nth-child(even) {
      --theme-card-color: var(--blue);

      .slide-inner-wrap {
        border: var(--border-thick) solid var(--blue, blue);
        background-color: var(--white);
      }
    }

    /* Dark backgrounds -> white text + white-filtered icons */
    &:is(:nth-child(1), :nth-child(5), :nth-child(9), :nth-child(11))
      .slide-inner-wrap {
      color: var(--white);

      * {
        color: var(--white);
      }

      img {
        filter: var(--filter-white);
      }
    }

    /* Light backgrounds -> black text, inverted icons */
    &:is(:nth-child(3), :nth-child(7), :nth-child(13)) .slide-inner-wrap {
      * {
        color: var(--black);
      }

      img {
        filter: var(--filter-black);
      }
    }
  }
}

/*--/------*/
/* --{{ SLIDER IMAGE LEFT }}-- */
/*--/------*/
.SliderImageLeft {
  .tb_row_frame_wrap {
    z-index: 1;
  }

  /* Layout & vertical alignment */
  .slide-inner-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center;
    height: 100%;
    gap: var(--spacer, 40px);
    box-sizing: border-box;
  }

  /* Image: 1/1 square ratio */
  .slide-image {
    position: relative;
    overflow: hidden;
    flex: 0 0 45%;
    max-width: 500px;
    margin-bottom: 0;

    img {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border: none;
    }

    &::after {
      content: "";
      position: absolute;
      top: -5px;
      right: 0;
      width: 30px;
      z-index: 5;
      pointer-events: none;
      background-color: var(--theme-card-bg, #cccccc);
      -webkit-mask: var(--mask-button) center right / 105% 105% no-repeat;
      mask: var(--mask-button) center right / 105% 105% no-repeat;
    }
  }

  /* Text content */
  .slide-content {
    flex: 1 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left !important;

    h3 {
      font: var(--text-h3) / 1em var(--font-heading);
    }
  }

  .tf_swiper-slide {
    &:nth-child(5n + 1) {
      --theme-card-bg: var(--light-blue);

      .slide-inner-wrap {
        background-color: var(--light-blue);
      }
    }

    &:nth-child(5n + 2) .slide-inner-wrap {
      background-color: var(--green);
    }

    &:nth-child(5n + 3) .slide-inner-wrap {
      background-color: var(--blue);
    }

    &:nth-child(5n + 4) .slide-inner-wrap {
      background-color: var(--purple);
    }

    &:nth-child(5n) .slide-inner-wrap .slide-image {
      background-color: var(--yellow);
    }

    &:is(:nth-child(5n + 1), :nth-child(5n + 3), :nth-child(5n + 4))
      .slide-content
      * {
      color: var(--white) !important;
    }

    /* Light backgrounds -> black text */
    &:is(:nth-child(5n + 2), :nth-child(5n)) .slide-content * {
      color: var(--black) !important;
    }
  }

  /* Mobile: stack image above text */
  @media (max-width: 768px) {
    .slide-inner-wrap {
      flex-direction: column !important;
      text-align: center !important;
      padding: var(--spacer-s, 20px);
    }

    .slide-image {
      width: 100% !important;
      /* max-width: 300px; */
    }

    .slide-content{
      padding-left:2em;
      padding-right:2em;
      padding-bottom:2em;
    }
  }
}

/*--/------*/
/* --{{ CAMP SLIDER PANEL — CAMP CARDS }}-- */
/*--/------*/
.CampSliderPanel {
  /* The card */
  .slide-inner-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 3;
    box-sizing: border-box;
    border: var(--border-thick) solid var(--panel-color, var(--blue));
    border-radius: var(--spacer-s, 25px);
  }

  /* Full-bleed image + dark scrim */
  .slide-image {
    position: absolute;
    inset: 0;
    margin: 0;

    a {
      display: block;
      height: 100%;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease-in-out;
    }
  }

  /* Centred title overlay */
  .slide-content {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
  }

  .slider-overlay .slide-content {
    background: rgba(0, 0, 0, 0.4);
  }

  .slide-title {
    position: relative;
    display: inline-block;
    margin: 0;
    font: var(--text-feature);
    text-transform: uppercase;
    pointer-events: auto;
    --card-color: var(--panel-accent, var(--yellow));
    width: 100%;

    a {
      color: var(--white);
      text-decoration: none;
    }
  }

  /* Hover: gentle zoom */
  .slide-inner-wrap:hover .slide-image img {
    transform: scale(1.05);
  }

  /* Infinite 5-step colour rotation — border + accent bar per card,
	   using the same contrast pairings as the flip cards */
  .tf_swiper-slide {
    &:nth-child(5n + 1) {
      --panel-color: var(--blue);
      --panel-accent: var(--yellow);
    }
    &:nth-child(5n + 2) {
      --panel-color: var(--orange);
      --panel-accent: var(--light-blue);
    }
    &:nth-child(5n + 3) {
      --panel-color: var(--green);
      --panel-accent: var(--purple);
    }
    &:nth-child(5n + 4) {
      --panel-color: var(--purple);
      --panel-accent: var(--green);
    }
    &:nth-child(5n) {
      --panel-color: var(--yellow);
      --panel-accent: var(--blue);
    }
  }
}

.TypesOfCamps {
  .tf_swiper-slide {
    &:nth-child(5n + 3) {
      --panel-color: var(--gray);
      --panel-accent: var(--purple);
    }
  }
}

/*--/------*/
/* --{{ IMG WITH BORDER PANEL — CAMP-CARD STYLE IMAGES }}-- */
/*--/------*/
/* Static grid version of the .CampSliderPanel card recipe */
.ImgWithBorderPanel .ImgWithBorder {
  /* The card */
  display: block;
  width: 100%;
  position: relative;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  box-sizing: border-box;
  border: var(--border-thick) solid var(--panel-color, var(--blue));
  border-radius: var(--spacer-s, 25px);

  .image-content:before {
    background-color: rgba(0, 0, 0, 0.4) !important;
  }
  /* Full-bleed image */
  .image-wrap {
    position: absolute;
    inset: 0;
    margin: 0;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s ease-in-out;
    }
  }

  /* Long captions: keep the title visible instead of clipping at the top */
  .image-content {
    justify-content: safe center;
    overflow-y: auto;
  }

  .image-title {
    position: relative;
    margin: 0;
    font: var(--text-feature);
    text-transform: uppercase;
    color: var(--white);
    --card-color: var(--panel-accent, var(--yellow));
  }

  .image-caption {
    margin-top: var(--spacer, 20px);
  }

  /* Hover: gentle zoom */
  &:hover .image-wrap img {
    transform: scale(1.05);
  }
}

/* Same 5-step colour pairings as the camp cards, read left-to-right
   across the three sub-columns (2 cards each; card 6 wraps to pair 1) */
.ImgWithBorderPanel {
  .sub_column.first {
    .ImgWithBorder:nth-of-type(1) {
      --panel-color: var(--blue);
      --panel-accent: var(--yellow);
    }
    .ImgWithBorder:nth-of-type(2) {
      --panel-color: var(--orange);
      --panel-accent: var(--light-blue);
    }
  }

  .sub_column:not(.first):not(.last) {
    .ImgWithBorder:nth-of-type(1) {
      --panel-color: var(--green);
      --panel-accent: var(--purple);
    }
    .ImgWithBorder:nth-of-type(2) {
      --panel-color: var(--purple);
      --panel-accent: var(--green);
    }
  }

  .sub_column.last {
    .ImgWithBorder:nth-of-type(1) {
      --panel-color: var(--yellow);
      --panel-accent: var(--blue);
    }
    .ImgWithBorder:nth-of-type(2) {
      --panel-color: var(--blue);
      --panel-accent: var(--yellow);
    }
  }
}

/* iPad landscape and below: horizontal peek slider (1024px = iPad landscape) */
@media (max-width: 1024px) {
  .ImgWithBorderPanel {
    overflow: visible;

    /* Image subrow only — intro/header subrow stays as-is */
    .module_subrow:has(.ImgWithBorder) {
      display: flex !important;
      grid-template-columns: none !important;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      gap: var(--spacer-xs, 15px);
      padding: var(--spacer-s, 20px);
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }

      /* Flatten the 3 sub-columns into one scroll track */
      .sub_column {
        display: contents;
      }
    }

    .ImgWithBorder {
      flex: 0 0 var(--slider-peek-width);
      width: var(--slider-peek-width);
      aspect-ratio: 1 / 2;
      scroll-snap-align: center;
      min-width: 0;
      margin-top: 0 !important;
    }
  }
}

.employeeSlider img{
  filter:brightness(0) invert(1);
}

/*--/------*/
/* --{{ ACTIVITY SLIDER PANEL }}-- */
/*--/------*/
.ActivitySliderPanel {
  .slide-image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .slide-title {
    font: var(--text-h3) / 1em var(--font-heading);
  }
}

/*--/------*/
/* --{{ ROW / SUBROW — MOBILE PEEK SLIDER }}-- */
/* Add SliderOnMobile (or legacy Slider3Col) on a Themify row or subrow */
/*--/------*/
@media (max-width: 1024px) {
  /* Parent row_inner that contains a SliderOnMobile track */
  .row_inner:has(.SliderOnMobile),
  .row_inner:has(.Slider3Col) {
    width: 100% !important;
    max-width: 100% !important;
  }

  .SliderOnMobile,
  .Slider3Col {
    overflow: visible;

    /* Row: track is .row_inner. Subrow: the element itself is the track. */
    &:is(.module_subrow, .themify_builder_sub_row),
    > .row_inner {
      display: flex !important;
      grid-template-columns: none !important;
      flex-direction: row;
      flex-wrap: nowrap;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      /* gap: var(--spacer-xs, 15px);
      padding: var(--spacer-s, 20px); */
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }
    }

    &:is(.module_subrow, .themify_builder_sub_row) > .module_column,
    > .row_inner > .module_column {
      display: flex !important;
      flex: 0 0 var(--slider-peek-width);
      flex-direction: column;
      align-items: center;
      width: var(--slider-peek-width);
      max-width: none !important;
      min-width: 0;
      scroll-snap-align: center;
      box-sizing: border-box;
      padding: var(--spacer-s, 20px);
      text-align: center;
    }

    /* Column dividers are for the desktop grid only */
    /* .tb_row_frame_wrap {
      display: none;
    } */
  }
}

/*--/------*/
/* --{{ CUSTOM TESTIMONIAL SLIDER }}-- */
/* CSS-only layout for Themify testimonial slider (.CustomTestimonial) */
/*--/------*/
.CustomTestimonial,
.CustomTestimonials {
  --testimonial-accent: var(--blue);
  --testimonial-radius: var(--spacer-s, 25px);
  --testimonial-img-w: clamp(110px, 22vw, 160px);
  /* Match frame-mask-testimonial.svg viewBox 169.91 × 365.1 */
  --testimonial-img-h: calc(var(--testimonial-img-w) * 365.1 / 169.91);
  --testimonial-frame-mask: var(--mask-testimonial-frame);
  /* How far the frame sits onto/over the card’s left border */
  --testimonial-overlap: calc(var(--testimonial-img-w) * 0.55);

  /* Allow image to overhang the card edge */
  .themify_builder_slider,
  .tf_swiper-container,
  .tf_swiper-wrapper,
  .tf_swiper-slide,
  .testimonial-item {
    overflow: visible !important;
  }

  .tf_swiper-slide {
    /* Extra left pad so the overlapping frame isn’t clipped */
    padding: 28px 12px 12px calc(18px + 0.25 * var(--testimonial-img-w));
    box-sizing: border-box;
    height: auto !important;
    text-align: left !important;

    &:nth-child(odd) {
      --testimonial-accent: var(--blue);
    }

    &:nth-child(even) {
      --testimonial-accent: var(--yellow);
    }
  }

  .testimonial-item {
    height: 100%;
  }

  .testimonial-content {
    position: relative;
    display: grid;
    /* First col = in-card slice of the overhanging frame (not full img width) */
    grid-template-columns: calc(var(--testimonial-img-w) * 0.28) 1fr;
    grid-template-areas:
      "img quote"
      "img author";
    column-gap: 0.75rem;
    row-gap: 0.75rem;
    align-items: center;
    box-sizing: border-box;
    /* Card must clear the portrait photo + vertical inset */
    min-height: calc(var(--testimonial-img-h) + 2rem);
    /* Left pad leaves room for the framed photo to sit on the border */
    padding: 1.25rem 1.5rem 1.25rem var(--testimonial-overlap);
    background: var(--white, #fff);
    border: var(--border-thick) solid var(--testimonial-accent);
    border-radius: var(--testimonial-radius);
    text-align: left !important;
    color: var(--black, #000);

    /* Hide decorative quote mark */
    &::before {
      content: none;
    }
  }

  .testimonial-image {
    grid-area: img;
    position: relative;
    z-index: 2;
    width: var(--testimonial-img-w);
    height: var(--testimonial-img-h);
    aspect-ratio: 169.91 / 365.1;
    /* Pull left so the frame overlaps / breaks the card’s left border */
    margin: 0.65rem 0 0.65rem
      calc(-1 * (var(--testimonial-overlap) + var(--border-thick) + 0.2 * var(--testimonial-img-w)));
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    align-self: center;
    box-sizing: border-box;

    /* Stretchable irregular frame stroke covering full photo */
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background-color: var(--testimonial-accent);
      -webkit-mask-image: var(--testimonial-frame-mask);
      -webkit-mask-size: 100% 100%;
      -webkit-mask-position: center;
      -webkit-mask-repeat: no-repeat;
      mask-image: var(--testimonial-frame-mask);
      mask-size: 100% 100%;
      mask-position: center;
      mask-repeat: no-repeat;
    }

    img {
      position: absolute !important;
      top: 54%;
      left: 50%;
      z-index: 1;
      display: block;
      width: 89% !important;
      height: 88% !important;
      max-width: none !important;
      object-fit: cover !important;
      object-position: center;
      border: none !important;
      border-radius: 0;
      transform: translate(-50%, -50%);
      -webkit-mask: none;
      mask: none;
    }
  }

  .testimonial-entry-content {
    grid-area: quote;
    margin: 0;
    padding-top: 0.5rem;
    text-align: left !important;

    p {
      margin: 0;
      font: 1em / 1.45 var(--font-body);
      font-style: italic;
      color: var(--black, #000);
      text-wrap: pretty;
    }
  }

  .testimonial-author {
    grid-area: author;
    margin: 0;
    text-align: left !important;

    .person-name,
    .person-company,
    .person-title {
      font: 700 1em / 1.2 var(--font-heading);
      color: var(--black, #000);
      text-transform: uppercase;
      letter-spacing: 0;
    }
  }

  /* Keep pager/nav clear of overhanging image */
  .carousel-nav-wrap {
    margin-top: 0.5rem;
  }
}

@media (max-width: 768px) {
  .CustomTestimonial,
  .CustomTestimonials {
    --testimonial-img-w: 96px;

    .tf_swiper-slide {
      padding: 24px 8px 8px;
    }

    .testimonial-content {
      min-height: 0;
      padding: 1.1rem 1rem 1.1rem var(--testimonial-overlap);
      column-gap: 0.65rem;
    }

    .testimonial-entry-content p {
      font-size: 0.95em;
    }
  }
}