/* ==========================================
   BLOG ARTICLE PAGE STYLES
   ========================================== */

.blog-article-page .blog-article-hero{
  padding:clamp(2.6rem, 7vw, 4.4rem) 0 1.8rem;
}

.blog-article-page .blog-article-hero .container{
  background:
    radial-gradient(circle at 12% 18%, rgba(199,154,58,0.18) 0, transparent 36%),
    radial-gradient(circle at 84% 82%, rgba(15,59,47,0.2) 0, transparent 42%),
    linear-gradient(135deg, #ffffff 0%, #faf6ef 52%, #f4faf6 100%);
  border:1px solid rgba(199,154,58,0.28);
  border-radius:26px;
  box-shadow:var(--shadow-lg);
  padding:clamp(1.3rem, 3.2vw, 2.3rem);
}

.blog-article-page .blog-article-hero h1{
  margin-bottom:.55rem;
  line-height:1.15;
}

.blog-article-page .blog-article-hero .lede{
  margin:0;
  max-width:72ch;
  color:var(--text-soft);
  font-size:clamp(1rem, 1.8vw, 1.15rem);
}

.blog-article-shell{
  display:grid;
  grid-template-columns:minmax(0, 2.4fr) minmax(240px, 1fr);
  gap:1.25rem;
  padding-bottom:3.2rem;
}

.blog-article{
  background:#fff;
  border:1px solid rgba(15,59,47,0.12);
  border-radius:24px;
  box-shadow:var(--shadow);
  padding:clamp(1.1rem, 2.4vw, 2rem);
}

.blog-published{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
  background:rgba(199,154,58,0.14);
  color:var(--text);
  border-radius:999px;
  padding:.4rem .75rem;
  font-weight:700;
  font-size:.86rem;
  margin:0 0 1rem;
}

.blog-cover{
  margin:0 0 1.2rem;
}

.blog-cover img{
  width:100%;
  height:auto;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(15,59,47,0.16);
  display:block;
}

.blog-article p{
  font-size:1.06rem;
  line-height:1.76;
  overflow-wrap:anywhere;
}

.blog-article a,
.blog-side-list a{
  overflow-wrap:anywhere;
}

.blog-article h2{
  margin-top:1.4rem;
  margin-bottom:.55rem;
  font-size:clamp(1.25rem, 2.2vw, 1.65rem);
}

.blog-article blockquote{
  margin:1.2rem 0;
  padding:1rem 1.1rem;
  border-left:4px solid var(--accent);
  background:linear-gradient(135deg, rgba(199,154,58,0.14), rgba(15,59,47,0.06));
  border-radius:0 14px 14px 0;
}

.blog-article blockquote p{
  margin:0;
  font-style:italic;
  color:var(--text);
}

.blog-article-cta{
  margin-top:1.5rem;
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
}

.blog-article-cta .btn,
.blog-side-card .btn{
  white-space:normal;
}

.blog-article-side{
  align-self:start;
  position:sticky;
  top:96px;
  display:grid;
  gap:1rem;
}

.blog-side-card{
  background:#fff;
  border:1px solid rgba(15,59,47,0.1);
  border-radius:18px;
  box-shadow:var(--shadow-sm);
  padding:1rem;
}

.blog-side-card h3{
  font-size:1.05rem;
  margin-bottom:.6rem;
}

.blog-side-list{
  list-style:none;
  display:grid;
  gap:.5rem;
  margin:0;
  padding:0;
}

.blog-side-list a{
  color:var(--text-soft);
  text-decoration:none;
  font-weight:600;
}

.blog-side-list a:hover{
  color:var(--accent-2);
}

@media (max-width:1040px){
  .blog-article-shell{
    grid-template-columns:1fr;
  }

  .blog-article-side{
    position:static;
    grid-template-columns:1fr;
  }
}

@media (max-width:920px){
  .blog-article-page .blog-article-hero{
    padding:1.8rem 0 1rem;
  }

  .blog-article-page .blog-article-hero .container{
    padding:1.1rem;
  }

  .blog-article-shell{
    gap:1rem;
  }

  .blog-article-cta .btn,
  .blog-side-card .btn{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:760px){
  .blog-article-page .blog-article-hero .container,
  .blog-article{
    border-radius:18px;
  }

  .blog-article-shell{
    gap:1rem;
  }

  .blog-article-side{
    grid-template-columns:1fr;
  }

  .blog-article p{
    font-size:1rem;
  }

  .blog-article-cta .btn,
  .blog-side-card .btn{
    width:100%;
    justify-content:center;
  }
}