/* Stories listing and story detail (views/pages/{lang}/Stories.njk and Story.njk). */

/* The filter toolbar needs JavaScript. site.js removes its [hidden] attribute when scripts run, so
   a toolbar without [hidden] proves scripts ran even if html.js is missing (the committed
   display-init.js only added it when display settings were saved). Same safeguard as events.css. */
html:not(.js) #browse [data-js-only]:not([hidden]) { display: flex !important; }

/* Filter chips: the tick shows while a chip is pressed, the type icon while it is not, as on the
   design board (filters.js keeps aria-pressed in sync). */
#browse .chip > svg { flex: none; }
#browse .chip[aria-pressed="false"] > [data-chk],
#browse .chip[aria-pressed="true"] > [data-ico] { display: none; }

/* Copy that names the chosen type (status line, empty state pill and lead). The "All" version
   shows by default, so without :has() support the page still reads correctly. */
#browse [data-st-show="recap"],
#browse [data-st-show="news"] { display: none; }
#browse:has([data-filter-value="recap"][aria-pressed="true"]) [data-st-show="all"],
#browse:has([data-filter-value="news"][aria-pressed="true"]) [data-st-show="all"] { display: none; }
#browse:has([data-filter-value="recap"][aria-pressed="true"]) [data-st-show="recap"],
#browse:has([data-filter-value="news"][aria-pressed="true"]) [data-st-show="news"] { display: revert; }

/* Titles, summaries and story text are written in the admin and can hold a long word or a pasted
   link: let them wrap instead of spilling out of the card or the page on small screens. */
.st-card .t-h3, .st-card p, .st-crumb, #sd-title, #sd-title ~ .t-lead, .st-rich { overflow-wrap: anywhere; }
.st-crumb { min-width: 0; }

/* Story cards: the whole card opens the story; the "Read the story" link carries its name. */
.st-card { transition: transform .2s ease, box-shadow .2s ease; }
.st-card:hover { transform: translateY(-2px); box-shadow: var(--hair), var(--sh-3) !important; }
.st-card__a { color: var(--fg); text-decoration: none; }
.st-card__a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.st-card__a:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .st-card:hover { transform: none; } }
html[data-m3-motion="reduce"] .st-card:hover { transform: none; }

/* Story detail: the text written in the admin, at a comfortable line length. */
.st-rich { max-width: 68ch; }
.st-rich > h3:not(:first-child) { margin-block-start: 16px; }
.st-rich a { color: var(--link); text-decoration: underline; }
.st-rich, .st-rich .t-body { font-size: 1.125rem; line-height: 1.7; }
.st-rich:lang(ar), .st-rich .t-body:lang(ar) { font-size: 1.25rem; line-height: 1.8; }