/*
  headlines.css
  Two blocks side by side: "More news" (cards with a small image) and
  "Most read" (numbered headlines in a white panel).
  Needs css/base.css.
*/

/* Phones: the two blocks stack. Desktop: news on the left, most read on the right. */
.fm-headlines { display: grid; gap: var(--fm-section) calc(var(--fm-gap) * 0.6); padding-bottom: var(--fm-section); }
@media (min-width: 62rem) { .fm-headlines { grid-template-columns: 7fr 4fr; align-items: start; } }

/* ---------- More news ---------- */
.fm-headlines__list { display: grid; gap: calc(var(--fm-gap) * 0.6); }

/* Text on the left, image flush against the right edge of the card */
.fm-headlines__item { display: grid; grid-template-columns: 1fr 7rem; }
.fm-headlines__item .fm-card__body { align-self: center; }
.fm-headlines__item h3 { font-size: var(--fm-t-md); line-height: 1.25; }
.fm-headlines__item .fm-media { height: 100%; }
.fm-headlines__item .fm-media img { height: 100%; aspect-ratio: auto; }

/* Wider screens: bigger headline and image */
@media (min-width: 40rem) {
  .fm-headlines__item { grid-template-columns: 1fr 13rem; }
  .fm-headlines__item h3 { font-size: var(--fm-t-lg); }
}

/* ---------- Most read ---------- */
/* The numbers come from a CSS counter, so editors only have to write a plain list */
.fm-headlines__popular ol { counter-reset: pop; display: grid; gap: 1.5rem; }
.fm-headlines__popular li { counter-increment: pop; }
.fm-headlines__popular a {
  display: grid; grid-template-columns: 3rem 1fr; align-items: start; padding-top: 0.2rem;
  font-family: var(--fm-serif); font-size: var(--fm-t-md); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em;
}
.fm-headlines__popular a::before {
  content: counter(pop);
  margin-top: -0.2rem;       /* lines the top of the number up with the first line of text */
  font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; color: var(--fm-blue);
}
.fm-headlines__popular a:hover { color: var(--fm-blue); }