/* ===== Blogs Inner (single ayu_blogs) Page ===== */

/* Featured-image hero */
.blog-hero {
  position: relative;
  width: 100%;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
}

.blog-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(18, 31, 22, 0.75), rgba(18, 31, 22, 0.25));
}

.blog-hero__title {
  position: relative;
  z-index: 2;
  max-width: calc(900 * var(--vw));
  margin: 0;
  padding: 0 calc(20 * var(--vw)) calc(40 * var(--vw));
  color: #fff;
  text-align: center;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  line-height: 1.1;
  font-size: clamp(calc(28 * var(--vw)), 5vw, calc(56 * var(--vw)));
}

@media (min-width: 1024px) {
  .blog-hero__title {
    padding-bottom: calc(60 * var(--vw));
  }
}

/* Description section wrapper — match the standard inner-page .section padding */
.blog-inner-content {
  padding: calc(110 * var(--vw)) 8%;
}

@media (max-width: 900px) {
  .blog-inner-content {
    padding: 70px 6%;
  }
}

/* ===== Description typography — scoped to this article only ===== */

/* Base font from the design HTML (Georgia serif) for the article body. */
.blog-inner-description {
  font-family: Georgia, 'Times New Roman', serif;
}

/* Paragraphs: match the other paragraphs used across the site */
.blog-inner-description p {
  font-family: 'Inter', sans-serif;
  font-size: calc(17 * var(--vw));
  color: #4f5a51;
  line-height: 1.7;
  margin-bottom: calc(22 * var(--vw));
}

/* Smaller paragraph text on mobile */
@media (max-width: 900px) {
  .blog-inner-description p {
    font-size: 16px;
  }
}

/* Headings */
.blog-inner-description h1,
.blog-inner-description h2,
.blog-inner-description h3,
.blog-inner-description h4,
.blog-inner-description h5,
.blog-inner-description h6 {
  color: #243126;
  font-weight: 400;
  line-height: 1.2;
  margin: calc(40 * var(--vw)) 0 calc(16 * var(--vw));
}

.blog-inner-description h1 {
  font-size: clamp(calc(32 * var(--vw)), 4vw, calc(48 * var(--vw)));
}

.blog-inner-description h2 {
  font-size: clamp(calc(28 * var(--vw)), 3.2vw, calc(40 * var(--vw)));
}

.blog-inner-description h3 {
  font-size: calc(24 * var(--vw));
}

.blog-inner-description h4 {
  font-size: calc(20 * var(--vw));
}

.blog-inner-description h5 {
  font-size: calc(18 * var(--vw));
}

.blog-inner-description h6 {
  font-size: calc(16 * var(--vw));
  text-transform: uppercase;
  letter-spacing: calc(1 * var(--vw));
}

/* Bullet and number lists */
.blog-inner-description ul,
.blog-inner-description ol {
  margin: 0 0 calc(22 * var(--vw));
  padding-left: 1.5em;
}

.blog-inner-description ul {
  list-style: disc;
}

.blog-inner-description ol {
  list-style: decimal;
}

.blog-inner-description li {
  font-family: 'Inter', sans-serif;
  font-size: calc(17 * var(--vw));
  color: #4f5a51;
  line-height: 1.6;
  margin-bottom: calc(10 * var(--vw));
}

.blog-inner-description li::marker {
  color: #a98f58;
}

/* Remove the leading margin of the first element so it sits flush with the section padding */
.blog-inner-description > *:first-child {
  margin-top: 0;
}

/* Related blogs heading spacing (cards reuse the landing page styles) */
.related-blogs h2 {
  margin-bottom: 0;
}