/**
 * Section: solution (Figma home_new 20/07/26, node 7908:33113 "Section",
 * the "DevInt" highlight panel — first live use of the `dark` toggle).
 *
 * Renamed from .section_solution/.section_solution--dark to .ld-solution/
 * .ld-solution--dark (matches the ld-hero/ld-logos/ld-capability/
 * ld-problem/ld-partner/ld-timeline convention). The inner flex-row wrapper
 * (text + diagram) was already named .ld-solution before this rename, which
 * would have collided with the newly-renamed root — it's renamed to
 * .ld-solution__wrap here, matching every other section's `__wrap` child.
 * .ld-solution__text/.ld-solution__diagram are unchanged.
 *
 * The `dark` variant is a CONTAINED rounded card sitting on the normal light
 * page background — not a full-bleed dark section; the dark bg/radius/
 * padding belong on .ld-solution__wrap, not the section root.
 *
 * Adopts .ld-container for the horizontal gutter (base.css), replacing the
 * carried .padding-global > .container-large > .padding-section-medium
 * wrapper chain — same treatment as ld-hero/ld-capability/ld-problem/
 * ld-partner/ld-timeline. The section's own vertical padding now matches
 * those sections' convention (128px desktop, 64px tablet/mobile) instead of
 * the shared chain's 80/64/48px.
 *
 * Also reused (light variant only) by the DevInt product page's "Under the
 * Hood" row — see assets/css/devint.css, which loads after this file and
 * overrides these base rules for `.ld-solution:not(.ld-solution--dark)`.
 *
 * Moved out of home-figma.css as part of the per-section CSS split; only
 * enqueued on pages whose `sections` field includes the `solution` ACF
 * layout (see limestone_has_section() in inc/enqueue.php).
 *
 * @package Limestone
 */

/* Every other home_new section carries a 1px #e6e9ee top hairline; this one
 * was missing it. */
.ld-solution.ld-solution--dark {
  border-top: 1px solid #e6e9ee;
}
.ld-solution {
  padding: 128px 0;
}
.ld-solution__wrap {
  display: flex;
  align-items: center;
  gap: 40px;
}
.ld-solution__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ld-solution__text .text-style-eyebrow {
  text-align: left;
}
.ld-solution__diagram {
  flex: 0 1 555px;
  width: 555px;
  max-width: 100%;
  height: 400px;
  margin: 0;
}
.ld-solution__diagram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.ld-solution--dark .ld-solution__wrap {
  background-color: #1a1a1a;
  border-radius: 12px;
  padding: 48px;
}
.ld-solution--dark .text-style-eyebrow {
  color: #aa9fff;
}
.ld-solution--dark .heading-style-h2 {
  color: #fdfdfc;
  font-size: 40px;
  line-height: 48px;
}
/* The global .text-rich-text p rule (webflow.css, shared by other pages'
 * WYSIWYG content) sets its OWN color/font-size directly on the <p> —
 * that beats a color set on the ancestor .text-rich-text div regardless of
 * specificity (explicit always beats inherited), so it must be overridden
 * on the <p> itself here, or the body copy renders near-black on this
 * section's #1a1a1a background (illegible). Font-size/family reset to
 * match this card's own body-copy convention (Geist, like .ld-partner__body
 * / .ld-capability__body) instead of the global rule's oversized 28px
 * eyebrow-styled text. */
.ld-solution--dark .text-rich-text {
  opacity: 0.65;
}
.ld-solution--dark .text-rich-text,
.ld-solution--dark .text-rich-text p {
  color: #fdfdfc;
  font-family: Geist, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}
/* webflow.css's .text-rich-text p also carries its own margin-top:20px /
 * margin-bottom:1rem, which stacks on top of .ld-solution__text's 16px flex
 * gap (heading -> rich text -> CTA), inflating that spacing past 16px on
 * both desktop and mobile. Zero it so the flex gap is the only spacing. */
.ld-solution--dark .text-rich-text p {
  margin: 0;
}

@media (max-width: 991px) {
  .ld-solution {
    padding: 64px 0;
  }
  /* Restack to a column here rather than at 767 — at tablet widths the
   * fixed 555px diagram left the text column too narrow to read comfortably
   * before this switched it to a single stacked column. */
  .ld-solution__wrap {
    flex-direction: column;
  }
  /* Stacked layout: fill the column width instead of the fixed 555x400
   * desktop size. The diagram (solution-devint-dashboard.gif, 940x677,
   * aspect ~1.39) happens to match the desktop 555x400 box almost exactly,
   * so object-fit:cover barely crops there — but a fixed mobile height
   * doesn't share that aspect ratio at every column width, so cover was
   * cropping the image top/bottom (or sides). Let height follow the image's
   * own aspect ratio instead, so it's always fully visible, uncropped. */
  .ld-solution__diagram {
    /* The desktop flex-basis (555px) is still set via the `flex` shorthand
     * and, in this column-direction flex container, governs the item's
     * HEIGHT (not width) — it was overriding height:auto below, computing
     * to 555px tall. Reset flex-basis to auto so height applies. */
    flex: 0 1 auto;
    width: 100%;
    height: auto;
  }
  .ld-solution__diagram img {
    height: auto;
    object-fit: contain;
  }
}

@media (max-width: 767px) {
  .ld-solution {
    padding: 64px 0;
  }
  .ld-solution--dark .ld-solution__wrap {
    padding: 24px;
    gap: 32px;
  }
  .ld-solution--dark .heading-style-h2 {
    font-size: 28px;
    line-height: 36px;
  }
  .ld-solution--dark .text-rich-text,
  .ld-solution--dark .text-rich-text p {
    font-size: 16px;
    line-height: 24px;
  }
}