/*
 * ============================================================
 * HDFC Life Claims — Stepper Image With Text
 * Clientlib : hdfclifeinsurancecompany.stepperImageWithText
 * Methodology: BEM  (.claimnew__*)
 * Approach   : Mobile-first → desktop at min-width: 768px
 * Figma       : 3886:7937 (desktop) / 3954:29041 (mobile)
 *
 * Design Tokens (Figma)
 *   Title       #1c2633  Poppins 600 / 28px / 40px lh  (desktop)
 *               #1c2633  Poppins 600 / 24px / 36px lh  (mobile)
 *   Step number #9ca3af  Poppins 600 / 28px / 40px lh  (embedded in DAM asset)
 *   Step title  #4b5563  Poppins 600 / 14px / 20px lh
 *   Step desc   #4b5563  Poppins 400 / 12px / 16px lh
 *   CTA btn     #ed1c24  Poppins 500 / 16px / 24px lh
 *
 * Wave: single authored DAM image, positioned absolutely
 *   Mobile  — stretches 260% wide behind horizontal scroll
 *   Desktop — 100% width behind the 3 step columns
 * ============================================================
 */

/* ── 1. Scoped box-sizing ── */
.stepperImageWithText .claimnew,
.stepperImageWithText .claimnew *,
.stepperImageWithText .claimnew *::before,
.stepperImageWithText .claimnew *::after {
  box-sizing: border-box;
}

/* ── 2. Section wrapper ── */
.stepperImageWithText .claimnew {
  position: relative;
  width: 100%;
  padding: 0 0 30px 0;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── 3. Content row: column on mobile, row on desktop ── */
.stepperImageWithText .claimnew__content {
  position: relative;
  z-index: 1;
  max-width: 608px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── 4. Left column: title + CTA ── */
.stepperImageWithText .claimnew__left {
  width: 100%;
}

.stepperImageWithText .claimnew__title {
  margin: 0 20px;
  font-size: 24px;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0;
  color: #1c2633;
}

/* ── 5. CTA button ── */
.stepperImageWithText .claimnew__button,
.stepperImageWithText .claimnew__button:visited,
.stepperImageWithText .claimnew__button:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 8px;
  background: #ed1c24;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: 0 1px 2px 0 rgba(177, 17, 22, 0.12);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .stepperImageWithText .claimnew__button {
    transition: background 0.2s ease;
  }
  .stepperImageWithText .claimnew__button:hover {
    background: #c4161c;
    color: #ffffff;
    text-decoration: none;
  }
}

.stepperImageWithText .claimnew__button:focus-visible {
  outline: 2px solid #ed1c24;
  outline-offset: 2px;
}

/* Desktop CTA hidden on mobile; mobile CTA shown on mobile */
.stepperImageWithText .claimnew__button--desktop {
  display: none;
}

.stepperImageWithText .claimnew__button--mobile {
  display: inline-flex;
  margin: 20px 0 0 20px;
}

/* ── 6. Right column ── */
.stepperImageWithText .claimnew__right {
  width: 100%;
}

/* ── 7. Steps wrapper: contains wave + cards ── */
.stepperImageWithText .claimnew__steps-wrapper {
  position: relative;
  isolation: isolate; /* creates stacking context so z-index on children is self-contained */
  overflow: hidden;
}

/* ── 8. Wave: single background image ──
   Mobile: stretched wide behind the full horizontal scroll area
   Element is now <picture> — must be display:block for absolute positioning to work  */
.stepperImageWithText .claimnew__wave {
  position: absolute;
  display: block;
  top: 35px;
  left: 0;
  width: 260%;
  height: auto;
  max-width: 602px;
  pointer-events: none;
  z-index: -1;
}

.stepperImageWithText .claimnew__wave img {
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
}

/* ── 9. Steps row: horizontal scroll on mobile ── */
.stepperImageWithText .claimnew__steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  /* hide scrollbar */
  scrollbar-width: none;
}

.stepperImageWithText .claimnew__steps::-webkit-scrollbar {
  display: none;
}

/* ── 10. Individual step card ── */
.stepperImageWithText .claimnew__step {
  flex: 0 0 78%;
  max-width: 78%;
  min-width: 0;
  scroll-snap-align: start;
  padding: 0;
  text-align: left;
}

/* ── 11. Step illustration
   Numbers are embedded in the DAM asset — no code overlay needed
   Mobile  : ~160 × 140 px  (Figma 3954:29041 — w-[157.411px] h-[117.528px])
   Desktop : ~130 × 130 px  (Figma 3886:7937)                               ── */

.stepperImageWithText .claimnew__step-image picture {
  display: block;
}

.stepperImageWithText .claimnew__step-image img {
  max-width: 160px;
  max-height: 140px;
  width: auto;
  height: auto;
  display: block;
}

/* ── 12. Step title ── */
.stepperImageWithText .claimnew__step-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0;
  color: #4b5563;
}

/* ── 13. Step description ── */
.stepperImageWithText .claimnew__step-description p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0;
  color: #4b5563;
}

.stepperImageWithText .claimnew__step:nth-of-type(1) { 
    max-width: 151px;
    width: 100%;
    margin: 0;
    padding-left: 20px;
}

.stepperImageWithText .claimnew__step:nth-of-type(1) .claimnew__step-image {
    max-width: 141px;
    max-height: 106px;
    width: 100%;
    margin: 0 0 12px 0;
}

.stepperImageWithText .claimnew__step:nth-of-type(2) { 
    max-width: 184px;
    width: 100%;
    margin: 61px 0 0 48px;
}

.stepperImageWithText .claimnew__step:nth-of-type(2) .claimnew__step-image {
    max-width: 142px;
    max-height: 107px;
    width: 100%;
    margin: 0 0 2px 0;
}

.stepperImageWithText .claimnew__step:nth-of-type(3) { 
    max-width: 157px;
    width: 100%;
    margin: 0 0 0 48px;
}

.stepperImageWithText .claimnew__step:nth-of-type(3) .claimnew__step-image {
    max-width: 107px;
    max-height: 99px;
    width: 100%;
    margin: 0 0 7px 0;
}

  /* Ellipse 13481 — left blob (571×571px, partially off-screen left) */
  .stepperImageWithText .claimnew::before {
    content: '';
    position: absolute;
    width: 285px;
    height: 285px;
    border-radius: 100%;
    background: #fef1f1;
    filter: blur(83.5px);
    left: -78px;
    bottom: 160px;
    pointer-events: none;
    z-index: -10;
  }

    /* Ellipse 13482 — right blob (622×622px, partially off-screen right) */
  .stepperImageWithText .claimnew::after {
    content: '';
    position: absolute;
    width: 183px;
    height: 161px;
    border-radius: 100%;
    background:#fef1f1;
    filter: blur(33.5px);
    bottom: 0;
    right: 0;
    pointer-events: none;
    z-index: -10;
  }

/* ════════════════════════════════════════════════════════
   Desktop overrides  (min-width: 768px)
   ════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .stepperImageWithText .claimnew {
    padding: 60px 0 65px;
  }

  /* Row layout: left (fixed 320px) + right (flex 1) */
  .stepperImageWithText .claimnew__content {
    max-width: 1097px;
    width: 100%;
    margin: 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
  }

  .stepperImageWithText .claimnew__left {
    max-width: 291px;
    width: 100%;
    flex-shrink: 0;
    padding-block: 43px;
  }

  .stepperImageWithText .claimnew__title {
    font-size: 28px;
    line-height: 40px;
    margin: 0 0 80px 0;
  }

  /* Show desktop CTA, hide mobile CTA */
  .stepperImageWithText .claimnew__button--desktop {
    display: inline-flex;
  }

  .stepperImageWithText .claimnew__button--mobile {
    display: none;
  }

  .stepperImageWithText .claimnew__right {
    flex: 1;
    min-width: 0;
  }

  /* Wrapper: let wave overflow vertically on desktop */
  .stepperImageWithText .claimnew__steps-wrapper {
    min-height: 326px;
    overflow: visible;
  }

  /* Wave: full width on desktop, positioned behind all 3 step columns */
  .stepperImageWithText .claimnew__wave {
    top: 53px;
    width: 100%;
    max-width: none;
  }

  /* Steps: no scroll on desktop; evenly spaced with zigzag */
  .stepperImageWithText .claimnew__steps {
    flex-wrap: nowrap;
    overflow: visible;
    justify-content: space-between;
    padding-bottom: 0;
    gap: 0;
  }

  .stepperImageWithText .claimnew__step {
    flex: 1;
    max-width: none;
    padding: 0;
    scroll-snap-align: unset;
    text-align: left;
  }

  /* Zigzag: step 1 top → step 2 lower → step 3 top */
  .stepperImageWithText .claimnew__step:nth-of-type(1) { 
    max-width: 219px;
    width: 100%;
    margin: 22px 0 0 58px;
    padding: 0;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(1) .claimnew__step-image {
    max-width: 182px;
    max-height: 147px;
    width: 100%;
    margin: 0 0 18px 0;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(1) .claimnew__step-body {
    margin-left: 23px;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(2) { 
    max-width: 209px;
    width: 100%;
    margin: 73px 0 0 35px;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(2) .claimnew__step-image {
    max-width: 172px;
    max-height: 138px;
    width: 100%;
    margin: 0 0 18px 0;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(2) .claimnew__step-body {
    margin-left: 14px;
  }

  .stepperImageWithText .claimnew__step:nth-of-type(3) { 
    max-width: 193px;
    width: 100%;
    margin: 0 0 0 93px; 
  }
  .stepperImageWithText .claimnew__step:nth-of-type(3) .claimnew__step-image {
    max-width: 154px;
    max-height: 121px;
    width: 100%;
    margin: 0 0 26px 0;
  }
  .stepperImageWithText .claimnew__step:nth-of-type(3) .claimnew__step-body {
    margin-left: 20px;
  }

  .stepperImageWithText .claimnew__step-image img {
    max-width: unset;
    max-height: unset;
    width: 100%;
    height: 100%;
  }

  .stepperImageWithText .claimnew__step-title {
    margin-bottom: 12px;
  }

  .stepperImageWithText .claimnew__step-body{
    max-width: 195px;
    width: 100%;
  }

  /* ── Decorative gradient ellipses (Figma: Ellipse 13481 + 13482) ── */

  /* Ellipse 13481 — left blob (571×571px, partially off-screen left) */
  .stepperImageWithText .claimnew::before {
    content: '';
    position: absolute;
    width: 571px;
    height: 571px;
    border-radius: 100%;
    background: #fef1f1;
    filter: blur(83.5px);
    left: -43px;
    bottom: 40px;
    pointer-events: none;
    z-index: -10;
  }

  /* Ellipse 13482 — right blob (622×622px, partially off-screen right) */
  .stepperImageWithText .claimnew::after {
    content: '';
    position: absolute;
    width: 400px;
    height: 361px;
    border-radius: 100%;
    background:#fef1f1;
    filter: blur(83.5px);
    top: 30px;
    right: 0px;
    pointer-events: none;
    z-index: -10;
  }
}