/* Vars (tweak if needed) */
.cs-carousel { --cs-bg:#fff; --cs-text:#000; --cs-brand:#35368f; --cs-radius:24px; }

/* Wrapper */
.cs-carousel{ background:#fff; color:#000; padding:clamp(24px,5vw,64px) 16px; }
.cs-carousel__frame{
  max-width:auto; margin:0 auto; position:relative;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px;
}

/* Arrows */
.cs-carousel__arrow{
  background:#fff; border:1px solid #35368f; border-radius:50%;
  width:40px; height:40px; font-size:22px; font-weight:700; cursor:pointer; color: #e71788;
  transition:.25s; box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.cs-carousel__arrow:hover{ background:#e71788 !important); color:#f0f1f5 !important; }

/* Track */
.cs-carousel__track{
  overflow-x:auto; scroll-snap-type:x mandatory;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,1fr);
  gap:clamp(16px,3vw,32px); padding:8px; scroll-behavior:smooth;
}
.cs-card{
  scroll-snap-align:center; background:#fff; border:2px solid #35368f;
  border-radius:var(--cs-radius); box-shadow:0 0px 8px rgba(0,0,0,.06); overflow:hidden;
  min-width:clamp(720px,80vw,1040px);
}

/* Card layout */
.cs-card__grid{ display:grid; grid-template-columns:1.4fr 0.8fr; gap:clamp(20px,4vw,48px); align-items:center; padding:clamp(20px,4vw,48px); }
.cs-card__eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-weight:600; font-size:12px; margin:0 0 10px; color:var(--cs-brand); }
.cs-card__headline{ font-size:clamp(28px,4vw,44px); line-height:1.1; font-weight:700; margin:0 0 12px; }
.cs-card__subcopy{ font-size:18px; line-height:1.5; opacity:.9; }
.cs-card__figure{ position:relative; }
.cs-card__photo{ width:70%; display:block; border-radius:var(--cs-radius); }
.cs-card__caption{
  position:absolute; left:16px; right:16px; bottom:16px;
  background:#fff; color:#111; border-radius:999px; padding:10px 14px;
  box-shadow:0 6px 18px rgba(0,0,0,.12); display:flex; gap:8px; flex-wrap:wrap; align-items:baseline;
}
.cs-card__person{ font-weight:700; }
.cs-card__role{ opacity:.8; }

/* Responsive */
@media (max-width:960px){
  .cs-card__grid{ grid-template-columns:1fr; }
  .cs-card{ min-width:90vw; }
}
/* show exactly 1 card per viewport */
.cs-carousel__track{
  grid-auto-columns: 100%;   /* each slide spans full track width */
  gap: 0;                    /* no grid gap that can reveal next slide */
  padding-inline: 0;         /* prevent edge peeking */
}

/* spacing between slides (use margin instead of gap) */
.cs-card{
  min-width: 100%;
  margin-right: 24px;        /* space between slides */
}
.cs-card:last-child{ margin-right: 0; }

/* optional: keep arrows above content */
.cs-carousel__arrow{ z-index: 3; }
.cs-carousel {
  padding-top: 0 !important;
  margin-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
}
/* Border around name + title */
.cs-card__caption {
  border: 2px solid #e71788; /* light border */
  border-radius: 8px !important;
  background: #fff;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: none; /* optional: remove drop shadow if you prefer a clean look */
}

/* Make sure the name and title text stay centered and readable */
.cs-card__person {
  font-weight: 700;
}

.cs-card__role {
  opacity: 0.8;
  font-size: 14px;
}
.cs-card__photo {
  border: 1px solid #35368f;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  background: #fff;
  padding: 4px;
}
/* --- Fix caption layout for mobile --- */
@media (max-width: 960px) {
  /* remove absolute positioning so it sits below the image */
  .cs-card__caption {
    position: static !important;
    margin-top: 1px !important;   /* small gap between image and name box */
    display: inline-flex;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    background: #fff;
    padding: 8px 16px;
    box-shadow: none;             /* optional: keep flat for mobile */
  }

  /* make sure the image keeps its border and doesn’t stretch weirdly */
  .cs-card__photo {
    width: 70%;
    height: auto;
    border: 2px solid #35368f;
    border-radius: 16px;
    background: #fff;
  }

  /* ensure figure spacing looks balanced */
  .cs-card__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
  }
}
/* Name and title font sizes */
  .cs-card__person {
    font-size: 10px !important;    /* name slightly larger */
  }

  .cs-card__role {
    font-size: 8px !important;    /* smaller subtitle */
    opacity: 0.8;
  }
.cs-card__grid {
  display: grid;
  grid-template-columns: 1.45fr 0.8fr;  /* slightly wider left column */
  align-items: center;
  gap: 24px;  /* reduced column gap */
  padding: clamp(20px, 3vw, 40px);
}

/* Center the image properly within its column */
.cs-card__figure {
  display: flex;
  justify-content: center;   /* centers image horizontally */
  align-items: center;       /* centers vertically */
}

/* Keep the 70% scale */
.cs-card__photo {
  width: 70%;
  margin: 0 auto;
  display: block;
}

.cs-card__copy {
  margin-left: 30px;
}
@media (max-width: 960px) {
  .cs-card__copy {
    margin-left: 0;
  }
}

.ss-media {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 960px) {
  /* stack content vertically */
  .cs-card__grid {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  /* text block first */
  .cs-card__copy {
    order: 0;
    margin-left: 0;          /* remove desktop indent */
  }

  /* image block last, pinned to bottom */
  .cs-card__figure {
    order: 1;
    margin-top: auto;        /* pushes figure to bottom of card */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .cs-card__photo {
    width: 150%;
    max-width: 260px;
    height: auto;
    transform: translateX(-17%)
  }

  /* caption stays*

@media (max-width: 960px) {
  .cs-card__figure {
    overflow: hidden;          /* hides the left/right spill */
    display: flex;
    justify-content: center;
  }
}
/* =========================
   MOBILE — FINAL OVERRIDES
========================= */
@media (max-width: 960px) {

  .cs-carousel__track {
    grid-auto-columns: 100%;
    gap: 0;
    padding: 0;
  }

  .cs-card {
    min-width: 100%;
    margin-right: 16px;
  }

  .cs-card__grid {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px !important;
    gap: 16px;
  }

  .cs-card__copy {
    margin-left: 0 !important;
    order: 0;
    text-align: left;
  }

  .cs-card__figure {
    order: 1;
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .cs-card__photo {
    width: 100%;
    max-width: 260px;
    height: auto;
    transform: none;
  }

  .cs-card__caption {
    position: static !important;
    margin-top: 8px;
    display: inline-flex;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    background: #fff;
    padding: 6px 12px;
    box-shadow: none;
  }

  .cs-card__person {
    font-size: 12px !important;
  }

  .cs-card__role {
    font-size: 10px !important;
  }
}