/* ============================================================
   Solving for Pattern — site layer

   The ONLY stylesheet in this project that is not a verbatim copy
   of the design system. Everything in assets/css/{tokens,styles}/
   and styles.css is copied unmodified from the bound DS bundle
   (_ds/solving-for-pattern-design-system-6d12417e…) and must stay
   that way — re-copy it when the design system updates.

   What lives here: the handful of compositions the design files
   expressed as inline styles, lifted into named classes. Every
   value below is the same value the design file used; nothing new
   is introduced. No new colors, no new spacing steps.
   ============================================================ */

/* ---------- Selected work list (About) ----------
   A list, not cards: 1px Shoreline top rule per row, 16px block
   padding. Mirrors the inline styles in About.dc.html. */
.sfp-worklist__row {
  border-top: var(--sfp-border-hairline) solid var(--sfp-color-border);
  padding-block: var(--sfp-space-4);
}

.sfp-worklist__sector {
  color: var(--sfp-color-text-secondary);
}

.sfp-worklist__client {
  margin-top: var(--sfp-space-2);
  font-weight: var(--sfp-weight-semibold);
}

.sfp-worklist__desc {
  margin-top: var(--sfp-space-1);
  color: var(--sfp-color-text-secondary);
  max-width: var(--sfp-measure-body);
}

/* A freshwater field gives the short Nori chapter a little visual depth
   without turning the career arc into a row of competing cards. */
.sfp-worklist__row--nori {
  margin-block: var(--sfp-space-2);
  padding-inline: var(--sfp-space-6);
  background: var(--sfp-freshwater-100);
  border-left: var(--sfp-border-emphasis) solid var(--sfp-freshwater-600);
  border-radius: var(--sfp-radius-md);
  box-shadow: var(--sfp-shadow-raised);
}

/* The first territory needs to separate from the Lake Mist section while
   remaining quieter than the Deep Watershed card. */
.sfp-offercard--land {
  background: var(--sfp-gold-100);
  border-color: var(--sfp-gold-400);
  box-shadow: inset 0 var(--sfp-space-1) 0 var(--sfp-gold-500);
}

.sfp-offercard--land .sfp-offercard__label {
  color: var(--sfp-loam-700);
}

/* These metrics live in a narrow sidebar. Stacking them preserves the
   intended internal padding when the Leeds credential wraps. */
.sfp-statgroup--sidebar {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .sfp-statgroup--sidebar {
    grid-template-columns: 1fr;
  }
}

.sfp-statgroup--sidebar .sfp-metric__label {
  padding-right: var(--sfp-space-2);
}

/* ---------- Pattern Library ---------- */
.sfp-library-list {
  display: grid;
  gap: var(--sfp-space-6);
}

.sfp-article-hero {
  padding-block: var(--sfp-space-16) var(--sfp-space-12);
  background: var(--sfp-color-bg-subtle);
}

.sfp-article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sfp-space-3);
  margin-bottom: var(--sfp-space-4);
}

.sfp-article-hero__lede {
  max-width: var(--sfp-measure-body);
  margin-top: var(--sfp-space-4);
  color: var(--sfp-color-text-secondary);
  font-size: var(--sfp-text-body-lg);
  line-height: var(--sfp-leading-body-lg);
}

.sfp-article-layout {
  display: grid;
  gap: var(--sfp-space-12);
}

.sfp-article-layout > .sfp-prose {
  margin-inline: auto;
}

.sfp-article-visual {
  order: -1;
  margin: 0;
  overflow: hidden;
  background: var(--sfp-paper-50);
  border: var(--sfp-border-hairline) solid var(--sfp-color-border);
  border-radius: var(--sfp-radius-lg);
}

.sfp-article-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.sfp-article-visual figcaption {
  padding: var(--sfp-space-3) var(--sfp-space-4);
  color: var(--sfp-color-text-secondary);
  font-size: var(--sfp-text-small);
  line-height: var(--sfp-leading-small);
  border-top: var(--sfp-border-hairline) solid var(--sfp-color-border);
}

.sfp-article-visual figcaption a {
  margin-left: var(--sfp-space-2);
}

/* ---------- Small spacing helpers ----------
   Stand-ins for the design files' inline margin-top declarations. */
.sfp-mt-4 { margin-top: var(--sfp-space-4); }
.sfp-mt-6 { margin-top: var(--sfp-space-6); }

/* ---------- Measure helper ----------
   The 70-character reading measure, applied to standalone body
   paragraphs that sit outside .sfp-prose. */
.sfp-measure { max-width: var(--sfp-measure-body); }

/* ---------- Footer lineage line ----------
   SiteFooter renders this inline when variant="lineage". */
.sfp-footer__lineage {
  margin-top: var(--sfp-space-4);
  color: var(--sfp-color-text-inverse-secondary);
}

/* ---------- ContactBand detail line ----------
   SiteFooter/ContactBand render this inline for variant="full". */
.sfp-contactband__detail {
  margin-top: var(--sfp-space-4);
  color: var(--sfp-gold-400);
}

/* ---------- Reverse wordmark text ----------
   Wordmark applies this inline when reverse={true}. */
.sfp-wordmark--reverse .sfp-wordmark__text {
  color: var(--sfp-paper-100);
}

/* ---------- Inquiry form: hidden until needed ---------- */
[hidden] {
  display: none !important;
}