/**
 * @file
 * Poem teaser cards — appearing on /home, /tools/*, profile pages,
 * Stream views, anywhere a poem renders in 'teaser' view mode.
 *
 * Three fixes against the legacy treatment:
 *
 *   1. Drop the Follow-author affordance from teaser cards. The user
 *      decided that Follow is a relationship best established from the
 *      author's profile or the full poem page, not promoted on every
 *      teaser in a feed where it competes with the work itself.
 *
 *   2. Poem title in ink, not blue. The title is a link to the work,
 *      not the action color. Persimmon is reserved for action; ink
 *      for editorial content. (The previous color was --np-header-band,
 *      a legacy brand blue.)
 *
 *   3. "Read more" affordance becomes a quiet sans link in persimmon,
 *      not a filled blue pill. Per DESIGN.md component.button.variant.link.
 */

/* -----------------------------------------------------------------------
 * 1. Hide the Follow button on teasers.
 *    The Drupal flag module renders Follow as
 *    .follow-button-container > .flag.flag-follow > a.use-ajax
 *    inside .poem-teaser (and a few other teaser-shaped wrappers).
 * --------------------------------------------------------------------- */
.poem-teaser .follow-button-container,
.node--view-mode-teaser .follow-button-container,
.view-mode-teaser .follow-button-container,
.np-feed-item .follow-button-container,
.poem-teaser .flag-follow,
.node--view-mode-teaser .flag-follow,
.view-mode-teaser .flag-follow,
.np-feed-item .flag-follow {
  display: none !important;
}

/* -----------------------------------------------------------------------
 * 2. Poem title in ink — overrides legacy blue.
 * --------------------------------------------------------------------- */
.poem-teaser h2 a,
.poem-teaser h3 a,
.poem-teaser .node__title a,
.poem-teaser .poem-title-link,
.node--view-mode-teaser h2 a,
.node--view-mode-teaser h3 a,
.node--view-mode-teaser .node__title a {
  color: var(--np-text-primary) !important;
  font-family: var(--np-font-serif) !important;
  font-weight: var(--np-weight-regular) !important;
  text-decoration: none;
  font-feature-settings: "kern", "liga", "onum";
}

.poem-teaser h2 a:hover,
.poem-teaser h3 a:hover,
.poem-teaser .node__title a:hover,
.poem-teaser .poem-title-link:hover,
.node--view-mode-teaser h2 a:hover,
.node--view-mode-teaser h3 a:hover,
.node--view-mode-teaser .node__title a:hover {
  color: var(--np-text-link) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * 3. Read-more affordance — sans link in persimmon, not a filled pill.
 * --------------------------------------------------------------------- */
.poem-teaser .read-more-link,
.poem-teaser .read-more-link--button,
.poem-teaser a.read-more,
.node--view-mode-teaser .read-more-link,
.node--view-mode-teaser .read-more-link--button,
.np-feed-item .read-more-link {
  display: inline-block !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--np-text-link) !important;
  font-family: var(--np-font-sans) !important;
  font-weight: var(--np-weight-medium) !important;
  font-size: var(--np-text-sm) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  text-transform: none;
  letter-spacing: 0;
}

.poem-teaser .read-more-link:hover,
.poem-teaser .read-more-link--button:hover,
.poem-teaser a.read-more:hover,
.node--view-mode-teaser .read-more-link:hover,
.node--view-mode-teaser .read-more-link--button:hover,
.np-feed-item .read-more-link:hover {
  color: var(--np-text-link-hover) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
  background: transparent !important;
}

/* The .poem-footer container shouldn't try to right-align the read-more
   to look like a CTA pill; it should sit naturally at the end of the
   text flow. */
.poem-teaser .poem-footer,
.node--view-mode-teaser .poem-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--np-space-3) var(--np-space-4);
  margin-top: var(--np-space-3);
  font-family: var(--np-font-sans);
  font-size: var(--np-text-sm);
  color: var(--np-text-tertiary);
}

/* "Read comment" link inside the featured-comment block on a teaser —
   was legacy blue. Editorial persimmon, sans medium. */
.poem-teaser .tc-link,
.node--view-mode-teaser .tc-link {
  font-family: var(--np-font-sans);
  font-weight: var(--np-weight-medium);
  font-size: var(--np-text-sm);
  color: var(--np-text-link) !important;
  text-decoration: none;
}

.poem-teaser .tc-link:hover,
.node--view-mode-teaser .tc-link:hover {
  color: var(--np-text-link-hover) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}