/* News (launch/news.js). Card shapes follow NewsFeedReader's reader: a lead story with its headline
   over the image, image cards, every second image card in a grid with its headline over the image,
   side thumbnails in a single column, and text cards when a story has no image. Each state's site.css
   themes them with these properties (defaults in brackets):
   --news-scrim       "R G B" colour behind headlines laid over images [12 12 12]
   --news-on-scrim    text colour over that scrim [#fff]
   --news-radius      image corner radius [0]
   --news-photo-border border drawn around images [none]
   --news-thumb       side thumbnail width in a single column [clamp(5.5rem, 28%, 9.5rem)] */
.news-feed-status { line-height: 1.5; margin: .25rem 0 1rem; font-size: .875em; }
.news-feed-status:empty { display: none; }
.news-feed-retry { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; padding: .6rem 1rem; margin: 1rem 0; cursor: pointer; min-height: 44px; }
.news-feed-retry:disabled { cursor: wait; }
.news-feed-retry:focus-visible, .news-item a:focus-visible, .news-feed-links a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
[data-news-list]:empty { display: none; }
[data-news-list] .news-item__title { overflow-wrap: anywhere; }
[data-news-list] .news-item__type { text-transform: capitalize; }

/* Search and feed icons share one row above the stories. */
.news-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1.25rem; margin: 0 0 .75rem; }
.news-search { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; flex: 1 1 15rem; max-width: 28rem; margin: 0; }
.news-search[hidden] { display: none; }
.news-search__label { flex: 1 0 100%; font-size: .875em; font-weight: 600; line-height: 1.4; }
.news-search__input { flex: 1 1 9rem; min-width: 0; min-height: 44px; margin: 0; padding: .45rem .75rem; font: inherit; font-size: 1rem; color: inherit;
  background: transparent; border: 1px solid currentColor; border-radius: var(--news-radius, 0); }
.news-search__input::-webkit-search-cancel-button { display: none; }
.news-search__clear { font: inherit; font-size: .875em; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: var(--news-radius, 0);
  min-height: 44px; padding: .4rem .8rem; cursor: pointer; }
.news-search__input:focus-visible, .news-search__clear:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
/* Race, type and publisher filters (launch/news.js). Each shows only when it has a choice to make. */
.news-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem .6rem; flex: 10 1 18rem; min-width: 0; margin: 0; }
.news-filters[hidden] { display: none; }
.news-filter { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 8.5rem; min-width: 0; max-width: 18rem; }
.news-filter[hidden] { display: none; }
.news-filter__label { font-size: .875em; font-weight: 600; line-height: 1.4; }
.news-filter__select { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: .45rem 2rem .45rem .75rem; font: inherit; font-size: 1rem; color: inherit;
  background: transparent; border: 1px solid currentColor; border-radius: var(--news-radius, 0); cursor: pointer; text-overflow: ellipsis; }
.news-filter__select option { color: #111; background: #fff; }
.news-filter__select:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }
/* Beside a card the column is narrow: search on its own row, then the filters. */
.news-column .news-search, .news-column .news-filters { flex-basis: 100%; max-width: none; }
/* The race names are long: the race filter takes its own row there. */
.news-column .news-filter:first-child { flex-basis: 100%; max-width: none; }
.news-feed-links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: .5rem 0; line-height: 1.4; }
.news-toolbar .news-feed-links { margin: 0 0 0 auto; }
.news-feed-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
.news-feed-link--text { min-width: 0; padding: 0 .25rem; font-size: .875em; }
.news-feed-icon { width: 1.6rem; height: 1.6rem; flex: none; }
.news-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* Cards. Image frames have fixed proportions, so a page's height is known before images arrive. */
[data-news-list] .news-item { position: relative; min-width: 0; }
[data-news-list] .news-item__photo { position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin: 0 0 .75rem; border: var(--news-photo-border, 0);
  border-radius: var(--news-radius, 0); background: color-mix(in srgb, currentColor 10%, transparent); }
[data-news-list] .news-item__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
/* The headline link covers its whole image card, so the image opens the story too. */
[data-news-list] .news-item--photo .news-item__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
[data-news-list] .news-item--photo:hover .news-item__title a { text-decoration-thickness: max(2px, .1em); }
[data-news-list] .news-item--photo .news-item__photo img { transition: transform .4s ease; }
[data-news-list] .news-item--photo:hover .news-item__photo img { transform: scale(1.03); }

/* Headline over the image: the lead story, and every second image card in a grid. The scrim under the
   text is at least 80% opaque, so text contrast does not depend on the picture. */
[data-news-list] .news-item--overlay { isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-self: stretch;
  min-height: 15rem; padding: 0; overflow: hidden; color: var(--news-on-scrim, #fff); background: rgb(var(--news-scrim, 12 12 12)); }
[data-news-list] .news-item--overlay .news-item__photo { position: absolute; inset: 0; z-index: -1; margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
[data-news-list] .news-item--overlay .news-item__body { margin: 0; padding: 4.5rem 1.1rem 1.1rem;
  background: linear-gradient(to top, rgb(var(--news-scrim, 12 12 12) / .9), rgb(var(--news-scrim, 12 12 12) / .8) calc(100% - 4.5rem), rgb(var(--news-scrim, 12 12 12) / 0)); }
[data-news-list] .news-item--overlay :is(.news-item__meta, .news-item__meta *, .news-item__title, .news-item__title a) { color: var(--news-on-scrim, #fff); }
[data-news-list] .news-item--overlay a:focus-visible { outline-color: var(--news-on-scrim, #fff); }
[data-news-list] .news-item--lead .news-item__title { font-size: 1.3em; }
[data-news-list] .news-item--lead.news-item--overlay { min-height: clamp(17rem, 60vw, 24rem); }

/* Grids: an image lead spans two columns (and two rows in three or more). */
[data-news-columns="2"] > .news-item--lead.news-item--photo { grid-column: 1 / -1; }
[data-news-columns="2"] > .news-item--lead.news-item--overlay { min-height: clamp(18rem, 34vw, 26rem); }
:is([data-news-columns="3"], [data-news-columns="4"]) > .news-item--lead.news-item--photo { grid-column: span 2; grid-row: span 2; }
:is([data-news-columns="3"], [data-news-columns="4"]) > .news-item--lead.news-item--overlay { min-height: 28rem; }

/* Short pages (launch/news.js fillRows): a lone story spans the row, a two-row lead flattens to one row,
   and the last story widens to the end of its row. */
[data-news-list] > .news-item.news-item--wide { grid-column: 1 / -1; grid-row: auto; }
[data-news-list] > .news-item.news-item--flat { grid-row: auto; }
[data-news-list] > .news-item--wide.news-item--overlay, [data-news-list] > .news-item--flat.news-item--overlay { min-height: clamp(18rem, 30vw, 24rem); }
[data-news-list] > .news-item.news-item--span-2 { grid-column: span 2; }
[data-news-list] > .news-item.news-item--span-3 { grid-column: span 3; }
[data-news-list] > .news-item.news-item--span-4 { grid-column: span 4; }

/* A single column: a taller lead keeps its picture visible above the headline, and image cards
   become side thumbnails. */
[data-news-columns="1"] > .news-item--lead.news-item--overlay { min-height: 22rem; }
[data-news-columns="1"] > .news-item--lead.news-item--overlay .news-item__body { padding-top: 3.5rem; }
[data-news-columns="1"] > .news-item--photo:not(.news-item--overlay) { display: grid; grid-template-columns: minmax(0, 1fr) var(--news-thumb, clamp(5.5rem, 28%, 9.5rem));
  column-gap: 1rem; align-items: start; }
[data-news-columns="1"] > .news-item--photo:not(.news-item--overlay) .news-item__photo { grid-column: 2; grid-row: 1; aspect-ratio: 1; margin: .2rem 0 0; }
[data-news-columns="1"] > .news-item--photo:not(.news-item--overlay) .news-item__body { grid-column: 1; grid-row: 1; min-width: 0; }

@media (forced-colors: active) {
  [data-news-list] .news-item--overlay .news-item__body { background: Canvas; }
  [data-news-list] .news-item--overlay :is(.news-item__meta, .news-item__meta *, .news-item__title, .news-item__title a) { color: CanvasText; }
  [data-news-list] .news-item--overlay .news-item__title a { color: LinkText; }
}
@media (prefers-reduced-motion: reduce) {
  [data-news-list] .news-item--photo .news-item__photo img { transition: none; }
  [data-news-list] .news-item--photo:hover .news-item__photo img { transform: none; }
}

/* Paging between pages of stories that fit the news area. */
.news-pager { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0 0; }
.news-pager__button { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; padding: .6rem 1rem; min-height: 44px; cursor: pointer; }
.news-pager__button:disabled { opacity: .45; cursor: default; }
.news-pager__button:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.news-pager__range { margin: 0; line-height: 1.6; font-variant-numeric: tabular-nums; }

/* Split layout (data-news-more): the column's closing count and its link to the rest. */
.news-summary { margin: 1rem 0 0; line-height: 1.5; font-size: .875em; font-variant-numeric: tabular-nums; }
.news-summary:empty { display: none; }
.news-summary__more { display: inline-flex; align-items: center; min-height: 44px; }
.news-summary__more:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }