/* =========================================================================
   Recommendations — "The Supply Shelf" component sheet.
   Wave B of the Eleventy migration (2026-08-16).

   Loaded alongside marketing.css via a `pageCss:` LIST in frontmatter:
     pageCss:
       - /assets/css/marketing.css
       - /assets/css/recommendations.css

   marketing.css supplies the hero band (.mk-hero--dark) and the closing CTA.
   This file supplies only what is genuinely specific to the supply shelf:
   the affiliate-disclosure legend, the product card grid, and the buy pills.

   WHY THE rec- PREFIX
   The hand-coded page defined `.legend`, `.name`, `.meta`, `.desc`, `.pill`,
   `.chip` and `.buy-row` as bare class names inside a page-scoped <style>
   block. Scoped to one inline block that was safe. Promoted into a real
   stylesheet it would not be: `.meta`, `.name` and `.pill` are about as
   collision-prone as class names get, and this sheet now sits in the same
   cascade as 24 others. Same reasoning that put the `mk-` prefix on
   marketing.css — see the header of that file.

   The prose wrap is local rather than borrowed from marketing.css: the
   .mk-section__inner band is centre-aligned and 1200px wide, which is right
   for a marketing surface and wrong for a page people actually read down.
   The old page borrowed leaf-library.css's `.wrap` for this; that sheet is
   an editorial-article sheet and pulling it in for one width rule dragged a
   whole pillar's styling along with it.

   TOKENS ONLY — no raw hex, per the contract at the top of tokens.css.

   RADII are the original literal 3px rather than --radius-sm (2px). The first
   pass snapped them to the token scale; the difference is 1px and invisible,
   but this branch is a migration and promised no visual change, and
   "invisible" is a judgement where "unchanged" is a fact. The same 1px
   substitution on /members/ turned out to be hiding a real regression in the
   same commit — card backgrounds flattened from #fff to the page cream — so
   the cheap discipline is to carry originals exactly and re-snap everything
   to the scale together in the Phase 2 component hoist.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Prose wrap
   ------------------------------------------------------------------------- */

.rec-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 32px 96px;
}

.rec-wrap h2 {
  font-family: var(--font-serif);
  font-weight: var(--font-weight-serif-heading);
  font-size: 30px;
  line-height: 1.2;
  margin: 56px 0 14px;
  color: var(--color-accent);
}

.rec-wrap h2:first-of-type { margin-top: 0; }

.rec-wrap p {
  margin: 0 0 18px;
  color: var(--color-text);
}

.rec-wrap strong {
  color: var(--color-text);
  font-weight: var(--font-weight-sans-emphasis);
}

.rec-intro {
  font-size: 17px;
  color: var(--color-text-muted);
  margin-bottom: 28px;
  max-width: 720px;
}

/* -------------------------------------------------------------------------
   Affiliate disclosure legend. This is a compliance surface, not decoration —
   the FTC endorsement guides want the disclosure adjacent to the links it
   covers, so it sits above the first card grid and repeats in "The fine
   print" at the foot of the page.
   ------------------------------------------------------------------------- */

.rec-legend {
  background: var(--color-bg-alt);
  border-radius: 3px; /* original value — see RADII note in the file header */
  padding: 18px 22px;
  margin: 0 0 40px;
  border-left: 4px solid var(--color-accent-warm);
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.65;
}

.rec-legend strong { color: var(--color-text); }

.rec-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: var(--font-weight-sans-emphasis);
  vertical-align: baseline;
}

.rec-chip--aff { background: var(--color-accent-warm); color: var(--cream); }
.rec-chip--loc { background: var(--color-accent); color: var(--cream); }

/* -------------------------------------------------------------------------
   Product cards
   ------------------------------------------------------------------------- */

.rec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 0 0 8px;
}

.rec-card {
  background: var(--color-bg);
  border: 1px solid var(--color-bg-alt);
  border-radius: 3px; /* original value — see RADII note in the file header */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rec-card__thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--color-bg-alt);
  background: var(--color-bg-alt);
}

.rec-card__body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.rec-card__name {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: var(--font-weight-serif-heading);
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 3px;
}

.rec-card__meta {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-warm);
  font-weight: var(--font-weight-sans-emphasis);
  margin-bottom: 10px;
}

.rec-card__desc {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}

.rec-card__desc a { color: var(--color-accent); }

/* -------------------------------------------------------------------------
   Buy pills. Terracotta = paid affiliate link, forest = unpaid local shop.
   The colour IS the disclosure, so the two must stay visually distinct; the
   legend above explains the mapping in words for anyone who can't rely on it.
   ------------------------------------------------------------------------- */

.rec-buy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.rec-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--font-weight-sans-emphasis);
  letter-spacing: 0.01em;
  text-decoration: none;
  line-height: 1;
  transition: background var(--transition-default), transform var(--transition-default);
}

.rec-pill:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.rec-pill--aff { background: var(--color-accent-warm); color: var(--cream); }
.rec-pill--aff:hover { background: #9B3A16; color: var(--cream); }

.rec-pill--loc { background: var(--color-accent); color: var(--cream); }
.rec-pill--loc:hover { background: #1C3327; color: var(--cream); }

/* -------------------------------------------------------------------------
   Promises card — ported from leaf-library.css `.synthesis-card`, which the
   hand-coded page borrowed. Copied rather than shared deliberately: this is
   the only non-editorial page using it, and reaching into an article sheet
   for one component is how `.related-card` ended up meaning two different
   things in seven stylesheets. If a third page wants it, hoist it then.
   ------------------------------------------------------------------------- */

.rec-promise {
  background: var(--walnut);
  color: var(--cream);
  border-radius: 3px; /* original value — see RADII note in the file header */
  padding: 32px 32px 28px;
  margin: 28px 0 12px;
}

.rec-promise__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kraft);
  font-weight: var(--font-weight-sans-emphasis);
  margin-bottom: 10px;
}

.rec-promise h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: var(--font-weight-serif-heading);
  color: var(--cream);
  margin-bottom: 12px;
}

.rec-promise p {
  color: var(--kraft);
  margin-bottom: 16px;
  font-size: 16px;
}

.rec-promise p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .rec-grid { grid-template-columns: 1fr; }
  .rec-wrap { padding: 40px 20px 72px; }
}