/* ==========================================================================
   AI Lensly V2 — Guide Article Styles
   Single post / guide article page.
   Currently inherits from base + components; add guide-specific styles here.
   ========================================================================== */

/* --- Guide Article --- */
.guide-wrapper {
    max-width: var(--content-max);
    margin: 0 auto;
}

.guide-content {
    max-width: var(--content-max);
    line-height: var(--line-height-relaxed);
}

.article-header {
    margin-bottom: var(--space-xl);
}

.article-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-sm);
}

.article-excerpt {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

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

.article-content {
    line-height: var(--line-height-relaxed);
}

.article-content h2 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.article-content h3 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.article-content p {
    margin-bottom: var(--space-md);
}

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

.article-content li {
    margin-bottom: var(--space-xs);
}

/* --- Related Section --- */
.article-related,
.article-selection-advice {
    margin-top: var(--space-2xl);
}

.selection-advice-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.selection-advice-list li {
    margin-bottom: var(--space-sm);
}

.selection-advice-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: var(--font-weight-medium);
}

.selection-arrow {
    color: var(--color-text-muted);
}