/* Blog section: the post index (/blog/, /en/blog/) and the post layout. Loaded through pageCss on those pages
   only. Every colour, size and space comes from the tokens in rethink.css; logical properties keep the Arabic
   pages right to left and the English pages left to right. */

/* index cards */
.post-grid { display: grid; gap: var(--s4) var(--gutter); }
@media (min-width: 834px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .post-grid { grid-template-columns: 1fr 1fr 1fr; } }
.post-card > a { display: flex; flex-direction: column; gap: var(--s2); height: 100%; }
.post-card-thumb { aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--radius) * 2) 0 0 0; border: 1px solid var(--line); background: var(--ink); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; gap: var(--s1); }
.post-card h2 { font-size: var(--step-1); font-weight: 400; line-height: var(--lead-mid); text-wrap: balance; transition: color 180ms; }
.post-card > a:hover h2 { color: var(--lumen); }
.post-card-body p { font-size: var(--step-0); font-weight: 300; line-height: var(--lead-body); text-wrap: pretty; }
.post-card-body .post-card-meta { display: flex; flex-wrap: wrap; gap: var(--s0); font-size: var(--step--1); font-weight: 500; color: var(--sec); }
.blog-empty { color: var(--sec); }

/* post column */
.post-col { max-width: 68ch; margin-inline: auto; }
.post-crumb { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s4); font-size: var(--step--1); font-weight: 500; color: var(--sec); }
.post-crumb a { transition: color 180ms; }
.post-crumb a:hover { color: var(--lumen); }
.post-head { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.post-title { font-size: clamp(var(--step-2), 4vw, var(--step-3)); font-weight: 500; line-height: var(--lead-display); color: var(--ink); text-wrap: balance; }
html[lang="en"] .post-title { letter-spacing: -.02em; }
.post-meta { display: flex; flex-wrap: wrap; gap: var(--s1); font-size: var(--step--1); font-weight: 500; color: var(--sec); }
.post-hero { margin: 0 0 var(--s5); }
.post-hero img { width: 100%; height: auto; border-radius: calc(var(--radius) * 2) 0 0 0; border: 1px solid var(--line); background: var(--ink); }

/* body copy */
.post-body { font-size: var(--step-0); font-weight: 300; line-height: var(--lead-body); color: var(--ink); text-wrap: pretty; }
.post-body > * + * { margin-top: var(--s2); }
.post-body h2 { font-size: var(--step-1); font-weight: 400; line-height: var(--lead-mid); margin-top: var(--s5); }
.post-body h3 { font-size: var(--step-0); font-weight: 500; line-height: var(--lead-mid); margin-top: var(--s4); }
.post-body ul { list-style: disc; padding-inline-start: var(--s4); }
.post-body ol { list-style: decimal; padding-inline-start: var(--s4); }
.post-body li + li { margin-top: var(--s0); }
.post-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sec); transition: color 180ms; }
.post-body a:hover { color: var(--lumen); }
.post-body strong { font-weight: 500; }
.post-body blockquote { margin: var(--s4) 0; padding-inline-start: var(--s3); border-inline-start: 2px solid var(--lumen); }
.post-body img { max-width: 100%; height: auto; }

/* chart and diagram figures: full column width, one rounded corner like the site's figures, caption small and secondary */
.post-chart, .post-diagram { margin: var(--s5) 0; width: 100%; }
.post-chart img, .post-diagram img { width: 100%; height: auto; border-radius: calc(var(--radius) * 2) 0 0 0; border: 1px solid var(--line); background: var(--ink); }
.post-chart figcaption, .post-diagram figcaption { margin-top: var(--s1); font-size: var(--step--1); line-height: var(--lead-body); color: var(--sec); }

/* tables scroll inside the column instead of widening the page */
.post-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin-block: var(--s4); }
.post-body th, .post-body td { padding: var(--s1) var(--s2); border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.post-body th { font-size: var(--step--1); font-weight: 500; color: var(--sec); white-space: nowrap; }

/* FAQ and sources */
.post-faq, .post-sources { margin-top: var(--s6); }
.post-faq h2, .post-sources h2 { font-size: var(--step-1); font-weight: 400; line-height: var(--lead-mid); margin-bottom: var(--s3); }
.post-faq .acc .acc-body { max-width: none; }
.post-sources ol { list-style: decimal; padding-inline-start: var(--s3); display: flex; flex-direction: column; gap: var(--s2); }
.post-sources li { line-height: var(--lead-body); }
.post-sources a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sec); overflow-wrap: anywhere; transition: color 180ms; }
.post-sources a:hover { color: var(--lumen); }
.post-accessed { display: block; font-size: var(--step--1); color: var(--sec); }

/* the disclaimer closes every post */
.post-disclaimer { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); font-size: var(--step--1); font-weight: 500; color: var(--sec); }

/* Tap to enlarge (EL Houssine, 2026-11-05): charts and diagrams open larger; the badge says so. */
.zoom-trigger { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit; font: inherit; }
.zoom-badge { position: absolute; top: var(--s2); inset-inline-end: var(--s2); display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(12, 0, 43, 0.78); color: #F1EDF5; font-size: var(--step--1); line-height: 1; border: 1px solid rgba(241, 237, 245, 0.25); pointer-events: none; transition: background 180ms; }
.zoom-trigger:hover .zoom-badge, .zoom-trigger:focus-visible .zoom-badge { background: #7019BD; }
.zoom-trigger:focus-visible { outline: 2px solid var(--lumen); outline-offset: 3px; }
.zoom-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: #0C002B; color: #F1EDF5; }
.zoom-dialog::backdrop { background: rgba(12, 0, 43, 0.7); }
.zoom-scroll { width: 100%; height: 100%; overflow: auto; display: grid; place-items: center; padding: 56px 16px 16px; }
.zoom-scroll img { display: block; width: auto; max-width: 96vw; max-height: calc(100dvh - 80px); height: auto; }
.zoom-close { position: fixed; top: 12px; inset-inline-end: 12px; z-index: 1; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(241, 237, 245, 0.35); background: rgba(12, 0, 43, 0.85); color: #F1EDF5; font: inherit; font-size: var(--step--1); cursor: pointer; }
html.zoom-open { overflow: hidden; }
@media (max-width: 700px) {
  .zoom-scroll { place-items: center start; }
  .zoom-scroll img { width: 170vw; max-width: none; max-height: none; }
}