/* Basic, modern, lean. Works with any content inside each slide. */
.gwd-slideshow {
  --gwd-slide-aspect: 16/9;    /* tweak to 21/9 or 4/3 if you want */
  --gwd-fade-ms: 600ms;          /* transition speed */
  --gwd-controls-bg: rgba(0,0,0,.45);
  --gwd-dot-size: 10px;

  position: relative;
  overflow: hidden;
  //border-radius: 14px;
  background: #000;
}

.gwd-slideshow .gwd-slides {
  position: relative;
  min-height: 200px;
  aspect-ratio: var(--gwd-slide-aspect);
}

.gwd-slideshow .gwd-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--gwd-fade-ms) ease;
  pointer-events: none;
  display: grid;
  align-items: end; /* captions at bottom by default */
  will-change: opacity;
}

.gwd-slideshow .gwd-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* help Chrome/Safari commit the animation */
.gwd-slideshow .gwd-slide { will-change: opacity; z-index: 0; }

/* incoming slide starts transparent for one frame */
.gwd-slideshow .gwd-slide.is-entering {
  opacity: 0;
  z-index: 1;
}

/* active slide is visible (yours already sets opacity:1); ensure stacking */
.gwd-slideshow .gwd-slide.is-active {
  z-index: 1;
}

/* outgoing slide fades out but stays paintable until transition ends */
.gwd-slideshow .gwd-slide.is-leaving {
  opacity: 0;
  pointer-events: none;
  z-index: 2;  /* above the incoming while both overlap */
}

.gwd-slideshow .field--name-field-media-image-3 .field--type-image {
  margin-top: 0;
  height: calc(100vh - 6em);
}

.gwd-slideshow .field--name-field-media-image-3 img,
.gwd-slideshow .field--name-field-media-image-3 picture,
.gwd-slideshow video {
  //width: auto;
  //max-height: calc( 100vh - 6em);
  //min-width: 100vw;
  //object-fit: cover;
  //grid-area: 1 / 1;
  //margin-bottom: 0;
}
.gwd-slideshow .field--name-field-media-image-3 img {
  //top: 0;
  //position: absolute;
}
.gwd-slideshow .field--name-field-media-image-7 img {
  margin-bottom: 0;
}
.gwd-slideshow .with-vid-img {
  height: 100%;
}

.gwd-slideshow .gwd-caption {
  grid-area: 1 / 1;
  align-self: end;
  color: #000000;
  padding: clamp(12px, 3vw, 28px);
  height: 25vh;
  width: 100vw !important;
  max-width: unset;

  p {
    color: #000000; 
    font-size: 1.6em;
    font-weight: 400;
  }
}
.gwd-caption-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50vh;
  background: #ffffff;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.45) 45%, rgba(255, 255, 255, 0.35) 65%, rgba(255, 255, 255, 0) 85%);
}

.gwd-slideshow .gwd-prev,
.gwd-slideshow .gwd-next {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 1;
  border: 0;
  background: rgb(18, 81, 147);
  border: 3px solid #FFFFFF;
  color: #fff;
  width: 2.5em;
  height: 2.5em;
  border-radius: 999px;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  
  svg {
    position: absolute;
    right: 9px;
    top: 9px;
    height: 1.5em;
    width: 1.5em;
  }
}

.gwd-slideshow .gwd-prev { left: 1.5em; }
.gwd-slideshow .gwd-next { right: 1.5em; }
.gwd-slideshow .gwd-prev:hover,
.gwd-slideshow .gwd-next:hover { background: rgba(0,0,0, 0.65); }

.gwd-slideshow .gwd-dots {
  position: absolute;
  left: 50%;
  bottom: 1.25em;
  translate: -50% 0;
  display: flex;
  gap: 8px;
  z-index: 1;
}

.gwd-slideshow .gwd-dot {
  width: var(--gwd-dot-size);
  border-radius: 0;
  background: #FFFFFF;
  border: 1px solid rgb(18, 81, 147);
  cursor: pointer;
  width: 2.25em;
  height: 1em;
}
.gwd-slideshow .gwd-dot.is-active { background: rgb(18, 81, 147); border-color: #FFFFFF;}

.gwd-slideshow .gwd-caption.row.w-100 {
  background: rgba(255,255,255,0.5);
  padding: 2em;
}

/* Optional: some default typography for common field output */
.gwd-slideshow h2, .gwd-slideshow .field--name-title {
  margin: 0 0 6px 0;
  font-size: clamp(18px, 3vw, 32px);
  font-weight: 600;
  //font-size: 3em;
  font-size: 2.25em;
}
.gwd-slideshow p { margin: 0; }
.gwd-slideshow a.button, .gwd-slideshow a.btn {
  display: inline-block;
  margin-top: 10px;
}
.gwd-slideshow .gwd-caption-text-holder {
  width: 100%;
  position: absolute;
  bottom: 0;
  height: fit-content;
  margin-bottom: 2em;
}

@media (min-width: 62em) {

  .gwd-slideshow,
  .gwd-slideshow .gwd-slide {
    height: calc(100vh - 6em);
  }
  .gwd-slideshow .gwd-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    /*background: rgba(255, 255, 255, 0.4);
    //-webkit-backdrop-filter: blur(10px) brightness(0.85) saturate(110%);
    //backdrop-filter: blur(3px) brightness(0.85) saturate(110%);*/
  }
  /* Force the hero slideshow to fill the full viewport height */
  .gwd-slideshow.hero,         /* if you have a 'hero' class */
  .gwd-slideshow.is-hero,      /* or adjust selector to your hero block */
  .gwd-slideshow:first-of-type /* fallback: first slideshow on page */
  {
    aspect-ratio: auto;   /* disable the fixed 16/9 aspect */
    height: calc(100vh - 6em);        /* fill viewport minus the 6em tall header above*/
    //min-height: 100vh;    /* enforce it even if content is short */
    position: relative; 
    z-index: 0;
  }

  /* Make sure the slides and media inside also stretch */
  .gwd-slideshow.hero .gwd-slides,
  .gwd-slideshow.hero .gwd-slide {
    height: 100%;
  }

  .gwd-slideshow.hero img,
  .gwd-slideshow.hero picture,
  .gwd-slideshow.hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* crop edges if necessary */
  }

  /* Set your header height once (em matches your header sizing) */
  :root { --header-h: 6em; }

  /* The hero container immediately under the header */
  .gwd-slideshow.hero {
    position: relative;
    width: 100%;
    height: calc(100svh - var(--header-h)); /* use svh for mobile; falls back below */
    min-height: calc(100vh - var(--header-h)); /* fallback */
    overflow: hidden; /* hide any overlap */
  }

  /* Make the inline IMG behave like a background cover */
  .gwd-slideshow.hero img {
    position: absolute;
    inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover;        /* fill without distortion */
    object-position: center;  /* keep centered */
    display: block;           /* avoid inline-image gaps */
    margin-bottom: 0;
  }

}

/* NEEDED FOR SMOOTH SLIDE TRANSITIONS
-------------------------------------------------------------------*/
/* Put this near your other .gwd-slide rules */
.gwd-slideshow .gwd-slide {
  will-change: opacity;   /* hint browser to animate */
  z-index: 0;             /* baseline stacking */
}

/* New: incoming slide begins transparent this frame */
.gwd-slideshow .gwd-slide.is-entering {
  opacity: 0;  /* start fully transparent for one frame */
  z-index: 1; /* above base stack */
}

/* Existing is-active: ensure it sits below the outgoing while both overlap */
.gwd-slideshow .gwd-slide.is-active {
  z-index: 1;             /* active slide sits above base */
}


/* New: outgoing slide fades out but stays visible until transition ends */
.gwd-slideshow .gwd-slide.is-leaving {
  opacity: 0;             /* fades out */
  pointer-events: none;
  z-index: 2;             /* sits above incoming while fading */
}

.gwd-slideshow .gwd-button {
  background: #ffffff;
  padding: 0.5em 1em;
  margin-top: 1em;
  display: inline-table;
}

@media (max-width: 47.9375em) {

    .gwd-slideshow .gwd-prev {
        display: none;
    }
    .gwd-slideshow .gwd-next {
        display: none;
    }
    .view-reviews-slideshow .gwd-slideshow {
      height: 66vw;
    }
    .view-reviews-slideshow .gwd-slideshow .gwd-caption p {
      height: calc(6em + 8vw);
      height: auto;
      margin-top: 0;
    }
    .view-reviews-slideshow .gwd-slideshow:first-of-type {
      height: 54vw;
    }

    .view-reviews-slideshow .gwd-slideshow .gwd-slides {
      aspect-ratio: unset;
    }


}
@media (max-width: 34.9375em) {

    .view-reviews-slideshow .gwd-slideshow:first-of-type {
      height: 90vw;
    }
    .view-reviews-slideshow .gwd-slideshow .gwd-slide {
      height: auto;
    }
    
}

@media (min-width: 62em) {

  .gwd-slideshow .with-vid-img {
    height: 100%;
    width: 84%;
    margin-left: auto;
    margin-right: auto;
    left: 6%;
  }
  .gwd-slideshow .gwd-button {
    font-size: 1.25vw;
  }
  .gwd-slideshow .gwd-caption {
    bottom: 0em;
  }

}

@media (max-width: 34.9375em) {

  .view-slideshow .gwd-slideshow {
    padding: 0;
  } 

  .gwd-slideshow .gwd-caption.row.w-100 {
    bottom: 13em;
    position: absolute;
    background: transparent;
  }

  /* --- 1. Overall Slideshow Height & Aspect Ratio --- */
  /* The default 16/9 aspect ratio is not good for the
     portrait (425x850) images loaded on mobile. */
  .view-slideshow .gwd-slideshow .gwd-slides {
    aspect-ratio: unset; /* Disable 16/9 */
    height: 80vh;        /* Give it a tall, mobile-friendly height */
    min-height: 0;
  }

  .view-slideshow .gwd-slideshow .gwd-slide {
    height: 100%; /* Make slide fill the new height */
  }

  /* Make the background image fill this new height properly */
  .view-slideshow .gwd-slideshow .field--name-field-media-image-3 img,
  .view-slideshow .gwd-slideshow .field--name-field-media-image-3 picture {
    height: 100%;
    width: 100%;
    max-height: none; /* Override desktop styles */
    min-width: 0;     /* Override desktop styles */
    object-fit: cover;
  }

  /* --- 2. Stacked Layout for Slides 1 & 2 --- */
  /* Force the .row to stack its columns vertically */
  .view-slideshow .gwd-slideshow .with-vid-img.row {
    flex-direction: column;
    justify-content: center; /* Center the stack vertically */
    align-items: center;   /* Center items horizontally */
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;

    /* 3. Add an overlay for text readability */
    background: rgba(0, 0, 0, 0.5);
  }

  /* Override Bootstrap column behavior */
  .view-slideshow .gwd-slideshow .with-vid-img.row > [class*="col-"] {
    width: 100% !important;
    flex: 0 0 auto;
    padding: 0;
    margin-bottom: 1.5em;
  }

  .view-slideshow .gwd-slideshow .with-vid-img.row > [class*="col-"]:last-child {
    margin-bottom: 0;
  }

  /* --- 4. Responsive Media (Video/Image) --- */
  .view-slideshow .gwd-slideshow .testing-vid iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Keep video shape */
  }

  .view-slideshow .gwd-slideshow .testing-img img {
    width: 100%;
    max-width: 300px; /* Limit max size */
    height: auto;
    border-radius: 8px;
  }

  /* --- 5. Typography & Caption Adjustments --- */
  .gwd-slideshow h2,
  .gwd-slideshow .field--name-title {
    font-size: 1.9em; /* Reduce from 3em */
    line-height: 1.2;
  }

  .gwd-slideshow p {
    font-size: 1em;
    line-height: 1.5;
  }

  /* Adjust default caption (Slide 3) */
  .gwd-slideshow .gwd-caption {
    height: auto; /* Remove fixed 25vh */
    min-height: 25vh;
    padding: 1.5em;
    text-align: center;
    justify-content: center;
    align-items: center; /* Center vertically */
  }
  
  .gwd-slideshow .gwd-caption-overlay {
    position: absolute;
    height: 100vh;
  }

  .gwd-slideshow .gwd-caption-text-holder {
    position: relative; /* Unset absolute */
    margin-bottom: 0;
    bottom: 0;
  }

  .gwd-slideshow .gwd-caption p {
    font-size: 1em; /* Override 1.6em */
  }

  /* --- Controls --- */
  /* The existing (max-width: 47.9375em) query 
     already hides the prev/next arrows, which is fine. */
  .gwd-slideshow .gwd-dots {
    bottom: 0.75em; /* Move dots up a bit */
  }

  .gwd-slideshow .gwd-dot {
    width: 1.75em;
    height: 0.75em;
  }
  /*
  * 1. Tell the image's container to stretch and fill the
  * entire slide, overriding the 'align-items: end'.
  */
  .gwd-slideshow .gwd-slide .field--name-field-media-image-3 {
    align-self: stretch;
  }

  /*
  * 2. Ensure the image itself fills this stretched container.
  * (This makes it the "background").
  */
  .gwd-slideshow .gwd-slide .field--name-field-media-image-3 .field__item,
  .gwd-slideshow .gwd-slide .field--name-field-media-image-3 picture,
  .gwd-slideshow .gwd-slide .field--name-field-media-image-3 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* This "stretches" it without distortion */
  }

  /*
  * 3. Ensure the text (which is already position: absolute)
  * sits on top of the image.
  */
  .gwd-slideshow .gwd-slide .with-vid-img {
    z-index: 2; /* Sits on top of the image (z-index: 0) */
    height: 100%; /* Make sure it can fill the slide for centering */
  }

  .gwd-slideshow .gwd-slide .contextual-region {
    position: absolute;
    width: 100%;
  }
  .view-slideshow .gwd-slideshow .testing-img img {
    margin: auto;
    position: relative;
    display: block;
    width: 100%;
    max-width: 100vw;
  }
  .view-slideshow .gwd-slideshow .image-holder {
    top: 0;
    position: absolute;
    height: fit-content;
  }
  .view-slideshow .gwd-slideshow .text-holder {
    color: #ffffff;
    top: 82vw;
    position: absolute;
    padding: 2em;
  }
  .gwd-slideshow .position-absolute.with-no-side-element {
    position: absolute !important;
    width: 100%;
  }

}