/* Blog pages only. Loaded after /styles.css; does not change any other page. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Listing page */
.post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; padding-bottom: 3rem; }
.post-card { display: flex; flex-direction: column; gap: 0.2rem; }
.post-card h2 a { text-decoration: none; color: var(--ink); }
.post-card h2 a:hover { color: var(--clay); }
.post-card p:not(.eyebrow) { color: var(--muted); }
.post-card .read-more { margin-top: auto; padding-top: 0.6rem; font-weight: 600; color: var(--forest); text-decoration: none; }
.post-card .read-more:hover { color: var(--clay); text-decoration: underline; }
.blog-foot { padding-bottom: 4rem; }

/* Single post */
.post { max-width: 46rem; padding: 3rem 0 4rem; }
.post-back a { color: var(--muted); text-decoration: none; font-size: 0.95rem; }
.post-back a:hover { color: var(--ink); }
.post-head { margin: 1.4rem 0 2rem; }
.post-head h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); margin-top: 0.4rem; }
.post-meta { color: var(--muted); margin-top: 0.8rem; }
.post-meta a { color: var(--forest); }
.post-body { font-size: 1.1rem; }
.post-body p, .post-body ul, .post-body ol { margin-bottom: 1.1rem; }
.post-body h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 2rem 0 0.7rem; }
.post-body ul, .post-body ol { padding-left: 1.3rem; }
.post-body li { margin-bottom: 0.35rem; }
.post-body a { color: var(--forest); }

/* Request care box + disclaimer */
.blog-cta { margin-top: 2.5rem; background: var(--cream); border: 1px solid var(--line); border-radius: 22px; padding: 1.6rem; }
.blog-cta p { color: var(--muted); margin: 0.4rem 0 1rem; }
.blog-disclaimer { margin-top: 1.2rem; font-size: 0.9rem; color: var(--muted); }

@media (max-width: 860px), (max-height: 500px) {
  .post-list { grid-template-columns: minmax(0, 1fr); }
  .post { padding-top: 2rem; }
}

/* Added for the admin-written blog */
.read-more-row { margin-top: auto; padding-top: 0.8rem; }
.preview-note { background: #fff6d6; border-radius: 12px; padding: 0.7rem 1rem; margin-bottom: 1rem; }