/* ======================================================================
   OVERNIGHT-10, JOB 8 (a) -- a mention, in the site's standard card.
   Behind `site_job8_mentions`. Loaded last, after night-polish.css, so it
   needs no `!important` and so every rule that sheet already gives
   `.ttc-mentions` -- the column, the gap, the quiet meta line -- still
   applies underneath.

   WHAT WAS WRONG, looked at rather than argued (audit/night10/job8/
   before-mentions-1300.png). The mentions WERE in boxes. They did not read
   as the site's cards, and the four differences are:

     * no shadow -- `article.card-v2`, the house card, carries
       `box-shadow: 0 3px 16px rgba(0,0,0,.14)`, and without it a grey box
       on a white page is a panel, not a card;
     * the title was an UNDERLINED LINK and the first thing in the box, so
       five of them stacked read as a list of links with text under them --
       which is exactly the words Tom used;
     * the outlet and the date were one grey sentence, where every card on
       this site leads with a PILL saying where the thing comes from;
     * and the button was the newsletter's green (#49b730), which on this
       site means "sign up", not "read".

   THE NUMBERS ARE THE CARD'S OWN, copied from static/site/cards-v2.css and
   static/site/recipe-v3.css rather than chosen: --card #f7f7f7, radius
   28px, the same shadow, the same --orange.
   ====================================================================== */
.ttc-mentions--cards { gap: 26px; }

.ttc-mentions--cards article.mention {
  background: var(--card, #f7f7f7);
  border-radius: 28px;
  padding: 30px 36px 32px;
  box-shadow: 0 3px 16px rgba(0, 0, 0, .14);
  transition: box-shadow .16s ease, transform .16s ease;
}
/* the house card lifts under the pointer; a mention is a link to somewhere
   else, so it should say it is one */
.ttc-mentions--cards article.mention:hover {
  box-shadow: 0 8px 26px rgba(0, 0, 0, .18);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .ttc-mentions--cards article.mention { transition: none; }
  .ttc-mentions--cards article.mention:hover { transform: none; }
}

/* ---- the pill, which is what a card leads with ---------------------- */
.ttc-mentions--cards .mention__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}
.ttc-mentions--cards .mention__outlet {
  display: inline-block;
  padding: 4px 13px;
  border-radius: 999px;
  background: var(--maroon, #51010e);
  color: var(--cream, #fffeec);
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: .03em;
}
.ttc-mentions--cards .mention__when {
  font-size: 14px;
  line-height: 22px;
  color: var(--body, #4e5155);
}

/* ---- the title reads as a headline, not as a link in a list --------- */
.ttc-mentions--cards .mention__t { margin: 0 0 10px; }
/* `.mention__tl` is a CLASS on the link, and that is deliberate. The
   theme's own `section.gt-block .text a:not([class])` sets
   `text-decoration: underline` at (0,3,2) -- it beat every sensible
   selector here, which is why the title read as one more link in a list. A
   link that HAS a class is not `a:not([class])`, so that rule stops
   matching and this file needs no `!important` anywhere. */
.ttc-mentions--cards .mention__tl {
  color: var(--dark, #1d2327);
  text-decoration: none;
}
.ttc-mentions--cards .mention__tl:hover,
.ttc-mentions--cards .mention__tl:focus-visible {
  color: var(--maroon, #51010e);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ttc-mentions--cards .mention__ex {
  margin: 0 0 20px;
  color: var(--body, #4e5155);
}

/* ---- and the button is the site's, not the newsletter's -------------- */
.ttc-mentions--cards .mention__btn {
  background: var(--orange, #f18032);
  color: #fff;
  border: 0;
}
.ttc-mentions--cards .mention__btn:hover,
.ttc-mentions--cards .mention__btn:focus-visible {
  background: var(--maroon, #51010e);
  color: var(--cream, #fffeec);
}

@media (max-width: 600px) {
  .ttc-mentions--cards article.mention {
    padding: 22px 20px 24px;
    border-radius: 22px;
  }
}
/* a printed page has no card shadow and no hover */
@media print {
  .ttc-mentions--cards article.mention { box-shadow: none; }
}