/*
 * MediRoyal Blog — Hero featured-article card (right side of masthead).
 * Scoped under body.log-blog-page. Split from log-blog-hero.css to
 * respect the 200-line file limit.
 */

.log-blog-page .bl2-hero-featured-card {
  display: block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(94, 238, 192, 0.18);
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.log-blog-page .bl2-hero-featured-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.3);
}

.log-blog-page .bl2-hfc-thumb {
  height: 180px;
  background: linear-gradient(135deg, var(--plum-800), var(--sage-700));
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.log-blog-page .bl2-hfc-ico {
  font-size: 52px;
  position: relative;
  z-index: 1;
}

.log-blog-page .bl2-hfc-thumb-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--sage-500);
  color: var(--plum-950);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  z-index: 2;
}

.log-blog-page .bl2-hfc-body {
  padding: 24px 26px 28px;
}

.log-blog-page .bl2-hfc-cat {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sage-400);
  margin-bottom: 10px;
}

.log-blog-page .bl2-hfc-title {
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  color: #fff;
  line-height: 1.28;
  margin-bottom: 12px;
}

.log-blog-page .bl2-hfc-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.68;
  margin-bottom: 18px;
}

.log-blog-page .bl2-hfc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.log-blog-page .bl2-hfc-author {
  display: flex;
  align-items: center;
  gap: 9px;
}

.log-blog-page .bl2-hfc-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sage-600), var(--sage-500));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  color: var(--plum-950);
}

.log-blog-page .bl2-hfc-author-name {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}

.log-blog-page .bl2-hfc-read {
  font-size: 12px;
  font-weight: 700;
  color: var(--sage-400);
  display: flex;
  align-items: center;
  gap: 5px;
}