/* =========================================================
   Splide Feature Grid (Clean)
   - ≤768px        : normal slider, 1 slide per view (show ALL slides)
   - 769px–1199px  : Laptop layout = 1 featured on top + 2 thumbs below
   - ≥1200px       : Desktop layout = Grid 3×2, featured spans 2 cols & 2 rows
   One image style – crop via object-fit
   ========================================================= */

:root {
  --feature-gap: 16px;
}

/* ---------------------------------------------------------
   BASE: media chain + sizing
   --------------------------------------------------------- */

.js-splide-featuregrid {
  width: 100%;
}

/* Ensure each slide can host an absolute caption */
.js-splide-featuregrid .splide__slide,
.js-splide-featuregrid .slide__content {
  position: relative;
  height: 100%;
}

/* Media area fills the tile */
.js-splide-featuregrid .slide__media {
  height: 100%;
}

/* Make the wrapper chain fill available space (Drupal-safe) */
.js-splide-featuregrid .slide__media a,
.js-splide-featuregrid .slide__media .media,
.js-splide-featuregrid .slide__media picture,
.js-splide-featuregrid .slide__media img {
  display: block;
  width: 100%;
  height: 100%;
}

.js-splide-featuregrid picture {
  line-height: 0; /* kill inline gaps */
}

.js-splide-featuregrid img {
  object-fit: cover;
}

/* ---------------------------------------------------------
   CAPTION: single source of truth
   --------------------------------------------------------- */

.js-splide-featuregrid .slide__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;          /* overlay inside tile */
  margin: 0;
  z-index: 5;

  padding: 12px 14px;
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .5);

  background: linear-gradient(
    to top,
    rgba(0,0,0,.65),
    rgba(0,0,0,.25) 55%,
    rgba(0,0,0,0)
  );

  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.js-splide-featuregrid .slide__caption a {
  color: inherit;
  text-decoration: none;
}

.js-splide-featuregrid .slide__caption h2 {
  margin: 0;
}

/* ---------------------------------------------------------
   IMAGE OVERLAY (bottom dark gradient)
   --------------------------------------------------------- */

.js-splide-featuregrid .slide__media{
  position: relative;
  overflow: hidden;
}

.js-splide-featuregrid .slide__media::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.70),
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,0) 70%
  );
}

.js-splide-featuregrid .slide__media::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;

  background: rgba(0,0,0,.35);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}



/* Hover overlay: ONLY the hovered slide */
@media (hover: hover){
  .js-splide-featuregrid .splide__slide:hover > .slide__content > .slide__media::before{
    opacity: 1;
  }
}




.js-splide-featuregrid .slide__caption{
  position: absolute;
  z-index: 5;
}







/* ---------------------------------------------------------
   ARROWS (fade on hover)
   --------------------------------------------------------- */

.js-splide-featuregrid .splide__arrow {
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.js-splide-featuregrid:hover .splide__arrow {
  opacity: 1;
  pointer-events: auto;
}

/* =========================================================
   DESKTOP / TABLET: ≥1200px
   Grid 3×2, featured spans 2×2
   (keeps YOUR font sizes)
   ========================================================= */

@media (min-width: 1200px) {

  .js-splide-featuregrid .splide-page {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--feature-gap);

    height: clamp(380px, 40vw, 470px);
    width: 100%;
    align-items: stretch;
    grid-auto-rows: 1fr;
  }

  /* Keep tiles clipped and equal-height */
  .js-splide-featuregrid .splide-featured,
  .js-splide-featuregrid .splide-thumbs > * {
    overflow: hidden;
    min-height: 0;
    height: 100%;
    align-self: stretch;
  }

  /* Featured spans 2 cols & 2 rows */
  .js-splide-featuregrid .splide-featured {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }

  /* Thumbs become direct grid items */
  .js-splide-featuregrid .splide-thumbs {
    display: contents;
  }

  /* Crop focus */
  .js-splide-featuregrid .splide-featured img {
    object-position: center center;
  }

  .js-splide-featuregrid .splide-thumbs img {
    object-position: center top;
  }

  /* Caption typography (AS YOU SET) */
  .js-splide-featuregrid .splide-featured .slide__caption {
    font-size: clamp(12px, 1.4vw, 18px);
    padding: 14px 18px;
    -webkit-line-clamp: 3;
  }

  .js-splide-featuregrid .splide-thumbs .slide__caption {
    font-size: clamp(08px, .95vw, 12px);
    padding: 10px 12px;
    -webkit-line-clamp: 6;
  }
}

/* =========================================================
   LAPTOP / SMALL DESKTOP: 769px–1199px
   Layout: 1 featured (full width) + 2 thumbs BELOW (2 columns)
   (keeps YOUR font sizes — we only change layout)
   ========================================================= */

@media (min-width: 769px) and (max-width: 1199px) {

  .js-splide-featuregrid .splide-page {
    display: grid;
    grid-template-columns: 1fr 1fr;          /* 2 columns */
    grid-template-rows: 2fr 1fr;             /* featured row taller */
    gap: var(--feature-gap);

    height: clamp(360px, 42vw, 520px);       /* overall block height */
    width: 100%;
    align-items: stretch;
    grid-auto-rows: 1fr;
  }

  /* Featured on top, full width */
  .js-splide-featuregrid .splide-featured {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 100%;
    overflow: hidden;
    min-height: 0;
  }

  /* Thumbs become direct grid items in row 2 */
  .js-splide-featuregrid .splide-thumbs {
    display: contents;
  }

  .js-splide-featuregrid .splide-thumbs > * {
    grid-row: 2;
    height: 100%;
    align-self: stretch;
    overflow: hidden;
    min-height: 0;
  }

  /* Crop focus */
  .js-splide-featuregrid .splide-featured img {
    object-position: center center;
  }

  .js-splide-featuregrid .splide-thumbs img {
    object-position: center top;
  }

  /* Keep your typography choices (same as desktop unless you change later) */
  .js-splide-featuregrid .splide-featured .slide__caption {
    font-size: clamp(12px, 1.4vw, 18px);
    padding: 14px 18px;
    -webkit-line-clamp: 3;
  }

  .js-splide-featuregrid .splide-thumbs .slide__caption {
    font-size: clamp(08px, .95vw, 12px);
    padding: 10px 12px;
    -webkit-line-clamp: 6;
  }
}

/* =========================================================
   MOBILE: ≤768px
   Normal slider, show ALL slides (do NOT hide thumbs)
   ========================================================= */

@media (max-width: 768px) {

  /* Disable grid layout */
  .js-splide-featuregrid .splide-page {
    display: block;
    height: auto;
  }

  /* IMPORTANT: keep thumbs visible so their slides can appear */
  .js-splide-featuregrid .splide-thumbs {
    display: block !important;
  }

  /* Slides can be auto-height on mobile */
  .js-splide-featuregrid .splide__slide,
  .js-splide-featuregrid .slide__content {
    height: auto;
  }

  /* Give mobile slides a stable media box */
  .js-splide-featuregrid .slide__media {
    aspect-ratio: 4 / 3;  /* change to 16 / 9 if you prefer */
    height: auto;
  }

  /* Mobile caption sizing (AS YOU SET) */
  .js-splide-featuregrid .slide__caption {
    font-size: clamp(8px, 4.2vw, 12px);
    padding: 12px 14px;
    -webkit-line-clamp: 3;
  }
}