/* Blog article body — scoped to .rich-blog so it only affects article content */

.rich-blog {
  max-width: 680px;
}

.rich-blog p {
  opacity: 1;
  letter-spacing: 0;
  font-size: 1.06rem;
  line-height: 1.75;
  font-weight: 400;
  margin-bottom: 1.4em;
}

/* Opening paragraph gets a touch more presence */
.rich-blog p:first-child {
  font-size: 1.18rem;
  line-height: 1.7;
  color: #fff;
}

.rich-blog h2 {
  font-size: 1.9rem;
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-weight: 600;
  opacity: 1;
  color: #fff;
  margin: 2.2em 0 0.6em;
}

.rich-blog h3 {
  font-size: 1.4rem;
  line-height: 1.25;
  letter-spacing: -0.4px;
  font-weight: 600;
  opacity: 1;
  color: #fff;
  margin: 1.8em 0 0.5em;
}

.rich-blog h4,
.rich-blog h5,
.rich-blog h6 {
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.3px;
  font-weight: 600;
  opacity: 1;
  color: #fff;
  margin: 1.6em 0 0.4em;
}

.rich-blog strong,
.rich-blog b {
  opacity: 1;
  font-weight: 700;
  color: #fff;
}

.rich-blog a {
  color: var(--primary, #ffe241);
}

.rich-blog ul,
.rich-blog ol {
  opacity: 1;
  padding-left: 1.25em;
  margin: 0 0 1.4em;
}

.rich-blog li {
  opacity: 1;
  letter-spacing: 0;
  font-size: 1.06rem;
  line-height: 1.7;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 0.4em;
}

.rich-blog blockquote {
  color: #fff;
  opacity: 1;
  border-left: 2px solid var(--primary, #ffe241);
  padding: 0.2em 0 0.2em 1.1em;
  margin: 0 0 1.4em;
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 400;
}

.rich-blog > *:first-child {
  margin-top: 0;
}

/* Blog card preview (home, blog listing, and article "More" cards) */
.blog-preview {
  margin-top: 12px;
  font-size: 0.95rem;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-clamp: 3;
}

/* Card heading turns Primary Yellow on hover */
.blog-main-wrapper .margin-blog > div:first-child {
  transition: color 0.3s ease;
}

.blog-main-wrapper:hover .margin-blog > div:first-child {
  color: var(--primary, #ffe241);
}

/* Sliding-in arrow turns Primary Yellow on hover */
.blog-main-wrapper .buton-icon-svg.is-absolute {
  transition: color 0.3s ease;
}

.blog-main-wrapper:hover .buton-icon-svg.is-absolute {
  color: var(--primary, #ffe241);
}

/* Preview text brightens to white on hover */
.blog-main-wrapper .blog-preview {
  transition: color 0.3s ease;
}

.blog-main-wrapper:hover .blog-preview {
  color: #fff;
}

@media screen and (max-width: 767px) {
  .rich-blog {
    max-width: 100%;
  }
  .rich-blog p {
    font-size: 1rem;
  }
  .rich-blog h2 {
    font-size: 1.6rem;
  }
}