/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   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;
  }
}

/* ============================================================
   SplitCard — alternating text / visual rows. See SplitCard.tsx.
   ============================================================ */

.split-card {
  background:    var(--card);
  border-radius: var(--radius-lg);
  padding:       0.5rem 0;
  width:         100%;
  box-sizing:    border-box;
  overflow:      hidden;
}


/* ---- Row: text(1fr) | visual(2fr); reverse → 2fr | 1fr ---- */

.split-card__row {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  align-items:           stretch;
}

.split-card__row--reverse {
  grid-template-columns: 2fr 1fr;
}
.split-card__row--reverse .split-card__text   { grid-column: 2; grid-row: 1; }
.split-card__row--reverse .split-card__visual { grid-column: 1; grid-row: 1; }


/* ---- Text column ------------------------------------------ */

.split-card__text {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;   /* don't stretch children — buttons keep natural width */
  gap:             2.25rem;      /* 36px */
  padding:         2rem 2rem 2rem 4rem;
  min-width:       0;
  box-sizing:      border-box;
}
.split-card__row--reverse .split-card__text {
  padding: 2rem 4rem 2rem 2rem;
}

/* Step indicator: number circle + muted label */
.split-card__step {
  display:     flex;
  align-items: center;
  gap:         10px;
}
.split-card__step-label {
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
  white-space: nowrap;
}

.split-card__copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);   /* 12px */
}
.split-card__title {
  margin:      0;
  font-size:   var(--font-size-2xl);     /* 24px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-2xl);   /* 32px */
  color:       var(--foreground);
}
.split-card__body {
  margin:      0;
  font-size:   var(--font-size-xl);      /* 20px */
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xl);    /* 28px */
  color:       var(--foreground);
}


/* ---- Visual column + frame -------------------------------- */

.split-card__visual {
  padding:    0.5rem 1rem;
  min-height: 800px;
  min-width:  0;
  box-sizing: border-box;
}
.split-card__visual-frame {
  height:        100%;
  border:        0.5px solid rgba(40, 40, 37, 0.2);
  border-radius: 12px;
  overflow:      hidden;
  box-sizing:    border-box;
}
/* The frame defines the visual's box — the visual fills it. Block visuals
   (grids, tables, placeholders) that want to center shorter content wrap it
   in their own flex container. */
.split-card__visual-frame > * {
  height:     100%;
  box-sizing: border-box;
}
/* An image visual also covers the frame by default. */
.split-card__visual-frame > img {
  display:    block;
  width:      100%;
  object-fit: cover;
}


/* ---- Footer (e.g. bottom CTA) ----------------------------- */

.split-card__footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         4rem;
}


/* ============================================================
   Tablet (≤991px) — stack: visual above text
   ============================================================ */

@media (max-width: 991px) {
  .split-card__row,
  .split-card__row--reverse {
    grid-template-columns: 1fr;
  }

  .split-card__visual { order: 1; }
  .split-card__text   { order: 2; }

  .split-card__row--reverse .split-card__text,
  .split-card__row--reverse .split-card__visual { grid-column: unset; grid-row: unset; }

  /* The reversed selector must be repeated here: `.split-card__row--reverse
     .split-card__text` above is two classes to this rule's one, so without it
     reversed rows keep their desktop `2rem 4rem 2rem 2rem` at every width. */
  .split-card__text,
  .split-card__row--reverse .split-card__text {
    padding: 1.5rem 2rem 3rem;
  }

  .split-card__visual {
    min-height: 400px;
  }

  .split-card__footer {
    padding: 2rem;
  }
}


/* ============================================================
   Mobile (≤767px) — smaller heading/body; visual sizes to content
   ============================================================ */

@media (max-width: 767px) {
  .split-card__title {
    font-size:   var(--font-size-xl);   /* 20px */
    line-height: var(--line-height-xl); /* 28px */
  }
  .split-card__body {
    font-size:   var(--font-size-lg);   /* 18px */
    line-height: var(--line-height-lg); /* 28px */
  }
  .split-card__visual {
    min-height: auto;   /* the visual content provides its own mobile height */
  }
}

/* ============================================================
   IconBadge — Small circular icon container
   ============================================================ */

.icon-badge {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           1.625rem;  /* 26px */
  height:          1.625rem;
  border-radius:   var(--radius-full);
  flex-shrink:     0;
  color:           var(--foreground);
}

/* ---- Size ------------------------------------------------- */

.icon-badge[data-size="md"] { width: 2rem; height: 2rem; }  /* 32px */

@media (max-width: 767px) {
  .icon-badge[data-mobile-size="sm"] { width: 1.625rem; height: 1.625rem; }
}


/* ---- Typography ------------------------------------------- */

.icon-badge[data-typography="label"] {
  font-size:   var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-xs);
}


/* ---- Color variants --------------------------------------- */

.icon-badge[data-variant="card"]        { background: var(--card); }
.icon-badge[data-variant="bg"]          { background: var(--background); }
.icon-badge[data-variant="teal"]        { background: color-mix(in srgb, var(--color-brand-blue-400) 40%, transparent); }
.icon-badge[data-variant="teal-active"] { background: color-mix(in srgb, var(--color-brand-blue-400) 60%, var(--background)); }