/* === Team Tilt Slider — Full Responsive CSS === */

:root{
  --rb-red:#d60a2e;
  --rb-pink:#ff5a7f;
  --rb-deep:#a10622;
}

/* Section wrapper */
.team-tilt-section{
  position: relative;
  --navGap: clamp(56px, 8vw, 140px);
  padding-top: var(--navGap);

  /* Fluid card height */
  --cardMinH: clamp(480px, 50vh, 880px);
}
.tts-caption {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Stage */
.team-tilt-stage{
  width:100%;
  max-width:none;
  margin:8px auto 0;
  position:relative;
  perspective:1200px;
  overflow:hidden;

  --cardW: clamp(240px, 33vw, 680px);
  --gutter: clamp(16px, 5vw, 64px);
  --vis: 0.30;
  --maxSpread: 680px;
  --spread: clamp(
    160px,
    calc((60vw - var(--cardW)) / 2 - var(--gutter)),
    var(--maxSpread)
  );
  --offscreen: calc(var(--cardW) * (1 - var(--vis)) + var(--gutter));
  --tilt: 17deg;
  --cardAR: 1 / 1;
}

/* Top-right nav */
.tts-nav--top{
  position:absolute;
  top: clamp(20px, 12vh, 180px);
  right: 2%;
  display:inline-flex;
  gap:14px;
  align-items:center;
  pointer-events:auto;
  z-index:5;
}
.tts-nav--top button {
  -webkit-appearance: none;
  appearance: none;
  width: clamp(36px, 5vw, 48px);
  height: clamp(36px, 5vw, 48px);
  border: 0;
  border-radius: 999px;
  color: #fff;
  background-color: rgba(0, 22, 43, 0.4);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.tts-nav--top button:active{ transform:translateY(0) scale(.98); }
.tts-nav--top button:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 0 0 6px rgba(214,10,46,.55);
}
.tts-nav--top button svg{
  width: clamp(16px, 2vw, 22px);
  height: clamp(16px, 2vw, 22px);
  display:block;
}
.tts-nav--top button svg path{ fill: currentColor; }

/* Slider canvas */
.team-tilt-slider{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:visible;
  margin: clamp(3rem, 20vh, 10rem) 0;
  --sliderPad: clamp(60px, 8vh, 120px);
  min-height: calc(var(--cardMinH) + var(--sliderPad));
}

/* Card */
.tts-card{
  position:relative;
  width: var(--cardW);
  min-height: var(--cardMinH);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
  isolation:isolate;
  backface-visibility:hidden;
  transform: translateZ(0);
}
.tts-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.tts-theme--white .tts-card::after{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* Media */
.tts-media{
  width:100%;
  aspect-ratio: var(--cardAR);
  min-height: var(--cardMinH);
  border-radius: inherit;
  overflow:hidden;
}
.tts-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  border-radius: inherit;
}

/* Card wrappers */
.tts-card-wrapper{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:var(--cardW);
  display:flex; flex-direction:column; align-items:center;
  opacity:0; pointer-events:none; z-index:1;
  will-change: transform;
  transition:
    transform .55s cubic-bezier(.25,.46,.45,.94),
    opacity .35s ease, filter .35s ease, z-index 0s .55s;
}
.tts-card-wrapper.is-active{
  transform: translate(-50%,-50%) rotateZ(0deg) scale(1);
  opacity:1; pointer-events:auto; z-index:5;
}
.tts-card-wrapper.is-prev{
  transform:
    translate(calc(-50% - var(--spread) - var(--offscreen)), calc(-50% + 12%))
    rotateZ(calc(-1 * var(--tilt)))
    scale(.92);
  opacity:1; pointer-events:auto; z-index:3;
}
.tts-card-wrapper.is-next{
  transform:
    translate(calc(-50% + var(--spread) + var(--offscreen)), calc(-50% + 12%))
    rotateZ(var(--tilt))
    scale(.92);
  opacity:1; pointer-events:auto; z-index:3;
}

/* Caption row */
.tts-caption{
  display:none; width:var(--cardW);
  grid-template-columns: 1fr auto;
  align-items:center;
  column-gap:24px;
}
.tts-card-wrapper.is-active .tts-caption{ display:grid; }
.tts-title{ color:#fff; letter-spacing:.2px; }

/* CTA */
.view-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px;
  border-radius:1rem;
  font-weight:700; font-size:14px;
  text-decoration:none;
  color:#fff; background:#F90000;
  transition: background .18s ease, transform .12s ease, filter .18s ease;
}
.view-btn:hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }
.view-btn:active{ transform: translateY(0); }
.view-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.6); }
.tts-theme--white .tts-title{ color:#111; }
.tts-theme--white .view-btn{ color:#111; background:#fff; }
.tts-theme--white .view-btn:hover{ filter:brightness(.97); }

/* Floor glow */
.team-tilt-stage::before{
  content:"";
  position:absolute;
  left:50%; transform:translateX(-50%);
  bottom: clamp(32px, 6vh, 64px);
  width:min(900px, 88vw); height:44px;
  background: radial-gradient(closest-side, rgba(0,0,0,.18), transparent 70%);
  filter: blur(22px);
  pointer-events:none;
}

/* ===== Responsive Tweaks ===== */
@media (max-width: 1280px){
  .team-tilt-stage{ --cardW: clamp(240px, 40vw, 680px); }
}
@media (max-width: 1024px){
  .team-tilt-stage{
    --vis: 0;
    --tilt: 0deg;
    --cardW: clamp(280px, 72vw, 600px);
  }
  .tts-card-wrapper.is-prev,
  .tts-card-wrapper.is-next{
    transform: translate(-50%, -50%) scale(.9) rotateZ(0deg);
    opacity: 0; pointer-events: none; z-index: 1;
  }
  .tts-nav--top{
    top: clamp(8px, 6vh, 72px);
    right: 3%;
    gap: 12px;
  }
}
@media (max-width: 1024px) and (orientation: landscape) {
  .team-tilt-section{ --cardMinH: clamp(340px, 74vh, 650px); }
  .team-tilt-stage{ --cardW: clamp(320px, 40vw, 640px); }
  .team-tilt-slider{ --sliderPad: clamp(40px, 6vh, 80px); }
}
@media (max-width: 820px) and (orientation: landscape) {
  .team-tilt-section{ --cardMinH: clamp(300px, 42vh, 560px); }
  .team-tilt-stage{ --cardW: clamp(300px, 50vw, 560px); }
}
@media (max-width: 600px) and (orientation: landscape) {
  .team-tilt-section{ --cardMinH: clamp(260px, 40vh, 520px); }
  .team-tilt-stage{ --cardW: clamp(260px, 82vw, 520px); }
}
@media (max-width: 768px){
  .team-tilt-section{ --cardMinH: clamp(420px, 50vh, 760px); }
  .team-tilt-stage{ --vis: 0.16; --tilt: 12deg; }
  .tts-nav--top{ gap:10px; }
}
@media (max-width: 480px){
  .team-tilt-stage{ --vis: 0.12; --tilt: 10deg; }
  .team-tilt-section{ --cardMinH: clamp(400px, 48vh, 720px); }
}