/* Blog index page - styles moved from inline for hint compliance */

.blog-nav-logo { height: 5rem; width: auto; }

.blog-hero-inner { text-align: center; }
.blog-hero-subtitle { text-align: center !important; margin-left: auto !important; margin-right: auto !important; max-width: 600px !important; }
.blog-hero-buttons { justify-content: center !important; align-items: center !important; }

.blog-section-intro { text-align: center; margin-bottom: 4rem; }

.blog-categories-section { background-color: var(--xeno-surface-subtle); }
.blog-category-card { text-align: center; }
.blog-category-icon { width: 4rem; height: 4rem; background: var(--xeno-accent-tint-bg); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; }
.blog-category-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.blog-category-card p { color: var(--xeno-n-500); margin-bottom: 1.5rem; }

.blog-newsletter-box { text-align: center; background: linear-gradient(135deg, var(--xeno-accent-tint-bg), var(--xeno-gradient-fade-white)); padding: 4rem 2rem; border-radius: 1rem; }
.blog-newsletter-box h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--xeno-n-800); }
.blog-newsletter-box .blog-newsletter-intro { font-size: 1.125rem; color: var(--xeno-n-500); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.blog-newsletter-form { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; max-width: 500px; margin: 0 auto; }
.blog-newsletter-input { flex: 1; min-width: 250px; }
.blog-newsletter-note { color: var(--xeno-n-500); font-size: 0.875rem; margin-top: 1rem; }

.blog-cta-section { background: linear-gradient(160deg, var(--xeno-cta-band-start) 0%, var(--xeno-cta-band-mid) 52%, var(--xeno-cta-band-end) 100%); color: var(--xeno-cta-band-text); }
.blog-cta-inner { text-align: center; }
.blog-cta-title { font-size: var(--xeno-fs-4xl); font-weight: 700; margin-bottom: 1.5rem; color: var(--xeno-cta-band-text); line-height: var(--xeno-lh-tight); letter-spacing: var(--xeno-letter-heading); }
.blog-cta-text { font-size: var(--xeno-fs-lg); margin-bottom: 2rem; max-width: var(--xeno-measure-prose); margin-left: auto; margin-right: auto; color: var(--xeno-cta-band-text-muted); line-height: var(--xeno-lh-body); }
.blog-cta-buttons { display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; }
.blog-cta-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--xeno-btn-gap);
    min-height: var(--xeno-btn-min-height);
    padding: var(--xeno-btn-on-dark-py) var(--xeno-btn-on-dark-px);
    border-radius: var(--xeno-btn-radius);
    font-weight: var(--xeno-btn-fw);
    font-size: var(--xeno-btn-on-dark-fs);
    line-height: var(--xeno-btn-leading);
    background: var(--xeno-btn-on-dark-bg);
    color: var(--xeno-btn-on-dark-fg);
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    border: 1px solid var(--xeno-btn-on-dark-border);
    box-shadow: var(--xeno-btn-on-dark-shadow);
    -webkit-tap-highlight-color: transparent;
}
.blog-cta-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--xeno-btn-on-dark-shadow-hover);
}
.blog-cta-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--xeno-btn-gap);
    min-height: var(--xeno-btn-min-height);
    padding: var(--xeno-btn-on-dark-py) var(--xeno-btn-on-dark-px);
    border-radius: var(--xeno-btn-radius);
    font-weight: var(--xeno-btn-fw);
    font-size: var(--xeno-btn-on-dark-fs);
    line-height: var(--xeno-btn-leading);
    border: 1px solid var(--xeno-btn-band-ghost-border);
    color: var(--xeno-btn-band-ghost-border);
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    background: var(--xeno-btn-band-ghost-bg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    -webkit-tap-highlight-color: transparent;
}
.blog-cta-btn-secondary:hover {
    background: var(--xeno-btn-band-ghost-hover);
    transform: translateY(-1px);
}
.blog-cta-note { color: rgba(255, 255, 255, 0.78); font-size: 0.875rem; }

.blog-footer-logo-wrap { display: flex; align-items: center; margin-bottom: 1rem; }
.blog-footer-logo { height: 3.5rem; width: auto; margin-right: 0.5rem; max-width: 180px; }
.blog-footer-tagline { color: var(--xeno-footer-muted); font-size: 0.875rem; }
.blog-footer-connect-intro { color: var(--xeno-footer-muted); font-size: 0.875rem; margin-bottom: 1rem; }
.blog-footer-connect { color: var(--xeno-footer-muted); font-size: 0.875rem; }
.blog-footer-connect p { margin-bottom: 0.5rem; }
.blog-footer-connect a { color: var(--xeno-footer-muted); text-decoration: none; }
.blog-footer-connect a:hover { text-decoration: underline; color: var(--xeno-footer-hover); }