/* css/blog-blocks.css — the article block library (S33)
   ============================================================================
   A small, FIXED set of blocks an author chooses between, so twenty articles do
   not look like one page printed twenty times (BLOG_ENGINE METHOD §20). Every
   block helps a reader who scrolls AND is a shape search engines lift into
   results (lists, tables, steps, a short answer).

     .sst-answer     the short answer, near the top (40–60 words, snippet-ready)
     .sst-takeaways  key takeaways — 3 to 5 complete points
     .sst-callout    --tip · --warn (the costly mistake) · --money · --note
     .sst-steps      numbered steps (an <ol>)
     .sst-table      a table that scrolls sideways on a phone, never overflows
     .sst-checklist  a list of checks
     .sst-specs      "at a glance" facts
     .sst-quote      a line from the workshop floor
     .sst-figure     a photograph with a caption
     .sst-sources    where the outside facts came from

   Loaded on the article page and in the admin editor, so authors compose
   against exactly what readers see. Brand tokens from css/global.css only.
   Mobile first: 360 px is the design width. */

.sst-answer, .sst-takeaways, .sst-callout, .sst-steps, .sst-table, .sst-checklist,
.sst-specs, .sst-quote, .sst-figure, .sst-sources {
  --b-ink: var(--color-brand-black, #111);
  --b-blue: var(--color-brand-blue, #23A4D6);
  --b-blue-ink: #0A6A93;
  --b-red: var(--color-brand-red, #E62B2B);
  --b-red-ink: #B4161C;
  --b-muted: #4B5565;
  --b-line: rgba(17, 17, 17, .09);
  --b-soft: #F7F9FC;
  margin: 2rem 0;
  font-family: var(--font-body, 'Inter', sans-serif);
}
.sst-answer *, .sst-takeaways *, .sst-callout *, .sst-steps *, .sst-table *, .sst-checklist *,
.sst-specs *, .sst-quote *, .sst-figure *, .sst-sources * { box-sizing: border-box; }

/* ── the short answer ─────────────────────────────────────────────────── */
.sst-answer {
  position: relative; padding: 1.15rem 1.25rem 1.15rem 1.35rem; border-radius: 16px;
  background: linear-gradient(135deg, rgba(35, 164, 214, .09), rgba(35, 164, 214, .02) 70%);
  border: 1px solid rgba(35, 164, 214, .28);
  font-size: 1.08rem; line-height: 1.7; color: var(--b-ink);
}
.sst-answer::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 0 4px 4px 0; background: var(--b-blue); }
.sst-answer .sst-label { margin: 0 0 .35rem !important; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--b-blue-ink); }
.sst-answer p { margin: 0 !important; }

/* ── key takeaways ────────────────────────────────────────────────────── */
.sst-takeaways {
  position: relative; overflow: hidden; padding: 1.35rem 1.25rem 1.1rem; border-radius: 18px; background: #fff;
  border: 1px solid var(--b-line); box-shadow: 0 18px 40px -22px rgba(17, 17, 17, .35);
}
.sst-takeaways::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--b-red), var(--b-blue)); }
.sst-takeaways .sst-label {
  margin: 0 0 .75rem !important; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 1.05rem !important; font-weight: 800; letter-spacing: -.01em; color: var(--b-ink);
}
.sst-takeaways ul { margin: 0 !important; padding: 0 !important; display: grid; gap: .6rem; }
.article-body .sst-takeaways li, .sst-takeaways li {
  position: relative; margin: 0 !important; padding: .1rem 0 .1rem 2rem; list-style: none;
  font-size: 1rem; line-height: 1.6; color: #222;
}
.article-body .sst-takeaways li::before, .sst-takeaways li::before {
  content: "" !important; position: absolute; left: 0; top: .32rem; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 28%, transparent 30%), linear-gradient(135deg, var(--b-red), var(--b-blue));
  font-family: inherit !important;
}
.sst-takeaways strong { color: var(--b-ink); }

/* ── callouts ─────────────────────────────────────────────────────────── */
.sst-callout {
  position: relative; padding: 1.1rem 1.15rem 1.1rem 3.4rem; border-radius: 16px;
  background: var(--b-soft); border: 1px solid var(--b-line); font-size: 1.02rem; line-height: 1.7; color: #222;
}
.sst-callout::before {
  position: absolute; left: 1.05rem; top: 1.15rem; width: 1.6rem; height: 1.6rem; border-radius: 9px; display: grid; place-items: center;
  font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: .8rem; color: #fff; background: var(--b-ink); content: "\f05a";
}
.sst-callout > p:first-child > strong:first-child, .sst-callout .sst-label { display: block; margin-bottom: .2rem; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 1.02rem; color: var(--b-ink); }
.sst-callout p { margin: 0 0 .6rem !important; } .sst-callout p:last-child { margin-bottom: 0 !important; }
.sst-callout--tip   { background: linear-gradient(135deg, rgba(35, 164, 214, .1), rgba(35, 164, 214, .03)); border-color: rgba(35, 164, 214, .3); }
.sst-callout--tip::before { background: var(--b-blue); content: "\f0eb"; }
.sst-callout--warn  { background: linear-gradient(135deg, rgba(230, 43, 43, .09), rgba(230, 43, 43, .025)); border-color: rgba(230, 43, 43, .3); }
.sst-callout--warn::before { background: var(--b-red); content: "\f071"; }
.sst-callout--money { background: linear-gradient(135deg, rgba(18, 162, 108, .1), rgba(18, 162, 108, .03)); border-color: rgba(18, 162, 108, .3); }
.sst-callout--money::before { background: #0E8A5C; content: "\f3d1"; }
.sst-callout--note::before { content: "\f249"; }

/* ── steps ────────────────────────────────────────────────────────────── */
.sst-steps { counter-reset: sst-step; padding: 0 !important; display: grid; gap: .25rem; }
.sst-steps > li, .article-body .sst-steps > li {
  counter-increment: sst-step; position: relative; list-style: none; margin: 0 !important;
  padding: .2rem 0 1.1rem 3.1rem; font-size: 1.02rem; line-height: 1.65; color: #222;
}
.sst-steps > li::before, .article-body .sst-steps > li::before {
  content: counter(sst-step) !important; position: absolute; left: 0; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-heading, 'Outfit', sans-serif) !important; font-weight: 800; font-size: .95rem;
  color: #fff; background: var(--b-ink); box-shadow: 0 0 0 4px rgba(17, 17, 17, .08);
}
.sst-steps > li::after { content: ""; position: absolute; left: calc(1.05rem - 1px); top: 2.35rem; bottom: .15rem; width: 2px; background: linear-gradient(var(--b-line), transparent); }
.sst-steps > li:last-child::after { display: none; }
.sst-steps > li > strong:first-child { display: block; color: var(--b-ink); font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 1.05rem; }

/* ── tables ───────────────────────────────────────────────────────────── */
.sst-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; border: 1px solid var(--b-line); background: #fff; box-shadow: 0 14px 34px -24px rgba(17, 17, 17, .4); }
.sst-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.sst-table caption { caption-side: top; text-align: left; padding: .9rem 1rem .5rem; font-family: var(--font-heading, 'Outfit', sans-serif); font-weight: 800; font-size: 1rem; color: var(--b-ink); }
.sst-table th { text-align: left; padding: .75rem 1rem; background: var(--b-ink); color: #fff; font-weight: 700; font-size: .85rem; letter-spacing: .02em; white-space: nowrap; }
.sst-table td { padding: .75rem 1rem; border-top: 1px solid var(--b-line); color: #222; vertical-align: top; }
.sst-table tbody tr:nth-child(even) td { background: var(--b-soft); }
.sst-table td:first-child { font-weight: 700; color: var(--b-ink); }
.sst-table .sst-table-note, .sst-table + .sst-table-note { display: block; padding: .6rem 1rem .8rem; font-size: .82rem; color: var(--b-muted); }

/* Phones: a comparison with 3+ columns becomes one card per row, each value labelled
   (td data-label="…"). Sideways scrolling a table on a phone hides the very column people came for. */
@media (max-width: 640px) {
  .sst-table--stack { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .sst-table--stack table { min-width: 0; }
  .sst-table--stack caption { padding: 0 0 .6rem; }
  .sst-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sst-table--stack tr { display: block; margin: 0 0 .75rem; border-radius: 14px; border: 1px solid var(--b-line); background: #fff; overflow: hidden; box-shadow: 0 10px 26px -20px rgba(17, 17, 17, .45); }
  .sst-table--stack td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; padding: .6rem .9rem; border-top: 1px solid var(--b-line); }
  .sst-table--stack tbody tr:nth-child(even) td { background: transparent; }
  .sst-table--stack td::before { content: attr(data-label); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--b-muted); padding-top: .15rem; }
  .sst-table--stack td:first-child { display: block; border-top: 0; background: var(--b-ink) !important; color: #fff; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 1.02rem; }
  .sst-table--stack td:first-child::before { content: none; }
}

/* ── checklist ────────────────────────────────────────────────────────── */
.sst-checklist { padding: 1rem 1.15rem !important; border-radius: 16px; border: 1px dashed rgba(17, 17, 17, .22); background: #fff; display: grid; gap: .55rem; }
.sst-checklist > li, .article-body .sst-checklist > li { position: relative; list-style: none; margin: 0 !important; padding-left: 2rem; font-size: 1rem; line-height: 1.6; }
.sst-checklist > li::before, .article-body .sst-checklist > li::before {
  content: "\f00c" !important; position: absolute; left: 0; top: .2rem; width: 1.3rem; height: 1.3rem; border-radius: 6px; display: grid; place-items: center;
  font-family: 'Font Awesome 5 Free' !important; font-weight: 900; font-size: .65rem !important; color: #fff !important; background: var(--b-blue);
}

/* ── at a glance ──────────────────────────────────────────────────────── */
.sst-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.sst-specs > div { padding: .9rem 1rem; border-radius: 14px; background: var(--b-soft); border: 1px solid var(--b-line); }
.sst-specs dt, .sst-specs .sst-spec-label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--b-muted); }
.sst-specs dd, .sst-specs .sst-spec-value { display: block; margin: .25rem 0 0; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 1.15rem; font-weight: 800; color: var(--b-ink); line-height: 1.3; }

/* ── quote ────────────────────────────────────────────────────────────── */
.sst-quote { position: relative; padding: 1.25rem 1.25rem 1.1rem 3.2rem; border-radius: 16px; background: var(--b-ink); color: #F2F4F7; }
.sst-quote::before { content: "\201C"; position: absolute; left: .9rem; top: .25rem; font-family: Georgia, serif; font-size: 3.6rem; line-height: 1; color: var(--b-red); }
.sst-quote p { margin: 0 0 .4rem !important; font-family: var(--font-heading, 'Outfit', sans-serif); font-size: 1.15rem; line-height: 1.55; font-weight: 600; color: #fff; }
.sst-quote cite, .sst-quote footer { display: block; font-style: normal; font-size: .85rem; color: #A5AFBE; }

/* ── photograph ───────────────────────────────────────────────────────── */
.sst-figure { margin: 2rem 0; }
.sst-figure img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 18px 40px -26px rgba(17, 17, 17, .5); background: var(--b-soft); }
.sst-figure figcaption { margin-top: .6rem; font-size: .88rem; line-height: 1.5; color: var(--b-muted); }

/* ── sources ──────────────────────────────────────────────────────────── */
.sst-sources { padding: .85rem 1rem; border-radius: 12px; border: 1px solid var(--b-line); background: var(--b-soft); font-size: .86rem; line-height: 1.55; color: var(--b-muted); }
.sst-sources strong { color: var(--b-ink); }
.sst-sources a { color: var(--b-blue-ink); word-break: break-word; }
.sst-sources p { margin: 0 !important; }

/* ── larger screens ───────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .sst-takeaways { padding: 1.6rem 1.75rem 1.35rem; }
  .sst-callout { padding: 1.25rem 1.4rem 1.25rem 3.8rem; }
  .sst-specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sst-specs.sst-specs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sst-answer { padding: 1.3rem 1.6rem 1.3rem 1.75rem; }
}
@media print { .sst-takeaways, .sst-table, .sst-figure img { box-shadow: none; } }