/* ═══════════════════════════════════════════════════════════
   TaskMasters — Blog (index + article)
   Follows DESIGN.md: cream base with ledger-navy anchors, emerald reserved as a
   control signal (actions and proof only), Fraunces on decisive headings only,
   flat surfaces with 1px borders, lift reserved for hover.

   Replaces blog-article.css and blog-index.css, which predate the rebrand
   (Raleway/Poppins, --color-orange) and reference no design tokens at all.

   Layout tokens (--tm-v2-container / --tm-v2-page-x) come from index.css, so
   index.css must load first.
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   1. PROSE
   The long-form scale. No v2 stylesheet styled generic
   <p>/<h2>/<ul>/<blockquote> before this, so every article body
   shares exactly one look by construction.
   Measure held at 65-75ch per DESIGN.md.
   ═══════════════════════════════════════════════════════════ */
.tm-v2-prose {
  font-family: var(--tm-font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--tm-ink-700);
}

/* Reset the UA paragraph margins first. `:where()` keeps the reset at zero
   specificity so the flow rule below is what actually owns vertical rhythm —
   a plain `.tm-v2-prose p` selector outranks `> * + *` and silently flattens
   every paragraph gap to nothing. */
.tm-v2-prose :where(p) { margin: 0; }

.tm-v2-prose > * + * { margin-top: 1.35em; }

/* Headings: Fraunces earns its place on section breaks, not on every line. */
.tm-v2-prose h2,
.tm-v2-prose h3,
.tm-v2-prose h4 {
  font-family: var(--tm-font-display);
  font-weight: 600;
  color: var(--tm-navy);
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.tm-v2-prose h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  margin-top: 2.4em;
  padding-top: 0.9em;
  border-top: 1px solid var(--tm-line-200);
}

.tm-v2-prose h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin-top: 2em;
}

.tm-v2-prose h4 {
  font-family: var(--tm-font-body);
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 1.8em;
}

/* First heading in a block should not push a rule against the lead. */
.tm-v2-prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.tm-v2-prose > h3:first-child,
.tm-v2-prose > h4:first-child { margin-top: 0; }

.tm-v2-prose strong { color: var(--tm-navy); font-weight: 600; }
.tm-v2-prose em     { font-style: italic; }

.tm-v2-prose a {
  color: var(--tm-emerald-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.16s ease;
}
.tm-v2-prose a:hover { color: var(--tm-navy); }

.tm-v2-prose ul,
.tm-v2-prose ol {
  margin: 1.35em 0 0;
  padding-left: 1.4em;
}

.tm-v2-prose li + li { margin-top: 0.5em; }
.tm-v2-prose li::marker { color: var(--tm-emerald); }
.tm-v2-prose ol > li::marker { color: var(--tm-ink-500); font-variant-numeric: tabular-nums; }

/* Nested lists stay quiet. */
.tm-v2-prose li > ul,
.tm-v2-prose li > ol { margin-top: 0.5em; }

.tm-v2-prose blockquote {
  margin: 1.8em 0 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--tm-gold);
  font-family: var(--tm-font-display);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--tm-navy);
}
.tm-v2-prose blockquote p { margin: 0; }
.tm-v2-prose blockquote > p + p { margin-top: 0.7em; }

.tm-v2-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--tm-mist-100);
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-sm);
  color: var(--tm-navy);
}

.tm-v2-prose pre {
  margin: 1.5em 0 0;
  padding: 18px 20px;
  overflow-x: auto;
  background: var(--tm-navy);
  border-radius: var(--tm-radius-md);
}
.tm-v2-prose pre code {
  padding: 0;
  background: none;
  border: 0;
  color: var(--tm-cream);
}

/* Tables — the comparison archetype leans on these. `display: block` plus
   `overflow-x: auto` lets a table wider than the measure scroll on its own
   axis instead of forcing the whole page wider than the viewport — without
   this, a narrow phone screen wound up rendering at the table's full width,
   clipping columns from view with no way to reach them. */
.tm-v2-prose table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.8em 0 0;
  border-collapse: collapse;
  font-size: 0.97rem;
}
.tm-v2-prose th,
.tm-v2-prose td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--tm-line-200);
  vertical-align: top;
}
.tm-v2-prose thead th {
  font-family: var(--tm-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-navy);
  border-bottom: 1px solid var(--tm-line-300);
  white-space: nowrap;
}
.tm-v2-prose tbody tr:last-child td { border-bottom: 0; }


/* ═══════════════════════════════════════════════════════════
   2. ARTICLE
   ═══════════════════════════════════════════════════════════ */
.blog-post__head {
  background: var(--tm-warm);
  border-bottom: 1px solid var(--tm-line-200);
  padding: clamp(40px, 7vh, 80px) 0 clamp(36px, 6vh, 64px);
}

.blog-post__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tm-font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tm-ink-500);
  text-decoration: none;
  margin-bottom: clamp(20px, 3vw, 32px);
  transition: color 0.16s ease;
}
.blog-post__back:hover { color: var(--tm-emerald-deep); }

.blog-post__eyebrow { margin-bottom: 14px; }

.blog-post__title {
  font-family: var(--tm-font-display);
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--tm-navy);
  max-width: 24ch;
  margin: 0;
}

.blog-post__lead {
  font-family: var(--tm-font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--tm-ink-700);
  max-width: 62ch;
  margin: 22px 0 0;
}

.blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 32px);
  font-family: var(--tm-font-body);
  font-size: 0.875rem;
  color: var(--tm-ink-500);
}
.blog-post__meta span[aria-hidden] { color: var(--tm-line-300); }

.blog-post__body { padding: clamp(44px, 7vh, 80px) 0 clamp(56px, 9vh, 110px); }

/* The measure. Centred in the shell so a wide viewport does not leave the
   article hugging the left edge with a dead column beside it. The head uses
   the same measure so the title and the body share one left edge. */
.blog-post__measure,
.blog-post__headmeasure {
  max-width: 72ch;
  margin-inline: auto;
}

.blog-post__measure > * + * { margin-top: clamp(28px, 4vw, 44px); }


/* ═══════════════════════════════════════════════════════════
   3. ACCENTS
   ═══════════════════════════════════════════════════════════ */

/* ── Key takeaways ── */
.blog-takeaways {
  padding: clamp(24px, 3.5vw, 34px);
  border: 1px solid var(--tm-line-200);
  border-left-width: 3px;
  border-radius: var(--tm-radius-lg);
  background: var(--tm-cream);
}

.blog-takeaways--gold    { border-left-color: var(--tm-gold); }
.blog-takeaways--emerald { border-left-color: var(--tm-emerald); }
.blog-takeaways--navy    { border-left-color: var(--tm-navy-3); }

.blog-takeaways__title {
  font-family: var(--tm-font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--tm-navy);
  margin: 0 0 16px;
}

.blog-takeaways__list {
  margin: 0;
  padding-left: 1.2em;
  font-family: var(--tm-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tm-ink-700);
}
.blog-takeaways__list li + li { margin-top: 0.6em; }
.blog-takeaways__list li::marker { color: var(--tm-emerald); }

/* ── Callout ── */
.blog-callout {
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-lg);
  background: var(--tm-warm);
}

.blog-callout__label {
  font-family: var(--tm-font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: var(--tm-ink-500);
}

.blog-callout__body {
  font-family: var(--tm-font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tm-ink-700);
}

.blog-callout--example { border-left: 3px solid var(--tm-emerald); }
.blog-callout--example .blog-callout__label { color: var(--tm-emerald-deep); }

.blog-callout--warning { border-left: 3px solid var(--tm-gold); }
.blog-callout--warning .blog-callout__label { color: #8A6D2F; }

.blog-callout--note { border-left: 3px solid var(--tm-line-300); }

/* ── Figure — breaks the measure, it needs the width ── */
.blog-figure {
  margin: 0;
  width: 100%;
}

.blog-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-lg);
}

.blog-figure figcaption {
  margin-top: 12px;
  font-family: var(--tm-font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--tm-ink-500);
}

/* ── Post CTA ── */
.blog-cta {
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--tm-radius-xl);
  background: var(--tm-navy);
  text-align: left;
}

.blog-cta__title {
  font-family: var(--tm-font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--tm-cream);
  margin: 0;
  max-width: 30ch;
}

.blog-cta__copy {
  font-family: var(--tm-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(250, 250, 245, 0.78);
  margin: 14px 0 0;
  max-width: 56ch;
}

.blog-cta .tm-v2-button { margin-top: clamp(20px, 3vw, 28px); }

/* ── FAQ inside an article: the shared accordion, spaced for prose ── */
.blog-post__faq { padding: 0; }
.blog-post__faq .tm-v2-faq__header { margin-bottom: 20px; }


/* ═══════════════════════════════════════════════════════════
   4. INDEX
   ═══════════════════════════════════════════════════════════ */
.blog-index__hero {
  background: var(--tm-warm);
  border-bottom: 1px solid var(--tm-line-200);
  padding: clamp(44px, 8vh, 90px) 0 clamp(36px, 6vh, 64px);
}

.blog-index__title {
  font-family: var(--tm-font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--tm-navy);
  margin: 14px 0 0;
  max-width: 22ch;
}
.blog-index__title span { color: var(--tm-emerald); }

.blog-index__lead {
  font-family: var(--tm-font-body);
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.65;
  color: var(--tm-ink-700);
  max-width: 62ch;
  margin: 20px 0 0;
}

/* ── Filters ── */
.blog-index__filters {
  border-bottom: 1px solid var(--tm-line-200);
  padding: 22px 0;
  background: var(--tm-cream);
}

.blog-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.blog-filters__search {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}

.blog-filters__search i {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 0.95rem;
  color: var(--tm-ink-500);
  pointer-events: none;
}

.blog-filters__input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  font-family: var(--tm-font-body);
  font-size: 0.95rem;
  color: var(--tm-ink-900);
  background: #fff;
  border: 1px solid var(--tm-line-300);
  border-radius: var(--tm-radius-pill);
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.blog-filters__input:focus {
  outline: none;
  border-color: var(--tm-emerald);
  box-shadow: 0 0 0 3px rgba(15, 157, 110, 0.14);
}
.blog-filters__input::placeholder { color: var(--tm-ink-500); }

.blog-filters__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  background: var(--tm-mist-100);
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-pill);
}

.blog-filters__tab {
  padding: 8px 16px;
  font-family: var(--tm-font-body);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--tm-ink-700);
  background: none;
  border: 0;
  border-radius: var(--tm-radius-pill);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.blog-filters__tab:hover { color: var(--tm-navy); }
.blog-filters__tab.is-active {
  background: #fff;
  color: var(--tm-navy);
  font-weight: 600;
  box-shadow: var(--tm-shadow-micro);
}

.blog-filters__count {
  margin: 14px 0 0;
  font-family: var(--tm-font-body);
  font-size: 0.85rem;
  color: var(--tm-ink-500);
}

/* ── Card grid ── */
.blog-index__grid-section { padding: clamp(40px, 6vh, 72px) 0 clamp(52px, 8vh, 100px); }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}

.blog-card {
  display: flex;
  border: 1px solid var(--tm-line-200);
  border-radius: var(--tm-radius-lg);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--tm-emerald);
  box-shadow: var(--tm-shadow-hover);
}

.blog-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: clamp(22px, 3vw, 30px);
  text-decoration: none;
}

.blog-card__kicker {
  font-family: var(--tm-font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tm-emerald-deep);
  margin: 0 0 12px;
}

.blog-card__title {
  font-family: var(--tm-font-display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--tm-navy);
  margin: 0;
}

.blog-card__excerpt {
  font-family: var(--tm-font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--tm-ink-700);
  margin: 12px 0 0;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: auto 0 0;
  padding-top: 20px;
  font-family: var(--tm-font-body);
  font-size: 0.82rem;
  color: var(--tm-ink-500);
}

.blog-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--tm-emerald-deep);
  /* Pin to the bottom of the card. .blog-card__link is already a flex column,
     so auto margin absorbs the slack and the link sits on the same baseline
     across a row however long each excerpt is — or whether there is one at
     all. Also affects the /blog index, which has the same component and the
     same problem. */
  margin-top: auto;
}
.blog-card__more i { transition: transform 0.18s ease; }
.blog-card:hover .blog-card__more i { transform: translateX(3px); }

.blog-grid__empty {
  font-family: var(--tm-font-body);
  font-size: 1rem;
  color: var(--tm-ink-500);
  text-align: center;
  padding: 48px 0;
  margin: 0;
}

/* ── Index CTA ── */
.blog-index__cta {
  background: var(--tm-warm);
  border-top: 1px solid var(--tm-line-200);
  padding: clamp(48px, 8vh, 96px) 0;
}

.blog-index__cta-title {
  font-family: var(--tm-font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--tm-navy);
  margin: 0;
  max-width: 26ch;
}

.blog-index__cta-copy {
  font-family: var(--tm-font-body);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--tm-ink-700);
  max-width: 56ch;
  margin: 16px 0 26px;
}


/* ═══════════════════════════════════════════════════════════
   5. RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
/* A tablet in portrait (768px is the common default, e.g. iPad) sits just
   under the width the auto-fill grid below needs to fit two 320px cards plus
   a gap and the page's own side padding — so it fell back to one column,
   the same as a phone, instead of the two the design intends there. An
   explicit two-column band covers exactly that gap; anything wider already
   fits two (or more) columns on its own via the auto-fill rule. */
@media (min-width: 761px) and (max-width: 800px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .blog-post__measure { max-width: none; }

  .blog-filters { flex-direction: column; align-items: stretch; }
  /* `flex: 1 1 260px` (set above for the row layout) sizes along whichever
     axis is the flex container's main axis — once the rule right above this
     switches to a column layout, that same 260px basis applies to HEIGHT
     instead of width, stretching the search box to 260px tall around a
     43px input. Resetting the basis here is what that column switch needs. */
  .blog-filters__search { flex: 1 1 auto; max-width: none; }
  .blog-filters__tabs { justify-content: flex-start; overflow-x: auto; }

  .blog-grid { grid-template-columns: 1fr; }

  .tm-v2-prose h2 { margin-top: 2em; }
}

@media (max-width: 420px) {
  .blog-filters__tab { padding: 8px 12px; font-size: 0.82rem; }
}

/* ── Draft preview banner ──
   Shown only on ?preview=1 for a non-live post (see blog-post-v2.php). Sticky so
   it stays visible while reading a long draft — the whole point is that you never
   forget you are looking at something the public cannot see. */
.blog-draft-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #92400e;
  color: #fff;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.blog-draft-banner__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: .625rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .875rem;
  line-height: 1.4;
}

.blog-draft-banner__badge {
  flex: none;
  background: rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: .125rem .625rem;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.blog-draft-banner__text { flex: 1 1 16rem; }

.blog-draft-banner__link {
  flex: none;
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

.blog-draft-banner__link:hover { color: #fde68a; }

/* Screen-reader-only utility — referenced by blog-v2.php's search <label> but
   never actually defined, so the label rendered as normal visible text instead
   of being hidden. Standard sr-only pattern: present for assistive tech, removed
   from the visual layout without `display:none` (which screen readers also skip). */
.tm-v2-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Related posts ─────────────────────────────────────────────────────────
   Sits below the article body, after any CTA section. Cards reuse .blog-card
   from the index above, so the two surfaces cannot drift apart visually. */
.blog-related {
  /* Same bottom rhythm .blog-post__body uses, so the page ends on the spacing
     it would have had if the related strip were not here. 8px left the cards
     almost touching the footer while the gap above the block was 59px. */
  padding: 0 0 clamp(56px, 9vh, 110px);
}

.blog-related__kicker {
  font-family: var(--tm-font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-ink-500);
  margin: 0 0 16px;
  padding-top: 28px;
  border-top: 1px solid var(--tm-line-200);
}

.blog-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .blog-related__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .blog-related__grid { grid-template-columns: 1fr; }
}

/* ══ WIDTH EXPERIMENT — delete this whole block to revert ══════════════════
   The article body sits in a 72ch reading measure, which renders at 71
   characters per line. That is correct and deliberate: 50-75 is the
   readability range, so widening the PROSE would make the site harder to
   read, not better.

   The complaint it does not answer is alignment. At 1440px the page has
   three different left edges — navbar content at 50px, footer at 95px,
   section shell at 100px, and the blog body at 352px. Prose cannot move
   without hurting reading, but elements that are not read line by line can:
   cards, figures and the CTA have no reason to obey a text measure.

   So those break out to the section shell's content box, which is what every
   other v2 page already aligns to. Negative inline margins rather than a
   transform, because transform would create a containing block and change
   how anything positioned inside these elements resolves. */

/* Makes the shell a query container so 100cqi below resolves to its CONTENT
   box. A 100vw calculation gets this 5px wrong at every width, because vw
   counts the scrollbar and the shell does not — enough to see when a CTA and
   the card strip sit one above the other. Scoped to blog posts, and verified
   that nothing inside is absolutely positioned, since container-type also
   applies contain:layout and would otherwise re-anchor it. */
.blog-post .tm-v2-section-shell {
  container-type: inline-size;
}

.blog-post__measure > .blog-cta,
.blog-post__measure > .blog-figure {
  --tm-breakout: 100cqi;
  width: var(--tm-breakout);
  /* 100% resolves against the measure, so this goes negative and pulls the
     element out symmetrically. */
  margin-inline: calc((100% - var(--tm-breakout)) / 2);
}

/* The related strip already lives in its own measure, so it only needs the
   cap lifted to inherit the shell's alignment. */
.blog-related .blog-post__measure {
  max-width: none;
}

.blog-related__grid {
  gap: 20px;
}

@media (max-width: 900px) {
  /* Below the shell's own breakpoint the breakout has nothing to escape to,
     and a negative margin would push content under the viewport edge. */
  .blog-post__measure > .blog-cta,
  .blog-post__measure > .blog-figure {
    --tm-breakout: 100%;
  }
}
/* ══ END WIDTH EXPERIMENT ═════════════════════════════════════════════════ */