/* ============================================
   PHOTO BLOWUP - Blog & Article Styles
   Version: 1.0.0
   ============================================ */

/* ---- Blog Layout ---- */
.blog-header {
    padding: calc(72px + var(--space-16)) 0 var(--space-12);
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border-light);
}
.blog-header .container { max-width: 800px; }
.blog-breadcrumb {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--font-size-sm); color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}
.blog-breadcrumb a { color: var(--color-primary); }
.blog-breadcrumb a:hover { text-decoration: underline; }
.blog-breadcrumb span { color: var(--color-text-muted); }
.blog-category {
    display: inline-block; padding: var(--space-1) var(--space-3);
    background: var(--color-primary-50); color: var(--color-primary);
    font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-full); margin-bottom: var(--space-4);
    text-transform: uppercase; letter-spacing: var(--letter-spacing-wider);
}
.blog-title {
    font-size: clamp(1.875rem, 4vw, 2.75rem);
    font-weight: var(--font-weight-extrabold); line-height: var(--line-height-tight);
    margin-bottom: var(--space-4);
}
.blog-meta {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    font-size: var(--font-size-sm); color: var(--color-text-muted);
}
.blog-meta-item { display: flex; align-items: center; gap: var(--space-1); }
.blog-meta svg { flex-shrink: 0; }
.blog-updated { color: var(--color-primary); font-weight: var(--font-weight-medium); }

/* ---- Article Content ---- */
.article-content {
    max-width: 800px; margin: 0 auto;
    padding: var(--space-16) var(--container-padding);
}
.article-content h2 {
    font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold);
    margin: var(--space-12) 0 var(--space-6); padding-top: var(--space-4);
    border-top: 1px solid var(--color-border-light);
}
.article-content h2:first-child { border-top: none; margin-top: 0; }
.article-content h3 {
    font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold);
    margin: var(--space-8) 0 var(--space-4);
}
.article-content p {
    font-size: var(--font-size-lg); line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary); margin-bottom: var(--space-6);
}
.article-content ul, .article-content ol {
    margin: var(--space-4) 0 var(--space-6); padding-left: var(--space-6);
}
.article-content li {
    font-size: var(--font-size-lg); line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary); margin-bottom: var(--space-3);
}
.article-content ul li { list-style: disc; }
.article-content ol li { list-style: decimal; }
.article-content strong { color: var(--color-text); font-weight: var(--font-weight-semibold); }
.article-content img {
    border-radius: var(--radius-xl); margin: var(--space-8) 0;
    border: 1px solid var(--color-border);
}
.article-content blockquote {
    margin: var(--space-8) 0; padding: var(--space-6);
    background: var(--color-primary-50); border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-style: italic; color: var(--color-text-secondary);
}
.article-content blockquote p { margin-bottom: 0; }
.article-content code {
    background: var(--color-bg-tertiary); padding: 2px 6px;
    border-radius: var(--radius-sm); font-size: 0.9em;
}
.article-content pre {
    background: var(--color-secondary); color: var(--color-text-inverse);
    padding: var(--space-6); border-radius: var(--radius-lg);
    overflow-x: auto; margin: var(--space-6) 0;
}
.article-content pre code { background: none; color: inherit; padding: 0; }

/* ---- Comparison Table (in articles) ---- */
.article-content .comparison-table {
    margin: var(--space-8) 0; font-size: var(--font-size-sm);
}
.article-content .comparison-table th {
    background: var(--color-bg-secondary);
}

/* ---- Key Takeaway Box ---- */
.key-takeaway {
    margin: var(--space-8) 0; padding: var(--space-6);
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
}
.key-takeaway-title {
    font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2);
}
.key-takeaway p { margin-bottom: 0; }

/* ---- CTA Box (in articles) ---- */
.article-cta {
    margin: var(--space-10) 0; padding: var(--space-8);
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-bg) 100%);
    border: 1px solid var(--color-primary-100); border-radius: var(--radius-2xl);
    text-align: center;
}
.article-cta-title {
    font-size: var(--font-size-xl); font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3);
}
.article-cta-text {
    font-size: var(--font-size-base); color: var(--color-text-secondary);
    margin-bottom: var(--space-6); max-width: 500px; margin-left: auto; margin-right: auto;
}

/* ---- Verdict Box ---- */
.verdict-box {
    margin: var(--space-10) 0; padding: var(--space-8);
    background: var(--color-bg); border: 2px solid var(--color-primary);
    border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg);
}
.verdict-title {
    font-size: var(--font-size-xl); font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4); color: var(--color-primary);
}
.verdict-winner {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4); background: var(--color-primary-50);
    border-radius: var(--radius-lg); margin-bottom: var(--space-4);
}
.verdict-winner-label {
    font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
    color: var(--color-primary); text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

/* ---- FAQ (in articles) ---- */
.article-faq { margin-top: var(--space-16); }
.article-faq h2 { text-align: center; border-top: none; }

/* ---- Related Posts ---- */
.related-posts {
    max-width: 800px; margin: 0 auto;
    padding: 0 var(--container-padding) var(--space-16);
}
.related-posts-title {
    font-size: var(--font-size-xl); font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-6); text-align: center;
}
.related-posts-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6);
}
.related-post-card {
    padding: var(--space-6); background: var(--color-bg);
    border: 1px solid var(--color-border); border-radius: var(--radius-xl);
    transition: all var(--transition-slow);
}
.related-post-card:hover { border-color: var(--color-primary-100); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.related-post-category {
    font-size: var(--font-size-xs); color: var(--color-primary);
    font-weight: var(--font-weight-semibold); text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider); margin-bottom: var(--space-2);
}
.related-post-title {
    font-size: var(--font-size-base); font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-2); line-height: var(--line-height-snug);
}
.related-post-title a:hover { color: var(--color-primary); }
.related-post-excerpt {
    font-size: var(--font-size-sm); color: var(--color-text-muted);
    line-height: var(--line-height-normal);
}

/* ---- Blog Listing ---- */
.blog-listing { padding: var(--space-16) 0; }
.blog-listing-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8);
}
.blog-listing-card {
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--radius-2xl); overflow: hidden;
    transition: all var(--transition-slow);
}
.blog-listing-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-4px); }
.blog-listing-card-image {
    aspect-ratio: 16/9; overflow: hidden;
}
.blog-listing-card-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--transition-slow);
}
.blog-listing-card:hover .blog-listing-card-image img { transform: scale(1.05); }
.blog-listing-card-content { padding: var(--space-6); }
.blog-listing-card-category {
    display: inline-block; font-size: var(--font-size-xs); color: var(--color-primary);
    font-weight: var(--font-weight-semibold); text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider); margin-bottom: var(--space-3);
}
.blog-listing-card-title {
    font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-3); line-height: var(--line-height-snug);
}
.blog-listing-card-title a:hover { color: var(--color-primary); }
.blog-listing-card-excerpt {
    font-size: var(--font-size-sm); color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed); margin-bottom: var(--space-4);
}
.blog-listing-card-meta {
    font-size: var(--font-size-xs); color: var(--color-text-muted);
    display: flex; align-items: center; gap: var(--space-3);
}

/* ---- Sidebar (optional) ---- */
.article-layout {
    display: grid; grid-template-columns: 1fr 280px; gap: var(--space-12);
    max-width: 1100px; margin: 0 auto;
    padding: var(--space-12) var(--container-padding);
}
.article-sidebar {
    position: sticky; top: calc(72px + var(--space-8)); align-self: start;
}
.toc-title {
    font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-4); text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider); color: var(--color-text-muted);
}
.toc-list { display: flex; flex-direction: column; gap: var(--space-2); }
.toc-link {
    display: block; padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm); color: var(--color-text-secondary);
    border-left: 2px solid var(--color-border-light); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: all var(--transition-fast);
}
.toc-link:hover { color: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-50); }

/* ---- Author Box ---- */
.author-box {
    margin: var(--space-12) 0; padding: var(--space-8);
    background: var(--color-bg-secondary); border-radius: var(--radius-2xl);
    display: flex; gap: var(--space-6); align-items: flex-start;
}
.author-avatar-img {
    flex-shrink: 0; width: 80px; height: 80px;
    border-radius: var(--radius-full); object-fit: cover;
    border: 3px solid var(--color-primary-100);
}
.author-name { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--space-1); }
.author-role { font-size: var(--font-size-sm); color: var(--color-primary); margin-bottom: var(--space-3); }
.author-bio { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: var(--line-height-relaxed); }

/* ---- Table of Contents ---- */
.toc {
    margin: var(--space-8) 0; padding: var(--space-6);
    background: var(--color-bg-secondary); border-radius: var(--radius-xl);
    border: 1px solid var(--color-border-light);
}
.toc-title {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--font-size-lg); font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4); color: var(--color-text);
}
.toc-list {
    margin: 0; padding-left: var(--space-6);
    list-style-type: decimal;
}
.toc-list li {
    margin-bottom: var(--space-2); font-size: var(--font-size-sm);
}
.toc-list a {
    color: var(--color-text-secondary); text-decoration: none;
    transition: color 0.2s;
}
.toc-list a:hover { color: var(--color-primary); }

/* ---- People Also Ask (PAA) ---- */
.paa-section { margin: var(--space-12) 0; }
.paa-section h2 {
    font-size: var(--font-size-xl); font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-6); text-align: center;
    border-top: none; padding-top: 0;
}
.paa-list { display: flex; flex-direction: column; gap: var(--space-3); }
.paa-item {
    background: var(--color-bg-secondary); border: 1px solid var(--color-border);
    border-radius: var(--radius-xl); overflow: hidden;
    transition: border-color 0.2s;
}
.paa-item.active { border-color: var(--color-primary-100); }
.paa-question {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); padding: var(--space-5) var(--space-6);
    background: none; border: none; cursor: pointer; text-align: left;
    font-size: var(--font-size-base); font-weight: var(--font-weight-semibold);
    color: var(--color-text); line-height: var(--line-height-snug);
    font-family: inherit;
}
.paa-question:hover { color: var(--color-primary); }
.paa-icon {
    flex-shrink: 0; transition: transform 0.3s;
    color: var(--color-text-muted);
}
.paa-item.active .paa-icon { transform: rotate(180deg); color: var(--color-primary); }
.paa-answer {
    padding: 0 var(--space-6) var(--space-5);
    font-size: var(--font-size-base); line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}
.paa-answer[hidden] { display: none; }

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .article-layout { grid-template-columns: 1fr; }
    .article-sidebar { display: none; }
    .related-posts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .blog-listing-grid { grid-template-columns: 1fr; }
    .related-posts-grid { grid-template-columns: 1fr; }
    .author-box { flex-direction: column; text-align: center; align-items: center; }
    .blog-title { font-size: var(--font-size-2xl); }
    .toc { padding: var(--space-4); }
}