/* News feed pages (plan 2026-10-06-news-feed). Loaded after motion.css
   (tokens), pages.css (sitebar/footer base) and sitepages.css (the .sp/
   .sp-mast evergreen content-page family this page joins — coaches/FAQ/
   press/market pages, NOT the one-off tournament event page). Same rule as
   sitepages.css's own header comment: hairline rules, like a planner or a
   score sheet — no cards, no pill chips for data, no gradient panels.

   Kept in its OWN file rather than appended to sitepages.css: that file's
   `?v=` is a content hash tools/build_site_pages.py derives from its own
   bytes and stamps onto 18 generated pages (coaches/FAQ/market/press, three
   languages each); editing it would force a rebuild of every one of those
   pages, which is outside this plan's file list. Prefixed .np- — grepped
   motion.css, pages.css and sitepages.css first, zero collisions
   (task-observer #153). */

/* ---- index: our posts, as large entries ---- */
/* No own top border: this list always follows .sp-mast (sitepages.css),
   whose bottom border already opens the section — a second rule right
   beneath it read as a doubled hairline in the approved-mockup review. */
.np-posts { list-style: none; margin: 24px 0 0; padding: 0; }
.np-post { border-bottom: 1px solid var(--hairline); }
.np-post > a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 28px 0; color: var(--ink); text-decoration: none; }
.np-post > a:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.np-post > a:focus-visible { outline: 2px solid var(--ink-brand); outline-offset: 3px; border-radius: 4px; }
.np-post img { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; object-fit: cover; background: var(--tint-fill); }
.np-post time { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.np-post h2 { margin: 6px 0 0; font-size: clamp(24px, 4vw, 34px); font-weight: 900; letter-spacing: -0.025em; line-height: 1.12; color: var(--ink); }
.np-post p { margin: 8px 0 0; max-width: 42em; font-size: 16.5px; line-height: 1.5; color: var(--muted); }
/* A post with no hero file yet (the O1 fallback: /assets/og.png is never
   shown as an index thumbnail — it crops badly at any list aspect ratio,
   since it is a square logo card, not a photo). Amaro's ruling, 2026-10-06
   13:39/13:40 WEST: the post page still shows og.png; the index just omits
   the photo slot entirely until a real hero file lands (one front-matter
   line + the file — see news_tool.py's `hero`/`heroIsFallback`). */
.np-post.np-no-photo > a { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  .np-post:not(.np-no-photo) > a { grid-template-columns: 280px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .np-post:not(.np-no-photo) img { aspect-ratio: 4 / 3; }
}

/* ---- index: "Around padel" ---- */
.news-around { margin: 44px 0 0; }
.news-around h2 { margin: 0 0 2px; font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; color: var(--ink); }
.news-around ul { list-style: none; margin: 18px 0 0; padding: 0; border-top: 2px solid var(--ink); }
.news-outside { border-bottom: 1px solid var(--hairline); }
.news-outside a { display: block; padding: 16px 0; color: var(--ink); text-decoration: none; font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.news-outside a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.news-outside a:focus-visible { outline: 2px solid var(--ink-brand); outline-offset: 3px; border-radius: 4px; }
.news-outside-meta { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 500; color: var(--muted); text-decoration: none; }
.news-outside time { font-variant-numeric: tabular-nums; }

/* ---- post page ---- */
.post { padding: 8px 0 0; }
.post > img:first-child { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; object-fit: cover; margin: 0 0 24px; background: var(--tint-fill); }
.post > time { display: block; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; margin: 0 0 8px; }
.post h1 { margin: 0 0 20px; max-width: 18ch; font-size: clamp(32px, 6vw, 56px); font-weight: 900; letter-spacing: -0.03em; line-height: 1.02; color: var(--ink); text-wrap: balance; }
.post h2 { margin: 32px 0 10px; font-size: 22px; letter-spacing: -0.015em; color: var(--ink); }
.post p { max-width: 38em; font-size: 17.5px; line-height: 1.65; color: var(--ink); margin: 0 0 18px; }
.post ul, .post ol { max-width: 38em; font-size: 17.5px; line-height: 1.65; padding-left: 1.3em; margin: 0 0 18px; }
.post li { margin: 0 0 6px; }
.post blockquote { margin: 20px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--ink-brand); font-size: 19px; font-style: italic; color: var(--ink); max-width: 36em; }
.post img:not(:first-child) { max-width: 100%; border-radius: 12px; margin: 8px 0 18px; }
.news-app-band { margin: 40px 0 8px; padding: 28px 0 0; border-top: 2px solid var(--ink); max-width: 38em; }
.news-other-langs { margin: 28px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hairline); font-size: 15px; color: var(--muted); max-width: 38em; }
.news-other-langs a { font-weight: 700; }