/* Blog */
.blog-wrap { max-width: 1240px; margin: 0 auto; padding: 0 1.5rem; }
.blog-wrap.narrow { max-width: 780px; }
.blog-hero { padding: 3.5rem 0 2rem; text-align: center;
  background: radial-gradient(800px 320px at 50% -20%, rgba(90, 150, 143, .25), transparent 70%), #f5faf9; }
.blog-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c-brand-2, #2c6b64);
  background: #fff; border: 1px solid var(--c-line, #cfe3df); padding: .35rem .9rem; border-radius: 99px; }
.blog-hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.12; font-weight: 700; margin: 1rem auto .8rem; max-width: 18ch; color: #0f2a27; }
.blog-hero p { color: #3c5551; max-width: 56ch; margin: 0 auto 1.5rem; font-size: 1.05rem; line-height: 1.6; }
.blog-search { display: flex; max-width: 460px; margin: 0 auto 1.4rem; background: #fff; border-radius: 99px; border: 1px solid var(--c-line, #cfe3df); box-shadow: var(--shadow-md); padding: .3rem; }
.blog-search input { flex: 1; border: 0; background: none; padding: .55rem 1rem; font: inherit; outline: 0; min-width: 0; }
.blog-search button { border: 0; border-radius: 99px; padding: .55rem 1.3rem; font-weight: 600; color: #fff; cursor: pointer; background: linear-gradient(135deg, #5a968f, #2c6b64); }
.blog-cats { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.blog-cats a { text-decoration: none; padding: .4rem 1rem; border-radius: 99px; background: #fff; border: 1px solid var(--c-line, #cfe3df); color: #2c5550; font-weight: 600; font-size: .9rem; transition: all .2s; }
.blog-cats a small { opacity: .6; margin-left: .2rem; }
.blog-cats a:hover { border-color: #5a968f; transform: translateY(-1px); }
.blog-cats a.on { background: linear-gradient(135deg, #5a968f, #2c6b64); color: #fff; border-color: transparent; }
.blog-list { padding: 1.5rem 0 4.5rem; }
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
.blog-card { background: #fff; border: 1px solid var(--c-line, #d6e6e3); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.blog-card .thumb { display: block; aspect-ratio: 16 / 10; background: linear-gradient(135deg, #e4efec, #f5faf9); overflow: hidden; }
.blog-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.blog-card:hover .thumb img { transform: scale(1.06); }
.blog-card .ph { display: grid; place-items: center; height: 100%; font-size: 2.4rem; color: #5a968f; opacity: .7; }
.blog-card .body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.blog-card .meta { font-size: .8rem; color: #5f7773; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.chip { display: inline-block; background: #e4efec; color: #2c6b64; font-weight: 700; font-size: .72rem; letter-spacing: .04em; padding: .2rem .65rem; border-radius: 99px; text-decoration: none; }
.blog-card h2, .blog-card h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 700; margin: 0; }
.blog-card h2 a, .blog-card h3 a { color: #0f2a27; text-decoration: none; }
.blog-card h2 a:hover, .blog-card h3 a:hover { color: #2c6b64; }
.blog-card p { color: #435d59; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card .more { margin-top: auto; font-weight: 700; color: #2c6b64; text-decoration: none; display: inline-flex; gap: .4rem; align-items: center; }
.blog-card .more i { transition: transform .25s; }
.blog-card:hover .more i { transform: translateX(4px); }
.blog-card.feature { grid-column: 1 / -1; flex-direction: row; }
.blog-card.feature .thumb { flex: 1.2; aspect-ratio: auto; min-height: 320px; }
.blog-card.feature .body { flex: 1; justify-content: center; padding: 2.2rem; }
.blog-card.feature h2 { font-size: 1.9rem; }
.blog-empty { text-align: center; padding: 4rem 1rem; color: #435d59; }
.blog-pager { display: flex; justify-content: center; gap: 1.4rem; align-items: center; margin-top: 2.5rem; color: #5f7773; }
.blog-pager a { text-decoration: none; font-weight: 700; color: #fff; padding: .55rem 1.2rem; border-radius: 99px; background: linear-gradient(135deg, #5a968f, #2c6b64); }

/* article */
.post-head { padding: 2.5rem 0 1rem; background: radial-gradient(800px 300px at 50% -30%, rgba(90, 150, 143, .22), transparent 70%), #f5faf9; }
.crumbs { font-size: .85rem; color: #5f7773; margin-bottom: 1rem; }
.crumbs a { color: #2c6b64; text-decoration: none; }
.post-head h1 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15; font-weight: 700; margin: 0 0 1rem; color: #0f2a27; }
.post-head .lead { font-size: 1.2rem; line-height: 1.6; color: #3c5551; margin: 0 0 1.4rem; }
.byline { display: flex; gap: .8rem; align-items: center; color: #5f7773; font-size: .9rem; line-height: 1.4; }
.byline strong { color: #0f2a27; }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, #5a968f, #2c6b64); }
.cover { width: 100%; max-height: 520px; object-fit: cover; border-radius: 26px; margin: 2rem 0 0; box-shadow: var(--shadow-lg); }
.prose { font-size: 1.12rem; line-height: 1.8; color: #1d3a36; padding: 2.4rem 0 1rem; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 { font-size: 1.75rem; line-height: 1.25; margin-top: 2.4rem; color: #0f2a27; font-weight: 700; }
.prose h3 { font-size: 1.35rem; margin-top: 2rem; color: #0f2a27; font-weight: 700; }
.prose a { color: #2c6b64; text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.5rem; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: .4rem; }
.prose img { border-radius: 16px; margin: 1.6rem auto; max-width: 100%; height: auto; box-shadow: var(--shadow-md); }
.prose figure figcaption { text-align: center; font-size: .85rem; color: #5f7773; margin-top: .5rem; }
.prose blockquote { border-left: 4px solid #5a968f; background: #eef6f4; padding: 1rem 1.4rem; border-radius: 0 14px 14px 0; font-style: italic; }
.prose pre { background: #0f2a27; color: #e6f4f1; padding: 1.1rem 1.3rem; border-radius: 14px; overflow-x: auto; font-size: .92rem; }
.prose code { background: #e4efec; padding: .1em .35em; border-radius: 5px; font-size: .9em; }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.prose th, .prose td { border: 1px solid #d3e4e0; padding: .6rem .8rem; text-align: left; }
.prose th { background: #eef6f4; }
.prose hr { border: 0; border-top: 1px solid #d3e4e0; margin: 2rem 0; }
.tags { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.tags li { background: #fff; border: 1px solid var(--c-line, #d6e6e3); padding: .25rem .8rem; border-radius: 99px; font-size: .85rem; color: #2c5550; }
.share { display: flex; gap: .6rem; align-items: center; margin: 1.6rem 0; padding: 1rem 0; border-top: 1px solid #d9e8e5; border-bottom: 1px solid #d9e8e5; font-weight: 700; }
.share a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #e4efec; color: #2c6b64; text-decoration: none; transition: all .25s; }
.share a:hover { background: #2c6b64; color: #fff; transform: translateY(-3px); }
.post-cta { text-align: center; margin: 2rem 0 1rem; padding: 2.2rem 1.5rem; border-radius: 26px; color: #fff; background: linear-gradient(120deg, #4a8f86, #2c6b64); box-shadow: var(--shadow-lg); }
.post-cta h2 { color: #fff; font-size: 1.6rem; margin: 0 0 .4rem; }
.post-cta p { margin: 0 0 1.2rem; opacity: .92; }
.btn-cta { display: inline-block; background: #fff; color: #2c6b64; font-weight: 700; padding: .75rem 1.6rem; border-radius: 99px; text-decoration: none; margin: .2rem; transition: transform .25s var(--ease); }
.btn-cta:hover { transform: translateY(-2px); }
.btn-cta.alt { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .6); }
.related { background: #fff; padding-top: 3rem; }
.related h2 { font-size: 1.6rem; margin: 0 0 1.4rem; }

@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-card.feature { flex-direction: column; } .blog-card.feature .thumb { min-height: 220px; } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } .blog-hero { padding-top: 2.4rem; } .prose { font-size: 1.04rem; } }