/* ===========================================
   Article Styles — Uzun Digital Insights
   =========================================== */

/* These extend the base site styles for long-form articles */
.article-header { padding:9rem 2.5rem 3rem; max-width:780px; margin:0 auto; }
.article-header .breadcrumb { font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); margin-bottom:2rem; }
.article-header .breadcrumb a { color:var(--gold); }
.article-header .breadcrumb a:hover { text-decoration:underline; }
.article-meta-bar { display:flex; gap:1rem; align-items:center; margin-bottom:1.5rem; flex-wrap:wrap; }
.article-tag { font-size:0.55rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); background:var(--gold-dim); padding:0.25rem 0.6rem; border-radius:1px; }
.article-date { font-size:0.72rem; color:var(--text-dim); }
.article-reading { font-size:0.72rem; color:var(--text-dim); }
.article-header h1 { font-family:var(--serif); font-size:clamp(2rem,4vw,3rem); font-weight:300; line-height:1.15; }
.article-header h1 em { font-style:italic; color:var(--gold); }
.article-header .article-intro { margin-top:1.5rem; font-size:1.05rem; color:var(--text-muted); line-height:1.8; }

.article-hero { width:100%; max-height:450px; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.article-hero img { width:100%; height:100%; object-fit:cover; max-height:450px; }

.article-content { max-width:720px; margin:0 auto; padding:3.5rem 2.5rem 5rem; }
.article-content h2 { font-family:var(--serif); font-size:1.7rem; font-weight:400; line-height:1.25; margin:3rem 0 1rem; color:var(--text); }
.article-content h2:first-child { margin-top:0; }
.article-content h2 em { font-style:italic; color:var(--gold); }
.article-content h3 { font-family:var(--sans); font-size:1.05rem; font-weight:600; margin:2.25rem 0 0.5rem; color:var(--text); }
.article-content img { height:auto; border-radius:3px; margin:1rem 0; }
.article-content p { color:var(--text-muted); line-height:1.9; margin-bottom:1.25rem; font-size:0.95rem; }
.article-content p strong { color:var(--text); font-weight:500; }
.article-content ul, .article-content ol { padding-left:1.5rem; margin-bottom:1.5rem; }
.article-content li { color:var(--text-muted); line-height:1.8; margin-bottom:0.5rem; font-size:0.95rem; }
.article-content li strong { color:var(--text); font-weight:500; }
.article-content blockquote { border-left:2px solid var(--gold); padding:1rem 1.5rem; margin:2rem 0; background:var(--gold-dim); border-radius:0 2px 2px 0; }
.article-content blockquote p { color:var(--text); font-style:italic; margin-bottom:0; }

/* Callout box */
.article-callout { background:var(--bg-card); border:1px solid var(--border); border-radius:3px; padding:2rem; margin:2rem 0; position:relative; overflow:hidden; }
.article-callout::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--gold), transparent 80%); }
.article-callout h4 { font-family:var(--serif); font-size:1.1rem; font-weight:400; margin-bottom:0.5rem; color:var(--gold); }
.article-callout p { margin-bottom:0; font-size:0.88rem; }

/* CTA at end of article */
.article-cta { text-align:center; padding:4rem 2.5rem; background:var(--bg-elevated); border-top:1px solid var(--border); }
.article-cta h3 { font-family:var(--serif); font-size:1.6rem; font-weight:300; margin-bottom:0.75rem; }
.article-cta h3 em { font-style:italic; color:var(--gold); }
.article-cta p { color:var(--text-muted); font-size:0.9rem; max-width:480px; margin:0 auto 1.5rem; line-height:1.7; }
.article-cta .btn-primary { display:inline-flex; align-items:center; gap:0.5rem; padding:0.9rem 2rem; background:var(--gold); color:var(--bg); font-family:var(--sans); font-size:0.88rem; font-weight:600; border:none; border-radius:1px; cursor:pointer; transition:all 0.3s; }
.article-cta .btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 12px 40px rgba(201,168,76,0.2); }

/* Related articles */
.related-articles { max-width:1000px; margin:0 auto; padding:4rem 2.5rem; }
.related-articles h3 { font-family:var(--serif); font-size:1.4rem; font-weight:400; margin-bottom:2rem; }
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.related-card { background:var(--bg-card); border:1px solid var(--border); border-radius:2px; padding:1.5rem; transition:all 0.3s; }
.related-card:hover { border-color:rgba(201,168,76,0.2); transform:translateY(-2px); }
.related-card .r-tag { font-size:0.5rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); margin-bottom:0.5rem; display:block; }
.related-card h4 { font-family:var(--serif); font-size:1.05rem; font-weight:400; line-height:1.3; margin-bottom:0.5rem; }
.related-card:hover h4 { color:var(--gold); }
.related-card p { font-size:0.78rem; color:var(--text-dim); line-height:1.6; }

@media (max-width:900px) {
  .article-header { padding:7rem 1.5rem 2rem; }
  .article-content { padding:2.5rem 1.5rem 3.5rem; }
  .related-articles { padding:2.5rem 1.5rem; }
  .related-grid { grid-template-columns:1fr; }
  .article-cta { padding:3rem 1.5rem; }
}