/* Blog Styles - Modern Minimalist Design */

/* Blog Container */
.blog {
    background: #ffffff;  /* Pure white background */
}

.blog__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-padding-inline);
}

.blog-detail__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--section-padding-inline);
    position: relative;
    z-index: 1;
}

.blog__wrapper {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;  /* More generous spacing */
    padding: var(--space-4xl) 0;
}

.blog__breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: var(--fs-sm);
    color: var(--c-font-400);
    margin-bottom: 1rem;
}

.blog__breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.blog__breadcrumbs a:hover {
    color: var(--c-primary-600);
}

.blog__breadcrumbs--light {
    color: rgba(255, 255, 255, 0.8);
}

.blog__breadcrumbs--light a:hover {
    color: white;
}

.blog__breadcrumbs-sep {
    opacity: 0.7;
}

/* Blog Hero Section - Clean & Minimalist */
.blog__hero {
    background: #ffffff;  /* Clean white background */
    padding: 5rem var(--section-padding-inline) 3rem;
    text-align: center;
    border-bottom: 1px solid var(--c-primary-100);  /* Subtle separator */
}

.blog__hero::before,
.blog__hero::after {
    display: none;  /* Remove decorative overlays */
}

.blog__hero-content {
    max-width: var(--max-width);
    margin: 0 auto;
}

.blog__hero-title {
    font-family: var(--ff-title);
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--c-font-500);  /* Dark text */
}

.blog__hero-subtitle {
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 400;  /* Lighter weight */
    max-width: 600px;
    margin: 0 auto;
    color: var(--c-font-400);  /* Muted gray */
}

/* Blog Category Header - Clean */
.blog__category-header {
    background: #ffffff;
    padding: 4rem 0 3rem;
    border-bottom: 1px solid var(--c-primary-100);
}

.blog__category-info {
    text-align: center;
}

.blog__category-badge {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: transparent;
    border: 1.5px solid currentColor;
    color: inherit;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    box-shadow: none;
}

.blog__category-title {
    font-family: var(--ff-title);
    font-size: clamp(2.25rem, 3vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--c-font-500);
}

.blog__category-description {
    font-size: 1.125rem;
    color: var(--c-font-400);
    max-width: 800px;
    margin: 0 auto;
}

/* Blog Sidebar - Subtle */
.blog__sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-self: start;
}

.blog__widget {
    background: #ffffff;
    border: 1px solid var(--c-primary-100);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    box-shadow: none;  /* No shadow by default */
}

.blog__widget:hover {
    box-shadow: none;  /* No hover effect */
}

.blog__widget-title {
    font-family: var(--ff-title);
    font-size: 1rem;  /* Smaller, less prominent */
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--c-font-500);
}

/* Blog Search */
.blog__search-form {
    display: flex;
    gap: 0.5rem;
}

.blog__search-input {
    flex: 1;
    padding: 0.625rem 1rem;
    border: 1px solid var(--c-primary-150);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--c-font-500);
    background: #ffffff;
    transition: border-color var(--transition-fast);
}

.blog__search-input:focus {
    outline: none;
    border-color: var(--c-primary-400);
}

.blog__search-btn {
    padding: 0.625rem 1rem;
    background: var(--c-font-500);  /* Dark button */
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background-color var(--transition-fast);
}

.blog__search-btn svg {
    fill: currentColor;
}

.blog__search-btn:hover {
    background: var(--c-font-400);  /* Lighter on hover */
}

/* Blog Categories */
.blog__category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog__category-item {
    margin-bottom: 0.5rem;
}

.blog__category-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    color: var(--c-font-500);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.blog__category-link:hover,
.blog__category-link.active {
    background: var(--c-primary-050);
    color: var(--c-primary-600);
}

.blog__category-link.active {
    font-weight: 600;
}

.blog__category-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

/* Blog Recent Posts */
.blog__recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog__recent-item {
    margin-bottom: 1rem;
}

.blog__recent-link {
    display: flex;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.blog__recent-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-primary-100);
}

.blog__recent-content {
    flex: 1;
}

.blog__recent-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--c-font-500);
}

.blog__recent-link:hover .blog__recent-title {
    color: var(--c-primary-400);
}

.blog__recent-date {
    font-size: 0.75rem;
    color: var(--c-font-400);
}

/* Blog Main Content */
.blog__main {
    min-width: 0;
}

/* Blog Top Story - Minimalist */
.blog__top-story {
    background: #ffffff;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);  /* Minimal shadow */
    margin-bottom: 4rem;  /* More spacing */
    border: none;  /* No border */
}

.blog__top-story-image {
    position: relative;
    height: clamp(320px, 40vw, 480px);
    background: var(--c-primary-050);
    overflow: hidden;
}

.blog__top-story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.blog__top-story:hover .blog__top-story-image img {
    transform: scale(1.01);  /* Subtle zoom */
    opacity: 0.95;
}

.blog__top-story-overlay {
    position: static;  /* Not absolute */
    padding: 1rem 2rem 0;
}

.blog__top-story-category {
    display: inline-block;
    background: transparent;
    border: 1.5px solid currentColor;
    color: var(--c-font-500);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none;
}

.blog__top-story-content {
    padding: 2.5rem;  /* More padding */
}

.blog__top-story-title {
    font-family: var(--ff-title);
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;  /* More spacing */
}

.blog__top-story-title a {
    color: inherit;
    text-decoration: none;
}

.blog__top-story-title a:hover {
    color: var(--c-primary-400);
}

.blog__top-story-excerpt {
    font-size: 1.125rem;
    color: var(--c-font-400);
    margin-bottom: 1rem;
}

.blog__top-story-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--c-font-400);
    flex-wrap: wrap;
}

/* Blog Featured Section */
.blog__featured {
    margin-bottom: 2rem;
}

.blog__section-title {
    font-family: var(--ff-title);
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--c-font-500);
}

.blog__featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;  /* More spacing */
}

.blog__featured-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);  /* Minimal shadow */
    border: none;  /* No border */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow var(--transition-base);
}

.blog__featured-card:hover {
    transform: none;  /* No translateY */
    box-shadow: var(--shadow-md);  /* Subtle elevation */
}

.blog__featured-card:hover .blog__featured-image img {
    transform: scale(1.01);  /* Subtle zoom */
    opacity: 0.95;
}

.blog__featured-card:hover .blog__featured-image::after {
    display: none;  /* No overlay */
}

.blog__featured-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    height: 100%;
    flex-direction: column;
}

.blog__featured-image {
    height: 200px;
    background: var(--c-primary-050);
    position: relative;
    overflow: hidden;
}

.blog__featured-image::after {
    display: none;  /* Remove overlay gradient */
}

.blog__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.blog__featured-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog__featured-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: transparent;
    border: 1.5px solid currentColor;
    color: var(--c-font-500);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0.75rem;
    box-shadow: none;
}

.blog__featured-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--c-font-500);
}

.blog__featured-excerpt {
    color: var(--c-font-400);
    margin-bottom: 1rem;
    flex: 1;
}

.blog__featured-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--c-font-400);
    flex-wrap: wrap;
}

/* Blog Posts Grid */
.blog__posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2.5rem;  /* More generous spacing */
}

.blog__post-card {
    background: #ffffff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);  /* Minimal shadow */
    border: none;  /* No border */
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow var(--transition-base);
}

.blog__post-card:hover {
    transform: none;  /* No translateY */
    box-shadow: var(--shadow-md);  /* Subtle elevation */
}

.blog__post-card:hover .blog__post-image img {
    transform: scale(1.01);  /* Subtle zoom */
    opacity: 0.95;
}

.blog__post-card:hover .blog__post-image::after {
    display: none;  /* No overlay */
}

.blog__post-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog__post-image {
    height: 200px;
    background: var(--c-primary-050);
    position: relative;
    overflow: hidden;
}

.blog__post-image::after {
    display: none;  /* Remove overlay gradient */
}

.blog__post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base), opacity var(--transition-base);
}

.blog__post-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog__post-category {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: transparent;
    border: 1.5px solid currentColor;
    color: var(--c-font-500);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0.75rem;
    box-shadow: none;
}

.blog__post-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--c-font-500);
}

.blog__post-excerpt {
    color: var(--c-font-400);
    margin-bottom: 1rem;
    flex: 1;
}

.blog__post-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--c-font-400);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.blog__meta-reading {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.blog__meta-reading svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    opacity: 0.8;
}

.blog__post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog__tag {
    background: var(--c-primary-050);
    color: var(--c-font-500);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    border: none;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all var(--transition-fast);
    letter-spacing: 0.01em;
}

.blog__tag:hover {
    background: var(--c-primary-100);
    color: var(--c-primary-600);
}

/* Blog Pagination - Subtle */
.blog__pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-primary-100);
}

.blog__pagination-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;  /* No white background */
    border: 1px solid var(--c-primary-200);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--c-font-500);
    transition: all var(--transition-fast);
}

.blog__pagination-link svg {
    fill: currentColor;
}

.blog__pagination-link:hover {
    background: var(--c-primary-050);  /* Subtle background */
    color: var(--c-primary-600);
    border-color: var(--c-primary-400);
}

.blog__pagination-info {
    color: var(--c-font-400);
}

/* Blog Empty State */
.blog__empty {
    text-align: center;
    padding: 3rem;
    color: var(--c-font-400);
    border: 1px dashed var(--c-primary-150);
    border-radius: var(--radius-md);
    background: var(--c-primary-050);
}

/* Blog Detail Article - Ensure proper flow */
.blog-detail {
    position: relative;
    z-index: 1;
    min-height: auto;
    overflow: visible;
}

/* Blog Detail - Clean Hero */
.blog-detail__hero {
    background: #ffffff;
    margin-bottom: 3rem;
    position: relative;
    z-index: 1;
}

.blog-detail__hero-image {
    height: clamp(360px, 50vh, 540px);
    overflow: hidden;
    background: var(--c-primary-050);
}

.blog-detail__hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-detail__hero-overlay {
    display: none;  /* Remove overlay */
}

.blog-detail__hero-content {
    padding: 3rem 0 2rem;  /* Not positioned absolute */
    color: var(--c-font-500);  /* Dark text */
    text-shadow: none;  /* No shadow */
}

.blog-detail__category {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    background: transparent;
    border: 1.5px solid currentColor;
    color: inherit;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    box-shadow: none;
}

.blog-detail__title {
    font-family: var(--ff-title);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--c-font-500);
}

.blog-detail__meta {
    display: flex;
    gap: 1rem;  /* Reduced gap */
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.9375rem;  /* Slightly larger */
    color: var(--c-font-400);
}

.blog-detail__author {
    font-weight: 500;  /* Lighter weight */
}

.blog-detail__author-title {
    opacity: 1;
    font-size: 0.875rem;
    font-weight: 400;
}

.blog-detail__info {
    display: flex;
    gap: 1rem;
    font-size: 0.9375rem;
    opacity: 1;
    flex-wrap: wrap;
}

.blog-detail__wrapper {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 3rem;
    padding: var(--section-padding-block) 0;
    min-height: auto;
}

.blog-detail__main {
    min-width: 0;
}

.blog-detail__excerpt {
    background: transparent;  /* No background */
    border: none;  /* No border */
    border-left: 3px solid var(--c-primary-400);
    padding: 0 2rem;  /* Left padding only */
    margin-bottom: 3rem;  /* More spacing */
    font-size: 1.3125rem;  /* Larger */
    font-style: normal;  /* Not italic */
    color: var(--c-font-400);
    line-height: 1.6;
}

.blog-detail__content {
    font-size: 1.25rem;  /* Larger for better readability */
    line-height: 2;  /* Increased from 1.8 */
    max-width: 680px;  /* Optimal reading width */
    margin: 0 auto 3rem;  /* Center content */
    color: var(--c-font-500);
}

.blog-detail__content h2,
.blog-detail__content h3,
.blog-detail__content h4 {
    font-family: var(--ff-title);
    color: var(--c-font-500);
}

.blog-detail__content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 3rem;  /* More space before */
    margin-bottom: 1rem;
    line-height: 1.2;
}

.blog-detail__content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.blog-detail__content h4 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.blog-detail__content p {
    margin-bottom: 1.5rem;  /* More spacing between paragraphs */
}

.blog-detail__content a {
    color: var(--c-primary-400);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.blog-detail__content a:hover {
    color: var(--c-primary-600);
}

.blog-detail__content ul,
.blog-detail__content ol {
    padding-left: 1.5rem;
    margin-bottom: 2rem;  /* More spacing */
}

.blog-detail__content li + li {
    margin-top: 0.75rem;  /* More spacing between items */
}

.blog-detail__content figure {
    margin: 3rem 0;  /* More spacing */
}

.blog-detail__content figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--c-font-400);
    text-align: center;
}

.blog-detail__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: none;  /* No shadow */
    margin: 2.5rem 0;
}

.blog-detail__content iframe {
    max-width: 100%;
    border-radius: var(--radius-md);
    border: 0;
}

.blog-detail__content blockquote {
    margin: 2.5rem 0;  /* More spacing */
    padding: 1.5rem 2rem;
    background: transparent;  /* No background */
    border-left: 3px solid var(--c-primary-400);  /* Thinner border */
    border-radius: 0;
    font-style: italic;
    color: var(--c-font-500);  /* Darker */
    font-size: 1.1875rem;  /* Slightly larger */
}

.blog-detail__content hr {
    border: none;
    height: 1px;
    background: var(--c-primary-100);
    margin: 3rem 0;
}

.blog-detail__content strong {
    color: var(--c-font-500);
    font-weight: 600;
}

.blog-detail__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2.5rem 0;  /* More spacing */
    font-size: 0.95rem;
}

.blog-detail__content th,
.blog-detail__content td {
    border: 1px solid var(--c-primary-150);  /* Lighter border */
    padding: 1rem;  /* More padding */
    text-align: left;
}

.blog-detail__content thead {
    background: var(--c-primary-050);  /* Very subtle */
}

.blog-detail__tags {
    margin-bottom: 3rem;
}

.blog-detail__tags h4 {
    font-family: var(--ff-title);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--c-font-500);
}

.blog-detail__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-detail__tag {
    background: var(--c-primary-600);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color var(--transition-fast);
}

.blog-detail__tag:hover {
    background: var(--c-primary-500);
}

.blog-detail__share {
    margin-bottom: 3rem;
    padding: 2rem 0;  /* Simplified padding */
    background: transparent;  /* No gradient */
    border-top: 1px solid var(--c-primary-100);
    border-bottom: 1px solid var(--c-primary-100);
    border-radius: 0;
}

.blog-detail__share h4 {
    font-family: var(--ff-title);
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--c-font-500);
}

.blog-detail__share-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.blog-detail__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--c-primary-200);
    border-radius: var(--radius-md);
    background: white;
    text-decoration: none;
    color: var(--c-font-500);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.blog-detail__share-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.blog-detail__share-btn:hover {
    transform: none;  /* No translateY */
    opacity: 0.9;
}

.blog-detail__share-btn--linkedin {
    background: white;
    color: var(--c-font-500);
}

.blog-detail__share-btn--twitter {
    background: white;
    color: var(--c-font-500);
}

.blog-detail__share-btn--facebook {
    background: white;
    color: var(--c-font-500);
}

.blog-detail__share-btn--email {
    background: white;
    color: var(--c-font-500);
}

.blog-detail__nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 3rem;
    padding: 2rem 0;  /* Simplified padding */
    background: transparent;  /* No background */
    border-top: 1px solid var(--c-primary-100);
    border-bottom: 1px solid var(--c-primary-100);
    border-radius: 0;
}

.blog-detail__nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--c-font-500);
    flex: 1;
    padding: 1rem 1.5rem;
    background: var(--c-primary-050);  /* Subtle background */
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

.blog-detail__nav-link svg {
    fill: currentColor;
}

.blog-detail__nav-link:hover {
    background: var(--c-primary-100);  /* Slightly darker */
}

.blog-detail__nav-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--c-primary-400);
}

.blog-detail__nav-title {
    font-weight: 500;  /* Lighter */
    color: var(--c-font-500);
}

/* Blog Detail Sidebar */
.blog-detail__sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-self: start;
}

.blog-detail__widget {
    background: #ffffff;
    border: 1px solid var(--c-primary-100);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    box-shadow: none;
}

.blog-detail__widget-title {
    font-family: var(--ff-title);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--c-font-500);
}

.blog-detail__author-info {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.blog-detail__author-avatar {
    width: 60px;
    height: 60px;
    background: var(--c-primary-050);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c-font-400);
    border: 1px solid var(--c-primary-100);
}

.blog-detail__author-avatar svg {
    fill: currentColor;
}

.blog-detail__author-details h4 {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
    color: var(--c-font-500);
}

.blog-detail__author-details p {
    color: var(--c-font-400);
    font-size: 0.875rem;
}

.blog-detail__category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-detail__category-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    color: var(--c-font-500);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.blog-detail__category-link:hover {
    background: var(--c-primary-050);
    color: var(--c-primary-600);
}

.blog-detail__category-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.blog-detail__related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-detail__related-item {
    margin-bottom: 1rem;
}

.blog-detail__related-link {
    display: flex;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
}

.blog-detail__related-link:hover h4 {
    color: var(--c-primary-400);
}

.blog-detail__related-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-primary-100);
}

.blog-detail__related-content {
    flex: 1;
}

.blog-detail__related-content h4 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--c-font-500);
}

.blog-detail__related-content span {
    font-size: 0.75rem;
    color: var(--c-font-400);
}

.blog-detail__widget--cta {
    background: var(--gradient-primary);  /* Keep gradient for CTA */
    color: white;
    text-align: center;
    box-shadow: var(--shadow-primary);
}

.blog-detail__widget--cta h3 {
    margin-bottom: 1rem;
}

.blog-detail__widget--cta p {
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.blog-detail__cta-button.button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

@media (min-width: 993px) {
    .blog__sidebar,
    .blog-detail__sidebar {
        position: sticky;
        top: 6.5rem;
    }
}

/* Responsive Design - Improved */
@media (max-width: 992px) {
    .blog__wrapper,
    .blog-detail__wrapper {
        grid-template-columns: 1fr;
    }

    .blog__sidebar,
    .blog-detail__sidebar {
        order: -1;
    }

    .blog__container,
    .blog-detail__container {
        padding: 0 var(--space-xl);  /* Adjusted padding */
    }

    .blog__wrapper {
        gap: 2rem;  /* Reduced gap */
    }

    .blog__featured-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .blog__posts-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .blog__hero {
        padding: 3rem var(--space-lg) 2rem;
    }

    .blog__hero-title {
        font-size: 2rem;
    }

    .blog__hero-subtitle {
        font-size: 1rem;
    }

    .blog__category-title {
        font-size: 2rem;
    }

    .blog-detail__hero {
        height: auto;
    }

    .blog-detail__hero-image {
        height: 300px;
    }

    .blog-detail__title {
        font-size: 2rem;
    }

    .blog-detail__content {
        font-size: 1.125rem;  /* Smaller on mobile */
        line-height: 1.8;  /* Slightly tighter */
    }

    .blog-detail__meta {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .blog-detail__nav {
        flex-direction: column;
    }

    .blog__pagination {
        flex-direction: column;
        gap: 1rem;
    }

    .blog__posts-grid {
        gap: 1.5rem;  /* Tighter on mobile */
    }
}

@media (max-width: 576px) {
    .blog__container,
    .blog-detail__container {
        padding: 0 var(--space-lg);
    }

    .blog__posts-grid {
        grid-template-columns: 1fr;
    }

    .blog__featured-grid {
        grid-template-columns: 1fr;
    }

    .blog__post-content,
    .blog__featured-content {
        padding: 1.25rem;  /* Reduced padding */
    }

    .blog-detail__share-buttons {
        flex-direction: column;
    }

    .blog-detail__share-btn {
        justify-content: center;  /* Center content on mobile */
    }
}

/* ===========================
   Newsletter Widget Styles
   =========================== */

.newsletter-widget {
    background: linear-gradient(135deg, var(--c-primary-050) 0%, var(--c-primary-100) 100%);
    border: 1px solid var(--c-primary-200);
}

.newsletter-widget__description {
    font-size: 0.875rem;
    color: var(--c-font-400);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.newsletter-form__group {
    margin-bottom: 0.75rem;
}

.newsletter-form__input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--c-primary-200);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    transition: border-color var(--transition-fast);
    background: white;
    font-family: inherit;
}

.newsletter-form__input:focus {
    outline: none;
    border-color: var(--c-primary-400);
    box-shadow: 0 0 0 3px rgba(var(--c-primary-400-rgb, 0, 123, 255), 0.1);
}

.newsletter-form__input::placeholder {
    color: var(--c-font-300);
}

.newsletter-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.newsletter-form__checkbox input[type="checkbox"] {
    margin-top: 0.125rem;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--c-primary-400);
}

.newsletter-form__checkbox label {
    margin: 0;
    flex: 1;
    word-wrap: break-word;
}

.newsletter-form__checkbox a {
    color: var(--c-primary-500);
    text-decoration: none;
    font-weight: 500;
}

.newsletter-form__checkbox a:hover {
    color: var(--c-primary-600);
    text-decoration: underline;
}

.newsletter-form__submit {
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: var(--c-primary-400);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color var(--transition-fast);
    font-family: inherit;
}

.newsletter-form__submit:hover {
    background: var(--c-primary-600);
}

.newsletter-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.newsletter-form__message {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    display: none;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.newsletter-form__message--success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
    display: block;
}

.newsletter-form__message--error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
    display: block;
}

/* Newsletter Widget Responsive */
@media (max-width: 768px) {
    .newsletter-widget {
        margin-bottom: 1.5rem;
    }

    .newsletter-form__input {
        font-size: 1rem; /* Larger for mobile */
    }
}

/* ===========================
   Enhanced Share Buttons
   =========================== */

.blog-detail__share {
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 1px solid var(--c-primary-100);
    border-bottom: 1px solid var(--c-primary-100);
}

.blog-detail__share h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--c-font-500);
}

.blog-detail__share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.blog-detail__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--c-primary-200);
    border-radius: var(--radius-md);
    background: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--c-font-500);
    font-family: inherit;
}

.blog-detail__share-btn:hover {
    background: var(--c-primary-050);
    border-color: var(--c-primary-300);
}

.blog-detail__share-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

/* Platform-specific colors */
.blog-detail__share-btn--linkedin:hover {
    background: #0077b5;
    border-color: #0077b5;
    color: white;
}

.blog-detail__share-btn--twitter:hover {
    background: #000000;
    border-color: #000000;
    color: white;
}

.blog-detail__share-btn--facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: white;
}

.blog-detail__share-btn--whatsapp:hover {
    background: #25d366;
    border-color: #25d366;
    color: white;
}

.blog-detail__share-btn--copy:hover {
    background: var(--c-primary-400);
    border-color: var(--c-primary-400);
    color: white;
}

.share-count {
    padding: 0.125rem 0.5rem;
    background: var(--c-primary-100);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c-primary-600);
    min-width: 24px;
    text-align: center;
}

/* Floating Share Bar */
.floating-share {
    position: fixed;
    left: 2rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    z-index: 100;
}

.floating-share.visible {
    opacity: 1;
    visibility: visible;
}

.floating-share__btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid var(--c-primary-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
    color: var(--c-font-500);
}

.floating-share__btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.floating-share__btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Platform-specific colors for floating buttons */
.floating-share__btn[data-platform="linkedin"]:hover {
    background: #0077b5;
    border-color: #0077b5;
    color: white;
}

.floating-share__btn[data-platform="twitter"]:hover {
    background: #000000;
    border-color: #000000;
    color: white;
}

.floating-share__btn[data-platform="facebook"]:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: white;
}

.floating-share__btn#floating-copy-btn:hover {
    background: var(--c-primary-400);
    border-color: var(--c-primary-400);
    color: white;
}

/* Responsive - Hide floating bar on mobile/tablet */
@media (max-width: 1200px) {
    .floating-share {
        display: none;
    }
}

@media (max-width: 576px) {
    .blog-detail__share-buttons {
        flex-direction: column;
    }

    .blog-detail__share-btn {
        justify-content: center;
        width: 100%;
    }
}