/* ==========================================================================
   Customer Stories — page styles

   Source of truth: Figma "Konverz AI Website Revamp"
     file          8dr7VdMEDkSgU7LJiD0N9t
     desktop frame 3028:247  (1440 x 3051)
     mobile  frame 3028:632  (390  x 5600)

   Everything is scoped under .cs-page so the globally loaded bootstrap.min.css
   and style.css cannot leak into (or be altered by) this page.
   ========================================================================== */

.cs-page {
  /* ---- colour tokens (Figma variables) ---- */
  --cs-text-primary: #343D43;   /* Kz Text Primary  */
  --cs-heading: #1A1A1A;        /* Accent/Greys/Grey-80 */
  --cs-border: #B5C1CD;         /* Disabled State */
  --cs-card-surface: rgba(250, 250, 250, .30);
  --cs-accent-pink: #FF0099;
  --cs-accent-blue: #005184;    /* Brand/Secondary/Secondary-50 */
  --cs-cta-from: #B5277C;       /* Brand/Primary/Primary-50 */
  --cs-cta-to: #081208;         /* Brand/Nurture/Nurture-90 */
  --cs-btn-from: #F8E9F2;       /* Brand/Primary/Primary-10 */
  --cs-btn-to: #FFFFFF;         /* Accent/Greys/Grey-10 */

  /* ---- layout tokens ---- */
  --cs-container: 1288px;       /* 1440 frame - 2 x 76 side margin */
  --cs-gutter: 76px;
  --cs-grid-cols: 3;
  --cs-grid-gap: 24px;

  /* ---- card tokens ---- */
  --cs-card-pad: 24px;
  --cs-card-radius: 32px;
  --cs-card-blur: 9.25px;
  --cs-media-radius: 20px;
  --cs-media-ratio: 365.3333 / 213;
  --cs-title-size: 20px;
  --cs-title-link-gap: 40px;
  --cs-link-size: 16px;
  --cs-arrow-size: 24px;
  --cs-logo-x: 37px;
  --cs-logo-y: 27px;

  /* ---- hero tokens ---- */
  --cs-eyebrow-size: 20px;
  --cs-eyebrow-icon: 16px;
  --cs-h1-size: 80px;
  --cs-h1-tracking: -4.8px;
  --cs-hero-top: 95px;          /* Figma y=180 heading, navbar is 85 tall */
  --cs-hero-bottom: 90px;       /* heading block bottom 289 -> grid 379 */
  --cs-header-h: 74px;          /* rendered height of the shared site header */
  --cs-hero-art-w: 100%;        /* backdrop is a 1440-wide export */

  position: relative;
  width: 100%;
  overflow-x: clip;
  font-family: Poppins, sans-serif;
  color: var(--cs-text-primary);
}

/* The Figma 1288 is the *content* width (1440 frame minus 2 x 76 margin), so
   the gutters are added on top of the cap rather than subtracted from it —
   otherwise every card renders ~27px narrower than designed. */
.cs-container {
  width: 100%;
  max-width: calc(var(--cs-container) + 152px);
  margin-inline: auto;
  padding-inline: var(--cs-gutter);
  box-sizing: border-box;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

/* No `isolation` here on purpose: the art sits at z-index -1 and must be able
   to paint *behind* the shared site header, which is transparent and overlaps
   the top 82px of this section exactly as it does in Figma. Creating a
   stacking context here would trap the art above the header and hide the nav. */
.cs-hero {
  position: relative;
  padding-top: var(--cs-hero-top);
  padding-bottom: var(--cs-hero-bottom);
}

/* Hero backdrop — Figma node 3028:248, exported as a 1440x805 raster.
   It is pulled up by the header height so the wash starts at the very top of
   the page and runs behind the transparent site nav, as it does in the frame. */
.cs-hero__art {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--cs-header-h));
  left: 50%;
  width: var(--cs-hero-art-w);
  max-width: none;
  aspect-ratio: 1440 / 805;
  transform: translateX(-50%);
  pointer-events: none;
  background-color: #FFFFFF;
  background-image: url("../images/customerstoriesbanner.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

/* soft fade so the wash never cuts a hard line into the card grid */
.cs-hero__art::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}

.cs-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---- eyebrow: sparkles icon + gradient wordmark (Figma 3028:365) ---- */
.cs-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-eyebrow__icon {
  display: block;
  flex: 0 0 auto;
  width: var(--cs-eyebrow-icon);
  height: var(--cs-eyebrow-icon);
}

.cs-eyebrow__text {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: var(--cs-eyebrow-size);
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.56px;
  white-space: nowrap;
  background-image: linear-gradient(90deg, var(--cs-accent-pink) 0%, var(--cs-accent-blue) 71.154%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---- H1 (Figma 3028:368) ---- */
.cs-hero__title {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: var(--cs-h1-size);
  font-weight: 500;
  line-height: .99;
  letter-spacing: var(--cs-h1-tracking);
  color: var(--cs-heading);
}

/* ==========================================================================
   2. Card grid (Figma 3028:255)
   ========================================================================== */

/* Figma: last card row ends at y=2131, the CTA starts at y=2295 -> 164px */
.cs-stories {
  padding-bottom: 164px;
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(var(--cs-grid-cols), minmax(0, 1fr));
  gap: var(--cs-grid-gap);
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- card (Figma 3028:256) ---- */
.cs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--cs-card-pad);
  box-sizing: border-box;
  border-radius: var(--cs-card-radius);
  background: var(--cs-card-surface);
  -webkit-backdrop-filter: blur(var(--cs-card-blur));
  backdrop-filter: blur(var(--cs-card-blur));
  /* The 1px edge is an inset ring, not a `border`: Figma draws the stroke on
     top of the box, so a real border would steal 2px from the content and
     make the media 211.8px tall instead of the designed 213px. */
  box-shadow:
    inset 0 0 0 1px var(--cs-border),
    0 4px 18.8px 0 rgba(0, 0, 0, .10);
  transition: transform .3s ease, box-shadow .3s ease;
}

/* not in Figma (the file defines no interactive states) — matches the lift
   already used by .lcase-card / .hirecta-btn elsewhere in the project */
.cs-card:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 1px #9FAEBD,
    0 14px 30px 0 rgba(0, 0, 0, .14);
}

.cs-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cs-media-ratio);
  margin-bottom: 8px;
  border-radius: var(--cs-media-radius);
  /* No `overflow: hidden` — in Figma the Vedanta, XLRI and DTDC logos hang
     outside the cover image, so clipping here would crop them. The cover
     rounds its own corners instead (see .cs-card__cover). */
  background: transparent;
}

/* Targets the cover by class, never `.cs-card__media img` — a descendant
   selector would out-specify .cs-card__logo and stretch the client logos
   to fill the whole media box. */
/* Absolutely positioned so it is out of flow: as an in-flow child its
   intrinsic height would override the media box's `aspect-ratio` (a taller
   source image stretched the box from 213px to 243px), which in turn threw
   off every percentage the logo overlay is positioned with. */
.cs-card__cover {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--cs-media-radius);
  transition: transform .5s ease;
}

.cs-card:hover .cs-card__cover {
  transform: scale(1.04);
}

/* Placeholder for the covers that still need exporting from Figma.
   Deliberately mid-tone, not near-black: several client logos are dark
   (CIMB, Shriram) and would disappear against a dark plate. */
.cs-card__media--pending {
  background-image:
    radial-gradient(90% 130% at 10% 0%, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 62%),
    linear-gradient(135deg, #DCE4EC 0%, #C3CFDC 100%);
}

/* ---- client logo overlay ----
   Every logo carries its own Figma origin AND size — neither is uniform.
   The custom properties are emitted per card by customer-story.php as
   percentages of the media box, so the overlay scales with the card at every
   breakpoint instead of staying pinned to desktop pixels. */
.cs-card__logo {
  position: absolute;
  z-index: 1;
  top: var(--cs-logo-y);
  left: var(--cs-logo-x);
  display: block;
  width: var(--cs-logo-w);
  height: auto;
  aspect-ratio: var(--cs-logo-ar);
  object-fit: contain;
  object-position: left top;
}

.cs-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.cs-card__title {
  margin: 0 0 var(--cs-title-link-gap);
  font-family: Poppins, sans-serif;
  font-size: var(--cs-title-size);
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0;
  color: var(--cs-text-primary);
  overflow-wrap: break-word;
}

/* ---- "View case study" link (Figma 3028:261) ---- */
.cs-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin-top: auto;
  width: fit-content;
  font-family: Poppins, sans-serif;
  font-size: var(--cs-link-size);
  font-weight: 600;
  line-height: 20px;
  color: var(--cs-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .25s ease;
}

.cs-card__link:hover,
.cs-card__link:focus-visible {
  color: var(--cs-accent-blue);
}

.cs-card__link svg {
  display: block;
  flex: 0 0 auto;
  width: var(--cs-arrow-size);
  height: var(--cs-arrow-size);
  transition: transform .25s ease;
}

.cs-card__link svg path {
  stroke: currentColor;
}

.cs-card__link:hover svg,
.cs-card__link:focus-visible svg {
  transform: translateX(4px);
}

/* whole-card click target, keeps the visible link as the a11y label */
.cs-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--cs-card-radius);
}

/* ==========================================================================
   3. Final CTA (Figma 3028:249)
   ========================================================================== */

.cs-cta {
  padding-inline: 0;
}

/* Figma 3028:249 is a fixed 1280x465 box with its content centred, so the
   height is set rather than left to the padding (which lands ~94px short). */
.cs-cta__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 465px;
  padding: 60px;
  box-sizing: border-box;
  border-radius: 48px 48px 0 0;
  overflow: hidden;
  text-align: center;
  background-color: #081208;
  background-image:
    linear-gradient(180deg, var(--cs-cta-from) 0%, var(--cs-cta-to) 100%);
}

/* the wave artwork sits over the gradient, exactly as in Figma */
/* The art is 1672x941 in a 1288x465 box, so `cover` crops top and bottom.
   Biased below centre to keep the bright lower-left glow in frame, matching
   how the fill is cropped in the Figma node. */
.cs-cta__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
  pointer-events: none;
}

.cs-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 974px;
  color: #FFFFFF;
}

.cs-cta__title {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: #FFFFFF;
}

.cs-cta__sub {
  margin: 0;
  font-family: Poppins, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: #FFFFFF;
}

/* ---- pill button (Figma 3028:253) ---- */
.cs-cta__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px 8px 32px;
  border-radius: 60px;
  font-family: Poppins, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  color: var(--cs-text-primary);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--cs-btn-from) 0%, var(--cs-btn-to) 100%);
  box-shadow:
    inset 0 2px 2px 0 rgba(255, 255, 255, .25),
    inset 0 9px 7.5px 0 rgba(255, 255, 255, .25),
    0 4px 18.05px rgba(40, 40, 40, .20);
  transition: transform .3s ease, box-shadow .3s ease, padding .3s ease;
}

/* Hover matches the site's other "Book a demo" pills (.hirecta-btn, see
   css/style.css): the arrow slides to the front and the label slides after
   it, swapping places. The left/right padding flips by the same amount so
   the button never changes width mid-transition. The travel distances come
   from --hb-text-w / --hb-icon-w, measured at runtime in js/cs-reveal.js. */
.cs-cta__btn:hover,
.cs-cta__btn:focus-visible {
  color: var(--cs-text-primary);
  transform: translateY(-2px);
  padding: 8px 32px 8px 16px;
  box-shadow:
    inset 0 2px 2px 0 rgba(255, 255, 255, .25),
    inset 0 9px 7.5px 0 rgba(255, 255, 255, .25),
    0 10px 26px rgba(40, 40, 40, .30);
}

.cs-cta__btn-text,
.cs-cta__btn-icon {
  display: inline-flex;
  align-items: center;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.cs-cta__btn:hover .cs-cta__btn-icon,
.cs-cta__btn:focus-visible .cs-cta__btn-icon {
  transform: translateX(calc(-1 * (var(--hb-text-w, 96px) + 10px)));
}

.cs-cta__btn:hover .cs-cta__btn-text,
.cs-cta__btn:focus-visible .cs-cta__btn-text {
  transform: translateX(calc(var(--hb-icon-w, 30px) + 10px));
}

.cs-cta__btn img {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 29.99px;
}



/* ==========================================================================
   4. Scroll reveal
   Shared with the detail page — see css/cs-reveal.css and js/cs-reveal.js.
   Only the per-element role is declared here, via .cs-reveal / .cs-reveal--lead
   in the markup.
   ========================================================================== */

/* ==========================================================================
   5. Responsive
   Figma gives two authored widths (1440 and 390); the steps between them are
   interpolated. Targets: 1920x1080, 1920x1200, 1440x900, 1366x768, 1280x720,
   tablet, mobile.
   ========================================================================== */

/* --- >= 1441 (1920x1080, 1920x1200): container stays at the Figma 1288 --- */
@media (min-width: 1441px) {
  .cs-page {
    --cs-hero-top: 110px;
  }
}

/* --- 1280-1440 (1440x900, 1366x768, 1280x720) ---
   At exactly 1440 the gutter stays at the Figma 76px, so the grid measures
   1288 and each card 413.33 — identical to the frame. Short viewports below
   that trade gutter and hero height for vertical room; still 3 columns. */
@media (max-width: 1366px) {
  .cs-page {
    --cs-gutter: 48px;
    --cs-h1-size: 68px;
    --cs-h1-tracking: -4px;
    --cs-hero-top: 76px;
    --cs-hero-bottom: 72px;
  }

  .cs-stories {
    padding-bottom: 128px;
  }
}

@media (max-width: 1280px) {
  .cs-page {
    --cs-h1-size: 62px;
    --cs-h1-tracking: -3.4px;
    --cs-gutter: 32px;
    --cs-hero-top: 64px;
    --cs-hero-bottom: 60px;
  }

  .cs-cta__title {
    font-size: 46px;
    line-height: .92;
  }
}

/* --- tablet landscape / small laptop: 2 columns --- */
@media (max-width: 1100px) {
  .cs-page {
    --cs-grid-cols: 2;
    --cs-h1-size: 56px;
    --cs-h1-tracking: -2.8px;
    --cs-eyebrow-size: 18px;
  }

  .cs-cta__banner {
    min-height: 400px;
    padding: 56px 40px;
    border-radius: 40px 40px 0 0;
  }

  .cs-cta__title {
    font-size: 40px;
    line-height: .95;
  }

  .cs-cta__sub {
    font-size: 18px;
    line-height: 1.5;
  }
}

/* --- tablet portrait --- */
@media (max-width: 900px) {
  .cs-page {
    --cs-h1-size: 50px;
    --cs-h1-tracking: -2.4px;
    --cs-gutter: 28px;
    --cs-hero-top: 56px;
    --cs-hero-bottom: 52px;
    --cs-card-radius: 28px;
    --cs-card-pad: 20px;
  }

  .cs-stories {
    padding-bottom: 96px;
  }

  .cs-cta__banner {
    padding: 48px 32px;
    gap: 28px;
  }
}

/* --- mobile: Figma frame 3028:632 (390 wide) --- */
@media (max-width: 767px) {
  .cs-page {
    --cs-grid-cols: 1;
    --cs-grid-gap: 16px;
    --cs-gutter: 19px;          /* Figma: grid x=19 in a 390 frame */
    --cs-card-pad: 16px;        /* Figma 3028:647 */
    --cs-card-radius: 24px;
    --cs-media-radius: 16px;
    --cs-media-ratio: 320 / 169;/* Figma mobile media box */
    --cs-title-size: 18px;
    --cs-link-size: 15px;
    --cs-arrow-size: 20px;
    --cs-logo-x: 20px;
    --cs-logo-y: 18px;
    --cs-eyebrow-size: 12px;    /* Figma 3028:643 */
    --cs-eyebrow-icon: 12px;
    --cs-h1-size: 40px;         /* Figma 3028:644 */
    --cs-h1-tracking: -2.4px;
    --cs-hero-top: 63px;        /* Figma: heading y=135, navbar 72 tall */
    --cs-hero-bottom: 77px;     /* heading bottom 193 -> grid 270 */
    --cs-header-h: 60px;
    /* the backdrop is a wide landscape crop: at 390px it would only be 218px
       tall, so scale it up to keep the wash behind the whole heading block */
    --cs-hero-art-w: 200%;
  }

  .cs-stories {
    padding-bottom: 72px;
  }

  .cs-cta {
    --cs-gutter: 0px;
  }

  .cs-cta__banner {
    /* Figma mobile frame 3028:795 is 390 x 343.99 */
    min-height: 344px;
    padding: 44px 20px;
    gap: 24px;
    border-radius: 28px 28px 0 0;
  }

  .cs-cta__title {
    font-size: 30px;
    line-height: 1.06;
  }

  .cs-cta__sub {
    font-size: 15px;
    line-height: 1.5;
  }

  .cs-cta__btn {
    padding: 12px 12px 12px 24px;
    font-size: 15px;
  }

  .cs-cta__btn img {
    width: 26px;
    height: 26px;
  }

}

@media (max-width: 380px) {
  .cs-page {
    --cs-h1-size: 34px;
    --cs-h1-tracking: -1.8px;
    --cs-gutter: 16px;
  }
}

/* ==========================================================================
   6. Accessibility
   ========================================================================== */

.cs-card__link:focus-visible,
.cs-cta__btn:focus-visible {
  outline: 2px solid var(--cs-accent-blue);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

  .cs-card,
  .cs-card__cover,
  .cs-card__link svg,
  .cs-cta__btn,
  .cs-cta__btn img {
    transition: none !important;
    transform: none !important;
  }
}

/* screen-reader-only helper (scoped so it cannot collide with the global sheet) */
.cs-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}