/* 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);
  /* Inset of the image box in side-by-side layouts. */
  --media-pad: var(--space-16);
  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);
}

/* Every article image area is a 16:9 box - the 1920 x 1080 upload standard.
   A 16:9 image fills it exactly (no gap, no crop, no distortion). Any other
   shape is shown whole and centred, never cropped, stretched or enlarged past
   its own size, with unused space in the card's own surface colour. Stacked
   cards show the box flush at the top of the card. */
.article-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* Natural proportions only - no object-fit. */
.article-card__image {
  display: block;
  flex: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

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

/* Side-by-side layouts (lead story, a card alone in its grid, related stories,
   below) inset the same 16:9 box and centre it vertically in its column, so
   taller text beside it never stretches it. */

.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-pad: var(--space-20);
  }

  .news-page__grid > .article-card:only-child .article-card__media {
    align-self: center;
    justify-self: stretch;
    width: auto;
    margin: var(--media-pad) 0 var(--media-pad) var(--media-pad);
    border-radius: var(--radius-input);
  }

  .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 .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-pad: var(--space-24);
  }

  .article-card--featured .article-card__media {
    align-self: center;
    justify-self: stretch;
    width: auto;
    margin: var(--media-pad) 0 var(--media-pad) var(--media-pad);
    border-radius: var(--radius-input);
  }

  .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-pad: var(--space-12);
  }

  .article-page__related .news-page__grid > .article-card .article-card__media {
    align-self: center;
    justify-self: stretch;
    width: auto;
    margin: var(--media-pad) 0 var(--media-pad) var(--media-pad);
    border-radius: var(--radius-input);
  }

  .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);
}

/* A 16:9 frame across the reading column (the 1920 x 1080 standard fills it
   exactly). Any other shape is shown whole and centred inside it, never
   cropped, stretched or enlarged, with the page surface around it. */
.article-detail__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--space-32);
  overflow: hidden;
  border-radius: var(--radius-card);
}

.article-detail__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  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;
}