/*
 * Marketing UI Split card (Content Component)
 * Webflow Designer name: Card Main
 * Webflow class: component-marta_card on https://www.marta-platform.com/
 * Webflow variants: main (default, media right) / revert (media left)
 *
 * Structure (VERIFIED FROM WEBFLOW):
 *   .mkt-split-card
 *     .mkt-split-card__text-cell > .mkt-split-card__text-box
 *       label, title, body, optional .mkt-button
 *     .mkt-split-card__media-cell > img.mkt-split-card__media
 *
 * Modifiers (VERIFIED FROM WEBFLOW):
 *   data-tone="grey"              → Webflow .is-grey
 *   data-media-position="left"    → Webflow variant revert
 *                                   (w-variant-32e21d7e-…)
 *   omit CTA                      → optional
 *
 * Desktop: 2 columns, 1fr 1fr, column gap 0.
 * Stack: 1 column, text then media. Width 991px is a Webflow implementation
 * value, not a Figma breakpoint token.
 *
 * CTA: reuse .mkt-button. Do not restyle Button here.
 * Webflow CTA on Card Main is .button.is-primary.is-white → Figma Button
 * Contained / Large / Light.
 *
 * Media chrome: Webflow .image-box_wrapper.is-componet uses an organic
 * radius (15rem / 5rem) only when the cell contains img.mkt-split-card__media.
 * HTML page mocks keep 1rem. A square aspect-ratio must follow the column
 * width: stretching the cell to the text height and then forcing 1:1 makes
 * the media wider than its column and the organic curve clips the copy.
 * Legacy page classes such as .feature-mock must not paint a second card
 * frame inside the slot.
 *
 * Scroll reveal (VERIFIED FROM WEBFLOW IX2, event e-53, preset slideInBottom):
 *   target: component instance root (this element)
 *   SCROLL_INTO_VIEW, offset 5% of the viewport, delay 300ms
 *   opacity 0 + translateY(100px) → opacity 1 + translateY(0)
 *   duration 1000ms, easing outQuart
 *   playInReverse false. JS: split-card.js
 *
 * NOT DEFINED (Webflow card + Figma DS):
 *   hover / focus / pressed on the card
 *   shadow
 *   Figma has no Card Main component set
 */

.mkt-split-card {
  /* Webflow implementation values — not Figma Design System tokens */
  --mkt-split-card-fill-grey: #f2f4f8; /* Webflow --greyscale-100; not Gray/100 #F5F5F5 */
  --mkt-split-card-text-padding: 48px; /* Webflow landing-marta-text_box padding 3rem */
  --mkt-split-card-media-radius: 16px; /* Webflow .image-box_wrapper radius 1rem */
  --mkt-split-card-media-aspect: 1; /* Webflow .image-box_wrapper.is-componet */
  --mkt-split-card-media-organic-radius: 15rem; /* Webflow is-componet; no Figma radius token */
  --mkt-split-card-media-organic-radius-sm: 5rem; /* Webflow is-componet at 479px */

  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text media";
  grid-column-gap: 0;
  grid-row-gap: 0;
  align-items: stretch;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  padding-inline-start: var(--space-8); /* Webflow 0.5rem */
  padding-inline-end: 0;
  border: 0;
  border-radius: var(--radius-24); /* Webflow 1.5rem */
  background-color: transparent;
  overflow: clip;
}

.mkt-split-card[data-tone="grey"] {
  background-color: var(--mkt-split-card-fill-grey);
}

.mkt-split-card[data-media-position="left"] {
  grid-template-areas: "media text";
  padding-inline-start: 0;
  padding-inline-end: var(--space-8);
}

.mkt-split-card__text-cell {
  grid-area: text;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.mkt-split-card__text-box {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  gap: var(--space-16); /* Webflow 1rem */
  padding: var(--mkt-split-card-text-padding);
}

.mkt-split-card__label,
.mkt-split-card__title,
.mkt-split-card__body {
  margin: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.mkt-split-card__label {
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-xsmall-size);
  line-height: var(--text-body-xsmall-line-height-regular);
  letter-spacing: var(--text-body-xsmall-letter-spacing);
  font-weight: var(--font-weight-regular);
  color: var(--color-pink-500); /* Webflow --vinaccia-500 */
  text-transform: uppercase;
}

.mkt-split-card__title {
  font-family: var(--font-family-lexend);
  font-size: var(--text-title-small-size); /* 30px; Webflow h3 is 32px — DESIGN SYSTEM GAP */
  line-height: var(--text-title-small-line-height);
  letter-spacing: var(--text-title-small-letter-spacing);
  font-weight: var(--font-weight-regular);
  color: var(--color-pink-800); /* Webflow --vinaccia-800 */
}

.mkt-split-card__body {
  font-family: var(--font-family-lexend);
  font-size: var(--text-body-medium-size);
  line-height: var(--text-body-medium-line-height);
  letter-spacing: var(--text-body-medium-letter-spacing);
  font-weight: var(--font-weight-regular); /* Webflow weight 300 — DESIGN SYSTEM GAP */
  color: var(--color-gray-800);
}

.mkt-split-card__media-cell {
  grid-area: media;
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  /* HTML mocks stay in the column. Do not lock aspect-ratio here:
     stretch + 1:1 grows the width past the column and covers the text. */
  aspect-ratio: auto;
  overflow: visible;
  border-radius: var(--mkt-split-card-media-radius); /* 1rem — HTML mocks */
}

/* Photos only. Width is the column; height follows 1:1. align-self center
   so stretch cannot transfer that height back into a wider width. */
.mkt-split-card__media-cell:has(> .mkt-split-card__media) {
  align-self: center;
  aspect-ratio: var(--mkt-split-card-media-aspect);
  overflow: clip;
  border-radius: 0 var(--radius-24) var(--radius-24)
    var(--mkt-split-card-media-organic-radius);
}

/* Webflow Card Main variant revert — image cells only */
.mkt-split-card[data-media-position="left"] .mkt-split-card__media-cell:has(> .mkt-split-card__media) {
  border-radius: 1.5px 0 var(--mkt-split-card-media-organic-radius)
    var(--radius-24); /* 1.5px is a Webflow quirk, not a token */
}

.mkt-split-card__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}

/*
 * Page HTML mocks (e.g. .feature-mock) live in the media slot.
 * Strip their legacy card chrome so only Card Main paints the frame.
 * Inner mock widgets (toggles, rows, etc.) stay untouched.
 */
.mkt-split-card__media-cell > :not(.mkt-split-card__media) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-width: 0;
  margin: 0;
  aspect-ratio: auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Let mock rows shrink and wrap inside the column instead of overflowing it. */
.mkt-split-card__media-cell :where(div, p, span, strong, em, code) {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}

.mkt-split-card__media-cell :where(div) {
  flex-wrap: wrap;
}

.mkt-split-card__media-cell:not(:has(> .mkt-split-card__media)) {
  padding: var(--space-24);
  /* Default if page omits data-media-fill — Pink/100 paint style */
  background-color: var(--color-pink-100);
}

/* Brand paint styles /100 — page HTML mocks alternate among these */
.mkt-split-card__media-cell[data-media-fill="pink"] {
  background-color: var(--color-pink-100);
}

.mkt-split-card__media-cell[data-media-fill="blue"] {
  background-color: var(--color-blue-100);
}

.mkt-split-card__media-cell[data-media-fill="violet"] {
  background-color: var(--color-violet-100);
}

.mkt-split-card__media-cell[data-media-fill="softy"] {
  background-color: var(--color-softy-100);
}

/* Webflow implementation: stack at max-width 991px. Not a Figma token. */
@media (max-width: 991px) {
  .mkt-split-card,
  .mkt-split-card[data-media-position="left"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "text"
      "media";
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .mkt-split-card__text-box {
    padding: var(--space-32); /* Webflow 2rem */
  }

  .mkt-split-card__media-cell:has(> .mkt-split-card__media),
  .mkt-split-card[data-media-position="left"] .mkt-split-card__media-cell:has(> .mkt-split-card__media) {
    justify-self: stretch;
    align-self: stretch;
    width: 100%;
    max-width: none;
    border-top-right-radius: var(--mkt-split-card-media-organic-radius);
    border-bottom-left-radius: var(--radius-24);
    border-top-left-radius: 0;
    border-bottom-right-radius: var(--radius-24);
  }

  .mkt-split-card__media {
    width: 100%;
    max-width: none;
    height: 100%;
    inset: 0;
  }
}

@media (max-width: 479px) {
  .mkt-split-card__text-box {
    padding: var(--space-16); /* Webflow 1rem */
  }

  .mkt-split-card__media-cell:has(> .mkt-split-card__media),
  .mkt-split-card[data-media-position="left"] .mkt-split-card__media-cell:has(> .mkt-split-card__media) {
    border-top-right-radius: var(--mkt-split-card-media-organic-radius-sm);
  }

  .mkt-split-card__media-cell:not(:has(> .mkt-split-card__media)) {
    padding: var(--space-16);
  }
}

/*
 * slideInBottom — VERIFIED FROM WEBFLOW IX2.
 * Initial groups: opacity 0, y 100px.
 * Play group: opacity 1, y 0, duration 1000ms, easing outQuart
 * (1 - (1 - t)^4 → cubic-bezier(0.25, 1, 0.5, 1)).
 * Event delay 300ms and the 5% viewport inset live in split-card.js.
 * html.mkt-split-reveal is set by that script before the body paints.
 */
@media (prefers-reduced-motion: no-preference) {
  html.mkt-split-reveal .mkt-split-card {
    opacity: 0;
    transform: translate3d(0, 100px, 0);
  }

  html.mkt-split-reveal .mkt-split-card[data-reveal="in"] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition-property: opacity, transform;
    transition-duration: 1000ms;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  }
}