/**
 * Section: problem — "Our Approach"'s home_new sibling, the numbered-cards
 * problem statement (Figma node 7388:15573).
 *
 * Renamed from .s1-problem to .ld-problem (the "1" was a Figma frame-order
 * artifact, not part of the design vocabulary — matches the ld-hero/
 * ld-logos/ld-capability convention). Consolidated from three sources:
 * the carried webflow.css base + responsive rules, and two separate
 * home-figma.css correction passes (an early type/card pass, and a later
 * full-layout pass that fixed padding/width drift with !important — see
 * the individual comments below for the specific bugs each one fixed).
 * Duplicate declarations across those sources are merged to their final
 * cascaded value; the !important flags are dropped now that there's only
 * one declaration left to win against.
 *
 * Moved out of home-figma.css as part of the per-section CSS split; only
 * enqueued on pages whose `sections` field includes the `problem` ACF
 * layout (see limestone_has_section() in inc/enqueue.php).
 *
 * @package Limestone
 */

.ld-problem {
  box-sizing: border-box;
  position: relative;
  background-color: #f7f7f7;
  /* Section separator: the Figma problem section carries a full-width top
   * border (the line that divides the logo band from the problem). The
   * section is full-bleed so this border spans the viewport like the
   * other dividers. */
  border-top: 1px solid #e6e9ee;
  border-bottom: 1px solid #e6e9ee;
  padding: 128px 0;
  font-family: Archivo, sans-serif;
}
/* Side vertical pinstripe rails (Figma "Vertical lines" overlay, 1280-wide
 * content column at x80/x1360) — applied uniformly so they run continuously
 * down every home section, matching Figma. */
.ld-problem::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: calc(50% - 640px);
  right: calc(50% - 640px);
  border-left: 1px solid #e6e9ee;
  border-right: 1px solid #e6e9ee;
  pointer-events: none;
}
.ld-problem__wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.ld-problem__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
}
.ld-problem__eyebrow {
  color: #5d4af5;
  text-align: center;
  text-transform: uppercase;
  margin: 0;
  font-family: "DM Mono", monospace;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
.ld-problem__title {
  color: #1a1a1a;
  font-variation-settings: "wdth" 100;
  text-align: center;
  margin: 0;
  font-family: Archivo, sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
}
.ld-problem__lead {
  color: #1a1a1a;
  text-align: center;
  /* Figma's Description node is horizontal:fill → spans the full 1160 head
   * width; the carried webflow.css capped it at 720px. */
  max-width: 1160px;
  margin: 0;
  font-family: Geist, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.ld-problem__steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: none;
}
/* 6 tracks let the first 3 cards span 2 each (3-up, 1/3 width) and the
 * last 2 span 3 each (2-up, 1/2 width) in the same row, without needing
 * separate row markup for the two groups. */
.ld-problem__row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  width: 100%;
  max-width: none;
}
.ld-problem__row > .ld-problem__card {
  min-width: 0;
  max-width: none;
  width: auto;
}
.ld-problem__row > .ld-problem__card:nth-child(-n + 3) {
  grid-column: span 2;
}
.ld-problem__row > .ld-problem__card:nth-child(n + 4) {
  grid-column: span 3;
}
.ld-problem__card {
  background-color: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  /* Desktop's true gap is 0 (see the min-width:768 block below, which moves
   * the numeral→title spacing onto .ld-problem__num's margin instead) and
   * mobile's is 16 (see the max-width:767 block) — this property has no
   * width where an unscoped 40px value would ever actually show, so it
   * isn't declared bare here. */
  padding: 40px;
  max-width: none;
  width: auto;
}
.ld-problem__num {
  display: block;
  height: 30px;
  color: #5d4af5;
  letter-spacing: 2px;
  font-family: "DM Mono", monospace;
  font-size: 32px;
  font-weight: 700;
  line-height: 0;
}
.ld-problem__num img {
  display: block;
  height: 30px;
  width: auto;
}
.ld-problem__h3 {
  color: #1a1a1a;
  margin: 0 0 16px;
  font-family: Archivo, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}
.ld-problem__body {
  color: #1a1a1a;
  margin: 0;
  font-family: Geist, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}
.ld-problem__close {
  color: #1a1a1a;
  text-align: center;
  text-wrap: pretty;
  max-width: 1160px;
  margin: 0 auto;
  font-family: Geist, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* #3 — problem cards too tall: the 40px card flex-gap was applied num→h3 AND
 * h3→body, + the h3's 16px margin = 56px title→body (Figma 16px). Zero the
 * gap, move the 40px to the numeral; the h3 margin then supplies the 16px.
 * Desktop only — mobile's card uses a flat 16px flex gap instead (below),
 * which would double up with this if left unscoped. */
@media (min-width: 768px) {
  .ld-problem__card {
    gap: 0;
  }
  .ld-problem__num {
    margin-bottom: 40px;
  }
}

/* Side vertical pinstripes are a 1280px-wide centred overlay; below 1280 the
 * calc(50% - 640px) goes negative and the ::before spills past the viewport
 * → horizontal scroll on tablet/mobile. They are a wide-desktop guide, so
 * hide them under 1280 (the design width). */
@media (max-width: 1279px) {
  .ld-problem::before {
    display: none;
  }
}

@media (max-width: 991px) {
  .ld-problem {
    padding: 64px 0;
  }
  /* The 3-up/2-up desktop split becomes one even 2-column grid — a 3-per-row
   * layout is too narrow to read comfortably at this width, and there's no
   * reason left to treat the last 2 cards differently from the first 3 once
   * they're no longer sized 3-up vs. 2-up. Wraps 2+2+1. */
  .ld-problem__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    width: 100%;
    max-width: none;
  }
  .ld-problem__row > .ld-problem__card,
  .ld-problem__row > .ld-problem__card:nth-child(-n + 3),
  .ld-problem__row > .ld-problem__card:nth-child(n + 4) {
    grid-column: span 1;
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 767px) {
  /* Figma mobile (node 7059:15390, 390px frame). Section: 64px top/bottom,
   * 24px gutters (342px content). Top divider kept. */
  .ld-problem {
    padding: 64px 0;
  }
  /* Outer wrap stacks; gap 32px between head / steps / close / cta. */
  .ld-problem__wrap {
    gap: 32px;
  }
  /* Head: eyebrow / title / lead, centered (matches desktop), gap 12px. */
  .ld-problem__head {
    gap: 12px;
  }
  .ld-problem__eyebrow {
    font-size: 12px;
    line-height: 16px;
  }
  .ld-problem__title {
    font-size: 28px;
    line-height: 36px;
  }
  .ld-problem__lead {
    font-size: 14px;
    line-height: 20px;
  }
  /* Steps column: all 5 cards stack vertically, 16px gap. */
  .ld-problem__steps {
    gap: 16px;
  }
  /* Card: padding 24px, internal gap 16px (Figma mobile, down from 40px). */
  .ld-problem__card {
    padding: 24px;
    gap: 16px;
  }
  .ld-problem__num {
    font-size: 28px;
  }
  .ld-problem__h3 {
    font-size: 20px;
    line-height: 28px;
    /* The mobile card is a flex column with gap:16px, but the h3 keeps a
     * residual margin-bottom from the Webflow heading reset, so title->body
     * stacked to 32px (twice the desktop 16px). Zero the margin so only
     * the 16px flex gap applies and the gap matches desktop. */
    margin: 0;
  }
  .ld-problem__body {
    font-size: 16px;
    line-height: 24px;
  }
  .ld-problem__close {
    max-width: 100%;
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 575px) {
  /* Even the 991px tier's 2-column grid is too cramped once the container
   * has shrunk to the phone gutter — all 5 cards stack into one column. */
  .ld-problem__row {
    grid-template-columns: 1fr;
  }
  .ld-problem__row > .ld-problem__card,
  .ld-problem__row > .ld-problem__card:nth-child(-n + 3),
  .ld-problem__row > .ld-problem__card:nth-child(n + 4) {
    grid-column: span 1;
  }
}