/**
 * @file
 * Featured story block (the "featured_story" view): the lead article above a
 * news feed -- title and Save, author and date, wide image, summary, button.
 *
 * CSS only: the markup comes from the view's field rewrites, which also
 * handle video stories, so it is left as it is. .rn-featured-story is added
 * to the view in rheumnow_theme_preprocess_views_view().
 */

/* Space before the feed that follows; the block itself adds none. */
.rn-featured-story {
  margin-bottom: 24px;
}

.rn-featured-story .item-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rn-featured-story .item-list li.view-list-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  padding: 0 0 20px;
  border-bottom: 1px solid #dedede;
}

.rn-featured-story .post-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
}

/* Title + Save ------------------------------------------------------------ */

.rn-featured-story .post-content h3.featured {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin: 0;
  padding: 0;
}

/* custom.css sets heading weights with !important. */
.rn-featured-story .post-content h3.featured,
.rn-featured-story .post-content h3.featured a.post-title {
  font-family: Poppins, sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600 !important;
  color: #121212;
  text-decoration: none;
}

.rn-featured-story .post-content h3.featured a.post-title:hover,
.rn-featured-story .post-content h3.featured a.post-title:focus-visible {
  color: #1585fe;
  text-decoration: underline;
}

/* Anonymous visitors get .flag-wrap > a.login-link, signed-in ones the flag
   module's .flag > a. */
.rn-featured-story .post-content h3.featured .flag-wrap,
.rn-featured-story .post-content h3.featured .flag {
  flex: 0 0 auto;
  float: none;
  margin: 0;
  padding: 4px 0 0;
}

.rn-featured-story .post-content h3.featured .flag .flag,
.rn-featured-story .post-content h3.featured .flag-wrap .flag {
  padding: 0;
}

.rn-featured-story .post-content h3.featured .flag-wrap a,
.rn-featured-story .post-content h3.featured .flag.action-flag a,
.rn-featured-story .post-content h3.featured a.login-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #686868;
  text-decoration: none;
}

.rn-featured-story .post-content h3.featured .flag.action-unflag a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #1585fe;
}

/* Author • date ---------------------------------------------------------- */

.rn-featured-story .post-content .head-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

.rn-featured-story .post-content .head-top .left,
.rn-featured-story .post-content .head-top .right {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

.rn-featured-story .post-content .head-top,
.rn-featured-story .post-content .head-top span,
.rn-featured-story .post-content .head-top time,
.rn-featured-story .post-content .head-top a {
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-style: italic;
  font-weight: 400;
  color: #686868;
}

.rn-featured-story .post-content .head-top .left a {
  color: #1585fe;
  text-decoration: none;
}

.rn-featured-story .post-content .head-top .left .name,
.rn-featured-story .post-content .head-top .right span {
  margin: 0;
  padding: 0;
}

/* Only when there is an author to separate from. */
.rn-featured-story .post-content .head-top .left:not(:empty) + .right::before {
  content: "\00a0• ";
}

/* Image, summary, button --------------------------------------------------- */

.rn-featured-story .post-thumbnail {
  margin: 0;
  padding: 0;
}

.rn-featured-story .post-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 945 / 377;
  object-fit: cover;
}

.rn-featured-story .post-summary,
.rn-featured-story .post-summary p {
  margin: 0;
  padding: 0;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: #494949;
}

.rn-featured-story a.read-btn {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 0;
  background: #1585fe;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
}

.rn-featured-story a.read-btn:hover,
.rn-featured-story a.read-btn:focus-visible {
  background: #0f6fd9;
  color: #fff;
}