/* Blog post: single-column long-form article layout. Reuses the same
   fixed-navbar shell math as blog.css/docs.css but the content is prose,
   not a grid or a two-column label/body layout. */
.post-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 85px;
  min-height: 100vh;
}

.post-main {
  padding: 56px clamp(1.5rem, 5vw, 4rem) 140px;
  max-width: 1040px;
  margin: 0 auto;
  /* Every .post-figure in the article increments this, so each image gets
     a sequential "Fig. N:" label in document order without hand-numbering
     each one. Same pattern as .doc-main's fignum counter on the doc pages. */
  counter-reset: fignum;
}

.post-header {
  margin-bottom: 32px;
}

.post-header .post-kicker {
  display: block;
  color: #777;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.post-header h1 {
  font-size: clamp(2.1rem, 4.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.15;
  margin: 0 0 18px;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: #777;
  font-size: 14.5px;
  margin-bottom: 36px;
}

.post-meta span:not(:last-child)::after {
  content: '·';
  margin-left: 14px;
  color: #444;
}

.post-dek {
  color: #999;
  font-size: 19px;
  line-height: 1.6;
  margin: 0;
}

.post-body h2 {
  font-size: clamp(1.5rem, 2.8vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 64px 0 20px;
}

.post-body h2:first-child {
  margin-top: 0;
}

.post-body h3 {
  font-size: 1.25rem;
  font-weight: 650;
  color: #fff;
  margin: 36px 0 14px;
}

.post-body p {
  color: #bbb;
  font-size: 18px;
  line-height: 1.85;
  margin: 0 0 22px;
}

.post-body strong {
  color: #fff;
  font-weight: 650;
}

.post-body ul,
.post-body ol {
  color: #bbb;
  font-size: 18px;
  line-height: 1.85;
  margin: 0 0 24px;
  padding-left: 24px;
}

.post-body li {
  margin-bottom: 8px;
}

.post-body li::marker {
  color: #555;
}

.post-body a:not(.cta) {
  color: #6cb4ff;
  text-decoration: underline;
  text-decoration-color: #444;
  text-underline-offset: 2px;
}

.post-body a:not(.cta):hover {
  color: #8fc6ff;
  text-decoration-color: #8fc6ff;
}

.post-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 15px;
  color: #fff;
}

.post-body pre {
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  padding: 16px 18px;
  overflow-x: auto;
  margin: 0 0 24px;
}

.post-body pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 14.5px;
  color: #eee;
  line-height: 1.7;
}

.post-body blockquote {
  border-left: 3px solid #333;
  margin: 0 0 24px;
  padding: 4px 0 4px 18px;
  color: #999;
  font-style: italic;
  font-size: 17px;
}

/* Comparison table: a real table on wide screens, with columns sized so
   every cell wraps its text instead of forcing a horizontal scrollbar.
   Below 700px it drops the grid entirely and stacks each row into its own
   labeled card, so a five-column comparison never needs to scroll sideways.
   The wrap breaks out wider than the prose column (up to 1320px, centered
   on the article itself) since six columns of comparison text need more
   room to breathe than a paragraph measure allows. */
.post-table-wrap {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1320px, 94vw);
  margin: 16px 0 36px;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
}

table.post-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 16px;
  background: #0a0a0a;
}

table.post-table th,
table.post-table td {
  text-align: left;
  padding: 20px 24px;
  border-bottom: 1px solid #1a1a1a;
  vertical-align: top;
  word-wrap: break-word;
  line-height: 1.55;
}

table.post-table tr:last-child td {
  border-bottom: none;
}

table.post-table th {
  color: #777;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-bottom: 1px solid #262626;
  padding-bottom: 16px;
}

table.post-table th .no-case {
  text-transform: none;
}

table.post-table td.metric-name {
  font-weight: 650;
  color: #fff;
}

table.post-table td.win {
  color: #7fd99a;
}

@media (max-width: 700px) {
  .post-table-wrap {
    border: none;
    border-radius: 0;
  }

  table.post-table thead {
    display: none;
  }

  table.post-table,
  table.post-table tbody,
  table.post-table tr,
  table.post-table td {
    display: block;
    width: 100%;
  }

  table.post-table tr {
    border: 1px solid #1a1a1a;
    border-radius: 10px;
    padding: 4px 16px;
    margin-bottom: 16px;
  }

  table.post-table td {
    border-bottom: 1px solid #171717;
    padding: 10px 0;
  }

  table.post-table tr td:last-child {
    border-bottom: none;
  }

  table.post-table td.metric-name {
    padding-top: 14px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #777;
  }

  table.post-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: #777;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
  }

  table.post-table td[data-label="EchidraOSS"]::before {
    text-transform: none;
  }
}

/* Inline image placeholder used where a future diagram or screenshot goes */
.post-figure {
  counter-increment: fignum;
  margin: 8px 0 32px;
}

.post-figure-frame {
  aspect-ratio: 16 / 9;
  border: 1px solid #1a1a1a;
  border-radius: 12px;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
}

.post-figure-frame svg {
  width: 40px;
  height: 40px;
  opacity: 0.5;
}

.post-figure img {
  display: block;
  width: 100%;
  border: 1px solid #1a1a1a;
  border-radius: 12px;
  background: #0a0a0a;
}

.post-figure figcaption {
  margin-top: 12px;
  color: #999;
  font-size: 14.5px;
  line-height: 1.6;
  text-align: center;
}

.post-figure figcaption::before {
  content: "Fig. " counter(fignum) ": ";
  color: #fff;
  font-weight: 650;
}

.post-methodology-note {
  font-size: 13.5px;
  color: #777;
  line-height: 1.6;
  margin: -4px 0 20px;
}

.post-callout {
  display: flex;
  gap: 10px;
  border: 1px solid #1a1a1a;
  border-left: 3px solid #666;
  background: #0a0a0a;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 8px 0 28px;
  font-size: 16px;
  color: #999;
}

.post-cta {
  margin-top: 52px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  border-radius: 12px;
  text-align: center;
}

.post-cta h3 {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.post-cta p {
  color: #999;
  font-size: 16px;
  margin: 0 0 20px;
}

.post-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .post-shell { padding-top: 70px; }
  .post-main { padding: 32px 20px 100px; }
}

/* The site-wide .cta button forces white-space: nowrap, which is fine at
   normal widths but overflows its own background once two buttons share a
   narrow phone screen. Stacking them full-width below 480px keeps the
   label on one line without the box clipping it. */
@media (max-width: 480px) {
  .post-cta-buttons {
    flex-direction: column;
  }

  .post-cta-buttons .cta {
    width: 100%;
  }
}