/* ============================================================
 * /mbs-updates  —  page-specific styles
 *
 * Shared between the archive index and every per-update post.
 * Loads alongside /brand.css.
 *
 * Page chrome (.product-hero, .crumb, .data-card, .section-heading,
 * site header / footer, type utilities, eyebrows) is all in brand.css.
 * This file holds ONLY content unique to MBS-update surfaces:
 *
 *   - MBS summary card (.mbs-card stat rows + foot)
 *   - Archive list (index page)
 *   - "Why we publish" section (index page)
 *   - Highlight cards (post pages — §2)
 *   - Breakdown cards (post pages — §3)
 *   - Post navigation (previous / index)
 *   - MBS CTA
 * ============================================================ */


/* ============================================================ */
/* MBS SUMMARY CARD  — extends .data-card on both index + post   */
/* ============================================================ */
.mbs-card .stat-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: var(--space-16);
  align-items: baseline;
  padding: var(--space-8) 0;
  border-bottom: 1px dotted var(--color-stone-20);
}
.mbs-card .stat-row:last-of-type { border-bottom: none; }
.mbs-card .stat-count {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--color-midnight);
  text-align: right;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
.mbs-card .stat-label {
  /* size via .body-s (14) on the element */
  color: var(--color-stone-60);
  letter-spacing: 0;
}
.mbs-card .stat-row.highlight .stat-count { color: var(--color-royal); }
.mbs-card .stat-row.highlight .stat-label { color: var(--color-midnight); font-weight: 500; }

.mbs-card .mbs-card-foot {
  margin-top: var(--space-8);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-stone-20);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.mbs-card .card-foot-label {
  /* size via .label-m (12) on the element */
  color: var(--color-stone-60);
}
.mbs-card .card-foot-value {
  /* size via .label-m (12) on the element; colour wins over .label-m by specificity */
  color: var(--color-midnight);
  font-weight: 500;
}


/* ============================================================ */
/* ARCHIVE LIST  (index page)                                     */
/* ============================================================ */
.archive-list {
  list-style: none;
  display: grid;
  gap: 0;
  max-width: 960px;
}
.archive-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-24);
  padding: var(--space-24) 0;
  border-bottom: 1px solid var(--color-stone-20);
}
.archive-row:first-child { border-top: 1px solid var(--color-stone-20); }
.archive-row .row-date {
  display: grid; gap: 4px;
  min-width: 0;
}
.archive-row .row-date time {
  /* size via .title-s (20) on the element */
  font-weight: 600;
  color: var(--color-midnight);
  line-height: 1.25;
}
.archive-row .row-summary {
  /* size via .body-s (14) on the element */
  color: var(--color-stone-60);
}
.archive-row .row-link { white-space: nowrap; }

.archive-row-pending .row-date time { color: var(--color-stone-60); }
.archive-row-pending .row-summary {
  font-family: var(--font-mono);
  font-size: var(--type-label-s);
  color: var(--color-stone-40);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ============================================================ */
/* WHY WE PUBLISH + FROM THE API  (index page)                    */
/* ============================================================ */
.mbs-why,
.mbs-api {
  text-align: center;
}
.mbs-why .label-s,
.mbs-api .label-s {
  display: block;
  color: var(--color-navy);
  margin-bottom: var(--space-12);
}
.mbs-why h2,
.mbs-api h2 { margin-bottom: var(--space-24); }
.mbs-why .lede,
.mbs-api .lede {
  /* size via .body-l (18) on the element; relaxed line-height wins by specificity */
  line-height: var(--lh-body-relaxed);
  margin: 0 auto var(--space-32) auto;
  max-width: 60ch;
}
.mbs-why .action,
.mbs-api .action {
  display: flex;
  justify-content: center;
}


/* ============================================================ */
/* POST HERO  — trim the top, keep the title centred on the card  */
/* ============================================================ */
/* The shared .product-hero leads with a generous top band sized   */
/* for a homepage-style hero; on posts that's too much above the    */
/* small breadcrumb. Trim the top to the standard section rhythm,   */
/* and tighten the crumb→content row-gap so the hero sits up close  */
/* under the crumb instead of being pushed down. align-items stays  */
/* center (inherited from .product-hero) so the eyebrow/H1/subtitle */
/* block is vertically centred against the taller summary card.     */
/* Scoped to .post — index hero unchanged.                         */
.product-hero.post {
  padding-block-start: var(--space-section-standard);
}
@media (min-width: 1024px) {
  .product-hero.post .container {
    row-gap: var(--space-32);
  }
}


/* ============================================================ */
/* POST HIGHLIGHTS  (post §2)                                     */
/* ============================================================ */
.highlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}
@media (min-width: 768px) {
  .highlight-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-32);
  }
  .highlight-grid > .highlight-card:first-child {
    grid-column: 1 / -1;
  }
}
.highlight-card {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  padding: var(--space-32);
}
.highlight-card .highlight-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-royal);
  padding: var(--space-4) var(--space-8);
  background: color-mix(in srgb, var(--color-royal) 8%, transparent);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-16);
}
.highlight-card h3 {
  color: var(--color-midnight);
  margin-bottom: var(--space-16);
}
.highlight-card .highlight-body {
  /* size via .body-s (14) on the element; relaxed line-height wins by specificity */
  line-height: var(--lh-body-relaxed);
  color: var(--color-stone-60);
  margin-bottom: var(--space-16);
}
.highlight-card .highlight-body em {
  color: var(--color-midnight);
  font-style: italic;
}
.highlight-card .highlight-detail {
  /* size via .body-s (14) on the element */
  line-height: var(--lh-body);
  color: var(--color-stone-60);
}
.highlight-card .highlight-table {
  width: 100%;
  border-collapse: collapse;
  /* size via .body-s (14) on the element */
  margin-top: var(--space-16);
}
.highlight-card .highlight-table th,
.highlight-card .highlight-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-12) var(--space-16) var(--space-12) 0;
  border-bottom: 1px solid var(--color-stone-20);
}
.highlight-card .highlight-table tr:last-child th,
.highlight-card .highlight-table tr:last-child td { border-bottom: none; }
.highlight-card .highlight-table th {
  font-weight: 600;
  color: var(--color-midnight);
  width: 30%;
}
.highlight-card .highlight-table td {
  color: var(--color-stone-60);
}
.highlight-card .highlight-table th.col {
  color: var(--color-navy);
  font-family: var(--font-mono);
  font-size: var(--type-label-s);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ============================================================ */
/* FULL BREAKDOWN  (post §3)                                      */
/* ============================================================ */
.breakdown-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
}
@media (min-width: 768px) {
  .breakdown-list { grid-template-columns: repeat(2, 1fr); }
}
.breakdown-card {
  background: var(--color-paper);
  border: 1px solid var(--color-stone-20);
  border-radius: var(--radius-default);
  padding: var(--space-24) var(--space-32);
}
.breakdown-card header {
  display: flex; align-items: baseline; gap: var(--space-16);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-stone-20);
  margin-bottom: var(--space-16);
}
.breakdown-card .breakdown-count {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 600;
  color: var(--color-midnight);
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}
.breakdown-card h3 {
  /* size via .body-m (16) on the element */
  color: var(--color-midnight);
  line-height: 1.3;
}
.breakdown-card .breakdown-items {
  /* size via .body-s (14) on the element */
  line-height: 1.7;
  color: var(--color-stone-60);
}
.breakdown-card .breakdown-items code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-stone-60);
  background: transparent;
  letter-spacing: 0;
  word-break: break-word;
}
.breakdown-card details summary {
  list-style: none;
  cursor: pointer;
  /* size via .body-s (14) on the element */
  font-weight: 500;
  color: var(--color-royal);
  padding: var(--space-8) 0;
  position: relative;
  padding-right: var(--space-32);
  transition: color var(--duration-instant) var(--ease-standard);
}
.breakdown-card details summary::-webkit-details-marker { display: none; }
.breakdown-card details summary::after {
  content: "+";
  position: absolute;
  right: 0; top: var(--space-4);
  font-size: var(--type-title-s);
  font-weight: 300;
  line-height: 1;
  color: var(--color-royal);
}
.breakdown-card details[open] summary::after { content: "−"; }
.breakdown-card details summary:hover { color: var(--color-navy); }
.breakdown-card details .breakdown-items { margin-top: var(--space-12); }


/* ============================================================ */
/* POST NAVIGATION  (previous / index)                            */
/* ============================================================ */
.post-nav .container {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-24);
  padding-top: var(--space-32);
  padding-bottom: var(--space-32);
  border-top: 1px solid var(--color-stone-20);
  border-bottom: 1px solid var(--color-stone-20);
}
.post-nav-prev,
.post-nav-next {
  display: grid; gap: 4px;
  text-decoration: none;
  min-width: 0;
}
.post-nav-next { text-align: right; justify-items: end; }
.post-nav-prev .dir,
.post-nav-next .dir {
  font-family: var(--font-mono);
  font-size: var(--type-label-s);
  color: var(--color-stone-60);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* Directional arrows — same glyph + motion as the shared .link-arrow, kept in
   the eyebrow's size/colour. dir-back / dir-fwd avoid the "All updates" slot. */
.post-nav .dir-back,
.post-nav .dir-fwd { display: inline-flex; align-items: center; gap: 6px; }
.post-nav .dir-back::before,
.post-nav .dir-fwd::after {
  font-family: var(--font-sans);
  transition: transform var(--duration-instant) var(--ease-standard);
}
.post-nav .dir-back::before { content: "←"; }
.post-nav .dir-fwd::after { content: "→"; }
.post-nav-prev:hover .dir-back::before { transform: translateX(-2px); }
.post-nav-next:hover .dir-fwd::after { transform: translateX(2px); }
.post-nav-prev .lbl,
.post-nav-next .lbl {
  /* size via .body-m (16) on the element */
  font-weight: 600;
  color: var(--color-midnight);
  transition: color var(--duration-instant) var(--ease-standard);
}
.post-nav-prev:hover .lbl,
.post-nav-next:hover .lbl { color: var(--color-royal); }
.post-nav-index {
  /* size + sans via .body-s (14) on the element */
  font-weight: 500;
  color: var(--color-royal);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duration-instant) var(--ease-standard);
}
.post-nav-index:hover { color: var(--color-navy); }


/* ============================================================ */
/* POST FAQ  (post §4)                                            */
/* ============================================================ */
.faq-list {
  display: grid;
  gap: var(--space-24);
  max-width: 760px;
}
.faq-item {
  padding-bottom: var(--space-24);
  border-bottom: 1px solid var(--color-stone-20);
}
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-item h3 {
  /* size via .body-l (18) on the element */
  color: var(--color-midnight);
  margin-bottom: var(--space-8);
  line-height: 1.35;
}
.faq-item p {
  /* size via .body-s (14) on the element; relaxed line-height wins by specificity */
  line-height: var(--lh-body-relaxed);
  color: var(--color-stone-60);
}
.faq-item p code {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--color-stone-60);
}


/* ============================================================ */
/* MBS CTA                                                        */
/* ============================================================ */
.mbs-cta {
  text-align: center;
}
.mbs-cta h2 { margin-bottom: var(--space-16); }