/* rado2loc app extension (not in the design system): the "Conseils" articles.
   - .r2l-article-card: R2l::ArticleCardComponent, on the design system's .r2l-card, with a 16:9 picture;
   - .r2l-prose: an article's text, rendered from Markdown (ArticlesHelper#article_body), for reading. */

.r2l-article-card .r2l-card-media { aspect-ratio: 16 / 9; }
.r2l-article-card-mark { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
/* .r2l-card-media stretches its svg over the whole picture: the life ring keeps a modest size. */
.r2l-article-card .r2l-article-card-mark svg { width: auto; height: 40%; }
.r2l-article-card-text { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.r2l-article-card-more { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }

.r2l-prose { max-width: 70ch; font-family: var(--font-sans); font-size: 17px; line-height: 28px; color: var(--ink); overflow-wrap: break-word; }
.r2l-prose > * + * { margin-top: 1em; }
.r2l-prose h2, .r2l-prose h3, .r2l-prose h4, .r2l-prose h5, .r2l-prose h6 { font-family: var(--font-display); font-weight: 500; color: var(--ink); text-wrap: balance; }
.r2l-prose h2 { margin-top: 1.8em; font-size: 28px; line-height: 34px; letter-spacing: -0.015em; }
.r2l-prose h3 { margin-top: 1.6em; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; }
.r2l-prose h4, .r2l-prose h5, .r2l-prose h6 { margin-top: 1.4em; font-size: 18px; line-height: 26px; }
.r2l-prose h2 + *, .r2l-prose h3 + *, .r2l-prose h4 + * { margin-top: .5em; }
.r2l-prose strong { font-weight: 600; }
/* "==words==" in the Markdown: the site's orange, in its shade for text (--action-text), legible on both themes. */
.r2l-prose mark { background: none; color: var(--action-text); font-weight: 600; }
.r2l-prose a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.r2l-prose a:hover { text-decoration-thickness: 2px; }
.r2l-prose ul, .r2l-prose ol { padding-left: 1.4em; }
.r2l-prose ul { list-style: disc; }
.r2l-prose ol { list-style: decimal; }
.r2l-prose li + li { margin-top: .35em; }
.r2l-prose li::marker { color: var(--balise); }
.r2l-prose blockquote { padding-left: var(--space-4); border-left: 3px solid var(--balise); color: var(--ink-muted); }
.r2l-prose code { padding: .1em .35em; border-radius: var(--radius-xs); background: var(--surface-sunken); font-family: var(--font-mono); font-size: .88em; }
.r2l-prose pre { padding: var(--space-4); border-radius: var(--radius-sm); background: var(--surface-sunken); overflow-x: auto; }
.r2l-prose pre code { padding: 0; background: none; }
.r2l-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
/* A wide table scrolls sideways rather than widening the page on a phone. */
.r2l-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.r2l-prose th, .r2l-prose td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.r2l-prose th { background: var(--surface-sunken); font-weight: 600; }
.r2l-prose th[align="right"], .r2l-prose td[align="right"] { text-align: right; }
.r2l-prose th[align="center"], .r2l-prose td[align="center"] { text-align: center; }