/* ============================================================================
   ZURA — Blog / patient resources
   Builds on the design tokens in styles.css. Load AFTER styles.css.
   Mobile-first: base styles are the phone layout, desktop layered on.
   ========================================================================== */

/* ------------------------------------------------------------ BLOG HERO -- */
.blog-hero { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 48px); }
.blog-hero h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  max-width: 18ch;
  margin-top: 10px;
}
.blog-hero .lede {
  margin-top: 14px;
  font-size: clamp(15.5px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--ink-600);
  max-width: 58ch;
}

/* ----------------------------------------------------------------- TAGS -- */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--blue-700);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  white-space: nowrap;
}
.tag::before {
  content: '#';
  font-weight: 700;
  color: var(--blue-500);
}

/* ----------------------------------------------------------- POST CARDS -- */
.post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-bottom: var(--section-y);
}
.post-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--sh-sm);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-fast) ease;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--sh-lg);
}
.post-card h2 { font-size: clamp(19px, 2.2vw, 23px); line-height: 1.22; }
.post-card h2 a { color: var(--ink-900); }
.post-card h2 a::after { content: ''; position: absolute; inset: 0; } /* whole card clickable */
.post-card h2 a:hover { color: var(--blue-700); }
.post-card p { color: var(--ink-600); font-size: 15px; line-height: 1.6; }
.post-card .post-meta { margin-top: auto; }
.post-card .tag-row { position: relative; z-index: 1; } /* tags stay clickable above overlay */

.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-500);
}
.post-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-400); }

/* -------------------------------------------------------------- ARTICLE -- */
.post { padding-block: clamp(36px, 5vw, 64px) var(--section-y); }
.post-shell { max-width: 760px; margin-inline: auto; }

.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--ink-500); font-weight: 500;
}
.breadcrumbs a { color: var(--ink-500); }
.breadcrumbs a:hover { color: var(--blue-700); }
.breadcrumbs .sep { color: var(--line-strong); }

.post-header { margin-top: 22px; }
.post-header h1 { font-size: clamp(28px, 4.2vw, 42px); letter-spacing: -.024em; }
.post-header .post-meta { margin-top: 16px; }
.post-header .tag-row { margin-top: 16px; }

/* Article body typography */
.prose { margin-top: clamp(26px, 4vw, 40px); }
.prose > * + * { margin-top: 1.15em; }
.prose p { font-size: clamp(16px, 1.5vw, 17.5px); line-height: 1.72; color: var(--ink-700); }
.prose h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  margin-top: 1.9em;
  padding-top: .4em;
}
.prose h3 { font-size: clamp(17.5px, 1.9vw, 20px); margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.25em; display: grid; gap: .55em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { font-size: clamp(15.5px, 1.5vw, 17px); line-height: 1.65; color: var(--ink-700); }
.prose li::marker { color: var(--blue-500); font-weight: 700; }
.prose strong { color: var(--ink-900); }
.prose a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-100); }
.prose a:hover { text-decoration-color: var(--blue-500); }

/* Callout — used for key takeaways */
.callout {
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-left: 3px solid var(--blue-500);
  border-radius: var(--r-md);
  padding: 16px 18px;
}
.callout p { font-size: 15.5px; color: var(--ink-700); }
.callout p strong { color: var(--blue-700); }

/* Disclaimer strip */
.post-disclaimer {
  margin-top: clamp(30px, 4vw, 44px);
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.6; color: var(--ink-500);
  background: var(--surface-2);
}

/* -------------------------------------------------------- KEEP READING -- */
.keep-reading { border-top: 1px solid var(--line); background: var(--surface-2); }
.keep-reading .shell { padding-block: clamp(36px, 5vw, 56px); }
.keep-reading h2 { font-size: clamp(20px, 2.4vw, 25px); margin-bottom: 20px; }
.keep-reading .post-grid { padding-bottom: 0; grid-template-columns: 1fr; }

/* -------------------------------------------------------------- DESKTOP -- */
@media (min-width: 720px) {
  .post-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .keep-reading .post-grid { grid-template-columns: repeat(2, 1fr); }
}