/* ============================================================
   blog.css — blog index cards + single-post prose.
   ============================================================ */

/* ---- Blog page hero (matches live: left text + teal/coral graphic) ---- */
.bl-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
  position: relative;
}
.bl-hero__text { display: flex; flex-direction: column; gap: 1.75rem; max-width: 44rem; }
.bl-hero__heading {
  font-size: clamp(2.4rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--navy);
  margin: 0;
}
.bl-hero__para { color: var(--body); font-size: 1.12rem; line-height: 1.7; margin: 0; }
.bl-hero__graphic {
  position: relative;
  min-height: 320px;
  align-self: stretch;
}
/* Pin the SVG's right edge to the VIEWPORT right edge so the teal circle bleeds
   off the screen at any width. The graphic cell's right edge sits at the
   container's right content edge; the distance from there to the viewport edge
   is the gutter PLUS any centering margin when the viewport exceeds max-width.
   right: calc(50% - 50vw) measured from the cell would overshoot, so instead we
   anchor to the cell and add both components explicitly. */
.bl-hero__graphic svg {
  position: absolute;
  top: 50%;
  /* cell-right -> viewport-right = gutter + max(0, (100vw - maxw)/2).
     As a negative right offset: min() picks the more-negative (further right)
     of the two regimes. Below max-width the 2nd term wins (-gutter); above it
     the 1st wins (-gutter - centering margin). */
  right: min(
    calc(-1 * var(--gutter) - (100vw - var(--maxw)) / 2),
    calc(-1 * var(--gutter))
  );
  transform: translateY(-50%);
  height: 557px;   /* 460 +10% +10% */
  width: auto;
  max-width: none;
  pointer-events: none;
}
@media (max-width: 860px) {
  .bl-hero { grid-template-columns: 1fr; }
  .bl-hero__graphic { display: none; }
}

/* ---- Blog index grid (4-col to match live) ---- */
.bl-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1rem;
}
@media (max-width: 1100px) { .bl-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .bl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .bl-grid { grid-template-columns: 1fr; } }
.bl-card[hidden] { display: none; }

/* ---- Load More ---- */
.bl-loadmore-wrap { text-align: center; margin: 2.5rem 0 1rem; }
.btn--loadmore { background: var(--teal); color: var(--navy-deep); padding: .7rem 2rem; border-radius: 8px; font-weight: 700; }
.btn--loadmore:hover { background: #23c4b0; text-decoration: none; }
.bl-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;                 /* fill the grid row -> all cards equal height */
}
.bl-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(36,69,84,.14); }
.bl-card__imglink { display: block; }
/* Fixed image band so every card's text starts at the same Y (no ragged tops) */
.bl-card__img { width: 100%; height: 180px; object-fit: cover; display: block; }
.bl-card__img--ph { background: linear-gradient(135deg, var(--navy), var(--teal)); }
.bl-card__body {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1 1 auto;               /* body grows so the button can pin to the bottom */
}
/* Reserve one row for category pills so titles start at the same Y in every card */
.bl-card__cats { display: flex; gap: .5rem; flex-wrap: nowrap; overflow: hidden; min-height: 1.5rem; align-items: center; }
.bl-card__cat { flex: 0 0 auto; font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 600; color: var(--teal-ink); background: rgba(41,222,199,.15); padding: .15rem .5rem; border-radius: 100px; white-space: nowrap; }
/* Reserve 2 lines for the title so 1-, 2- and 3-line titles keep the same rhythm */
.bl-card__title {
  font-size: 1.15rem; margin: 0; line-height: 1.35;
  min-height: calc(1.35em * 2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bl-card__title a { color: var(--ink); }
.bl-card__title a:hover { color: var(--teal-ink); text-decoration: none; }
/* Clamp blurb to a fixed 3 lines -> every card's blurb block is the same height.
   Smaller, tighter-set text than body copy elsewhere so noticeably more of
   the excerpt is actually visible before it clamps. */
.bl-card__blurb {
  font-size: .85rem; color: var(--body); margin: 0; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.5em * 3);
}
/* Plain text link, matching .hm-card__link elsewhere on the site (e.g. the
   homepage's "Explore Blueprint ->") — a button block here read as
   oversized/heavy relative to the rest of the card. */
.bl-card__more {
  align-self: flex-start;
  margin-top: auto;            /* pin to the bottom of every card */
  padding-top: .2rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--teal-ink);
}
.bl-card__more:hover { color: var(--coral); text-decoration: none; }

/* ---- Single post ---- */
.post { max-width: 760px; padding-block: clamp(2rem, 5vw, 3.5rem); }
.post__header { margin-bottom: 1.5rem; }
.post__meta { color: var(--muted); font-size: .9rem; margin: 0 0 .75rem; }
.post__title { margin: 0 0 .75rem; }
.post__cats { display: flex; gap: .5rem; flex-wrap: wrap; }
.post__cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; color: var(--teal-ink); }
.post__hero-img { width: 100%; border-radius: var(--radius); margin-bottom: 1.75rem; }
.post__footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.post__footer-linkedin { color: var(--teal-ink); }
.post__footer-linkedin:hover { color: var(--coral); }

/* ---- Prose (blog body) ---- */
.prose { font-size: 1.075rem; line-height: 1.75; color: var(--body); }
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin-top: 2rem; font-size: 1.6rem; }
.prose h3 { margin-top: 1.5rem; font-size: 1.3rem; }
.prose h4 { margin-top: 1.25rem; font-size: 1.1rem; }
.prose p { margin: 0 0 1.1rem; }
.prose ul, .prose ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.prose li { margin-bottom: .4rem; }
.prose a { color: var(--teal-ink); text-decoration: underline; }
.prose img { border-radius: var(--radius); margin: 1.5rem 0; }
.prose strong { color: var(--ink); }
.prose blockquote { border-left: 3px solid var(--teal); padding-left: 1rem; margin: 1.5rem 0; color: var(--muted); font-style: italic; }

/* ---- Training manual (long reference doc: TOC + chaptered sections) ---- */
.prose-page--manual .prose { max-width: 860px; }
.manual-toc {
  background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.75rem; margin: 0 0 2.5rem;
}
.manual-toc__label {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700;
  color: var(--teal-ink); margin: 0 0 .9rem;
}
.manual-toc__list {
  list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem;
}
.manual-toc__list li { margin-bottom: .55rem; break-inside: avoid; counter-increment: manual-toc; }
.manual-toc__list { counter-reset: manual-toc; }
.manual-toc__list li::before {
  content: counter(manual-toc) ". "; color: var(--teal-ink); font-weight: 700; font-variant-numeric: tabular-nums;
}
.manual-toc__list a { text-decoration: none; color: var(--ink); }
.manual-toc__list a:hover { color: var(--teal-ink); text-decoration: underline; }
@media (max-width: 640px) { .manual-toc__list { columns: 1; } }

.prose-page--manual h2 {
  margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line);
  font-size: 1.85rem; color: var(--navy-deep); scroll-margin-top: 90px;
}
.prose-page--manual .prose > h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.prose-page--manual h3 { scroll-margin-top: 90px; }
.prose-page--manual .prose img {
  display: block; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); margin: 1.5rem 0;
}
.manual-back-top {
  display: inline-block; font-size: .85rem; font-weight: 600; margin: .5rem 0 1.5rem;
}

.manual-callout {
  border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.25rem 0;
  border-left: 3px solid var(--teal);
}
.manual-callout p { margin: 0; }
.manual-callout__label {
  display: inline-block; font-weight: 700; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; margin-right: .5em; color: var(--teal-ink);
}
.manual-callout--try { background: var(--mist); border-left-color: var(--teal); }
.manual-callout--try .manual-callout__label { color: var(--teal-ink); }
.manual-callout--note, .manual-callout--tip {
  background: #fdf6ea; border-left-color: #c98a1c;
}
.manual-callout--note .manual-callout__label, .manual-callout--tip .manual-callout__label {
  color: #a06a12;
}