/* css/lf_solution.css — solution pages (/solutions/*)
 *
 * The page's own look lives in inline styles, carried over from the reviewed
 * design so the signed-off copy and spacing ship unchanged. This file only does
 * the one thing inline styles cannot: reflow the multi-column layouts on narrow
 * screens.
 *
 * The !important flags are deliberate and are the only way round an inline
 * grid-template-columns. They are scoped to the four layout classes below and
 * touch nothing else.
 */

/* ── two-column splits: hero, feature rows, closing CTA ── */
@media (max-width: 900px) {
  .sol-hero,
  .sol-split {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  /* the hero photo reads better above the copy on a phone */
  .sol-hero > div:last-child { order: -1; }
}

/* ── equal-width card rows ── */
@media (max-width: 860px) {
  .sol-2up,
  .sol-3up {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }
}

/* ── the three planning steps: vertical rules become horizontal ── */
@media (max-width: 860px) {
  .sol-steps {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  .sol-steps > div {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
    padding: 22px 0 !important;
  }
  .sol-steps > div:first-child { padding-top: 0 !important; }
  .sol-steps > div:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
}

/* ── type and rhythm on small screens ──
 * The design sets 48px/36px headings for a 1440px frame; those need to come
 * down before they start breaking mid-word on a phone.
 */
@media (max-width: 700px) {
  .sol-page h1 { font-size: 34px !important; line-height: 1.12 !important; }
  .sol-page h2 { font-size: 26px !important; line-height: 1.2 !important; }
  .sol-page section,
  .sol-page > div > div { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Long unbroken strings (client names, ISO codes) must not push the page wide. */
.sol-page { overflow-x: hidden; }
.sol-page img { max-width: 100%; height: auto; }