/* =========================
   SLIDES 02 — CONSOLIDATED
   ========================= */

/* Tunables */
.sr-slides-02{
  --slides-card-h: 70vh;     /* desktop card height */
  --slides-top-gap: 2rem;    /* gap from header to first sticky card */
  --slides-stack-gap: 5rem;  /* gap between stacked cards */
  --slides-top-offset: 86px; /* fallback; JS updates this */
}

/* Container */
.sr-slides-02 .sr-slides-02__container{ overflow: visible; }

.sr-slides-02 .heading-wrapper {
  max-width: 800px;
  margin: auto;
}

/* Each slide/card */
.sr-slides-02 .slides-content{
  position: sticky;
  top: calc(var(--slides-top-offset) + var(--slides-top-gap));
  height: var(--slides-card-h);
  border-radius: 20px;
  transform-origin: top center;
  overflow: hidden;
  display: block; /* avoid fighting .row flex on desktop */
  padding: 0;
  border: 1px solid hsla(0, 0%, 100%, .8);
}

/* Slides Background */
/* Slides Background (uses per-slide --slides-bg from HubL) */
.sr-slides-02 .slides-content{
  position: sticky;
  top: calc(var(--slides-top-offset) + var(--slides-top-gap));
  height: var(--slides-card-h);
  border-radius: 20px;
  transform-origin: top center;
  overflow: hidden;
  display: block;
  padding: 0;
  border: 1px solid hsla(0, 0%, 100%, .8);

  /* fallback in case bg var isn't set */
  background-color: transparent;
}

.sr-slides-02 .slides-content::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--slides-bg);
  background-position: top right;  /* 👈 key change */
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
}




/* ensure actual columns stay above bg */
.sr-slides-02 .slides-content > * {
  position: relative;
  z-index: 1;
}


/* Stack spacing between cards */
.sr-slides-02 .slides-content + .slides-content{ margin-top: var(--slides-stack-gap); }

/* Text column (left) */
.sr-slides-02 .slides-content .sr-col:not(.image-col){
  display: flex;             /* enables pin-to-bottom children */
  flex-direction: column;
  width: 55%;
  height: 100%;
  padding: 2.5rem 0rem 2.5rem 0rem;
  position: relative;
  z-index: 2;
}

/* Image column (right) as absolute plane */
.sr-slides-02 .slides-content .sr-col.image-col{
  position: absolute;
  inset: 0 0 0 auto;         /* top:0; right:0; bottom:0 */
  /*width: 45%;*/
  /*padding: 2.5rem 2.5rem 0 2.5rem;*/
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* bottom align the wrapper */
  box-sizing: border-box;
  overflow: hidden;
}

/* Image wrapper + image fit */
.sr-slides-02 .image-col .responsive-image{ width: 100%; margin: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.sr-slides-02 .image-col .responsive-image img{
  display: block;
  width: 100% !important;
  height: auto;
  max-height: 100%;
  object-fit: contain !important;
}

/* Optional per-slide cover look: add `image--cover` to the image col */
.sr-slides-02 .sr-col.image-col.image--cover .responsive-image{ height: 100%; }
.sr-slides-02 .sr-col.image-col.image--cover .responsive-image img{
  width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover !important;
}

/* Badge */
.sr-slides-02 .sr-badge{
  display: inline-block;
  padding: .35rem .65rem;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 999px;
  margin-bottom: .5rem;
  color: inherit;
  background: color-mix(in srgb, currentColor 12%, transparent);
  border: 1px none color-mix(in srgb, currentColor 22%, transparent);
  align-self: flex-start;     /* hug content; no stretching */
  white-space: nowrap;        /* avoid 2-line pills */
}
@supports not (background: color-mix(in srgb, white 10%, transparent)){
  .sr-slides-02 .sr-badge{ background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.18); }
  .sr-slides-02 .text-white .sr-badge,
  .sr-slides-02 .text-light .sr-badge{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
}

/* ---------- Repeatable stats block (one hairline, pinned to bottom) ---------- */
.sr-slides-02 .sr-col:not(.image-col) .sr-statlines{
  --stat-gap-top: 32px;
  --stat-gap: 20px;
  --stat-hairline: color-mix(in srgb, currentColor 15%, transparent);
  /* margin-top: auto;           pins the block to the bottom of text col 
  margin-bottom: clamp(8rem, 13vh, 10rem);*/
  padding-top: 30px;
  border-top: 0.5px solid var(--stat-hairline);
  margin-top: clamp(2rem, 6vh, 4rem);
}

/* Smart responsive stat grid + equal heights */
.sr-statlines__grid{
  display: grid;
  gap: var(--stat-gap, 20px);
  align-items: stretch;      /* children stretch to row height */
  grid-auto-rows: 1fr;       /* equal heights across rows */
  grid-template-columns: 1fr;/* 1 item = full width */
}

/* 2, 3, 4 items → equal columns */
.sr-statlines__grid[data-count="2"]{ grid-template-columns: repeat(2, 1fr); }
.sr-statlines__grid[data-count="3"]{ grid-template-columns: repeat(3, 1fr); }
.sr-statlines__grid[data-count="4"]{ grid-template-columns: repeat(4, 1fr); }


/* Individual stat item: grid inside for tidy top row + note baseline */
.sr-statitem{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;        /* allows note to sit on baseline */
  grid-template-areas:
    "icon value"
    "note note";
  gap: 0.4rem 0.6rem;
  min-height: 0;                       /* avoid overflow in equal-height rows */
}

.sr-statitem.has-icon .sr-statitem__icon{ grid-area: icon; }
.sr-statitem__icon{
  width: 18px; height: 18px; line-height: 0;
  align-self: flex-start;              /* top-align icon with value */
}
.sr-statitem__icon img{ width: 100%; height: 100%; object-fit: contain; }

.sr-statitem__valuewrap{
  grid-area: value;
  display: inline-flex;
  align-items: flex-start;             /* top-align value + suffix */
  gap: 0.15em;
  font-weight: 600;
  line-height: 1;
}
.sr-statitem__value{ font-size: clamp(2.5rem, 4.2vw, 3.25rem); }
.sr-statitem__suffix{ font-size: clamp(2.5rem, 4.2vw, 3.25rem); line-height: 1; }
.sr-statitem__prefix{ font-size: clamp(2.5rem, 4.2vw, 3.25rem); line-height: 1; }

.sr-statitem__note{
  grid-area: note;
  font-size: 0.95rem;
  opacity: 0.85;
  margin-top: 0.25rem;
  align-self: end;                     /* baseline-align within equal height */
}

/* Fallback for color-mix */
@supports not (color: color-mix(in srgb, white 10%, black)){
  .sr-slides-02 .sr-col:not(.image-col) .sr-statlines{ border-top-color: rgba(0,0,0,.12); }
  .text-white .sr-statlines, .text-light .sr-statlines{ border-top-color: rgba(255,255,255,.24); }
}

/* ---- Mobile: stack cleanly and shrink images ---- */
/* ---- Mobile: stack cleanly and sit closer to heading ---- */
@media (max-width: 767px){

  .sr-slides-02{
    --slides-card-h: auto;
    --slides-stack-gap: 1.5rem;
  }

  .sr-slides-02 .slides-content{
    position: relative;      /* no sticky on mobile */
    top: 0;                  /* 🔑 remove offset that creates big gap */
    height: auto;
    transform: none;
    margin-top: 0;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
  }

  .sr-slides-02 .slides-content .sr-col:not(.image-col),
  .sr-slides-02 .slides-content .sr-col.image-col{
    position: static;
    width: 100% !important;
    padding: 1.5rem 1.5rem 0 1.5rem;
  }

  .sr-slides-02 .slides-content .sr-col:not(.image-col){
    order: 1;
    margin-bottom: 1rem;
  }

  .sr-slides-02 .slides-content .sr-col.image-col{
    order: 2;
  }

  .sr-slides-02 .sr-col.image-col .responsive-image{
    margin-top: .5rem;
    padding: 0 1rem;
  }

  .sr-slides-02 .sr-col.image-col .responsive-image img{
    width: 90%;
    max-height: 45vh;
    margin: 0 auto 1rem;
  }

  /* kill background image overlay on mobile if you want it cleaner */
  .sr-slides-02 .slides-content::before {
    background-image: none !important;
  }
  /* Remove the fake spacer above the image on mobile */
  .sr-slides-02 .image-spacer{
    display: none;
  }

  /* Remove the vertical gap between text + image inside slides */
  .sr-slides-02 .slides-content.sr-row{
    row-gap: 0;              /* or 0.75rem if you want a tiny gap */
  }
}

/* --- Constrain slides to a 1300px page container --- */
.sr-slides-02{
  --slides-max-w: 1300px;                 /* tweak if your site uses a different max */
  /*--slides-pad-x: clamp(16px, 4vw, 32px);  soft side gutters */
}

/* Center the stack and keep a little gutter */
.sr-slides-02 .slides-content-container{
  max-width: var(--slides-max-w);
  margin-inline: auto;
  padding-inline: var(--slides-pad-x);
  box-sizing: border-box;
}

/* Each sticky card respects the same container width */
.sr-slides-02 .slides-content{
  max-width: var(--slides-max-w);
  margin-inline: auto;
  box-sizing: border-box;
}



/* ---------- Removed ----------
- Legacy single-stat `.sr-statline*` rules (replaced by `.sr-statlines` repeater)
- Duplicate “center left content vertically” block (left col is already flex)
- Duplicate image wrapper definitions
-------------------------------- */