/* /var/www/relyn/static_src/css/client_stories.css */

.client-stories-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 24px 80px;
}

.client-stories-shell {
  position: relative;
  width: 100%;
  max-width: 1919px;
  min-height: 905px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 95px;

  /* Blur placement for this section */
  --blur-top: 62%;
  --blur-h: 737px;
}

.client-stories-header {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #FFFFFF;
}

.client-stories-kicker {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.client-stories-title {
  margin: 20px 0 0;
  font-size: 48px;
  font-weight: 600;
}

.client-stories-grid {
  position: relative;
  z-index: 1;
  margin-top: 126px;
  width: 100%;
  max-width: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

.client-stories-track {
  display: flex;
  gap: 24px;
  justify-content: center;
  width: 100%;
}

/* ✅ Same premium next/prev buttons as Team (circular outline, NO fill) */
.client-stories-arrow {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: #FFFFFF;
  cursor: pointer;

  /* ✅ no fill/background behind the icon */
  background: transparent;
  border: 0;
  padding: 0;

  flex-shrink: 0;

  transition:
    transform 0.18s ease-out,
    filter 0.18s ease-out,
    box-shadow 0.18s ease-out;
}

/* ✅ gradient ring border (transparent inside) */
.client-stories-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  padding: 2px;
  background: linear-gradient(
    135deg,
    rgba(166, 151, 224, 0.85) 0%,
    rgba(99, 62, 178, 0.95) 45%,
    rgba(60, 67, 132, 0.85) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.95;
}

/* ✅ soft outer glow */
.client-stories-arrow::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(99, 62, 178, 0.24), rgba(0, 0, 0, 0.00) 62%);
  filter: blur(10px);
  opacity: 0.52;
  pointer-events: none;
}

.client-stories-arrow-glow {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
}

.client-stories-arrow-ico {
  position: relative;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  opacity: 0.95;
}

.client-stories-arrow:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.06);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.50);
}

.client-stories-arrow:active {
  transform: scale(0.99);
}

.client-stories-arrow:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(166, 151, 224, 0.22),
    0 22px 60px rgba(0, 0, 0, 0.50);
}

.client-story-card {
  width: 330px;
  height: 500px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(99, 62, 178, 0.8) 0%, rgba(99, 62, 178, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  display: none;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.client-story-card.is-visible {
  display: flex;
}

.client-story-video-wrap {
  position: relative;
  width: 294px;
  height: 265px;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 15px;
  background: #05070f;
}

.client-story-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.client-story-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.9) 60%, rgba(255, 255, 255, 0.75) 100%),
    linear-gradient(135deg, #633EB2, #272E67);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.16s ease-out, box-shadow 0.16s ease-out, opacity 0.16s ease-out;
}

.client-story-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.95);
}

.client-story-play-icon {
  width: 0;
  height: 0;
  border-left: 20px solid #252956;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 4px;
}

.client-story-play.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.client-story-quote {
  margin: 32px 24px 0;
  font-size: 16px;
  font-weight: 600;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.6;
}

.client-story-name {
  margin: 21px 24px 0;
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  text-align: center;
}

.client-story-role {
  margin: 8px 24px 0;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  opacity: 0.9;
}

/* ============================================================
   ✅ Laptop (LANDSCAPE) ONLY — smaller than desktop
   Range: 1025px–1440px
   - Subtitle 18px
   - Title 42px
   - Reduce card + inner fonts
   - Do NOT affect desktop (>1440) or mobile/tablet portrait (<=768)
   ============================================================ */
@media (max-width: 1440px) and (min-width: 1025px) {
  .client-stories-section {
    padding: 0 24px 76px;
  }

  .client-stories-shell {
    padding-top: 86px;
    min-height: 840px;
  }

  .client-stories-kicker {
    font-size: 18px;
    letter-spacing: 0.16em;
  }

  .client-stories-title {
    font-size: 42px;
  }

  .client-stories-grid {
    margin-top: 112px;
    max-width: 1280px;
    gap: 20px;
  }

  .client-stories-track {
    gap: 20px;
  }

  .client-stories-arrow {
    width: 54px;
    height: 54px;
  }

  .client-stories-arrow-ico {
    font-size: 28px;
  }

  .client-stories-arrow::after {
    inset: -9px;
  }

  .client-story-card {
    width: 305px;
    height: 470px;
    border-radius: 18px;
  }

  .client-story-video-wrap {
    width: 272px;
    height: 240px;
    margin-top: 14px;
  }

  .client-story-play {
    width: 64px;
    height: 64px;
  }

  .client-story-play-icon {
    border-left: 18px solid #252956;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    margin-left: 3px;
  }

  .client-story-quote {
    margin: 28px 22px 0;
    font-size: 15px;
    line-height: 1.55;
  }

  .client-story-name {
    margin: 18px 22px 0;
    font-size: 18px;
  }

  .client-story-role {
    margin: 7px 22px 0;
    font-size: 13px;
  }
}

/* ============================================================
   ✅ Tablet (LANDSCAPE) ONLY — smaller than laptop
   Range: 769px–1024px
   - Subtitle 18px
   - Title 42px
   - Reduce card + inner fonts
   - Do NOT affect tablet portrait/mobile (<=768)
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
  .client-stories-section {
    padding: 0 16px 64px;
  }

  .client-stories-shell {
    padding-top: 78px;
    min-height: 760px;
  }

  .client-stories-kicker {
    font-size: 18px;
    letter-spacing: 0.16em;
  }

  .client-stories-title {
    font-size: 42px;
  }

  .client-stories-grid {
    margin-top: 104px;
    max-width: 1180px;
    gap: 18px;
  }

  .client-stories-track {
    gap: 18px;
  }

  /* ✅ slightly smaller circles for tablet landscape */
  .client-stories-arrow {
    width: 50px;
    height: 50px;
  }

  .client-stories-arrow-ico {
    font-size: 26px;
  }

  .client-stories-arrow::after {
    inset: -9px;
  }

  .client-story-card {
    width: 285px;
    height: 450px;
    border-radius: 18px;
  }

  .client-story-video-wrap {
    width: 252px;
    height: 222px;
    margin-top: 14px;
  }

  .client-story-play {
    width: 60px;
    height: 60px;
  }

  .client-story-play-icon {
    border-left: 17px solid #252956;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin-left: 3px;
  }

  .client-story-quote {
    margin: 26px 20px 0;
    font-size: 14px;
    line-height: 1.55;
  }

  .client-story-name {
    margin: 16px 20px 0;
    font-size: 17px;
  }

  .client-story-role {
    margin: 6px 20px 0;
    font-size: 12px;
  }
}

@media (max-width: 768px) {
  .client-stories-shell {
    padding-top: 64px;
    min-height: 640px;
  }

  /* ✅ Reduce subtitle + title font sizes (mobile + tablet portrait) */
  .client-stories-kicker {
    font-size: 15px;
    letter-spacing: 0.14em;
  }

  .client-stories-title {
    font-size: 24px;
  }

  /* ✅ Single-card layout + arrows UNDER card (closer together) */
  .client-stories-grid {
    margin-top: 80px;
    width: 100%;
    max-width: 520px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 14px;
    align-items: center;
    justify-content: center;
    justify-items: center;
  }

  .client-stories-track {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    justify-content: center;
    gap: 0;

    /* ✅ Premium carousel staging */
    position: relative;
    min-height: 500px;
  }

  .client-stories-arrow.is-left {
    grid-column: 1;
    grid-row: 2;
  }

  .client-stories-arrow.is-right {
    grid-column: 2;
    grid-row: 2;
  }

  .client-stories-arrow {
    width: 60px;
    height: 60px;
  }

  .client-stories-arrow-ico {
    font-size: 28px;
  }

  /* ✅ Premium animation system (mobile only) */
  .client-story-card {
    width: 280px;
    height: 500px;
    display: flex;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(10px) scale(0.985);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    transition:
      opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .client-story-card.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
  }

  .client-story-card.is-entering-left {
    opacity: 0;
    transform: translateX(calc(-50% - 22px)) translateY(8px) scale(0.985);
  }

  .client-story-card.is-entering-right {
    opacity: 0;
    transform: translateX(calc(-50% + 22px)) translateY(8px) scale(0.985);
  }

  .client-story-card.is-visible.is-leaving-left {
    opacity: 0;
    transform: translateX(calc(-50% - 22px)) translateY(8px) scale(0.985);
    pointer-events: none;
  }

  .client-story-card.is-visible.is-leaving-right {
    opacity: 0;
    transform: translateX(calc(-50% + 22px)) translateY(8px) scale(0.985);
    pointer-events: none;
  }

  .client-story-quote {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .client-stories-kicker {
    font-size: 15px;
    letter-spacing: 0.12em;
  }

  .client-stories-title {
    font-size: 24px;
  }

  .client-stories-grid {
    max-width: 420px;
    column-gap: 8px;
    row-gap: 12px;
  }

  .client-stories-arrow {
    width: 56px;
    height: 56px;
  }

  .client-stories-arrow-ico {
    font-size: 26px;
  }

  /* ✅ Keep card size EXACTLY same in mobile */
  .client-story-card {
    width: 280px;
    height: 500px;
  }
}