/* /news/ layout only: r337 order and grouping on central FINAL-v18 components and tokens. */
@layer components, layout;

@layer components {
  .news-route .news-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s5); }
  .news-route .news-header__intro { display: grid; gap: var(--s2); min-width: 0; }
  .news-route .news-header__intro p { margin: 0; }
  .news-route .news-header__title { display: flex; align-items: center; gap: var(--s3); margin: 0; }
  .news-route .news-header__icon { flex: none; width: 52px; height: 52px; object-fit: contain; }

  /* UI-013: r337 column colours, gold for the crypto column and blue for traditional markets. */
  .news-route .news-column { --news-tone: var(--news-crypto); --news-tone-border: var(--gold-border); display: grid; gap: var(--s2); border-block-start: 3px solid var(--news-tone); }
  .news-route .news-column--market { --news-tone: var(--news-market); --news-tone-border: var(--news-market-border); }
  .news-route .news-column__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding-block-end: var(--s3); border-block-end: 1px solid var(--news-tone-border); }
  .news-route .news-column__head h3 { display: flex; align-items: center; gap: var(--s2); margin: 0; }
  .news-route .news-column__head h3::before { content: ''; width: var(--s3); height: var(--s3); border-radius: var(--radius-pill); background: var(--news-tone); }
  .news-route .news-column__count { color: var(--text-muted); font-size: .8125rem; white-space: nowrap; }
  .news-route .news-column__group { margin: var(--s3) 0 0; color: var(--news-tone); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
  .news-route .news-column--market .market-story__source { color: var(--news-market); }
  .news-route .news-item__title a:is(:hover, :focus-visible) { color: var(--news-tone); text-decoration-color: var(--news-tone); }
  .news-route .news-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0; color: var(--text-muted); font-size: .8125rem; }
  .news-route .news-legend__item { display: inline-flex; align-items: center; gap: var(--s2); }
  .news-route .news-legend__item::before { content: ''; width: var(--s3); height: 3px; border-radius: var(--radius-pill); background: var(--news-crypto); }
  .news-route .news-legend__item--market::before { background: var(--news-market); }
  .news-route .news-item { display: grid; gap: var(--s2); padding-block: var(--s3); border-block-end: 1px solid var(--border-soft); }
  .news-route .news-item:last-child { border-block-end: 0; }
  .news-route .news-item__title { display: flex; align-items: flex-start; gap: var(--s2); margin: 0; font-weight: 600; line-height: 1.45; }
  .news-route .news-item__star { flex: none; color: var(--accent-text); }

  .news-route .news-related .r4x-grid > .card { display: flex; align-items: center; gap: var(--s3); transition: border-color var(--motion-fast) var(--ease-standard); }
  .news-route .news-related .r4x-grid > .card:hover { border-color: var(--gold-border); }
  .news-route .news-related h3 { flex: 1; min-width: 0; margin: 0; }
  .news-route .news-related__arrow { color: var(--accent-text); }
  .news-route .news-related__link { color: inherit; text-decoration: none; }
  .news-route .news-related__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-card); }
  .news-route .news-related__link:focus-visible { outline: none; }
  .news-route .news-related__link:focus-visible::after { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .news-route .news-related .r4x-grid > * { position: relative; }

  @media (max-width: 767px) {
    .news-route .news-header { flex-direction: column; }
    .news-route .news-header__icon { width: 42px; height: 42px; }
  }
}

@layer layout {
  .news-route .news-ticker .r4x-actions { margin-block: 0 var(--s3); }
  .news-route .news-columns { align-items: start; }
}