/* ============================================================
   LawPracticeTailoredIntakeSection — "Intake settings" split card

   Figma file VX9tmGCEcVnJ7Fo9Fk8gee, node 6127:5474.
   See LawPracticeTailoredIntakeSection.figma.md.

   The card itself is the shared `SplitCard`; only the copy column's list
   treatment and the visual frame's sizing live here. The visual is always an
   exported image — there is no code-native fallback.
   ============================================================ */

.law-practice-tailored-intake {
  background: var(--background);
}


/* ---- Copy column ------------------------------------------
   SplitCard renders the row's `body` inside a single <p>, so the
   intro and the bullet list are inline elements promoted to blocks
   here rather than nested block tags (which would be invalid inside
   a paragraph). */

.law-practice-tailored-intake__intro {
  display: block;
}

/* Figma insets this column's copy 24px left / 56px right inside the
   461.33px column — a 381.33px measure, where bullet 1 breaks after
   "…needs for". `SplitCard`'s reversed rows inset 32/64 (a 365.33px
   measure), which breaks it a word earlier. Overridden here rather
   than in SplitCard.css so the primitive's three other consumers are
   untouched, and only above the ≤991px breakpoint where SplitCard
   stacks and swaps in its own stacked padding. */
@media (min-width: 992px) {
  .law-practice-tailored-intake .split-card__row--reverse .split-card__text {
    padding-left:  1.5rem;   /* 24px */
    padding-right: 3.5rem;   /* 56px */
  }
}

.law-practice-tailored-intake__list {
  display:        flex;
  flex-direction: column;
  gap:            0.875rem;             /* 14px — Figma 70px pitch on 56px items */
  margin-top:     2.25rem;              /* 36px — copy → list */
}

.law-practice-tailored-intake__list-item {
  position:      relative;
  display:       block;
  padding-left:  1.75rem;               /* 28px — 8px bullet + 20px offset */
  font-size:     var(--font-size-xl);   /* 20px */
  line-height:   var(--line-height-xl); /* 28px */
  color:         var(--foreground);
}

.law-practice-tailored-intake__bullet {
  position:      absolute;
  left:          0;
  top:           10px;                  /* Figma: dot 10px down from the item top */
  width:         8px;
  height:        8px;
  border-radius: var(--radius-full);
  background:    var(--muted);
}


/* ---- Visual: exported image on a blue wash backdrop --------
   Same wash as the hero's illustration — measured #CCE6ED → #BCDFEA
   here versus #CBE4E9 → #BADCE7 there, i.e. the same ramp. The
   export carries its own cream + blue-wash background, so it covers
   this gradient rather than compositing with it — the gradient is
   what shows through before the image loads. */

.law-practice-tailored-intake__viz-img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.law-practice-tailored-intake__viz {
  position:   relative;
  width:      100%;
  height:     100%;
  overflow:   hidden;
  background: linear-gradient(180deg,
                rgba(89, 183, 217, 0.29) 0%,
                rgba(89, 183, 217, 0.40) 100%),
              var(--secondary);
}


/* ---- Visual sizing ------------------------------------------
   SplitCard's visual column is 800px tall at desktop, 400px at tablet, and
   `auto` at ≤767px ("the visual content provides its own mobile height").
   The export is a fixed 876 x 768 composition, which survives none of that
   unchanged: stretched into SplitCard's portrait desktop column it was
   cropped by `object-fit: cover` — the panel's bottom edge and both blue
   margins were cut off — and at ≤767px it had no height at all. The frame
   takes the export's own ratio instead, at every width, so it is never
   cropped and never collapses.

   Targets `.split-card__visual` directly so the whole column is sized; the
   frame and `__viz` inherit it through their existing height:100% chain.
   `.law-practice-tailored-intake--image` beats SplitCard's own
   same-breakpoint rules on specificity. */

/* `align-self: start` is what keeps the ratio honest: a stretched grid item
   gets a definite height from the row, which makes `aspect-ratio` a no-op and
   puts us straight back to cropping. */
.law-practice-tailored-intake--image .split-card__visual {
  height:     auto;
  min-height: 0;
  align-self: start;
}

.law-practice-tailored-intake--image .split-card__visual-frame {
  height:       auto;
  aspect-ratio: 876 / 768;   /* the export's intrinsic size */
}


/* ============================================================
   Tablet (≤991px)
   ============================================================ */

@media (max-width: 991px) {
  .law-practice-tailored-intake__list {
    margin-top: 1.5rem;
  }
}