/* Task 1.68 §4: News listing, category filter, and article detail pages
   - PLUS templates/components/content/article_card.html's own styles,
   moved here from static/css/homepage.css now that the component is
   shared across the homepage, /news/, and category pages (loaded by all
   three). Reuses existing design tokens only - no new colors/spacing/
   radii. */

/* Hallmark · genre: editorial · macrostructure: 20 Ecosystem Index (News) + 02 Long Document (Article)
 * theme: Chag Sports locked tokens (tokens.css) · pre-emit critique: P4 H4 E4 S4 R5 V4
 *
 * The article card has exactly two children: `.article-card__media` and one
 * grouped `.article-card__body`. The featured (lead-story) layout places those
 * two regions side by side, so the text always stays together - before, every
 * text line was its own grid item and was scattered across separate cells. */

.article-card {
  --article-card-gap: var(--space-8);
  /* Image area: a consistent maximum size per layout. The image is never
     cropped, stretched or enlarged past its own size; its visible frame shrinks
     to fit and it is centred, with unused space in the card's own surface. */
  --media-h: 12rem;
  --media-pad: var(--space-16);
  --media-img-max: calc(var(--media-h) - var(--media-pad));
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.article-card:hover {
  text-decoration: none;
  border-color: var(--color-text-muted);
}

/* The media region is the image area: a fixed height in stacked cards (so a
   row of cards stays aligned and nothing jumps when the image arrives), with
   no background of its own. */
.article-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: var(--media-h);
  min-width: 0;
  padding: var(--media-pad) var(--media-pad) 0;
  overflow: hidden;
}

/* Natural proportions only - no object-fit, no fixed box. A long headline or
   excerpt can never stretch it: its maximum height is fixed per layout. */
.article-card__image {
  display: block;
  flex: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--media-img-max);
  border-radius: var(--radius-input);
}

/* No image, or one that failed to load: the branded placeholder fills the
   image area. */
.article-card__media--placeholder::before {
  content: "";
  align-self: stretch;
  width: 100%;
  border-radius: var(--radius-input);
  background: linear-gradient(135deg, var(--brand-navy), var(--color-intelligence));
}

.article-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--article-card-gap);
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-20);
}

.article-card__body > * {
  margin: 0;
}

.article-card__category {
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.article-card__headline {
  font-family: var(--font-family-base);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-heading);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.article-card:hover .article-card__headline,
.article-card:focus-visible .article-card__headline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Grid cards keep a short summary; the full excerpt is still in the markup and
   on the article page. */
.article-card__excerpt {
  font-size: var(--font-size-body-sm);
  line-height: 1.55;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: auto;
  padding-top: var(--space-4);
  font-size: var(--font-size-body-sm);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.article-card__meta-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.article-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

/* A card that is alone in its grid (one related article, one homepage story,
   one story after the lead) reads as a deliberate horizontal card, not a narrow
   column beside empty space. */
@media (min-width: 640px) {
  .news-page__grid > .article-card:only-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .news-page__grid > .article-card:only-child {
    --media-h: 14rem;
    --media-pad: var(--space-20);
    --media-img-max: calc(var(--media-h) - 2 * var(--media-pad));
  }

  /* Horizontal layouts: the image area is at least --media-h tall and grows
     with taller text, but the image itself keeps its fixed maximum size. */
  .news-page__grid > .article-card:only-child .article-card__media {
    align-self: stretch;
    height: auto;
    min-height: var(--media-h);
    padding: var(--media-pad) 0 var(--media-pad) var(--media-pad);
  }

  .news-page__grid > .article-card:only-child .article-card__body {
    justify-content: center;
    padding: var(--space-24);
  }

  .news-page__grid > .article-card:only-child .article-card__meta {
    margin-top: var(--space-4);
  }
}

/* ============================================================
   Task 1.72A Stage 14 (Hallmark-reviewed visual redesign): News
   Listing + News Category (one shared template, `news_list.html`) and
   Article Detail. Reuses the exact `.container-page`/`.card`/
   `.card-elevated`/`.filter-group`/`.filter-option`/`.breadcrumbs`/
   `.pill` primitives already established across the rest of the site -
   no new colors/radii/shadow tiers invented, restrained depth confined
   to exactly one component per page (the lead-story card here; the
   hero image on Article Detail).
   ============================================================ */

.news-page__header {
  display: grid;
  gap: var(--space-8);
  padding-bottom: var(--space-24);
  margin-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border);
}

.news-page__header > * {
  margin: 0;
}

.news-page__title {
  overflow-wrap: anywhere;
}

.news-page__intro {
  max-width: 38em;
  color: var(--color-text-secondary);
}

/* Task 1.72A Stage 14, Page 2: the published-article count on a Category
   page - safely derived from `page_obj.paginator.count` (the same total
   the view already computes for pagination, never a second query). */
.news-page__count {
  margin-top: var(--space-4);
}

.news-page__categories {
  margin-bottom: var(--space-32);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  /* room for the focus ring of the first/last chip inside the scroller */
  padding: var(--space-4) var(--space-4) var(--space-8);
  margin-left: calc(-1 * var(--space-4));
}

.news-page__categories .filter-option {
  flex-shrink: 0;
  white-space: nowrap;
}

.news-page__lead {
  margin-bottom: var(--space-40);
}

.news-page__rail-title {
  margin: 0 0 var(--space-16);
}

/* The lead story - the one restrained-depth component on this page. Stacked
   (image above the grouped text) on phones; image beside the complete text
   block from tablet up. The editorial display face carries the headline. */
.article-card--featured {
  --media-h: 22rem;
}

.article-card--featured .article-card__body {
  --article-card-gap: var(--space-12);
  padding: var(--space-20) var(--space-20) var(--space-24);
}

.article-card--featured .article-card__headline {
  font-family: var(--font-family-display);
  font-size: 1.625rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.15;
}

.article-card--featured .article-card__excerpt {
  font-size: var(--font-size-body);
  -webkit-line-clamp: 5;
  line-clamp: 5;
}

.article-card--featured .article-card__meta {
  margin-top: var(--space-4);
}

@media (min-width: 768px) {
  .article-card--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .article-card--featured {
    --media-h: 26rem;
    --media-pad: var(--space-24);
    --media-img-max: calc(var(--media-h) - 2 * var(--media-pad));
  }

  .article-card--featured .article-card__media {
    align-self: stretch;
    height: auto;
    min-height: var(--media-h);
    padding: var(--media-pad) 0 var(--media-pad) var(--media-pad);
  }

  /* A portrait image takes a narrower column, so less of the column is
     unused beside it. */
  .article-card--featured.article-card--portrait {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  }

  .article-card--featured .article-card__body {
    justify-content: center;
    padding: var(--space-32);
  }

  .article-card--featured .article-card__headline {
    font-size: 2rem;
  }
}

@media (min-width: 1280px) {
  .article-card--featured .article-card__headline {
    font-size: 2.25rem;
  }
}

/* Remaining articles: a deliberate grid at every width - never the
   uncontrolled `.u-grid-auto-fit` this page used before, which crowded
   every card into the top-left corner on wide viewports instead of
   composing the space. Mobile: single column. Tablet: a genuine 2-up
   grid (never collapsed prematurely to one column). Desktop: 3-up
   editorial grid. */
.news-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
}

@media (min-width: 640px) {
  .news-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .news-page__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.news-page__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-16);
  margin-top: var(--space-48);
}

.news-page__pagination-arrow {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.news-page__pagination-arrow.is-disabled {
  opacity: 0.4;
  cursor: default;
}

.news-page__pagination-status {
  color: var(--color-text-secondary);
}

/* Task 1.72A Stage 14, Page 3 (requester review fix: the related-
   articles context sits BELOW the full article, never beside it as a
   sidebar - an earlier version of this redesign tried the sidebar
   layout and was corrected). The article body's own reading measure
   stays capped regardless of viewport (CLAUDE.md/brief: "do not stretch
   paragraphs across the entire desktop viewport"), always centered -
   there is no sidebar for it to sit beside any more. */
.article-detail {
  max-width: 42em;
  margin: 0 auto var(--space-48);
}

/* "More from Chag Sports" - width-matched to the article body's own
   reading measure (`.article-detail`'s `max-width: 42em`, centered) so
   the 3-column grid never stretches wider than the content above it in
   desktop view - requester review fix. Reuses `.news-page__grid`
   verbatim (the exact same deliberate 1/2/3-column grid already
   approved on the News Listing page) rather than a second, competing
   grid pattern; only the outer section's own width/centering changed. */
.article-page__related {
  max-width: 42em;
  margin: var(--space-16) auto 0;
  padding-top: var(--space-32);
  border-top: 1px solid var(--color-border);
}

.article-page__related .text-h2 {
  margin-bottom: var(--space-20);
}

/* Inside the 42em reading column, related stories are a list of compact
   horizontal cards (image beside the grouped text) - one, two or three of them
   read evenly, with no orphaned half-width card. */
@media (min-width: 640px) {
  .article-page__related .news-page__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-16);
  }

  .article-page__related .news-page__grid > .article-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }

  .article-page__related .news-page__grid > .article-card {
    --media-h: 8.5rem;
    --media-pad: var(--space-12);
    --media-img-max: calc(var(--media-h) - 2 * var(--media-pad));
  }

  .article-page__related .news-page__grid > .article-card .article-card__media {
    align-self: stretch;
    height: auto;
    min-height: var(--media-h);
    padding: var(--media-pad) 0 var(--media-pad) var(--media-pad);
  }

  .article-page__related .article-card__body {
    justify-content: center;
    padding: var(--space-16) var(--space-20);
  }

  .article-page__related .article-card__excerpt {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .article-page__related .article-card__meta {
    margin-top: var(--space-4);
  }
}

/* `.text-h1` (base.css) scales by VIEWPORT width via `--font-size-h1`
   (responsive.css media queries) - up to 64px at 1440px+, the exact same
   class of bug already found and fixed twice on the Plans page's own
   price figure (accounts.css). Here it showed up as a 64px headline
   folding across 4 lines inside the article's own ~613-672px reading
   column (confirmed via a real computed-style check: 64px font-size in
   a 613px container) - looking oversized and unbalanced above a short
   article, exactly what the requester's screenshot flagged. This column
   never grows past `max-width: 42em` regardless of viewport (see
   `.article-detail` above), so the headline gets its own flat, bounded
   scale instead of the page-hero cascade - "strong but reasonably
   sized", per the brief, not a second full-width hero crammed into a
   ~672px column. Single-class specificity ties with `.text-h1` on
   `font-size`/`line-height` are broken by cascade order - this
   stylesheet loads after base.css (see article_detail.html's
   `extra_head` block), so these declarations win without `!important`. */
.article-detail__headline {
  overflow-wrap: anywhere;
  font-size: 1.75rem;
  line-height: 1.15;
}

@media (min-width: 421px) {
  .article-detail__headline {
    font-size: 2.25rem;
  }
}

@media (min-width: 768px) {
  .article-detail__headline {
    font-size: 2.5rem;
  }
}

/* Final repair round item 3: Managed Pages (About/FAQ/legal, live and
   staff preview) had the identical unbounded `.text-h1` defect the Stage
   15 comment above already documents and fixed for Article Detail - the
   working document's Stage 16/18 rows claimed this was already fixed,
   but only `.article-detail__headline` existed; `.managed-page` (the
   `42em` reading column both live Managed Pages and their preview use)
   still rendered a raw, viewport-scaling `.text-h1` underneath it,
   reachable at up to 64px on wide desktop. Same fix, same bounded
   mobile/tablet/desktop scale as `.article-detail__headline` immediately
   above - a single shared rule would also work here, but a distinct,
   semantically-named class keeps each page family's own headline
   override independently documented and independently adjustable. */
.managed-page__headline {
  overflow-wrap: anywhere;
  font-size: 1.75rem;
  line-height: 1.15;
}

@media (min-width: 421px) {
  .managed-page__headline {
    font-size: 2.25rem;
  }
}

@media (min-width: 768px) {
  .managed-page__headline {
    font-size: 2.5rem;
  }
}

/* Article page reading order: category, headline, byline, then the image, then
   the body. The image is never cropped or stretched (see `.article-detail__hero`). */
.article-detail__category {
  margin: 0 0 var(--space-12);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* The frame is the image itself - no backdrop, no gaps: a landscape photo spans
   the reading column; a portrait poster keeps its proportions at a bounded
   height, centred. */
.article-detail__hero {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-32);
}

.article-detail__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(72vh, 36rem);
  border-radius: var(--radius-card);
}

.article-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-12) 0 var(--space-24);
  padding-bottom: var(--space-20);
  border-bottom: 1px solid var(--color-border);
  font-variant-numeric: tabular-nums;
}

.article-detail__body {
  overflow-wrap: anywhere;
}

.article-detail__meta-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Task 1.72A Stage 16: `.managed-page__body` (About/FAQ/legal pages)
   joins every rich-text-body selector below, alongside the established
   `.article-detail__body` (Stage 15) - both render the exact same
   sanitizer ALLOWED_TAGS set (apps/content/markdown_sanitizer.py), so
   one shared rich-text-body ruleset covers both, never a second,
   drifting copy. */
.article-detail__body,
.managed-page__body {
  font-size: 1rem;
  line-height: 1.7;
}

.article-detail__body h2,
.article-detail__body h3,
.article-detail__body h4,
.article-detail__body h5,
.article-detail__body h6,
.managed-page__body h2,
.managed-page__body h3,
.managed-page__body h4,
.managed-page__body h5,
.managed-page__body h6 {
  margin-top: var(--space-32);
  margin-bottom: var(--space-12);
}

.article-detail__body p,
.managed-page__body p {
  margin-bottom: var(--space-16);
}

.article-detail__body ul,
.article-detail__body ol,
.managed-page__body ul,
.managed-page__body ol {
  margin: 0 0 var(--space-16) var(--space-24);
}

.article-detail__body li,
.managed-page__body li {
  margin-bottom: var(--space-4);
}

.article-detail__body a,
.managed-page__body a {
  color: var(--color-primary);
  text-decoration: underline;
}

.article-detail__body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

/* Quotations - a left accent border, never colour alone (the quote
   marks/italic styling + the border together signal "this is quoted
   text", matching the same "status never by colour alone" discipline
   this codebase applies everywhere else). */
.article-detail__body blockquote,
.managed-page__body blockquote {
  margin: 0 0 var(--space-16);
  padding: var(--space-4) 0 var(--space-4) var(--space-20);
  border-left: 3px solid var(--color-intelligence);
  color: var(--color-text-secondary);
  font-style: italic;
}

.article-detail__body blockquote p:last-child,
.managed-page__body blockquote p:last-child {
  margin-bottom: 0;
}

/* Inline code and fenced code blocks - deliberately no custom
   font-family token (no monospace family exists in this project's
   locked two-family type system, base.css:169-170); every browser's own
   UA stylesheet already renders `code`/`pre` in a monospace font with
   zero CSS required, so this only adds spacing/surface treatment. */
.article-detail__body code,
.managed-page__body code {
  background: var(--color-bg-secondary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

.article-detail__body pre,
.managed-page__body pre {
  background: var(--color-bg-secondary);
  padding: var(--space-16);
  border-radius: var(--radius-input);
  overflow-x: auto;
  margin-bottom: var(--space-16);
}

.article-detail__body pre code,
.managed-page__body pre code {
  background: none;
  padding: 0;
}

.article-detail__body hr,
.managed-page__body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-32) 0;
}

.article-detail__body table,
.managed-page__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-16);
  font-size: var(--font-size-body-sm);
}

.article-detail__body th,
.article-detail__body td,
.managed-page__body th,
.managed-page__body td {
  padding: var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.article-detail__body th,
.managed-page__body th {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-bold);
}

.article-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-24);
}

/* Task 1.72A Stage 16 (About/FAQ/published legal pages): matched to
   `.article-detail`'s own `42em` reading measure (Stage 15) rather than
   the pre-redesign 760px value - one consistent long-form-prose column
   width across every content page on the site, never a second,
   slightly-different value. The rest of `.managed-page__body`'s own
   rich-text rules now live in the shared block above (with
   `.article-detail__body`) - see that comment. */
.managed-page {
  max-width: 42em;
  margin: 0 auto var(--space-48);
}

.managed-page__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-24);
}

.managed-page__meta-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}