/* =============================================================================
   Blog Page Styles
   Uses centralized color scheme from theme.css (--theme-* variables)
   All styles are scoped to .blog-page or .blog-detail-page to prevent conflicts
   ============================================================================= */

/* =============================================================================
   Page Layout - Scoped to blog pages only
   ============================================================================= */

.blog-page,
.blog-detail-page {
    padding: 0;
    background-color: #ffffff;
}

/* Scoped container styles - only apply within blog pages */
.blog-page > .container,
.blog-detail-page > .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* =============================================================================
   Breadcrumb - Styles moved to centralized breadcrumb.css
   ============================================================================= */

/* =============================================================================
   Back Button
   ============================================================================= */

.blog-page .back-button-wrapper,
.blog-detail-page .back-button-wrapper {
    padding: 1.5rem 0 0;
}

.blog-page .btn-back,
.blog-detail-page .btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-muted, #6b7280);
    background: transparent;
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-page .btn-back:hover,
.blog-detail-page .btn-back:hover {
    color: var(--theme-primary, #e43131);
    border-color: var(--theme-primary, #e43131);
    background: var(--theme-primary-lighter, #fef2f2);
}

.blog-page .btn-back svg,
.blog-detail-page .btn-back svg {
    width: 1rem;
    height: 1rem;
}

/* =============================================================================
   Blog Header
   ============================================================================= */

.blog-page .blog-header,
.blog-detail-page .blog-header {
    padding: 2.5rem 0 2rem;
    text-align: center;
}

.blog-page .header-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--theme-primary, #e43131);
    margin-bottom: 0.5rem;
}

.blog-page .blog-title,
.blog-detail-page .blog-title {
    font-family: var(--font-family-heading);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1f2937);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.blog-page .blog-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--theme-text-muted, #6b7280);
    max-width: 680px;
    margin: 0 auto;
}

/* =============================================================================
   Featured Posts Section
   ============================================================================= */

.blog-page .featured-posts-section {
    margin-bottom: 3rem;
}

.blog-page .featured-posts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.blog-page .featured-post {
    background: #ffffff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.blog-page .featured-post:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.blog-page .featured-post-main {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
}

.blog-page .featured-post-main .featured-post-image {
    height: 100%;
    min-height: 350px;
}

.blog-page .featured-post-secondary {
    display: flex;
    flex-direction: column;
}

.blog-page .featured-post-image {
    position: relative;
    overflow: hidden;
    display: block;
}

.blog-page .featured-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-page .featured-post:hover .featured-post-image img {
    transform: scale(1.05);
}

.blog-page .featured-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--theme-primary, #e43131);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
}

.blog-page .featured-post-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.blog-page .featured-post-main .featured-post-content {
    padding: 2rem;
}

.blog-page .post-category-link,
.blog-detail-page .post-category-link {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--theme-primary, #e43131);
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.blog-page .post-category-link:hover,
.blog-detail-page .post-category-link:hover {
    color: var(--theme-primary-dark, #c52a2a);
}

.blog-page .featured-post-title {
    font-family: var(--font-family-heading);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.75rem;
}

.blog-page .featured-post-main .featured-post-title {
    font-size: 1.875rem;
}

.blog-page .featured-post-title a {
    color: var(--theme-text-primary, #1f2937);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-page .featured-post-title a:hover {
    color: var(--theme-primary, #e43131);
}

.blog-page .featured-post-excerpt {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--theme-text-muted, #6b7280);
    margin: 0 0 1rem;
}

.blog-page .post-meta,
.blog-detail-page .post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--theme-text-muted, #6b7280);
}

.blog-page .meta-separator,
.blog-detail-page .meta-separator {
    color: var(--theme-border-light, #e5e7eb);
}

.blog-page .post-author,
.blog-detail-page .post-author {
    font-weight: 500;
    color: var(--theme-text-primary, #1f2937);
}

/* =============================================================================
   Blog Layout (Full Width - No Sidebar)
   ============================================================================= */

.blog-page .blog-main {
    min-width: 0;
    padding-bottom: 4rem;
}

/* =============================================================================
   Blog Toolbar
   ============================================================================= */

.blog-page .blog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--theme-border-light, #e5e7eb);
}

.blog-page .toolbar-results {
    font-size: 0.875rem;
    color: var(--theme-text-muted, #6b7280);
}

.blog-page .toolbar-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.blog-page .sort-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-page .sort-control label {
    font-size: 0.875rem;
    color: var(--theme-text-muted, #6b7280);
}

.blog-page .sort-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--theme-text-primary, #1f2937);
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat right 0.5rem center;
    background-size: 1rem;
    cursor: pointer;
    appearance: none;
}

.blog-page .sort-select:focus {
    outline: none;
    border-color: var(--theme-primary, #e43131);
}

/* =============================================================================
   Blog Grid - 3 columns desktop, 1 column mobile
   ============================================================================= */

.blog-page .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* =============================================================================
   Blog Card
   ============================================================================= */

.blog-page .blog-card,
.blog-detail-page .blog-card {
    background: #ffffff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.blog-page .blog-card:hover,
.blog-detail-page .blog-card:hover {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.blog-page .blog-card-image,
.blog-detail-page .blog-card-image {
    position: relative;
    display: block;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.blog-page .blog-card-image img,
.blog-detail-page .blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-page .blog-card:hover .blog-card-image img,
.blog-detail-page .blog-card:hover .blog-card-image img {
    transform: scale(1.08);
}

.blog-page .card-badge,
.blog-detail-page .card-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border-radius: 0.25rem;
}

.blog-page .badge-featured,
.blog-detail-page .badge-featured {
    background: var(--theme-primary, #e43131);
    color: white;
}

.blog-page .blog-card-content,
.blog-detail-page .blog-card-content {
    padding: 1.25rem;
}

.blog-page .card-category,
.blog-detail-page .card-category {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-primary, #e43131);
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: color 0.2s ease;
}

.blog-page .card-category:hover,
.blog-detail-page .card-category:hover {
    color: var(--theme-primary-dark, #c52a2a);
}

.blog-page .card-title,
.blog-detail-page .card-title {
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.blog-page .card-title a,
.blog-detail-page .card-title a {
    color: var(--theme-text-primary, #1f2937);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-page .card-title a:hover,
.blog-detail-page .card-title a:hover {
    color: var(--theme-primary, #e43131);
}

.blog-page .card-excerpt,
.blog-detail-page .card-excerpt {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--theme-text-muted, #6b7280);
    margin: 0 0 1rem;
}

.blog-page .card-meta,
.blog-detail-page .card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
}

.blog-page .card-author,
.blog-detail-page .card-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-page .author-avatar-small,
.blog-detail-page .author-avatar-small {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
}

.blog-page .author-name,
.blog-detail-page .author-name {
    font-weight: 500;
    color: var(--theme-text-primary, #1f2937);
}

.blog-page .card-date-time,
.blog-detail-page .card-date-time {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.blog-page .meta-dot,
.blog-detail-page .meta-dot {
    color: var(--theme-border-light, #e5e7eb);
}

/* =============================================================================
   No Posts
   ============================================================================= */

.blog-page .no-posts {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: #ffffff;
    border-radius: 0.5rem;
}

.blog-page .no-posts-title {
    font-family: var(--font-family-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1f2937);
    margin: 0 0 0.5rem;
}

.blog-page .no-posts-text {
    color: var(--theme-text-muted, #6b7280);
    margin: 0 0 1.5rem;
}

.blog-page .btn-view-all,
.blog-detail-page .btn-view-all {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--theme-primary, #e43131);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background 0.2s ease;
}

.blog-page .btn-view-all:hover,
.blog-detail-page .btn-view-all:hover {
    background: var(--theme-primary-dark, #c52a2a);
}

/* =============================================================================
   Blog Pagination
   ============================================================================= */

.blog-page .blog-pagination {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.blog-page .blog-pagination nav {
    display: flex;
    gap: 0.25rem;
}

.blog-page .blog-pagination a,
.blog-page .blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    color: var(--theme-text-primary, #1f2937);
    background: #ffffff;
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 0.25rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-page .blog-pagination a:hover {
    border-color: var(--theme-primary, #e43131);
    color: var(--theme-primary, #e43131);
}

.blog-page .blog-pagination span[aria-current="page"] {
    background: var(--theme-primary, #e43131);
    border-color: var(--theme-primary, #e43131);
    color: white;
}

/* =============================================================================
   Sidebar Widgets
   ============================================================================= */

.blog-page .sidebar-widgets,
.blog-detail-page .sidebar-widgets {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.blog-page .sidebar-widget,
.blog-detail-page .sidebar-widget {
    background: #ffffff;
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.blog-page .widget-title,
.blog-detail-page .widget-title {
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1f2937);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--theme-primary, #e43131);
}

/* Search Widget */
.blog-page .search-input-wrapper,
.blog-detail-page .search-input-wrapper {
    display: flex;
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 0.25rem;
    overflow: hidden;
}

.blog-page .sidebar-search-input,
.blog-detail-page .sidebar-search-input {
    flex: 1;
    padding: 0.75rem;
    border: none;
    font-size: 0.875rem;
    outline: none;
}

.blog-page .sidebar-search-btn,
.blog-detail-page .sidebar-search-btn {
    padding: 0.75rem;
    background: var(--theme-primary, #e43131);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.blog-page .sidebar-search-btn:hover,
.blog-detail-page .sidebar-search-btn:hover {
    background: var(--theme-primary-dark, #c52a2a);
}

/* Category Widget */
.blog-page .category-list,
.blog-detail-page .category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-page .category-item,
.blog-detail-page .category-item {
    border-bottom: 1px solid var(--theme-border-light, #e5e7eb);
}

.blog-page .category-item:last-child,
.blog-detail-page .category-item:last-child {
    border-bottom: none;
}

.blog-page .category-link,
.blog-detail-page .category-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    color: var(--theme-text-primary, #1f2937);
    text-decoration: none;
    font-size: 0.9375rem;
    transition: color 0.2s ease;
}

.blog-page .category-link:hover,
.blog-page .category-link.active,
.blog-detail-page .category-link:hover,
.blog-detail-page .category-link.active {
    color: var(--theme-primary, #e43131);
}

.blog-page .category-count,
.blog-detail-page .category-count {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
    background: var(--theme-bg-secondary, #fafafa);
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
}

.blog-page .subcategory-list,
.blog-detail-page .subcategory-list {
    list-style: none;
    padding: 0 0 0 1rem;
    margin: 0;
}

.blog-page .subcategory-item .category-link,
.blog-detail-page .subcategory-item .category-link {
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

/* Recent Posts Widget */
.blog-page .recent-posts-list,
.blog-detail-page .recent-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-page .recent-post-item,
.blog-detail-page .recent-post-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--theme-border-light, #e5e7eb);
}

.blog-page .recent-post-item:last-child,
.blog-detail-page .recent-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.blog-page .recent-post-item:first-child,
.blog-detail-page .recent-post-item:first-child {
    padding-top: 0;
}

.blog-page .recent-post-link,
.blog-detail-page .recent-post-link {
    display: flex;
    gap: 0.75rem;
    text-decoration: none;
}

.blog-page .recent-post-image,
.blog-detail-page .recent-post-image {
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 0.25rem;
    overflow: hidden;
}

.blog-page .recent-post-image img,
.blog-detail-page .recent-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-page .recent-post-link:hover .recent-post-image img,
.blog-detail-page .recent-post-link:hover .recent-post-image img {
    transform: scale(1.1);
}

.blog-page .recent-post-content,
.blog-detail-page .recent-post-content {
    flex: 1;
    min-width: 0;
}

.blog-page .recent-post-title,
.blog-detail-page .recent-post-title {
    font-family: var(--font-family-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--theme-text-primary, #1f2937);
    margin: 0 0 0.25rem;
    transition: color 0.2s ease;
}

.blog-page .recent-post-link:hover .recent-post-title,
.blog-detail-page .recent-post-link:hover .recent-post-title {
    color: var(--theme-primary, #e43131);
}

.blog-page .recent-post-date,
.blog-detail-page .recent-post-date {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
}

/* Tags Widget */
.blog-page .tags-cloud,
.blog-detail-page .tags-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-page .tag-item,
.blog-detail-page .tag-item {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--theme-text-primary, #1f2937);
    background: var(--theme-bg-secondary, #fafafa);
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 0.25rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-page .tag-item:hover,
.blog-page .tag-item.active,
.blog-detail-page .tag-item:hover,
.blog-detail-page .tag-item.active {
    background: var(--theme-primary, #e43131);
    border-color: var(--theme-primary, #e43131);
    color: white;
}

.blog-page .tag-count,
.blog-detail-page .tag-count {
    font-size: 0.6875rem;
    opacity: 0.7;
}

/* Archive Widget */
.blog-page .archive-list,
.blog-detail-page .archive-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-page .archive-item,
.blog-detail-page .archive-item {
    border-bottom: 1px solid var(--theme-border-light, #e5e7eb);
}

.blog-page .archive-item:last-child,
.blog-detail-page .archive-item:last-child {
    border-bottom: none;
}

.blog-page .archive-link,
.blog-detail-page .archive-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0;
    color: var(--theme-text-primary, #1f2937);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.blog-page .archive-link:hover,
.blog-detail-page .archive-link:hover {
    color: var(--theme-primary, #e43131);
}

.blog-page .archive-count,
.blog-detail-page .archive-count {
    font-size: 0.75rem;
    color: var(--theme-text-muted, #6b7280);
}

/* Newsletter Widget */
.blog-page .newsletter-text,
.blog-detail-page .newsletter-text {
    font-size: 0.875rem;
    color: var(--theme-text-muted, #6b7280);
    margin: 0 0 1rem;
}

.blog-page .newsletter-form,
.blog-detail-page .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.blog-page .newsletter-input,
.blog-detail-page .newsletter-input {
    padding: 0.75rem;
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.blog-page .newsletter-input:focus,
.blog-detail-page .newsletter-input:focus {
    border-color: var(--theme-primary, #e43131);
}

.blog-page .newsletter-btn,
.blog-detail-page .newsletter-btn {
    padding: 0.75rem;
    background: var(--theme-primary, #e43131);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.blog-page .newsletter-btn:hover,
.blog-detail-page .newsletter-btn:hover {
    background: var(--theme-primary-dark, #c52a2a);
}

/* =============================================================================
   Blog Detail Page (Full Width - No Sidebar)
   ============================================================================= */

.blog-detail-page .blog-article {
    background: #ffffff;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin-bottom: 2rem;
}

/* Article Header */
.blog-detail-page .article-header {
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--theme-border-light, #e5e7eb);
}

.blog-detail-page .article-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--theme-primary, #e43131);
    text-decoration: none;
    margin-bottom: 0.75rem;
}

.blog-detail-page .article-title {
    font-family: var(--font-family-heading);
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--theme-text-primary, #1f2937);
    margin: 0 0 1.25rem;
}

.blog-detail-page .article-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
}

.blog-detail-page .author-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.blog-detail-page .author-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-detail-page .author-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--theme-primary, #e43131);
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
    border-radius: 50%;
}

.blog-detail-page .author-details {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.blog-detail-page .meta-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--theme-text-muted, #6b7280);
}

/* Share Buttons - Consistent styling across the site */
.blog-detail-page .share-buttons,
.share-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-detail-page .share-label,
.share-buttons .share-label {
    font-size: 0.8125rem;
    color: var(--theme-text-muted, #6b7280);
    margin-right: 0.25rem;
}

.blog-detail-page .share-btn,
.share-buttons .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.blog-detail-page .share-btn:hover,
.share-buttons .share-btn:hover {
    transform: scale(1.1);
}

/* Unified brand color for all share buttons */
.blog-detail-page .share-facebook,
.blog-detail-page .share-twitter,
.blog-detail-page .share-linkedin,
.blog-detail-page .share-whatsapp,
.blog-detail-page .share-pinterest,
.blog-detail-page .share-telegram,
.blog-detail-page .share-email,
.blog-detail-page .share-copy,
.share-buttons .share-facebook,
.share-buttons .share-twitter,
.share-buttons .share-linkedin,
.share-buttons .share-whatsapp,
.share-buttons .share-pinterest,
.share-buttons .share-telegram,
.share-buttons .share-email,
.share-buttons .share-copy {
    background: var(--theme-primary, #DC143C);
    border: none;
    cursor: pointer;
}

.blog-detail-page .share-btn:hover,
.share-buttons .share-btn:hover {
    background: var(--theme-primary-dark, #b01030);
}

/* Featured Image */
.blog-detail-page .article-featured-image {
    margin: 0;
}

.blog-detail-page .article-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Video */
.blog-detail-page .article-video {
    padding: 0 2rem;
    margin: 2rem 0;
}

.blog-detail-page .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 0.5rem;
}

.blog-detail-page .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Article Content */
.blog-detail-page .article-content {
    padding: 2rem;
}

.blog-detail-page .article-content.prose {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--theme-text-primary, #1f2937);
}

.blog-detail-page .article-content h2 {
    font-family: var(--font-family-heading);
    font-size: 1.75rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
    color: var(--theme-text-primary, #1f2937);
}

.blog-detail-page .article-content h3 {
    font-family: var(--font-family-heading);
    font-size: 1.375rem;
    font-weight: 600;
    margin: 1.75rem 0 0.75rem;
    color: var(--theme-text-primary, #1f2937);
}

.blog-detail-page .article-content p {
    margin: 0 0 1.25rem;
}

.blog-detail-page .article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.blog-detail-page .article-content blockquote {
    border-left: 4px solid var(--theme-primary, #e43131);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--theme-text-muted, #6b7280);
}

.blog-detail-page .article-content ul,
.blog-detail-page .article-content ol {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.blog-detail-page .article-content li {
    margin-bottom: 0.5rem;
}

.blog-detail-page .article-content a {
    color: var(--theme-primary, #e43131);
    text-decoration: underline;
}

.blog-detail-page .article-content a:hover {
    color: var(--theme-primary-dark, #c52a2a);
}

/* Article Tags */
.blog-detail-page .article-tags {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--theme-border-light, #e5e7eb);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.blog-detail-page .tags-label {
    font-weight: 500;
    color: var(--theme-text-primary, #1f2937);
    margin-right: 0.5rem;
}

.blog-detail-page .tag-link {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--theme-text-primary, #1f2937);
    background: var(--theme-bg-secondary, #fafafa);
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 0.25rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-detail-page .tag-link:hover {
    background: var(--theme-primary, #e43131);
    border-color: var(--theme-primary, #e43131);
    color: white;
}

/* Author Bio Section */
.blog-detail-page .author-bio-section {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    margin: 0 2rem 2rem;
    background: var(--theme-bg-secondary, #fafafa);
    border-radius: 0.5rem;
}

.blog-detail-page .author-bio-avatar {
    flex-shrink: 0;
}

.blog-detail-page .author-bio-avatar img,
.blog-detail-page .author-bio-avatar .avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-detail-page .avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--theme-primary, #e43131);
    color: white;
    font-size: 2rem;
    font-weight: 600;
}

.blog-detail-page .author-bio-name {
    font-family: var(--font-family-heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--theme-text-primary, #1f2937);
}

.blog-detail-page .author-bio-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--theme-text-muted, #6b7280);
    margin: 0;
}

/* Post Navigation */
.blog-detail-page .post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--theme-border-light, #e5e7eb);
}

.blog-detail-page .nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--theme-bg-secondary, #fafafa);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.2s ease;
}

.blog-detail-page .nav-link:hover {
    background: var(--theme-border-light, #e5e7eb);
}

.blog-detail-page .nav-next {
    text-align: right;
}

.blog-detail-page .nav-label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--theme-primary, #e43131);
}

.blog-detail-page .nav-next .nav-label {
    justify-content: flex-end;
}

.blog-detail-page .nav-title {
    font-family: var(--font-family-heading);
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text-primary, #1f2937);
}

/* =============================================================================
   Comments Section
   ============================================================================= */

.blog-detail-page .comments-section {
    padding: 2rem;
    border-top: 1px solid var(--theme-border-light, #e5e7eb);
}

.blog-detail-page .comments-title {
    font-family: var(--font-family-heading);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    color: var(--theme-text-primary, #1f2937);
}

/* Comment Form */
.blog-detail-page .comment-form-wrapper {
    background: var(--theme-bg-secondary, #fafafa);
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.blog-detail-page .form-title {
    font-family: var(--font-family-heading);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--theme-text-primary, #1f2937);
}

.blog-detail-page .comment-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-detail-page .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.blog-detail-page .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.blog-detail-page .form-group label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--theme-text-primary, #1f2937);
}

.blog-detail-page .required {
    color: var(--theme-primary, #e43131);
}

.blog-detail-page .form-group input,
.blog-detail-page .form-group textarea {
    padding: 0.75rem;
    border: 1px solid var(--theme-border-light, #e5e7eb);
    border-radius: 0.25rem;
    font-size: 0.9375rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.blog-detail-page .form-group input:focus,
.blog-detail-page .form-group textarea:focus {
    border-color: var(--theme-primary, #e43131);
}

.blog-detail-page .btn-submit-comment {
    align-self: flex-start;
    padding: 0.75rem 1.5rem;
    background: var(--theme-primary, #e43131);
    color: white;
    font-size: 0.9375rem;
    font-weight: 500;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.2s ease;
}

.blog-detail-page .btn-submit-comment:hover {
    background: var(--theme-primary-dark, #c52a2a);
}

/* Comments List */
.blog-detail-page .comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.blog-detail-page .comment {
    display: flex;
    gap: 1rem;
}

.blog-detail-page .comment-avatar {
    flex-shrink: 0;
}

.blog-detail-page .comment-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-detail-page .comment-body {
    flex: 1;
    min-width: 0;
}

.blog-detail-page .comment-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.blog-detail-page .commenter-name {
    font-weight: 600;
    color: var(--theme-text-primary, #1f2937);
}

.blog-detail-page .comment-date {
    font-size: 0.8125rem;
    color: var(--theme-text-muted, #6b7280);
}

.blog-detail-page .comment-content {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--theme-text-primary, #1f2937);
}

.blog-detail-page .comment-replies {
    margin-top: 1.5rem;
    padding-left: 1rem;
    border-left: 2px solid var(--theme-border-light, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-detail-page .comment-reply .comment-avatar img {
    width: 36px;
    height: 36px;
}

/* =============================================================================
   Related Posts Section
   ============================================================================= */

.blog-detail-page .related-posts-section {
    padding: 3rem 0;
}

.blog-detail-page .section-title {
    font-family: var(--font-family-heading);
    font-size: 1.75rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 2rem;
    color: var(--theme-text-primary, #1f2937);
}

.blog-detail-page .related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* =============================================================================
   Search Form (Search Page)
   ============================================================================= */

.blog-page .search-form-wrapper {
    max-width: 600px;
    margin: 0 auto 2rem;
}

.blog-page .blog-search-form {
    display: flex;
    border: 2px solid var(--theme-border-light, #e5e7eb);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.blog-page .blog-search-form:focus-within {
    border-color: var(--theme-primary, #e43131);
}

.blog-page .search-input {
    flex: 1;
    padding: 1rem 1.25rem;
    border: none;
    font-size: 1rem;
    outline: none;
}

.blog-page .search-btn {
    padding: 1rem 1.25rem;
    background: var(--theme-primary, #e43131);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.blog-page .search-btn:hover {
    background: var(--theme-primary-dark, #c52a2a);
}

/* =============================================================================
   Responsive Design
   ============================================================================= */

@media (max-width: 1024px) {
    /* Blog grid: 2 columns on tablet */
    .blog-page .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .blog-detail-page .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .blog-page .featured-posts-grid {
        grid-template-columns: 1fr;
    }

    .blog-page .featured-post-main {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }

    .blog-page .featured-post-main .featured-post-image {
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    /* Blog grid: 1 column on mobile */
    .blog-page .blog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-detail-page .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-page .blog-title,
    .blog-detail-page .blog-title {
        font-size: 2rem;
    }

    .blog-page .blog-toolbar {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .blog-detail-page .blog-article {
        margin-bottom: 1.5rem;
    }

    .blog-detail-page .article-title {
        font-size: 1.75rem;
    }

    .blog-detail-page .article-header,
    .blog-detail-page .article-content,
    .blog-detail-page .article-tags,
    .blog-detail-page .comments-section {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .blog-detail-page .article-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .blog-detail-page .share-buttons {
        margin-top: 0.5rem;
    }

    .blog-detail-page .post-navigation {
        grid-template-columns: 1fr;
    }

    .blog-detail-page .form-row {
        grid-template-columns: 1fr;
    }

    .blog-detail-page .author-bio-section {
        flex-direction: column;
        text-align: center;
        margin: 0 1.25rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .blog-page .blog-header,
    .blog-detail-page .blog-header {
        padding: 1.5rem 0;
    }

    .blog-page .blog-title,
    .blog-detail-page .blog-title {
        font-size: 1.75rem;
    }

    .blog-page .featured-post-content {
        padding: 1rem;
    }

    .blog-page .featured-post-title {
        font-size: 1.25rem;
    }

    .blog-page .card-title,
    .blog-detail-page .card-title {
        font-size: 1.125rem;
    }

    .blog-detail-page .article-content {
        font-size: 1rem;
    }

    .blog-detail-page .comment {
        flex-direction: column;
    }

    .blog-detail-page .comment-avatar img {
        width: 40px;
        height: 40px;
    }
}