/* Blog pages — extends style.css tokens (--orange, --green, --cream ...). Bootstrap grid/utilities used for layout. */
.blog-hero { background: var(--green-deep); color: #fff; padding: clamp(48px, 7vw, 90px) 0; }
.blog-hero h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 400; color: #fff; }
.blog-hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); --bs-breadcrumb-item-active-color: rgba(255,255,255,.75); font-size: 13px; }
.blog-hero .breadcrumb a { color: rgba(255,255,255,.85); }
.blog-hero .breadcrumb a:hover { color: var(--orange); }
.blog-hero .lead { color: rgba(255,255,255,.82); max-width: 560px; }

.filter-chips .btn { padding: 8px 20px; font-size: 14px; border: 1.5px solid var(--line); background: transparent; color: var(--green-deep); }
.filter-chips .btn.active, .filter-chips .btn:hover { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.blog-search { border-radius: 999px; border: 1.5px solid var(--line); padding: 11px 20px; background: #fff; font-size: 15px; }
.blog-search:focus { border-color: var(--orange); box-shadow: 0 0 0 .2rem rgba(220,90,43,.18); }

.post-card { border: 0; background: var(--white); border-radius: var(--radius); padding: 10px 10px 8px; height: 100%; transition: transform .3s, box-shadow .3s; }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-card .thumb { border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 11; position: relative; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.post-card:hover .thumb img { transform: scale(1.05); }
.post-card .badge-cat { position: absolute; top: 14px; left: 14px; background: rgba(250,248,244,.93); color: var(--green-deep); font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 999px; }
.post-card .card-body { padding: 22px 18px 18px; }
.post-card h2, .post-card h3 { font-size: 23px; font-weight: 600; line-height: 1.2; margin: 10px 0; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--orange); }
.post-card p { color: var(--muted); font-size: 15px; }
.meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.meta .dot::before { content: '•'; margin-right: 14px; color: var(--orange); }
.read-link { color: var(--orange); font-weight: 600; font-size: 15px; display: inline-flex; gap: 8px; align-items: center; }
.read-link:hover { color: var(--orange-dark); gap: 12px; }

.featured { background: var(--green); color: #fff; border-radius: 36px; overflow: hidden; }
.featured img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.featured .body { padding: clamp(28px, 4vw, 56px); }
.featured h2 { font-size: clamp(30px, 4vw, 46px); color: #fff; margin: 12px 0 16px; }
.featured p { color: rgba(255,255,255,.8); }
.featured .meta { color: rgba(255,255,255,.7); }

.pagination .page-link { border: 0; background: transparent; color: var(--green-deep); border-radius: 50% !important; width: 44px; height: 44px; display: grid; place-items: center; margin: 0 4px; font-weight: 600; }
.pagination .page-item.active .page-link, .pagination .page-link:hover { background: var(--orange); color: #fff; }

/* Single post */
.post-hero-img { border-radius: 32px; overflow: hidden; aspect-ratio: 16 / 8; }
.post-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article { font-size: 18px; line-height: 1.8; color: #2c2c2a; }
.article h2 { font-size: clamp(28px, 3.4vw, 38px); margin: 48px 0 16px; }
.article h3 { font-size: 24px; margin: 32px 0 12px; }
.article p { margin-bottom: 20px; }
.article ul { padding-left: 1.2rem; margin-bottom: 22px; }
.article ul li { margin-bottom: 8px; }
.article ul li::marker { color: var(--orange); }
.article blockquote { margin: 36px 0; padding: 28px 32px; background: var(--sand); border-left: 5px solid var(--orange); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: var(--font-display); font-style: italic; font-size: 24px; line-height: 1.4; }
.article figure { margin: 36px 0; }
.article figure img { border-radius: 24px; width: 100%; }
.article figcaption { font-size: 14px; color: var(--muted); margin-top: 10px; text-align: center; }
.author { display: flex; align-items: center; gap: 12px; }
.author .av { width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 700; }
.side-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.side-card h3 { font-size: 22px; margin-bottom: 16px; }
.side-card--cta { background: var(--orange); color: #fff; border: 0; }
.side-card--cta h3 { color: #fff; }
.side-card--cta p { color: rgba(255,255,255,.9); }
.recent { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); align-items: center; }
.recent:last-child { border: 0; padding-bottom: 0; }
.recent img { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; flex: none; }
.recent h4 { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0 0 4px; }
.recent a:hover h4 { color: var(--orange); }
.tag-pill { display: inline-block; background: var(--sand); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 500; color: var(--green-deep); margin: 0 6px 8px 0; }
.tag-pill:hover { background: var(--green-deep); color: #fff; }
.share a { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line); display: inline-grid; place-items: center; color: var(--green-deep); margin-right: 8px; }
.share a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
.share svg { width: 16px; height: 16px; }
.progress-read { position: fixed; top: 0; left: 0; height: 3px; background: var(--orange); width: 0; z-index: 300; }
@media (max-width: 767px) { .article { font-size: 17px; } .article blockquote { font-size: 20px; padding: 22px; } .post-hero-img { aspect-ratio: 16 / 10; border-radius: 22px; } }