/**
 * Blog Styles - viepriveemondroit.com
 * Modern, full-width layout using design system variables
 * Dark/Light mode support
 */

/* === Base Blog Styles === */
body.template-blogindexpage,
body.template-blogpage {
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    line-height: var(--leading-relaxed, 1.625);
    color: var(--text-primary);
    background: var(--bg-primary);
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.template-blogpage {
    line-height: var(--leading-loose, 2);
}

/* === Blog Index Page === */

/* Hero / Page Header — Full width */
.blog-hero{
    background: linear-gradient(135deg, var(--brand-gradient-start, #0a4f8f) 0%, var(--brand-gradient-mid, #0a3a6b) 50%, var(--brand-gradient-end, #0b1730) 100%);
    color: #ffffff;
    padding: var(--spacing-4xl, 6rem) var(--spacing-lg, 1.5rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.blog-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

.blog-hero__content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.blog-hero h1{
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-tight, 1.25);
    margin-bottom: var(--spacing-md, 1rem);
    color: #ffffff;
}

.blog-hero .intro {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    opacity: 0.9;
    line-height: var(--leading-relaxed, 1.625);
    max-width: 600px;
    margin: 0 auto;
}

.blog-hero .intro p {
    margin: 0;
}

/* Main Content Container */
.blog-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--spacing-2xl, 3rem) var(--spacing-lg, 1.5rem);
}

/* Discovery sections (categories, tags) */
.discovery-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl, 0.75rem);
    padding: var(--spacing-lg, 1.5rem) var(--spacing-xl, 2rem);
    margin-bottom: var(--spacing-xl, 2rem);
    transition: background-color 0.3s ease;
}

.discovery-title {
    color: var(--text-primary);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-md, 1rem);
}

/* Chips (tags, categories) */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
}

.chip {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    border: 1px solid var(--border-primary);
    transition: all 0.2s ease;
}

.chip:hover {
    background: var(--site-primary);
    color: var(--text-inverse);
    border-color: var(--site-primary);
    text-decoration: none;
}

.chip--active {
    background: var(--site-primary);
    color: var(--text-inverse);
    border-color: var(--site-primary);
}

/* Articles Grid */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: var(--spacing-xl, 2rem);
}

/* Article Card */
.article-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl, 0.75rem);
    padding: var(--spacing-xl, 2rem);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.article-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    border-color: var(--site-primary);
}

.article-card h2 {
    font-size: var(--text-xl, 1.25rem);
    font-weight: var(--font-semibold, 600);
    line-height: var(--leading-snug, 1.375);
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.article-card h2 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.article-card h2 a:hover {
    color: var(--site-primary);
    text-decoration: none;
}

.article-meta {
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-md, 1rem);
    display: flex;
    gap: var(--spacing-md, 1rem);
    flex-wrap: wrap;
}

.article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.article-intro {
    color: var(--text-secondary);
    line-height: var(--leading-relaxed, 1.625);
    margin-bottom: var(--spacing-md, 1rem);
    flex-grow: 1;
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--site-primary);
    text-decoration: none;
    font-weight: var(--font-semibold, 600);
    font-size: var(--text-sm, 0.875rem);
    transition: gap 0.2s ease, color 0.2s ease;
}

.read-more:hover {
    color: var(--site-primary-dark);
    gap: 0.625rem;
    text-decoration: none;
}

/* Category Badge */
.category-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: var(--site-accent-light);
    color: var(--site-primary);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--spacing-sm, 0.5rem);
}

html.dark .category-badge,
html[data-theme="dark"] .category-badge {
    background: var(--dm-bg-tertiary);
    color: var(--site-accent);
}

.featured-badge {
    background: #fef3c7;
    color: #92400e;
}

html.dark .featured-badge,
html[data-theme="dark"] .featured-badge {
    background: #78350f;
    color: #fef3c7;
}

.article-tags {
    margin-bottom: var(--spacing-sm, 0.5rem);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    margin-top: var(--spacing-2xl, 3rem);
    padding-top: var(--spacing-xl, 2rem);
    border-top: 1px solid var(--border-primary);
}

.pagination a,
.pagination span {
    padding: 0.625rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg, 0.5rem);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: var(--font-medium, 500);
    font-size: var(--text-sm, 0.875rem);
    transition: all 0.2s ease;
}

.pagination a:hover {
    background: var(--site-primary);
    color: var(--text-inverse);
    border-color: var(--site-primary);
    text-decoration: none;
}

.pagination span.current {
    background: var(--site-primary);
    color: var(--text-inverse);
    border-color: var(--site-primary);
}

/* === Blog Article Page === */

/* Article Container */
.article-container {
    max-width: 100%;
    margin: 0 auto;
}

/* Back Link */
.back-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-medium, 500);
    padding: var(--spacing-lg, 1.5rem) var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--site-primary);
    text-decoration: none;
}

/* Article Wrapper */
.article-container article {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

/* Article Header — Full Width */
.article-header{
    background: linear-gradient(135deg, var(--brand-gradient-start, #0a4f8f) 0%, var(--brand-gradient-mid, #0a3a6b) 50%, var(--brand-gradient-end, #0b1730) 100%);
    color: #ffffff;
    padding: var(--spacing-4xl, 6rem) var(--spacing-lg, 1.5rem) var(--spacing-3xl, 4rem);
    position: relative;
    overflow: hidden;
}

.article-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.article-header-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.article-header h1{
    font-size: clamp(1.75rem, 4.5vw, 3rem);
    font-weight: var(--font-bold, 700);
    line-height: var(--leading-tight, 1.25);
    margin-bottom: var(--spacing-lg, 1.5rem);
    color: #ffffff;
}

.article-header .article-meta{
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md, 1rem);
    font-size: var(--text-sm, 0.875rem);
    opacity: 0.85;
    color: #ffffff;
}

.article-header .article-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.article-header .category-badge{
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
}

/* Article Intro Strip */
.article-intro {
    padding: var(--spacing-xl, 2rem) var(--spacing-lg, 1.5rem);
    max-width: 800px;
    margin: 0 auto;
    font-size: var(--text-lg, 1.125rem);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed, 1.625);
    border-bottom: 1px solid var(--border-primary);
}

/* Article Body */
.article-body {
    padding: var(--spacing-2xl, 3rem) var(--spacing-lg, 1.5rem);
    max-width: 800px;
    margin: 0 auto;
}

.article-body h2 {
    color: var(--text-primary);
    font-size: var(--text-2xl, 1.5rem);
    font-weight: var(--font-bold, 700);
    margin: var(--spacing-2xl, 3rem) 0 var(--spacing-md, 1rem);
    padding-bottom: var(--spacing-sm, 0.5rem);
    border-bottom: 2px solid var(--border-primary);
}

.article-body h2:first-child {
    margin-top: 0;
}

.article-body p {
    margin-bottom: var(--spacing-lg, 1.5rem);
    color: var(--text-primary);
    font-size: var(--text-base, 1rem);
    line-height: var(--leading-loose, 2);
}

.article-body a {
    color: var(--site-primary);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.article-body a:hover {
    color: var(--site-primary-dark);
}

.article-body blockquote {
    margin: var(--spacing-xl, 2rem) 0;
    padding: var(--spacing-lg, 1.5rem) var(--spacing-xl, 2rem);
    background: var(--bg-secondary);
    border-left: 4px solid var(--site-primary);
    font-style: italic;
    color: var(--text-secondary);
    border-radius: 0 var(--radius-lg, 0.5rem) var(--radius-lg, 0.5rem) 0;
}

.article-body pre,
.article-body code {
    font-family: var(--font-mono, "SF Mono", Monaco, Consolas, monospace);
}

.article-body pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: var(--spacing-lg, 1.5rem);
    border-radius: var(--radius-lg, 0.5rem);
    overflow-x: auto;
    font-size: var(--text-sm, 0.875rem);
    margin: var(--spacing-lg, 1.5rem) 0;
    border: 1px solid var(--border-primary);
}

.article-body :not(pre) > code {
    padding: 0.125rem 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm, 0.125rem);
    font-size: 0.9em;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg, 0.5rem);
    margin: var(--spacing-lg, 1.5rem) 0;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

/* Tags Section */
.tags-section {
    padding: var(--spacing-lg, 1.5rem);
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid var(--border-primary);
}

.tags-section h3 {
    font-size: var(--text-sm, 0.875rem);
    color: var(--text-tertiary);
    margin-bottom: var(--spacing-sm, 0.5rem);
    font-weight: var(--font-medium, 500);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: var(--site-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-medium, 500);
}

.tag-link {
    text-decoration: none;
}

.tag-link:hover .tag {
    background: var(--site-primary-dark);
}

/* Share Section */
.share-section {
    padding: var(--spacing-xl, 2rem) var(--spacing-lg, 1.5rem);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    border-top: 1px solid var(--border-primary);
}

.share-section h3 {
    font-size: var(--text-base, 1rem);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm, 0.5rem);
    font-weight: var(--font-semibold, 600);
}

.share-section__hint {
    color: var(--text-tertiary);
    font-size: var(--text-sm, 0.875rem);
}

/* Related Articles */
.related-section {
    padding: var(--spacing-xl, 2rem) var(--spacing-lg, 1.5rem);
    max-width: 800px;
    margin: 0 auto;
    border-top: 1px solid var(--border-primary);
}

.related-section h3 {
    color: var(--text-primary);
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--font-semibold, 600);
    margin-bottom: var(--spacing-md, 1rem);
}

.related-links {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.related-links li {
    padding: var(--spacing-sm, 0.5rem) 0;
    border-bottom: 1px solid var(--border-primary);
}

.related-links li:last-child {
    border-bottom: none;
}

.related-links a {
    color: var(--site-primary);
    text-decoration: none;
    font-weight: var(--font-medium, 500);
    transition: color 0.2s;
}

.related-links a:hover {
    color: var(--site-primary-dark);
    text-decoration: underline;
}

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

/* Mobile — stack cards in single column */
@media (max-width: 640px) {
    .blog-hero {
        padding: var(--spacing-2xl, 3rem) var(--spacing-md, 1rem);
    }

    .blog-content {
        padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem);
    }

    .articles-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md, 1rem);
    }

    .article-card {
        padding: var(--spacing-lg, 1.5rem);
    }

    .article-header {
        padding: var(--spacing-2xl, 3rem) var(--spacing-md, 1rem) var(--spacing-xl, 2rem);
    }

    .article-body,
    .article-intro,
    .tags-section,
    .share-section,
    .related-section {
        padding-left: var(--spacing-md, 1rem);
        padding-right: var(--spacing-md, 1rem);
    }

    .back-link {
        padding-left: var(--spacing-md, 1rem);
        padding-right: var(--spacing-md, 1rem);
    }
}

/* Tablet — 2-column cards */
@media (min-width: 641px) and (max-width: 1024px) {
    .articles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large screens */
@media (min-width: 1920px) {
    .blog-content {
        max-width: 1600px;
    }

    .blog-hero {
        padding: var(--spacing-4xl, 6rem) var(--spacing-xl, 2rem);
    }

    .articles-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}