/**
 * Blog Article Styles
 * 
 * Shared styles for blog article pages. These styles provide consistent
 * formatting and layout for blog posts across the site.
 */

.article-page {
    padding: var(--space-32) var(--space-4) var(--space-16);
    min-height: calc(100vh - 80px);
    position: relative;
    z-index: var(--z-base);
}

.article-page__container {
    max-width: 960px;
    margin: 0 auto;
}

.article-header {
    margin-bottom: var(--space-10);
    display: grid;
    gap: var(--space-3);
}

/* Inline SVG icons (vanilla; no Font Awesome) */
.article-header__eyebrow-icon,
.article-header__meta-icon,
.article-back__icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: var(--space-1);
    flex-shrink: 0;
}

.article-back .article-back__icon {
    margin-right: var(--space-2);
}

.article-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-blue-10);
    color: var(--color-blue);
    font-weight: 600;
    width: fit-content;
}

[data-theme="dark"] .article-header__eyebrow {
    background: var(--color-blue-light-12);
    color: var(--color-link-on-dark);
}

.article-header__title {
    font-size: clamp(2.25rem, 4vw, 3rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--color-text-primary);
}

[data-theme="dark"] .article-header__title {
    color: var(--color-text-on-dark);
}

.article-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

[data-theme="dark"] .article-header__meta {
    color: var(--color-text-primary);
}

.article-body__lede {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--color-text-primary);
    margin-bottom: var(--space-6);
}

[data-theme="dark"] .article-body__lede {
    color: var(--color-text-on-dark);
}

.article-body {
    background: var(--white-60);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: 0 12px 32px var(--black-08);
    border: 1px solid var(--color-blue-10);
    display: grid;
    gap: var(--space-8);
}

[data-theme="dark"] .article-body {
    background: var(--color-neutral-900-96);
    box-shadow: 0 12px 32px var(--black-30);
    border-color: var(--color-blue-light-18);
}

/* -----------------------------------------------
   Rich text zone — tag selectors are intentional here.
   .article-section contains authored editorial content
   where adding BEM classes to every heading and paragraph
   is impractical. This is an accepted exception to BEM,
   consistent with the "prose content" pattern used across
   design systems for rich text areas.
   ----------------------------------------------- */
.article-section h2 {
    font-size: var(--text-2xl);
    font-weight: 700;
    margin-bottom: var(--space-3);
    color: var(--color-blue);
}

[data-theme="dark"] .article-section h2 {
    color: var(--color-link-on-dark);
}

.article-section h3 {
    font-size: var(--text-xl);
    font-weight: 700;
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

[data-theme="dark"] .article-section h3 {
    color: var(--color-text-on-dark);
}

.article-section p,
.article-section li {
    color: var(--color-text-primary);
    line-height: 1.7;
}

[data-theme="dark"] .article-section p,
[data-theme="dark"] .article-section li {
    color: var(--color-text-on-dark);
}
/* End rich text zone ----------------------------------------------- */

.article-list {
    padding-left: var(--space-6);
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
    margin-bottom: var(--space-4);
}

.article-image {
    width: 100%;
    max-width: 600px;
    margin: var(--space-6) auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 8px 24px var(--black-12);
}

[data-theme="dark"] .article-image {
    box-shadow: 0 8px 24px var(--black-40);
}

.article-image__img {
    width: 100%;
    height: auto;
    display: block;
}

.article-image-caption {
    padding: var(--space-3) var(--space-4);
    background: var(--color-blue-05);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-style: italic;
    text-align: center;
    border-top: 1px solid var(--color-blue-10);
}

[data-theme="dark"] .article-image-caption {
    background: var(--color-blue-light-08);
    color: var(--color-text-primary);
    border-color: var(--color-blue-light-15);
}

.article-meta-highlight {
    background: var(--color-blue-08);
    border-left: 4px solid var(--color-blue);
    padding: var(--space-4) var(--space-5);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    display: grid;
    gap: var(--space-2);
}

[data-theme="dark"] .article-meta-highlight {
    background: var(--color-blue-light-12);
    border-color: var(--color-blue-light);
}

.article-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.article-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-blue);
    text-decoration: none;
    font-weight: 600;
}

.article-back:hover {
    text-decoration: underline;
}

[data-theme="dark"] .article-back {
    color: var(--color-link-on-dark);
}

@media (max-width: 768px) {
    .article-page {
        padding: var(--space-20) var(--space-4) var(--space-12);
    }

    .article-body {
        padding: var(--space-6);
    }
}