@import url('blog.css');

/* ===== Single article (blog post) ===== */
.article-hero{
  position:relative;
  min-height:340px;
  display:flex;
  align-items:flex-end;
  background-size:cover;
  background-position:center;
  color:#fff;
}
.article-hero::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.72) 100%);
}
.article-hero .container{position:relative;z-index:2;padding-top:90px;padding-bottom:42px;}
.article-hero .blog-cat{margin-bottom:14px;}
.article-hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.9rem,4vw,3rem);
  line-height:1.15;
  max-width:900px;
  margin:0;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.article-hero .article-meta{margin-top:14px;font-size:.95rem;opacity:.92;}
.article-back{
  display:inline-block;margin-bottom:18px;color:#fff;text-decoration:none;
  font-weight:600;font-size:.92rem;opacity:.9;
}
.article-back:hover{opacity:1;}

.article-prose{font-size:1.06rem;line-height:1.8;color:#2a2a2a;}
.article-prose .lead{font-size:1.2rem;line-height:1.7;color:#444;font-weight:500;margin-bottom:1.4em;}
.article-prose h2{
  font-family:'Playfair Display',serif;
  font-size:1.7rem;line-height:1.25;margin:1.6em 0 .5em;color:#0f172a;
}
.article-prose h3{font-size:1.22rem;margin:1.3em 0 .4em;color:#1e293b;font-weight:700;}
.article-prose p{margin:0 0 1.1em;}
.article-prose ul,.article-prose ol{margin:0 0 1.2em 1.3em;}
.article-prose li{margin-bottom:.5em;}
.article-prose a{color:#e8602c;font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.article-prose a:hover{color:#c4471a;}
.article-prose strong{color:#0f172a;}
.article-prose img{max-width:100%;border-radius:14px;margin:1.2em 0;}
.article-prose blockquote{
  border-left:4px solid #e8602c;margin:1.4em 0;padding:.4em 0 .4em 1.2em;
  font-style:italic;color:#475569;
}
.article-cta{
  margin-top:2.4em;padding:28px;border-radius:18px;
  background:linear-gradient(135deg,#0f172a,#1e3a5f);color:#fff;text-align:center;
}
.article-cta h3{color:#fff;font-family:'Playfair Display',serif;margin:0 0 .4em;font-size:1.5rem;}
.article-cta p{opacity:.9;margin:0 0 1.2em;}
@media(max-width:760px){
  .article-hero{min-height:260px;}
  .article-prose{font-size:1.02rem;}
}