/*
 * news.css — the parts of /ritmi/news the design does not draw.
 *
 * Hand-written; tools/build-ritmi.py links it from the news page only and never
 * rewrites it. The list cards need nothing from here: they are the design's
 * own markup, cloned from <template>s by js/news.js. This file covers the
 * three things a live feed adds — the states, a real cover image inside a
 * card, and the article view — using the design's own colours and the site's
 * font variables. No webfonts, no width media queries, tap targets >= 44px.
 */

/* The list blocks carry inline `display:` from the design, which beats the
   plain [hidden] rule — so hiding them has to be said out loud. */
[data-news-list][hidden],
#news-list[hidden],
#news-detail[hidden] { display: none !important; }

/* -- states: loading · empty · error · unavailable ------------------------ */

.news-state {
  margin: 0;
  padding: clamp(18px, 4vw, 26px);
  border-radius: 22px;
  background: rgba(14, 20, 51, .7);
  border: 1px solid rgba(140, 160, 255, .14);
  color: #A7B0DA;
  font-size: clamp(14.5px, 3.6vw, 16px);
  line-height: 1.6;
  text-wrap: pretty;
}

.news-state a,
.news-back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #67E8F9;
  font-weight: 700;
  text-decoration: none;
}
.news-state a:hover,
.news-back:hover { text-decoration: underline; }

/* While the empty cards below stand for „loading“, the line is only heard
   (it keeps role=status), not shown twice. */
.news-state--quiet {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The error's way out: try again (and, on an article, back to the list). */
.news-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 12px;
}
/* `.news-state` in front: site.css resets `.ritmi-root button` to look like
   the design's plain text — this one is meant to look like a control. */
.news-state .news-retry {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(103, 232, 249, .4);
  background: rgba(103, 232, 249, .1);
  color: #67E8F9;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.news-state .news-retry:hover { background: rgba(103, 232, 249, .18); }

/* -- the list: a real <ul>, each card filling its grid cell --------------- */

#news-list > .news-item { display: flex; min-width: 0; }
/* A card is a block link, not a link inside a sentence: it takes none of the
   inline-link padding site.css gives `li a`. */
#news-list > .news-item > a { flex: 1 1 auto; min-width: 0; padding-block: 0; margin-block: 0; }

/* -- loading: the design's own cards, drawn empty ------------------------- */

.news-skel { pointer-events: none; }
.news-skel [data-news-slot="cover"],
.news-skel [data-news-slot="more"] { visibility: hidden; }
.news-skel [data-news-slot="chip"] { display: none; }
.news-skel [data-news-slot="date"],
.news-skel [data-news-slot="title"],
.news-skel [data-news-slot="excerpt"] {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(140, 160, 255, .08) 0%, rgba(140, 160, 255, .18) 50%, rgba(140, 160, 255, .08) 100%);
  background-size: 200% 100%;
  animation: news-shimmer 1.4s ease-in-out infinite;
}
.news-skel [data-news-slot="date"] { width: 9.5em; max-width: 60%; height: 1em; }
.news-skel [data-news-slot="title"] { width: 78%; height: 1.3em; }
.news-skel [data-news-slot="excerpt"] { width: 100%; height: 3.1em; }
.news-skel[data-news-list] [data-news-slot="title"] { height: 2.5em; }
.news-skel[data-news-list] [data-news-slot="excerpt"] { height: 4.8em; }

@keyframes news-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .news-skel [data-news-slot] { animation: none; }
}

/* -- a real cover inside a design card ------------------------------------ */

/* Replaces the card's fallback drawing. The tile keeps the height and the tint
   the design gave it, so nothing reflows while the image loads. */
.news-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -- the article ---------------------------------------------------------- */

.news-detail {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3.6vw, 24px);
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
  min-width: 0;
}

.news-back { align-self: flex-start; font-size: 14.5px; }

.news-detail__cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(140, 160, 255, .14);
  background: #0E1433;
}

.news-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: #7C86B8;
  font-size: 12.5px;
  font-family: var(--font-mono);
}

.news-detail__title {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  padding-bottom: 4px;
  background: linear-gradient(100deg, #22D3EE, #3B82F6 46%, #A855F7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-serif);
  font-size: clamp(26px, 6.6vw, 40px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.news-detail__excerpt {
  margin: 0;
  color: #A7B0DA;
  font-size: clamp(16px, 4vw, 18px);
  line-height: 1.65;
  text-wrap: pretty;
}

.news-detail__body {
  color: #D5DAF2;
  font-size: clamp(15.5px, 3.9vw, 17px);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.news-detail__body > :first-child { margin-top: 0; }
.news-detail__body > :last-child { margin-bottom: 0; }
.news-detail__body p { margin: 0 0 1.1em; text-wrap: pretty; }
.news-detail__body h2,
.news-detail__body h3,
.news-detail__body h4,
.news-detail__body h5,
.news-detail__body h6 {
  margin: 1.6em 0 .6em;
  color: #F4F6FF;
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.3;
}
/* The editor's type scale (RythmosWeb appTypography.css, the apps' own): the
   post's `#` heading — an <h2> here — is violet, `##` and `###` are cyan, the
   rest stay white. */
.news-detail__body h2 { font-size: clamp(21px, 5.2vw, 27px); font-weight: 800; color: #C084FC; }
.news-detail__body h3 { font-size: clamp(18.5px, 4.6vw, 22px); color: #67E8F9; }
.news-detail__body h4 { font-size: clamp(16.5px, 4.1vw, 19px); color: #67E8F9; }
.news-detail__body h5,
.news-detail__body h6 { font-size: clamp(16.5px, 4.1vw, 19px); }
.news-detail__body a { color: #67E8F9; }
.news-detail__body strong { color: #F4F6FF; }
.news-detail__body ul,
.news-detail__body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.news-detail__body li { margin: .3em 0; }
.news-detail__body li::marker { color: #22D3EE; }
.news-detail__body blockquote {
  margin: 0 0 1.1em;
  padding: 12px 16px;
  position: relative;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(100deg, rgba(34, 211, 238, .10), rgba(168, 85, 247, .08));
  color: #D5DAF2;
  font-weight: 500;
}
/* The quote's bar is the brand gradient, as in the editor. */
.news-detail__body blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #22D3EE, #A855F7);
}
.news-detail__body hr {
  margin: 1.8em 0;
  border: 0;
  border-top: 1px solid rgba(140, 160, 255, .14);
}
.news-detail__body code {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(140, 160, 255, .12);
  font-family: var(--font-mono);
  font-size: .9em;
}
.news-detail__body pre {
  margin: 0 0 1.1em;
  padding: 14px 16px;
  border-radius: 14px;
  background: #0E1433;
  border: 1px solid rgba(140, 160, 255, .14);
  overflow-x: auto;
}
.news-detail__body pre code { padding: 0; background: none; }

/* A wide table scrolls inside its own box; the page itself never does. */
.news-detail__body .md-table-wrap { margin: 0 0 1.1em; overflow-x: auto; }
.news-detail__body table { border-collapse: collapse; min-width: 100%; font-size: .94em; }
.news-detail__body th,
.news-detail__body td {
  padding: 9px 12px;
  border: 1px solid rgba(140, 160, 255, .14);
  text-align: left;
  vertical-align: top;
}
.news-detail__body th { color: #F4F6FF; background: rgba(168, 85, 247, .18); }
.news-detail__body tbody tr:nth-child(even) td { background: rgba(140, 160, 255, .06); }
/* A cell breaks between words only (posts.md §6: a table wider than the
   screen scrolls in its box) — never inside a word, as `anywhere` above would. */
.news-detail__body th,
.news-detail__body td { overflow-wrap: normal; }