/* ==========================================================
   ROW Recall — Blog (blog.rowrecall.com)
   Blog-specific styles extending the main design system.
   Design tokens come from variables.css (loaded via main.css).
   Version : 1.0
========================================================== */

/* ==========================================================
   Article (post) layout
========================================================== */

.blog-article{
    max-width:780px;
    margin:0 auto;
}

.blog-article .article-header{
    margin-bottom:48px;
}

.blog-article .article-header h1{
    font-size:clamp(1.9rem, 4vw, 3rem);
    line-height:1.15;
    letter-spacing:-.02em;
    margin:16px 0 20px;
    color:var(--text);
}

.blog-article .article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px 24px;
    align-items:center;
    color:var(--text-muted);
    font-size:.9rem;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    padding:14px 0;
    margin-top:24px;
}

.blog-article .article-meta .meta-item{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.blog-article .article-meta .tag{
    display:inline-block;
    padding:2px 10px;
    border-radius:999px;
    font-size:.72rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--secondary);
    background:rgba(0,200,255,.08);
    border:1px solid rgba(0,200,255,.2);
}

/* ==========================================================
   Article prose (reading experience)
========================================================== */

.article-body{
    font-size:1.08rem;
    line-height:1.75;
    color:var(--text-secondary);
}

.article-body h2{
    font-family:var(--font-heading);
    font-size:1.55rem;
    color:var(--text);
    margin:48px 0 16px;
    letter-spacing:-.01em;
    line-height:1.3;
}

.article-body h3{
    font-family:var(--font-heading);
    font-size:1.25rem;
    color:var(--text);
    margin:36px 0 12px;
    line-height:1.35;
}

.article-body p{
    margin:0 0 20px;
}

.article-body a{
    color:var(--secondary);
    text-decoration:underline;
    text-underline-offset:3px;
}

.article-body a:hover{
    color:var(--secondary-light);
}

.article-body ul,
.article-body ol{
    margin:0 0 24px;
    padding-left:24px;
}

.article-body li{
    margin:8px 0;
}

.article-body strong{
    color:var(--text);
}

.article-body blockquote{
    margin:28px 0;
    padding:18px 22px;
    border-left:3px solid var(--primary);
    background:var(--bg-card);
    border-radius:0 var(--radius-sm) var(--radius-sm) 0;
    color:var(--text);
    font-style:normal;
}

.article-body blockquote p{
    margin:0;
}

.article-body code{
    font-family:var(--font-code);
    font-size:.92em;
    background:var(--bg-card-light);
    border:1px solid var(--border);
    border-radius:6px;
    padding:2px 6px;
    color:var(--secondary-light);
}

.article-body pre{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:20px;
    overflow-x:auto;
    margin:0 0 24px;
}

.article-body pre code{
    background:none;
    border:none;
    padding:0;
    color:var(--text-secondary);
}

.article-body table{
    width:100%;
    border-collapse:collapse;
    margin:0 0 24px;
    font-size:.95rem;
}

.article-body th,
.article-body td{
    text-align:left;
    padding:12px 14px;
    border:1px solid var(--border);
}

.article-body th{
    background:var(--bg-card-light);
    color:var(--text);
    font-weight:600;
}

.article-body tr:nth-child(even) td{
    background:var(--bg-card);
}

/* ==========================================================
   Inline CTA block
========================================================== */

.blog-cta{
    margin-top:56px;
    padding:32px;
    border-radius:var(--radius-md);
    background:var(--bg-card);
    border:1px solid var(--border);
    text-align:center;
    position:relative;
    overflow:hidden;
}

.blog-cta::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:2px;
    background:var(--gradient-primary);
}

.blog-cta h3{
    font-family:var(--font-heading);
    font-size:1.4rem;
    margin:0 0 8px;
    color:var(--text);
}

.blog-cta p{
    color:var(--text-muted);
    margin:0 0 20px;
}

.blog-cta .btn{
    margin:0 6px;
}

/* ==========================================================
   Author box
========================================================== */

.blog-author{
    display:flex;
    gap:16px;
    align-items:center;
    margin-top:40px;
    padding:20px;
    border-radius:var(--radius-sm);
    background:var(--bg-card);
    border:1px solid var(--border);
}

.blog-author .author-avatar{
    width:52px;
    height:52px;
    border-radius:var(--radius-round);
    background:var(--gradient-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight:700;
    font-family:var(--font-heading);
    flex-shrink:0;
}

.blog-author .author-name{
    font-weight:600;
    color:var(--text);
}

.blog-author .author-role{
    color:var(--text-muted);
    font-size:.9rem;
}

/* ==========================================================
   Newsletter capture
========================================================== */

.blog-newsletter{
    margin-top:40px;
    padding:24px;
    border-radius:var(--radius-md);
    background:
        radial-gradient(circle at top right, rgba(124,92,255,.15), transparent 50%),
        var(--bg-card);
    border:1px solid var(--border);
    text-align:center;
}

.blog-newsletter h3{
    font-family:var(--font-heading);
    margin:0 0 6px;
    color:var(--text);
}

.blog-newsletter p{
    color:var(--text-muted);
    margin:0 0 16px;
    font-size:.95rem;
}

.blog-newsletter form{
    display:flex;
    gap:10px;
    max-width:460px;
    margin:0 auto;
    flex-wrap:wrap;
    justify-content:center;
}

.blog-newsletter input[type="email"]{
    flex:1 1 240px;
    padding:12px 16px;
    border-radius:var(--radius-sm);
    background:var(--bg-card-light);
    border:1px solid var(--border);
    color:var(--text);
    font-family:var(--font-primary);
}

.blog-newsletter input[type="email"]:focus{
    outline:none;
    border-color:var(--primary);
}

/* ==========================================================
   Blog pagination / more posts
========================================================== */

.blog-more{
    margin-top:56px;
    padding-top:32px;
    border-top:1px solid var(--border);
}

.blog-more h3{
    font-family:var(--font-heading);
    margin:0 0 24px;
    color:var(--text);
    text-align:center;
}

/* ==========================================================
   Blog home hero + subscription card tweaks
========================================================== */

.blog-hero-sub{
    max-width:560px;
    margin:16px auto 0;
}

@media (max-width:768px){
    .blog-article .article-meta{
        gap:8px 16px;
    }
    .blog-cta .btn{
        margin:6px;
    }
}