/* ==========================================
   BLOG — Page styles (full file)
   - Lava-lamp background (static)
   - Split underline hero
   - Blog cards + typography
   - Buttons
   - Responsive
========================================== */

/* Use global tokens from styles.css:
   --green, --red, --yellow, --purple, --blue, --nav-h, etc. */

/* Page background (match other pages) */
main::before{
  content:"";
  position:fixed;
  inset:-25vmax;
  z-index:-1;
  background:
    radial-gradient(35vmax 35vmax at 20% 30%, var(--green,#0abe67) 0 38%, transparent 60%),
    radial-gradient(32vmax 32vmax at 80% 22%, var(--red,#fd2f18)   0 38%, transparent 60%),
    radial-gradient(40vmax 40vmax at 52% 77%, var(--yellow,#fece00)0 38%, transparent 60%),
    radial-gradient(30vmax 30vmax at 14% 74%, var(--purple,#97448c)0 38%, transparent 60%),
    radial-gradient(36vmax 36vmax at 86% 70%, var(--blue,#1888de)  0 38%, transparent 60%);
  filter: blur(28px) saturate(115%);
  opacity:.28;
  background-color:#fff;
  pointer-events:none;
}

/* Hero spacing under fixed navbar */
.blog-hero{
  padding: calc(var(--nav-h, 96px) + clamp(18px, 4.5vh, 48px)) 0 clamp(12px, 3.5vh, 28px);
  text-align:center;
  background:transparent;
}

/* Split heading underline (reuse style) */
.split-text--section{
  position:relative; display:flex; justify-content:center; gap:.5rem; flex-wrap:wrap;
  padding-bottom:14px;
}
.split-text--section span{
  display:inline-block; opacity:1; transform:none;
}
.split-text--section::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:140px; height:6px; border-radius:999px;
  transform:translateX(-50%); transform-origin:center;
  background:
    linear-gradient(90deg,
      var(--green,#0abe67) 0 20%,
      var(--red,#fd2f18)   20% 40%,
      var(--yellow,#fece00)40% 60%,
      var(--purple,#97448c)60% 80%,
      var(--blue,#1888de)  80% 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}

/* Layout helpers */
.content-narrow{ width:min(980px, 92vw); margin-inline:auto; }

/* Blog cards */
.blog-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.10);
  padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1rem, 3vw, 2rem);
}

/* Typography */
.blog-card h1,
.blog-card h2,
.blog-card h3,
.blog-card h4,
.blog-card h5,
.blog-card h6{
  font-weight: 900;
  line-height:1.2;
  margin:0 0 .35rem;
}
.blog-title{
  position:relative; display:inline-block; padding-bottom:10px;
  margin:0 0 .25rem;
}
.blog-title::after{
  content:"";
  position:absolute; left:50%; bottom:0; width:120px; height:6px;
  border-radius:999px; transform:translateX(-50%);
  background: linear-gradient(90deg, var(--green,#0abe67), var(--yellow,#fece00), var(--blue,#1888de));
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}
.blog-kicker{ font-size:1.05rem; }

.blog-body{
  margin-top:.75rem;
  font-size:1.1rem;
  line-height:1.85;
  color:#1f2937;
  text-align:justify;
  hyphens:auto;
}
.blog-body p{ margin:0 0 1rem; }

.blog-list{ margin:.5rem 0 1.25rem 1.15rem; padding:0; }
.blog-list > li{ margin:.5rem 0 .9rem; }
.blog-list h4, .blog-body h3{
  font-size:1.15rem; font-weight:900; line-height:1.35; color:#0f172a; margin-bottom:.25rem;
}

/* Quotes */
.quote{
  margin:1.1rem 0; padding:.9rem 1rem;
  background: linear-gradient(180deg, rgba(10,190,103,.06), rgba(24,136,222,.05));
  border-left:6px solid var(--green,#0abe67);
  border-radius:12px; text-align:left;
}
.quote p{ margin:0 0 .4rem; color:#0f172a; }
.quote footer{ font-size:.95rem; color:#475569; }

/* Buttons (reuse read more style) */
.btn-read-more{
  background-color: var(--green, #0abe67);
  color:#fff; border:0; border-radius:12px;
  font-weight:800; letter-spacing:.2px;
  padding:.75rem 1.25rem; text-decoration:none;
  box-shadow:0 12px 28px rgba(10,190,103,.25);
}
.btn-read-more:hover,
.btn-read-more:focus{
  background-color:#089454; color:#fff; text-decoration:none;
  box-shadow:0 16px 36px rgba(10,190,103,.33);
}

/* Responsive */
@media (max-width: 768px){
  .blog-card{ border-radius:14px; padding: clamp(.9rem, 3.2vw, 1.25rem) clamp(.9rem, 4vw, 1.6rem); }
  .blog-body{ font-size:1.06rem; }
}
@media (max-width: 575.98px){
  .blog-body{ font-size:1.04rem; }
}