/* ===========================================================
   DC48KE • “CENTER MODE” HERO
   - Active slide centered (JS)
   - Caption inside the active slide (bottom)
   - Dots under the caption (inside active slide)
   - Translucent scrim over the hero (in front of media)
   =========================================================== */

:root{
  --nav-h: 96px;        /* update or set dynamically via JS if needed */
  --accent: #4BC4C3;
  --accent-dark: #23B794;
  --text: #ffffff;
  --dot: #ffffffaa;
  --shadow: 0 20px 50px rgba(0,0,0,.22), 0 8px 24px rgba(0,0,0,.16);

  /* Scrim controls */
  --hero-scrim: rgba(0, 0, 0, .20);  /* veil tint */
  --hero-blur: 0px;                  /* try 2px–6px for glass blur */
}

html{ scroll-padding-top: var(--nav-h); }

/* Wrapper sits under sticky navbar; padding keeps content clear of it */
.sr-hero{
  position: relative;
  margin-top: 0;
  padding-top: var(--nav-h);
  min-height: clamp(68vh, 85vh, 88vh);
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  padding-inline: clamp(8px, 2vw, 24px);
  background-color: rgb(31, 31, 31);
}

/* Translucent screen over the whole hero (above media/overlay, below UI) */
.sr-scrim{
  position: absolute;
  inset: 0;
  z-index: 2;                         /* media=0, overlay=1, scrim=2, caption=3, dots/arrows=4 */
  background: var(--hero-scrim);
  pointer-events: none;               /* never block clicks */
  backdrop-filter: blur(var(--hero-blur));
}

/* Track is translated so active slide is centered */
.sr-track{
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  width: max-content;
  will-change: transform;
  transition: transform .75s cubic-bezier(.2,.7,.2,1);
}

/* Slides = cards that scale (inactive smaller), active bigger */
.sr-slide{
  position: relative;
  width: min(70vw, 980px);
  height: clamp(380px, 63vh, 640px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);

  transform-origin: center center;
  transform: scale(.74);
  opacity: .48;
  filter: grayscale(.12) saturate(.85);
  transition:
    transform .75s cubic-bezier(.2,.7,.2,1),
    opacity   .45s ease,
    filter    .45s ease;
}
.sr-slide.is-active{
  transform: scale(1.14);
  opacity: 1;
  filter: none;
  z-index: 2;
}

/* Media & overlay (fit perfectly inside the slide) */
.sr-media, .sr-overlay{ position:absolute; inset:0; }
.sr-media{
  top:0; height:100%; width:100%;
  object-fit: cover; object-position: center;
  display:block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  z-index:0;
}
.sr-overlay{
  top:0; height:100%;
  background:
    radial-gradient(80% 60% at 50% 35%, rgba(0,0,0,.28), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.48));
  z-index:1;
}

/* In-slide caption (bottom, visible only on active slide) */
.sr-cap-in{
  position:absolute;
  left:0; right:0; bottom:0;
  /* extra bottom padding leaves space for dots inside the slide */
  padding: 10px 14px 38px;
  background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,0));
  color:#eef7f6;
  text-align:center;
  font-size: clamp(14px, 1.6vw, 18px);
  line-height:1.5;
  max-width:min(900px, 92%);
  margin:0 auto;
  opacity:0; transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events:none;
  z-index:3; /* above overlay/media and scrim */
}
.sr-slide.is-active .sr-cap-in{ opacity:1; transform:none; }

/* Arrows */
.sr-arrow{
  position: absolute;
  top: calc(50% + var(--nav-h)/2);
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.28);
  color: #fff;
  border: 2px solid #ffffffb3;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 4;   /* above scrim & caption */
  transition: background .2s ease, transform .12s ease, border-color .2s ease;
}
.sr-arrow:hover{
  background: rgba(0,0,0,.45);
  border-color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.sr-prev{ left: 16px; }
.sr-next{ right: 16px; }

/* Dots (default placement; JS moves them inside active slide) */
.sr-dots{
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(44px, 5vh, 64px);
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 4;
}
.sr-dots button{
  width: 9px; height: 9px;
  border-radius: 999px;
  border: 2px solid --dot;
  border-color: var(--dot);
  background: transparent;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.sr-dots button.is-active{
  background: #fff;
  border-color: #fff;
  transform: scale(1.15);
}

/* Dots when nested inside the active slide (always under caption) */
.sr-slide .sr-dots{
  position: absolute;
  left: 0; right: 0; bottom: 10px;   /* sits under the caption's padding */
  margin: 0 auto;
  z-index: 4;                         /* above scrim/overlay/media, below arrows */
  pointer-events: auto;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .sr-track{ transition: none; }
  .sr-slide{ transition: none; }
}

/* Responsive tweaks */
@media (max-width: 900px){
  .sr-slide{ width: 82vw; }
  .sr-arrow{ top: calc(50% + var(--nav-h)/3); }
}
@media (max-width: 640px){
  :root{ --nav-h: 72px; }
  .sr-slide{
    height: clamp(320px, 58vh, 520px);
    transform: scale(.82);
  }
  .sr-slide.is-active{ transform: scale(1.08); }
}