/* 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. */

.article-card {
  display: block;
  color: inherit;
}

.article-card:hover {
  text-decoration: none;
}

.article-card__image {
  height: 140px;
  border-radius: var(--radius-input);
  margin-bottom: var(--space-16);
  background: linear-gradient(135deg, var(--brand-navy), var(--color-intelligence));
}

/* A real featured image replaces the branded gradient placeholder above
   when one exists. */
.article-card__image--photo {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.article-card__headline {
  margin: var(--space-8) 0;
}

.article-card__date {
  margin-top: var(--space-12);
}

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

.article-card__date {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.article-card__date-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

/* ============================================================
   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 {
  margin-bottom: var(--space-24);
}

.news-page__intro {
  max-width: 42em;
  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-8);
}

.news-page__categories {
  margin-bottom: var(--space-32);
  max-width: 100%;
  overflow-x: auto;
}

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

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

/* The one restrained-depth component on this page - CLAUDE.md
   "restrained 3D depth... on the one high-value component, every other
   section stays flat". A stacked card at every width up to tablet
   (matches the ordinary card rhythm below it); a genuine two-column
   editorial split - image beside content, not above it - once the
   viewport has the width to support it without cramming either side. */
.article-card--featured {
  padding: 0;
  overflow: hidden;
}

.article-card--featured .article-card__image {
  height: 220px;
  margin-bottom: 0;
  border-radius: 0;
}

.article-card--featured .article-card__image--photo {
  height: 220px;
}

.article-card--featured > :not(.article-card__image) {
  margin-left: var(--space-24);
  margin-right: var(--space-24);
}

.article-card--featured .text-metadata {
  margin-top: var(--space-20);
}

.article-card--featured .article-card__headline {
  margin: var(--space-8) 0;
}

.article-card--featured .article-card__excerpt {
  max-width: 60em;
}

.article-card--featured .article-card__date,
.article-card--featured .article-card__tags {
  margin-bottom: var(--space-20);
}

@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 .article-card__image,
  .article-card--featured .article-card__image--photo {
    height: 100%;
    min-height: 280px;
  }

  .article-card--featured > :not(.article-card__image) {
    margin-left: 0;
    margin-right: var(--space-32);
  }

  .article-card--featured .text-metadata {
    margin-top: var(--space-32);
  }

  .article-card--featured .article-card__tags {
    margin-top: auto;
  }
}

/* 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;
}

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

/* `.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-detail__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  margin-bottom: var(--space-24);
}

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

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