/* ============================================================
   Claudify Story Split — 2-column image + card layout
   Based on Figma node 11210:14292
   ============================================================ */

.claudify-story-split {
  background: var(--bera-color-soft-neutral);
  padding: var(--sp-pt, 0px) var(--sp-pr, 96px) var(--sp-pb, 96px) var(--sp-pl, 96px);
}

.claudify-story-split__grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

/* ---- Column ---- */
.claudify-story-split__col {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- Image ---- */
.claudify-story-split__image-wrap {
  border-radius: 20px;
  overflow: hidden;
  flex: 1;
  min-height: 360px;
  background: rgb(232, 232, 225);
}

.claudify-story-split__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- White card ---- */
.claudify-story-split__card {
  background: #ffffff;
  border-radius: 20px;
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  flex-shrink: 0;
}

/* ---- Content group ---- */
.claudify-story-split__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Label — Jost italic, muted */
.claudify-story-split__label {
  font-family: 'Jost', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: rgba(26, 28, 24, 0.55);
  margin: 0;
}

/* Heading block */
.claudify-story-split__heading {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

/* Heading line 1 — CG Medium, normal */
.claudify-story-split__heading-line1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 48px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: 0;
  color: #1A1C18;
  margin: 0;
  display: block;
}

/* Heading line 2 — CG Medium Italic */
.claudify-story-split__heading-line2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 48px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: 0;
  color: #1A1C18;
  margin: 0;
  display: block;
}

/* Body text */
.claudify-story-split__body {
  font-family: 'Jost', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: rgba(26, 28, 24, 0.7);
  margin: 0;
}

/* ---- List ---- */
.claudify-story-split__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.claudify-story-split__list-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.claudify-story-split__list-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: rgba(26, 28, 24, 0.65);
  display: flex;
  align-items: center;
}

.claudify-story-split__list-icon svg {
  width: 36px;
  height: 36px;
  display: block;
}

.claudify-story-split__list-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  display: block;
}

.claudify-story-split__list-text {
  font-family: 'Jost', sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(26, 28, 24, 0.7);
  margin: 0;
}

/* ============================================================
   Tablet (750px – 989px)
   ============================================================ */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .claudify-story-split {
    padding: 0 48px 96px;
  }

  .claudify-story-split__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .claudify-story-split__image-wrap {
    min-height: 480px;
    flex: unset;
    height: 480px;
    order: -1; /* image always on top when stacked → image/text rhythm, no double-image at section boundary */
  }

  .claudify-story-split__card {
    padding: 48px;
  }

  .claudify-story-split__heading-line1,
  .claudify-story-split__heading-line2 {
    font-size: 40px;
  }
}

/* ============================================================
   Mobile (< 750px)
   ============================================================ */
@media screen and (max-width: 749px) {
  .claudify-story-split {
    padding: 0 20px 64px;
  }

  .claudify-story-split__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .claudify-story-split__image-wrap {
    min-height: 300px;
    flex: unset;
    height: 300px;
    order: -1; /* image always on top when stacked → image/text rhythm, no double-image at section boundary */
  }

  .claudify-story-split__card {
    padding: 32px 28px;
    gap: 28px;
  }

  .claudify-story-split__heading-line1,
  .claudify-story-split__heading-line2 {
    font-size: 34px;
  }

  .claudify-story-split__label {
    font-size: 15px;
  }

  .claudify-story-split__body {
    font-size: 16px;
  }

  .claudify-story-split__list-text {
    font-size: 16px;
  }

  /* List icons — !important required to override inline style on img tag */
  .claudify-story-split__list-icon,
  .claudify-story-split__list-icon svg,
  .claudify-story-split__list-icon img {
    width: 28px !important;
    height: 28px !important;
  }

  /* Widen icon→text gap to compensate for larger icons */
  .claudify-story-split__list-item {
    gap: 24px;
  }
}