/* ==========================================================================
   JIST — WHY CHOOSE US
   Sticky aside with a dark claim panel, worry/answer rows alongside.
   ========================================================================== */

.jist-why__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--wp--custom--grid-gap);
  align-items: start;
}

.jist-why__aside {
  display: grid;
  gap: var(--wp--preset--spacing--60);
}

@media (min-width: 901px) {
  .jist-why__aside {
    position: sticky;
    inset-block-start: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--60));
  }
}

.jist-why__title {
  margin: 0;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--htwo);
  font-weight: 700;
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-display);
  color: var(--wp--preset--color--contrast);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The claim panel
   -------------------------------------------------------------------------- */
.jist-why__claim {
  position: relative;
  padding: var(--wp--preset--spacing--70);
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--line-strong);
  border-radius: var(--wp--custom--radius-md);
  box-shadow: var(--wp--custom--shadow-lg);
  overflow: hidden;
}

/* Lift the claim text above the absolutely-positioned blueprint grid. */
.jist-why__claim > :not(.jist-blueprint-grid) {
  position: relative;
  z-index: 1;
}

.jist-why__claim-quote {
  margin-block: var(--wp--preset--spacing--40);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--hthree);
  font-weight: 600;
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-heading);
  color: var(--wp--preset--color--base);
}

.jist-why__claim-quote em {
  font-style: normal;
  color: var(--wp--preset--color--accent-lit);
}

.jist-why__claim .jist-dim-rule { margin-block: var(--wp--preset--spacing--50); }

.jist-why__claim-note {
  margin: 0;
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--faint);
  line-height: var(--wp--custom--leading-normal);
}

/* --------------------------------------------------------------------------
   Worry / answer rows
   -------------------------------------------------------------------------- */
.jist-why__rows { display: grid; }

.jist-why-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--wp--preset--spacing--50);
  padding-block: var(--wp--preset--spacing--60);
  border-block-end: var(--wp--custom--hairline) solid var(--wp--preset--color--line);
}

.jist-why__rows > .jist-why-row:first-child { padding-block-start: 0; }

.jist-why__rows > .jist-why-row:last-child {
  border-block-end: 0;
  padding-block-end: 0;
}

.jist-why-row__worry {
  display: block;
  margin-block-end: var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--muted);
  line-height: var(--wp--custom--leading-normal);
}

.jist-why-row__title {
  margin: 0 0 var(--wp--preset--spacing--20);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--hfour);
  font-weight: 600;
  line-height: var(--wp--custom--leading-snug);
  letter-spacing: var(--wp--custom--tracking-heading);
  color: var(--wp--preset--color--contrast);
}

.jist-why-row__text {
  margin: 0;
  color: var(--wp--preset--color--muted);
  font-size: var(--wp--preset--font-size--sm);
  line-height: var(--wp--custom--leading-relaxed);
  max-inline-size: var(--wp--custom--measure);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .jist-why__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--80);
  }
}

@media (max-width: 560px) {
  .jist-why-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--wp--preset--spacing--40);
  }

  .jist-why__claim { padding: var(--wp--preset--spacing--60); }
}