/**
* Vdcstore Blog Module – Consolidated Frontend Stylesheet
* =========================================================
* All CSS extracted from inline <style> blocks in phtml templates.
* Load this file via blog_default.xml layout.
*
* File path in module:
*   Vdcstore/Blog/view/frontend/web/css/blog-styles.css
*
* Sections
* ─────────────────────────────────────────────────────────
*  1.  Layout – Blog List (list.phtml)
*  2.  Post Detail / Single View (view.phtml)
*  3.  Post Page Two-Column Wrapper (post_view_wrapper.phtml)
*  4.  Sidebar (sidebar.phtml)
*  5.  Sidebar – Archive Widget (sidebar/archive.phtml)
*  6.  Next / Previous Post Navigation (post/nextprev.phtml)
*  7.  Comments Section (post/view/comments.phtml)
*  8.  Category View (category/view.phtml)
*  9.  Author Post List (author_post_list.phtml)
* 10.  Archive Listing (archive/list.phtml)
* ─────────────────────────────────────────────────────────
*/

/* =========================================================
1. Blog List Page
Template: list.phtml
========================================================= */

.blog-container { max-width: 1200px; margin: 0 auto;    /* padding: 20px; */ }
.page-title-wrapper { margin-bottom: 30px; }
.page-title { font-size: 32px; font-weight: 700; color: #333; margin: 0; }
.blog-search-wrapper { margin-bottom: 30px; }
.blog-search-form { position: relative; max-width: 500px; }
.blog-search-input { width: 100%; padding: 12px 90px 12px 20px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
.blog-search-input:focus { outline: none; border-color: #1979c3; }
.blog-search-btn { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); background: #1979c3; border: none; color: #fff; padding: 8px 12px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.blog-search-btn:hover { background: #006bb4; }
.blog-search-btn svg { width: 20px; height: 20px; }
.blog-search-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: #f5f5f5; border: none; color: #666; padding: 6px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s; text-decoration: none; }
.blog-search-clear:hover { background: #e0e0e0; }
.search-results-info { margin-top: 10px; font-size: 14px; color: #666; font-style: italic; }
.blog-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 30px; margin-bottom: 40px; }
.blog-post-item { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; }
.blog-post-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
.post-image img { width: 100%; height: auto; object-fit: cover; }
.post-content { padding: 0; }
.post-title { font-size: 20px; font-weight: 600; margin: 0 0 10px 0; }
.post-title a { color: #333; text-decoration: none; }
.post-title a:hover { color: #1979c3; }
.post-meta { display: flex; flex-wrap: wrap; gap: 15px; font-size: 13px; color: #666; margin-bottom: 15px; }
.post-excerpt { color: #555; line-height: 1.6; margin-bottom: 15px; }
.read-more-btn { display: inline-block; padding: 8px 20px; text-decoration: none; border-radius: 0; font-size: 14px; }
.message.info.empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; background: #f8f8f8; border-radius: 8px; }

/* Pagination */
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 40px 0; padding: 20px 0; }
.pagination-arrow { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #666; text-decoration: none; transition: all 0.3s ease; cursor: pointer; }
.pagination-arrow:hover:not(.disabled) { border-color: #73c04a; color: #73c04a; background: #f0f9ec; }
.pagination-arrow.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.pagination-arrow svg { width: 20px; height: 20px; }
.pagination-numbers { display: flex; align-items: center; gap: 6px; }
.pagination-number { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #ddd; border-radius: 50%; background: #fff; color: #333; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.3s ease; }
.pagination-number:hover:not(.active) { border-color: #73c04a; color: #73c04a; background: #f0f9ec; }
.pagination-number.active { background: #73c04a; border-color: #73c04a; color: #fff; cursor: default; }
.pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #999; font-size: 14px; }

/* Sidebar (list page) */
.blog-sidebar { margin-top: 40px; }
.sidebar-widget { background: #f8f8f8; padding: 20px; border-radius: 8px; }
.sidebar-widget h3 { font-size: 18px; font-weight: 600; margin: 0 0 15px 0; }
.recent-posts-list { list-style: none; padding: 0; margin: 0; }
.recent-post-item { padding: 12px 0; border-bottom: 1px solid #e5e5e5; }
.recent-post-item:last-child { border-bottom: none; }
.recent-post-link { display: flex; gap: 12px; text-decoration: none; align-items: flex-start; transition: opacity 0.2s; }
.recent-post-link:hover { opacity: 0.8; }
.recent-post-thumbnail { flex-shrink: 0; width: 70px; height: 70px; border-radius: 6px; overflow: hidden; background: #e5e5e5; }
.recent-post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.recent-post-info { flex: 1; min-width: 0; }
.recent-post-title { font-size: 14px; font-weight: 600; color: #333; margin: 0 0 6px 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recent-post-link:hover .recent-post-title { color: #1979c3; }
.recent-post-date { display: block; font-size: 12px; color: #999; }
@media (max-width:768px) {
	.blog-posts-grid { grid-template-columns: 1fr; }
	.blog-pagination { gap: 6px; }
	.pagination-arrow, .pagination-number { min-width: 36px; height: 36px; font-size: 13px; }
	.pagination-arrow svg { width: 18px; height: 18px; }
	.pagination-ellipsis { width: 36px; height: 36px; }
	.recent-post-thumbnail { width: 60px; height: 60px; }
	.recent-post-title { font-size: 13px; }
	.blog-search-form { max-width: 100%; }
}
@media (max-width:480px) {
	.blog-pagination { gap: 4px; }
	.pagination-arrow, .pagination-number { min-width: 32px; height: 32px; padding: 0 8px; font-size: 12px; }
	.pagination-arrow svg { width: 16px; height: 16px; }
	.pagination-ellipsis { width: 32px; height: 32px; }
	.recent-post-thumbnail { width: 50px; height: 50px; }
	.blog-search-input { padding: 10px 80px 10px 15px; font-size: 13px; }
	.blog-search-btn { right: 35px; padding: 6px 10px; }
}

/* =========================================================
2. Post Detail / Single View
Template: view.phtml
========================================================= */
.blog-post-view { margin: 0 auto; }
.back-to-blog { display: inline-block; color: #1979c3; text-decoration: none; margin-bottom: 20px; font-size: 14px; }
.back-to-blog:hover { color: #006bb4; }
.post-header { margin-bottom: 30px; }
.post-title { font-size: 36px; font-weight: 700; color: #333; margin: 0 0 20px 0; line-height: 1.3; }
.post-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; color: #666; padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; }
.post-meta span { display: flex; align-items: center; gap: 5px; }
.post-featured-image { margin-bottom: 30px; border-radius: 8px; overflow: hidden; }
.post-featured-image img { height: auto; display: block; }
.post-content-wrapper { margin-bottom: 40px; }
.post-content { font-size: 16px; line-height: 1.8; color: #444; }
.post-content h2 { font-size: 28px; font-weight: 600; margin: 0 0 15px 0; color: #333; }
.post-content h3 { font-size: 22px; font-weight: 600; margin: 25px 0 12px 0; color: #333; }
.post-content p { margin-bottom: 20px; }
.post-content ul, .post-content ol { margin-bottom: 20px; padding-left: 30px; }
.post-content li { margin-bottom: 10px; }
.post-content img { max-width: 100%; height: auto; border-radius: 4px; margin: 20px 0; }
.post-content blockquote { border-left: 4px solid #1979c3; padding-left: 20px; margin: 20px 0; font-style: italic; color: #666; }
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 20px 0; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin-bottom: 30px; }
.tag { display: inline-block; padding: 5px 12px; background: #f0f0f0; border-radius: 20px; font-size: 13px; color: #555; }
.post-footer { text-align: center; }
.back-to-blog-btn { display: inline-block; padding: 12px 30px; background: #1979c3; color: #fff; text-decoration: none; border-radius: 4px; font-size: 14px; font-weight: 500; }
.back-to-blog-btn:hover { background: #006bb4; }
@media (max-width:768px) {
	.post-title { font-size: 28px; }
	.post-meta { flex-direction: column; gap: 10px; }
	.post-content { font-size: 15px; }
}

/* =========================================================
3. Post Page Two-Column Wrapper
Template: post_view_wrapper.phtml
========================================================= */
.blog-post-page-layout { display: flex; gap: 32px; align-items: flex-start; max-width: 1200px; margin: 0 auto; padding: 20px 0; }
.blog-post-page-main { flex: 1; min-width: 0; }
.blog-post-page-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 20px; }
.blog-post-page-sidebar .blog-sidebar { width: 100%; }
.blog-post-page-sidebar .sidebar-widget { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 20px; box-sizing: border-box; }
.blog-post-page-sidebar .sidebar-widget-title { font-size: 16px; font-weight: 700; color: #222; margin: 0; padding: 13px 16px; border-bottom: 2px solid #1979c3; background: #fff; }
.blog-post-page-sidebar .sidebar-search-widget { padding: 14px; }
.blog-post-page-sidebar .search-input-wrapper { display: flex; align-items: center; border: 1px solid #d0d0d0; border-radius: 6px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.blog-post-page-sidebar .search-input-wrapper:focus-within { border-color: #1979c3; box-shadow: 0 0 0 2px rgba(25, 121, 195, .12); }
.blog-post-page-sidebar .sidebar-search-input { flex: 1; border: none; outline: none; padding: 10px 12px; font-size: 14px; color: #333; }
.blog-post-page-sidebar .sidebar-search-btn { padding: 10px 12px; background: transparent; border: none; cursor: pointer; color: #888; display: flex; align-items: center; }
.blog-post-page-sidebar .sidebar-search-btn:hover { color: #1979c3; }
.blog-post-page-sidebar .archive-list { list-style: none; margin: 0; padding: 0; }
.blog-post-page-sidebar .archive-item { border-bottom: 1px solid #f2f2f2; }
.blog-post-page-sidebar .archive-item:last-child { border-bottom: none; }
.blog-post-page-sidebar .archive-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; text-decoration: none; color: #444; font-size: 14px; transition: background .15s, color .15s; }
.blog-post-page-sidebar .archive-link:hover { background: #f7f9fc; color: #1979c3; }
.blog-post-page-sidebar .archive-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: #e8f0fb; color: #1979c3; border-radius: 11px; font-size: 12px; font-weight: 600; }
.blog-post-page-sidebar .recent-posts-list { list-style: none; margin: 0; padding: 0; }
.blog-post-page-sidebar .recent-post-item { border-bottom: 1px solid #f2f2f2; }
.blog-post-page-sidebar .recent-post-item:last-child { border-bottom: none; }
.blog-post-page-sidebar .recent-post-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; transition: background .15s; }
.blog-post-page-sidebar .recent-post-link:hover { background: #f7f9fc; }
.blog-post-page-sidebar .recent-post-thumbnail { flex-shrink: 0; width: 68px; height: 54px; border-radius: 5px; overflow: hidden; background: #eee; }
.blog-post-page-sidebar .recent-post-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-post-page-sidebar .recent-post-no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ccc; }
.blog-post-page-sidebar .recent-post-info { flex: 1; min-width: 0; }
.blog-post-page-sidebar .recent-post-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; color: #333; line-height: 1.4; margin-bottom: 4px; }
.blog-post-page-sidebar .recent-post-link:hover .recent-post-title { color: #1979c3; }
.blog-post-page-sidebar .recent-post-date { display: block; font-size: 12px; color: #999; }
@media (max-width:900px) {
	.blog-post-page-layout { flex-direction: column; }
	.blog-post-page-sidebar { width: 100%; position: static; }
}

/* =========================================================
4. Sidebar
Template: sidebar.phtml
========================================================= */
.blog-sidebar { width: 100%; box-sizing: border-box; }
.sidebar-search-widget { margin-bottom: 20px; background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 14px; box-sizing: border-box; }
.sidebar-search-form { width: 100%; }
.search-input-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #d0d0d0; border-radius: 6px; overflow: hidden; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.search-input-wrapper:focus-within { border-color: #1979c3; box-shadow: 0 0 0 2px rgba(25, 121, 195, 0.12); }
.sidebar-search-input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none; outline: none; padding: 10px 12px; font-size: 14px; color: #333; background: transparent; min-width: 0; }
.sidebar-search-input::placeholder { color: #bbb; }
.sidebar-search-btn { padding: 10px 12px; background: transparent; border: none; cursor: pointer; color: #888; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-negative: 0; flex-shrink: 0; transition: color 0.2s; }
.sidebar-search-btn:hover { color: #1979c3; }
.sidebar-recent-posts { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-sizing: border-box; }
.sidebar-widget-title { font-size: 17px; font-weight: 700; color: #222; margin: 0; padding: 14px 18px; border-bottom: 2px solid #1979c3; background: #fff; box-sizing: border-box; }
.recent-posts-list { list-style: none; margin: 0; padding: 0; }
.recent-post-item { border-bottom: 1px solid #f2f2f2; }
.recent-post-item:last-child { border-bottom: none; }
.recent-post-link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; transition: background 0.15s; }
.recent-post-link:hover { background: #f7f9fc; text-decoration: none; }
.recent-post-thumbnail { -ms-flex-negative: 0; flex-shrink: 0; width: 68px; height: 54px; border-radius: 5px; overflow: hidden; background: #eee; }
.recent-post-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-post-no-image { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #ccc; background: #f5f5f5; }
.recent-post-info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; }
.recent-post-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; color: #333; line-height: 1.45; margin-bottom: 5px; }
.recent-post-link:hover .recent-post-title { color: #1979c3; }
.recent-post-date { display: block; font-size: 12px; color: #999; }

/* =========================================================
5. Sidebar – Archive Widget
Template: sidebar/archive.phtml
========================================================= */
.sidebar-archive-widget { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-sizing: border-box; margin-top: 20px; }
.sidebar-archive-widget .sidebar-widget-title { font-size: 17px; font-weight: 700; color: #222; margin: 0; padding: 14px 18px; border-bottom: 2px solid #1979c3; background: #fff; box-sizing: border-box; }
.archive-list { list-style: none; margin: 0; padding: 0; }
.archive-item { border-bottom: 1px solid #f2f2f2; }
.archive-item:last-child { border-bottom: none; }
.archive-item.active .archive-link { background: #f0f6ff; color: #1979c3; font-weight: 600; }
.archive-link { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; text-decoration: none; color: #444; font-size: 14px; transition: background 0.15s, color 0.15s; }
.archive-link:hover { background: #f7f9fc; color: #1979c3; text-decoration: none; }
.archive-label { flex: 1; }
.archive-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; background: #e8f0fb; color: #1979c3; border-radius: 11px; font-size: 12px; font-weight: 600; margin-left: 8px; }
.archive-item.active .archive-count { background: #1979c3; color: #fff; }

/* =========================================================
6. Next / Previous Post Navigation
Template: post/nextprev.phtml
========================================================= */
.post-nextprev-hld { display: flex; justify-content: space-between; align-items: stretch; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; margin: 40px 0 20px; padding: 20px 0; gap: 20px; }
.post-prev-wrap, .post-next-wrap { flex: 1; max-width: 48%; }
.post-next-wrap { text-align: right; }
.nextprev-link { display: flex; flex-direction: column; text-decoration: none; color: #333; transition: color 0.2s; }
.prev-link { align-items: flex-start; }
.next-link { align-items: flex-end; }
.nextprev-link:hover { color: #1979c3; }
.nextprev-label { font-size: 12px; color: #999; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.prev-link .nextprev-label::before { content: '← '; }
.next-link .nextprev-label::after { content: ' →'; }
.nextprev-title { font-size: 15px; font-weight: 600; line-height: 1.4; }
@media (max-width:640px) {
	.post-nextprev-hld { flex-direction: column; }
	.post-prev-wrap, .post-next-wrap { max-width: 100%; }
	.post-next-wrap { text-align: left; }
	.next-link { align-items: flex-start; }
}

/* =========================================================
7. Comments Section
Template: post/view/comments.phtml
========================================================= */
.blog-comments-section { margin-top: 40px; padding-top: 30px; border-top: 1px solid #e5e5e5; }
.comments-header { margin-bottom: 20px; }
.comments-title { font-size: 20px; font-weight: 700; color: #222; margin: 0 0 4px; padding-bottom: 10px; border-bottom: 2px solid #e5e5e5; }
.comment-trigger-input { width: 100%; border: 1px solid #d0d0d0; border-radius: 6px; padding: 12px 14px; font-size: 15px; color: #555; resize: none; cursor: text; box-sizing: border-box; transition: border-color 0.2s; }
.comment-trigger-input:focus { border-color: #4caf50; outline: none; }
.comment-form-fields { margin-top: 10px; }
.comment-textarea { width: 100%; border: 1px solid #d0d0d0; border-radius: 6px; padding: 12px 14px; font-size: 15px; resize: vertical; box-sizing: border-box; transition: border-color 0.2s; }
.comment-textarea:focus { border-color: #4caf50; outline: none; }
.comment-author-fields { display: flex; gap: 12px; margin-top: 10px; }
.comment-input { flex: 1; border: 1px solid #d0d0d0; border-radius: 6px; padding: 10px 14px; font-size: 14px; box-sizing: border-box; transition: border-color 0.2s; }
.comment-input:focus { border-color: #4caf50; outline: none; }
.comment-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.comment-cancel-btn { padding: 9px 20px; background: #f0f0f0; border: none; border-radius: 4px; font-size: 14px; cursor: pointer; color: #555; }
.comment-cancel-btn:hover { background: #e0e0e0; }
.comment-submit-btn { padding: 9px 24px; background: #1979c3; color: #fff; border: none; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; }
.comment-submit-btn:hover { background: #006bb4; }
.comment-message { margin-top: 10px; padding: 10px 14px; border-radius: 4px; font-size: 14px; }
.comment-message.success { background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.comment-message.error { background: #fce4ec; color: #c62828; border: 1px solid #f8bbd0; }
.comments-list { margin-top: 30px; }
.comment-item { display: flex; gap: 14px; margin-bottom: 24px; }
.reply-item { margin-top: 16px; }
.comment-avatar { width: 42px; height: 42px; border-radius: 50%; background: #1979c3; color: #fff; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.reply-avatar { width: 34px; height: 34px; font-size: 14px; background: #5c6bc0; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.comment-author { font-weight: 600; font-size: 14px; color: #222; }
.comment-date { font-size: 12px; color: #999; }
.comment-text { font-size: 15px; color: #444; line-height: 1.7; margin-bottom: 8px; }
.comment-actions { margin-bottom: 8px; }
.comment-reply-link { font-size: 13px; color: #1979c3; text-decoration: none; font-weight: 600; }
.comment-reply-link:hover { color: #006bb4; }
.replies-list { margin-left: 20px; margin-top: 10px; border-left: 2px solid #e5e5e5; padding-left: 16px; }
.reply-form-wrapper { margin-top: 12px; }
@media (max-width:640px) {
	.comment-author-fields { flex-direction: column; }
}

/* =========================================================
8. Category View
Template: category/view.phtml
========================================================= */
.blog-category-page { display: flex; gap: 30px; max-width: 1200px; margin: 0 auto; padding: 20px 0; align-items: flex-start; }
.blog-category-main { flex: 1; min-width: 0; }
.blog-category-sidebar { width: 300px; flex-shrink: 0; }
.page-title-wrapper { margin-bottom: 28px; }
.page-title { font-size: 30px; font-weight: 700; color: #222; margin: 0 0 8px; }
.category-description { color: #666; font-size: 15px; margin: 0; }
.blog-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; margin-bottom: 40px; }
.blog-post-item { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.blog-post-item:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, .1); }
.post-image img { width: 100%; height: auto; object-fit: cover; display: block; }
.post-content { padding: 0; }
.post-title { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.post-title a { color: #222; text-decoration: none; }
.post-title a:hover { color: #1979c3; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: #888; margin-bottom: 12px; }
.post-excerpt { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 14px; }
.message.info.empty { padding: 40px 20px; text-align: center; background: #f8f8f8; border-radius: 8px; }
.sidebar-widget { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; margin-bottom: 20px; box-sizing: border-box; }
.sidebar-widget-title { font-size: 16px; font-weight: 700; color: #222; margin: 0; padding: 13px 16px; border-bottom: 2px solid #1979c3; background: #fff; }
.sidebar-search-widget { padding: 14px; }
.search-input-wrapper { display: flex; align-items: center; border: 1px solid #d0d0d0; border-radius: 6px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.search-input-wrapper:focus-within { border-color: #1979c3; box-shadow: 0 0 0 2px rgba(25, 121, 195, .12); }
.sidebar-search-input { flex: 1; border: none; outline: none; padding: 10px 12px; font-size: 14px; color: #333; }
.sidebar-search-btn { padding: 10px 12px; background: transparent; border: none; cursor: pointer; color: #888; display: flex; align-items: center; }
.sidebar-search-btn:hover { color: #1979c3; }
.recent-posts-list { list-style: none; margin: 0; padding: 0; }
.recent-post-item { border-bottom: 1px solid #f2f2f2; }
.recent-post-item:last-child { border-bottom: none; }
.recent-post-link { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; transition: background .15s; }
.recent-post-link:hover { background: #f7f9fc; }
.recent-post-thumbnail { flex-shrink: 0; width: 68px; height: 54px; border-radius: 5px; overflow: hidden; background: #eee; }
.recent-post-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recent-post-no-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #ccc; }
.recent-post-info { flex: 1; min-width: 0; }
.recent-post-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; font-weight: 600; color: #333; line-height: 1.4; margin-bottom: 4px; }
.recent-post-link:hover .recent-post-title { color: #1979c3; }
.recent-post-date { display: block; font-size: 12px; color: #999; }
@media (max-width:900px) {
	.blog-category-page { flex-direction: column; }
	.blog-category-sidebar { width: 100%; }
}
@media (max-width:600px) {
	.blog-posts-grid { grid-template-columns: 1fr; }
	.page-title { font-size: 24px; }
}

/* =========================================================
9. Author Post List
Template: author_post_list.phtml
========================================================= */
.blog-author-page { max-width: 900px; margin: 0 auto;    /* padding: 20px; */ }
.blog-breadcrumb { font-size: 13px; color: #666; margin-bottom: 20px; }
.blog-breadcrumb a { color: #1979c3; text-decoration: none; }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-breadcrumb .separator { margin: 0 6px; }
.author-page-title { font-size: 28px; font-weight: 700; color: #333; margin: 0 0 30px; padding-bottom: 15px; border-bottom: 2px solid #e5e5e5; }
.author-posts-list { display: flex; flex-direction: column; gap: 0; }
.author-post-item { display: flex; gap: 24px; align-items: flex-start; padding: 24px 0; border-bottom: 1px solid #e5e5e5; }
.author-post-image { flex-shrink: 0; width: 220px; height: 150px; border-radius: 6px; overflow: hidden; background: #f0f0f0; }
.author-post-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-post-info { flex: 1; }
.author-post-title { font-size: 20px; font-weight: 600; margin: 0 0 10px; line-height: 1.4; }
.author-post-title a { color: #333; text-decoration: none; }
.author-post-title a:hover { color: #1979c3; }
.author-post-meta { font-size: 13px; color: #888; margin-bottom: 14px; }
.post-author-name { color: #555; font-weight: 500; }
.author-read-more { display: inline-block; padding: 7px 20px; text-decoration: none; border-radius: 0; font-size: 14px; }
.blog-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 30px 0; }
.pagination-number { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border: 1px solid #ddd; border-radius: 50%; color: #333; text-decoration: none; font-size: 14px; }
.pagination-number.active { background: #1979c3; border-color: #1979c3; color: #fff; }
.pagination-arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #ddd; border-radius: 50%; color: #666; text-decoration: none; }
.pagination-arrow:hover { border-color: #1979c3; color: #1979c3; }
@media (max-width:600px) {
	.author-post-item { flex-direction: column; }
	.author-post-image { width: 100%; height: 200px; }
}

/* =========================================================
10. Archive Listing
Template: archive/list.phtml
========================================================= */
.blog-container { max-width: 1200px; margin: 0 auto;    /* padding: 20px; */ box-sizing: border-box; }
.archive-back-link { display: inline-block; font-size: 14px; color: #1979c3; text-decoration: none; margin-top: 8px; }
.archive-back-link:hover { color: #006bb4; }
.blog-layout-wrapper { display: flex; gap: 30px; align-items: flex-start; margin-top: 24px; }
.blog-posts-area { flex: 1; min-width: 0; }
.blog-sidebar-area { width: 280px; flex-shrink: 0; }
.blog-post-list { display: flex; flex-direction: column; gap: 28px; }
.blog-post-item { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; overflow: hidden; display: flex; gap: 0; flex-direction: column; }
.post-image-link { display: block; }
.post-list-image { width: 100%; height: 220px; overflow: hidden; background: #f5f5f5; }
.post-list-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.blog-post-item:hover .post-list-image img { transform: scale(1.03); }
.post-list-content { padding: 20px; }
.post-list-title { font-size: 20px; font-weight: 700; margin: 0 0 10px; line-height: 1.3; }
.post-list-title a { color: #222; text-decoration: none; }
.post-list-title a:hover { color: #1979c3; }
.post-list-meta { display: flex; gap: 16px; font-size: 13px; color: #888; margin-bottom: 12px; flex-wrap: wrap; }
.post-list-excerpt { font-size: 15px; color: #555; line-height: 1.7; margin-bottom: 16px; }
.post-list-read-more { display: inline-block; font-size: 14px; font-weight: 600; text-decoration: none; }
.blog-no-posts { background: #fff; border: 1px solid #e5e5e5; border-radius: 8px; padding: 40px; text-align: center; color: #666; }
.blog-post-view .magento-content > .container { margin: 0; padding: 0; }
.blog-category-main .post-content { padding: 18px; }
.BlogListImageWrapper { background-size: contain; background-repeat: no-repeat; background-position: top; }
body .blog-post-view.card .post-content-wrapper a { color: rgb(64, 64, 249); font-weight: bold; }
body.blog-page-list main#maincontent .columns, body.blog-post-view main#maincontent .columns, body.blog-author-view main#maincontent .columns, body.blog-archive-index main#maincontent .columns, body.blog-category-view main#maincontent .columns { margin-top: 30px; }
@media screen and (min-width:320px) and (max-width:767px) {
	.blog-post-view.card { padding: 15px; }
	body .post-content h2 { font-size: 24px; line-height: normal; }
    .blog-category-main .post-content { padding: 10px; }
}
@media (max-width:768px) {
	.blog-layout-wrapper { flex-direction: column; }
	.blog-sidebar-area { width: 100%; }
}
@media screen and (max-width:991px) {
	aside.sidebar.sidebar-additional { margin-top: 20px; }
	aside.sidebar.sidebar-additional .blog-search.mb-10 { margin-bottom: 10px; }
}