/*
  category-body.css
  Page layout for a category page: categories | stories | right rail.
  The stories sit straight on the page wash (the cards are white), so no outer card.
  Needs css/base.css.

  Phones and small tablets (under 62rem): stories, then categories as chips, then the rail.
  62rem to 75rem: categories left, stories right, rail under the stories.
  75rem and up: categories | stories | rail.
*/

.fm-category { display: grid; gap: var(--fm-gap); padding-bottom: 1.25rem; align-items: start; }
/* container-type lets the featured card and grid respond to the room beside the sidebar, not the screen width */
.fm-category__main { min-width: 0; container-type: inline-size; }

@media (min-width: 62rem) {
  .fm-category { grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; }
  .fm-sidebar { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 1.5rem; }   /* stays in view while the stories scroll */
  .fm-category__main { grid-column: 2; grid-row: 1; }
  .fm-rail { grid-column: 2; grid-row: 2; }
}
@media (min-width: 75rem) {
  .fm-category { grid-template-columns: 13rem minmax(0, 1fr) 300px; }
  .fm-sidebar { grid-row: 1; }
  .fm-rail { grid-column: 3; grid-row: 1; }
}

/* "More poultry news" divider heading between the featured story and the grid */
.fm-category__subhead { margin: calc(var(--fm-gap) * 0.9) 0 1rem; font-size: 1.25rem; line-height: 1.2; color: var(--fm-blue); }