/* Einthoven blog — layered on top of css/styles.css.
 *
 * These pages are plain static HTML at real URLs, deliberately. The app is a
 * hash-routed SPA and a crawler resolves every #/route back to one page, so
 * blog posts living inside it would never be indexed. Real paths are the whole
 * point of the exercise.
 */

.post-wrap { max-width: 46rem; margin: 0 auto; padding: 0 1.1rem; }

.post-header { padding: 2.6rem 0 1.4rem; }
.post-kicker {
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); font-weight: 650; margin: 0 0 .7rem;
}
.post-header h1 { font-size: clamp(1.9rem, 4.4vw, 2.7rem); line-height: 1.12; margin: 0 0 .8rem; }
.post-standfirst { font-size: 1.12rem; line-height: 1.62; color: var(--text-dim); margin: 0 0 1.2rem; }

.post-meta {
  display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center;
  font-size: .84rem; color: var(--text-faint);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: .75rem 0; margin-bottom: 2rem;
}

.post-body { font-size: 1.04rem; line-height: 1.72; }
.post-body h2 { font-size: 1.42rem; margin: 2.4rem 0 .8rem; line-height: 1.25; }
.post-body h3 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; }
.post-body p { margin: 0 0 1.1rem; }
.post-body ul, .post-body ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.post-body li { margin-bottom: .5rem; }
.post-body a { color: var(--accent); }
.post-body strong { color: var(--text); }

.post-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: .93rem; }
.post-body th, .post-body td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border); }
.post-body th { color: var(--text-dim); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
.table-scroll { overflow-x: auto; }

/* Key clinical point — the thing a learner should remember if they skim. */
.keypoint {
  border-left: 3px solid var(--accent); background: rgba(45, 212, 167, .07);
  padding: .95rem 1.1rem; border-radius: 0 10px 10px 0; margin: 0 0 1.4rem;
}
.keypoint p:last-child { margin-bottom: 0; }

/* Inline call to action. Kept visually distinct from body copy so a reader can
 * tell teaching from selling at a glance — blurring the two is how medical
 * content loses trust. */
.cta {
  border: 1px solid var(--border); border-radius: 14px;
  padding: 1.15rem 1.25rem; margin: 1.9rem 0;
  background: var(--panel-2);
}
.cta-label {
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 .5rem; font-weight: 650;
}
.cta h3 { margin: 0 0 .45rem; font-size: 1.06rem; }
.cta p { margin: 0 0 .85rem; font-size: .95rem; color: var(--text-dim); }
.cta .price { color: var(--accent); font-weight: 650; }

.post-footer-note {
  margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--border);
  font-size: .86rem; color: var(--text-faint);
}

/* Index listing */
.post-list { display: grid; gap: 1rem; margin: 1.6rem 0 0; }
.post-card {
  display: block; padding: 1.25rem 1.35rem; border: 1px solid var(--border);
  border-radius: 14px; background: var(--panel); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.post-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.post-card h2 { margin: .3rem 0 .45rem; font-size: 1.2rem; color: var(--text); }
.post-card p { margin: 0; color: var(--text-dim); font-size: .95rem; }

.blog-nav {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  padding: 1rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.blog-nav a { text-decoration: none; }
.blog-brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; color: var(--text); }

/* References — real citations, not decoration. Every entry links to the
 * journal record so a reader can check the claim against the source. */
.references { margin: 2.6rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--border); }
.references h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
.references ol { padding-left: 1.25rem; margin: 0; }
.references li { margin-bottom: .7rem; font-size: .88rem; line-height: 1.55; color: var(--text-dim); }
.references a { color: var(--accent); }
.references .src { color: var(--text-faint); }