/* 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--type-image {
  margin-top: 0;
  height: calc(100vh - 6em);
}

.gwd-slideshow img,
.gwd-slideshow picture,
.gwd-slideshow video {
  width: 100%;
  min-height: calc( 100vh - 6em);
  object-fit: cover;
  grid-area: 1 / 1;
  margin-bottom: 0;
}

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

  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: rgba(219, 171, 45, 0.8);
  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 #dbab2d;
  cursor: pointer;
  width: 2.25em;
  height: 1em;
}
.gwd-slideshow .gwd-dot.is-active { background: #dbab2d; border-color: #FFFFFF;}

/* 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;
}
.gwd-slideshow p { margin: 0; }
.gwd-slideshow a.button, .gwd-slideshow a.btn {
  display: inline-block;
  margin-top: 10px;
}

@media (min-width: 62em) {

  .gwd-slideshow,
  .gwd-slideshow .gwd-slide {
    height: calc(100vh - 6em);
  }
  .gwd-slideshow .gwd-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  /* 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 */
  }

  /* 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 */
}

@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;
    }
    
}