/*
 * MediRoyal Blog — Shared components (eyebrow, headline, buttons, reveal).
 * Scoped under body.log-blog-page. Reused across hero/articles/stats-
 * wall/newsletter/faq/cta/contact sections.
 */

.log-blog-page .bl2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-700);
  margin-bottom: 14px;
}

.log-blog-page .bl2-eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--sage-600);
  display: inline-block;
}

.log-blog-page .bl2-eyebrow.bl2-center {
  justify-content: center;
}

.log-blog-page .bl2-eyebrow.bl2-center::before {
  display: none;
}

.log-blog-page .bl2-eyebrow.bl2-on-deep {
  color: var(--sage-400);
}

.log-blog-page .bl2-eyebrow.bl2-on-deep::before {
  background: var(--sage-400);
}

.log-blog-page .bl2-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.14;
  color: var(--ink-900);
}

.log-blog-page .bl2-headline em {
  font-style: italic;
  color: var(--plum-700);
}

/* Reuses the sitewide .reveal/.visible mechanism (scroll-reveal.js,
   loaded on every page) instead of a page-specific duplicate. */
.log-blog-page .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease);
  will-change: opacity, transform;
}

.log-blog-page .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.log-blog-page .bl2-btn-sage {
  background: var(--sage-500);
  color: var(--plum-950);
  font-weight: 700;
  font-size: 13px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s var(--ease);
  border: none;
  cursor: pointer;
}

.log-blog-page .bl2-btn-sage:hover {
  background: var(--sage-400);
  box-shadow: 0 12px 28px rgba(29, 219, 149, 0.3);
  transform: translateY(-1px);
}

.log-blog-page .bl2-btn-outline-white {
  border: 1.4px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s;
}

.log-blog-page .bl2-btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
}