/* ============================================
   ARTICLE PAGE STYLES - Julien Martel
   ============================================ */

/* --- ARTICLE HERO --- */
.article-hero {
    padding-top: clamp(140px, 20vw, 200px);
    padding-bottom: var(--space-xl);
    background-color: var(--color-bg-alt);
}

.article-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.article-hero__category {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-accent);
}

.article-hero__date {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
}

.article-hero__date::before {
    content: '•';
    margin-right: var(--space-sm);
    color: var(--color-border);
}

.article-hero__title {
    margin-bottom: var(--space-sm);
    max-width: 900px;
}

.article-hero__excerpt {
    font-size: var(--fs-md);
    color: var(--color-text-light);
    max-width: 700px;
}

/* --- ARTICLE FEATURED IMAGE --- */
.article-featured {
    margin-top: calc(var(--space-xl) * -1);
    padding-bottom: var(--space-lg);
}

.article-featured__image-wrapper {
    max-width: 1000px;
    margin-inline: auto;
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.article-featured__image {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* --- ARTICLE CONTENT --- */
.article-content {
    padding-block: var(--space-lg);
}

.article-content__container {
    max-width: 800px;
}

.article-content h2 {
    font-size: var(--fs-xl);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    color: var(--color-text);
}

.article-content h3 {
    font-size: var(--fs-lg);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.article-content p {
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-md);
    color: var(--color-text-light);
}

.article-content p:first-child {
    font-size: var(--fs-md);
    color: var(--color-text);
}

.article-content ul,
.article-content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-md);
}

.article-content ul {
    list-style: disc;
}

.article-content ol {
    list-style: decimal;
}

.article-content li {
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    margin-bottom: var(--space-xs);
    color: var(--color-text-light);
}

.article-content blockquote {
    margin-block: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    border-left: 3px solid var(--color-accent);
    background-color: var(--color-bg-alt);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-style: italic;
    color: var(--color-text);
}

.article-content blockquote p {
    margin-bottom: 0;
    font-size: inherit;
    color: inherit;
}

.article-content strong {
    font-weight: var(--fw-semibold);
    color: var(--color-text);
}

/* --- ARTICLE IMAGE --- */
.article-image {
    margin-block: var(--space-lg);
}

.article-image__wrapper {
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.article-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.article-image__caption {
    margin-top: var(--space-xs);
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    text-align: center;
    font-style: italic;
}

/* --- ARTICLE IMAGE WIDE --- */
.article-image--wide {
    margin-left: calc(-1 * var(--section-padding-x));
    margin-right: calc(-1 * var(--section-padding-x));
}

@media (min-width: 800px) {
    .article-image--wide {
        margin-left: -100px;
        margin-right: -100px;
    }
}

/* --- ARTICLE TIPS BOX --- */
.article-tips {
    margin-block: var(--space-lg);
    padding: var(--space-md);
    background-color: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}

.article-tips__title {
    font-family: var(--font-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.article-tips ul {
    margin-bottom: 0;
}

/* --- AUTHOR BOX --- */
.author-box {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.author-box__avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
}

.author-box__content {
    flex: 1;
}

.author-box__label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3xs);
}

.author-box__name {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    margin-bottom: var(--space-2xs);
}

.author-box__bio {
    font-size: var(--fs-sm);
    color: var(--color-text-light);
    margin-bottom: 0;
}

/* --- RELATED ARTICLES --- */
.related-articles {
    background-color: var(--color-bg-alt);
}

.related-articles__header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.related-articles__title {
    font-size: var(--fs-xl);
}

.related-articles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 480px) {
    .related-articles__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .related-articles__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* --- BREADCRUMBS --- */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--fs-xs);
    margin-bottom: var(--space-md);
}

.breadcrumb__link {
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover {
    color: var(--color-accent);
}

.breadcrumb__separator {
    color: var(--color-border);
}

.breadcrumb__current {
    color: var(--color-text);
}

/* --- BACK TO BLOG --- */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
    margin-bottom: var(--space-md);
}

.back-link:hover {
    color: var(--color-accent);
}

.back-link__arrow {
    font-size: 1.2em;
    transition: transform var(--transition-fast);
}

.back-link:hover .back-link__arrow {
    transform: translateX(-4px);
}

/* --- CTA SECTION (reused from blog.css) --- */
.cta-section__title {
    margin-bottom: var(--space-xs);
}

.cta-section__subtitle {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-style: italic;
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
}