/* Public blog pages (/blog and /blog/<slug>). */
.blog { --b-text:#0f172a; --b-muted:#64748b; --b-line:#e5e7eb; --b-brand:#0f766e; --b-soft:#f0fdfa;
  max-width:1120px; margin:0 auto; padding:24px 16px 48px; color:var(--b-text); overflow-x:hidden; }
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* list */
.blog-hero { text-align:center; margin:8px auto 32px; max-width:760px; }
.blog-hero__eyebrow { display:inline-block; padding:4px 12px; border-radius:999px; background:var(--b-soft); color:var(--b-brand);
  font-weight:700; font-size:13px; margin-bottom:12px; }
.blog-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; }
.blog-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--b-line); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.05); min-width:0; }
.blog-card__media { display:block; aspect-ratio:3 / 2; background:#f1f5f9; }
.blog-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-card__body { display:flex; flex-direction:column; gap:8px; padding:16px 20px 20px; flex:1; }
.blog-card__meta { margin:0; font-size:13px; color:var(--b-muted); }
.blog-card__title { margin:0; font-size:19px; line-height:1.3; font-weight:700; }
.blog-card__title a { color:var(--b-text); text-decoration:none; }
.blog-card__title a:hover { color:var(--b-brand); }
.blog-card__excerpt { margin:0; color:#475569; font-size:15px; line-height:1.55; }
.blog-card__more { margin-top:auto; color:var(--b-brand); font-weight:700; text-decoration:none; }
.blog-pager { display:flex; justify-content:center; align-items:center; gap:16px; margin:32px 0 0; flex-wrap:wrap; }
.blog-pager .btn { min-height:44px; display:inline-flex; align-items:center; }
.blog-empty { text-align:center; padding:48px 16px; border:1px dashed var(--b-line); border-radius:14px; background:#fff; }
.blog-bottom { margin-top:48px; padding:32px 24px; border-radius:16px; background:linear-gradient(135deg,#0f766e,#0e7490); color:#fff; text-align:center; }
.blog-bottom h2 { color:#fff; margin:8px 0; }
.blog-bottom p { color:rgba(255,255,255,.92); margin:0 auto; max-width:640px; }
.blog-bottom__badge { display:inline-block; padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.18); font-size:13px; font-weight:700; }
.blog-bottom__actions { display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:16px; }
.blog-bottom .btn-primary { background:#fff; color:#0f766e; border-color:#fff; }
.blog-bottom__link { color:#fff; font-weight:700; }

/* post */
.blog-article-wrap { max-width:760px; }
.blog-article { max-width:700px; margin:0 auto; }
.blog-crumb a { color:var(--b-brand); font-weight:600; text-decoration:none; }
.blog-article__head { margin:16px 0 24px; }
.blog-article__title { font-size:clamp(1.75rem, 4.5vw, 2.5rem); line-height:1.15; font-weight:800; margin:0 0 12px; letter-spacing:-.02em; }
.blog-article__meta { color:var(--b-muted); font-size:15px; line-height:1.6; margin:0 0 16px; }
.blog-article__cover { margin:0 0 24px; }
.blog-article__cover img { width:100%; height:auto; border-radius:14px; display:block; }
.blog-article__body { font-size:18px; line-height:1.75; color:#1e293b; overflow-wrap:anywhere; }
.blog-article__body h2 { font-size:1.45em; line-height:1.3; margin:1.6em 0 .5em; color:#0b5f59; }
.blog-article__body h3 { font-size:1.2em; margin:1.4em 0 .4em; }
.blog-article__body p, .blog-article__body ul, .blog-article__body ol, .blog-article__body blockquote { margin:0 0 1em; }
.blog-article__body ul, .blog-article__body ol { padding-left:1.4em; }
.blog-article__body li { margin:.3em 0; }
.blog-article__body a { color:var(--b-brand); text-decoration:underline; text-underline-offset:2px; }
.blog-article__body img { max-width:100%; height:auto; border-radius:12px; display:block; margin:8px 0; }
.blog-article__body blockquote { border-left:4px solid var(--b-line); padding:4px 0 4px 16px; color:#475569; }
/* Warning callout: consecutive blocks marked in the editor read as one bordered box. */
.blog-article__body .ql-callout-warning { background:#fef2f2; border-left:4px solid #dc2626; margin:0; padding:6px 16px; }
.blog-article__body h2.ql-callout-warning, .blog-article__body h3.ql-callout-warning { margin-top:1.6em; padding-top:14px; border-radius:0 10px 0 0; color:#991b1b; }
.blog-article__body ul:has(> li.ql-callout-warning), .blog-article__body ol:has(> li.ql-callout-warning) {
  background:#fef2f2; border-left:4px solid #dc2626; margin:0 0 1em; padding:6px 16px 14px 2.4em; border-radius:0 0 10px 0; }
.blog-article__body li.ql-callout-warning { background:transparent; border-left:0; padding:0; }
.blog-preview-banner { position:sticky; top:0; z-index:50; background:#fef3c7; color:#92400e; text-align:center; font-weight:700; padding:10px 16px; }

/* share */
.blog-share { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.blog-share__label { font-size:14px; font-weight:700; color:var(--b-muted); margin-right:4px; }
.blog-share__btn { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 12px; border-radius:10px;
  border:1px solid var(--b-line); background:#fff; color:var(--b-text); font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; }
.blog-share__btn:hover { border-color:var(--b-brand); color:var(--b-brand); }
.blog-share__btn--wa { background:#25d366; border-color:#25d366; color:#fff; }
.blog-share__btn--wa:hover { color:#fff; background:#1ebe5b; }
.blog-share--bottom { margin:32px 0 0; padding-top:24px; border-top:1px solid var(--b-line); }

/* call to action (reuses the Task 1 offer headline and badge) */
.blog-cta { margin:32px 0 0; padding:24px; border-radius:16px; background:var(--b-soft); border:1px solid #99f6e4; }
.blog-cta__title { margin:0; font-size:clamp(1.1rem, 5vw, 1.6rem); font-weight:800; white-space:nowrap; color:var(--b-text); }
.blog-cta .btn { margin-top:12px; min-height:44px; display:inline-flex; align-items:center; }

/* comments */
.blog-comments, .blog-related { max-width:700px; margin:48px auto 0; }
.blog-related { max-width:none; }
.blog-grid--related { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.blog-comment { padding:12px 0; border-bottom:1px solid var(--b-line); }
.blog-comment__who { margin:0 0 4px; font-size:14px; color:var(--b-muted); }
.blog-comment__text { margin:0; white-space:pre-line; overflow-wrap:anywhere; }
.blog-comment-form { display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.blog-comment-form label { display:flex; flex-direction:column; gap:6px; font-weight:600; }
.blog-comment-form .btn { align-self:flex-start; min-height:44px; }
.blog-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.blog-note { padding:12px 16px; border-radius:10px; background:#f8fafc; border:1px solid var(--b-line); color:#334155; }
.blog-note--ok { background:#f0fdf4; border-color:#bbf7d0; color:#166534; }
.blog-note--err { background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.blog-muted { color:var(--b-muted); font-size:14px; margin:0; }

@media (max-width: 1023.98px) {
  .blog-grid, .blog-grid--related { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .blog { padding:16px 16px 40px; }
  .blog-grid, .blog-grid--related { grid-template-columns:1fr; gap:16px; }
  .blog-article__body { font-size:17px; }
  /* Mobile: the share block sits at the end of the post; the top bar is desktop only. */
  .blog-share--top { display:none; }
  .blog-share__btn span { font-size:13px; }
  .blog-cta { padding:16px; }
}