/* صفحات المقالات (ثابتة) + قسم المقالات في الرئيسية. بتعتمد على tokens style.css/theme.css */
.art-page main { padding: 28px 0 56px; }
.art-nav { flex-wrap: wrap; }
.crumbs { font-size: .9rem; color: var(--muted); margin: 6px 0 18px; }
.crumbs a { text-decoration: none; font-weight: 500; }
.crumbs a:hover { text-decoration: underline; }
.art-h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: .2em 0 .35em; line-height: 1.35; }
.art-h2 { font-size: 1.5rem; margin: 1.6em 0 .6em; }
.art-lead { font-size: 1.1rem; color: var(--muted); max-width: 70ch; }
.art-meta { color: var(--muted); font-size: .9rem; margin: 0 0 1.2em; }
.art-cat { display: inline-block; background: var(--cream-2); border: 2px solid var(--line); border-radius: 999px; padding: 0 .75em; font-size: .85rem; font-weight: 500; text-decoration: none; color: var(--fg); }

.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.art-card { background: var(--white); border: 3px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 0 rgba(3, 27, 84, .10); }
.art-media { display: block; aspect-ratio: 16 / 9; background: var(--cream-2); }
.art-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-media .ph, .cat-media .ph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 3rem; background: linear-gradient(135deg, var(--cream-2), var(--soft)); }
.art-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.art-body h3 { font-size: 1.15rem; margin: 0; line-height: 1.45; }
.art-body h3 a { text-decoration: none; }
.art-body h3 a:hover { text-decoration: underline; }
.art-body p { color: var(--muted); font-size: .95rem; margin: 0; }
.art-card .art-meta { margin: auto 0 0; font-size: .82rem; padding-top: 6px; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.cat-card { display: flex; flex-direction: column; text-decoration: none; background: var(--white); border: 3px solid var(--line); border-radius: 18px; overflow: hidden; }
.cat-card:hover { background: var(--hover-bg); }
.cat-media { display: block; aspect-ratio: 16 / 9; background: var(--cream-2); }
.cat-media img { width: 100%; height: 100%; object-fit: cover; }
.cat-name { font-weight: 600; padding: 8px 12px 0; font-family: var(--font-display); }
.cat-n { color: var(--muted); font-size: .85rem; padding: 0 12px 10px; }
.cat-hero { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius); border: 3px solid var(--line); margin-bottom: 14px; }
.cat-links a { display: inline-block; margin: 4px 6px 4px 0; padding: .25em .9em; border: 2px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--white); }

.art-full { background: var(--white); border: 3px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 4vw, 38px); }
.art-hero { margin: 0 0 22px; }
.art-hero img { width: 100%; height: auto; border-radius: 18px; border: 3px solid var(--line); display: block; }
.art-content { font-size: 1.12rem; line-height: 2.05; color: var(--text); }
.art-content h2 { font-size: 1.6rem; margin: 1.6em 0 .5em; }
.art-content h3 { font-size: 1.28rem; margin: 1.4em 0 .4em; }
.art-content p { margin: 0 0 1.1em; }
.art-content ul, .art-content ol { padding-inline-start: 1.6em; margin: 0 0 1.2em; }
.art-content li { margin-bottom: .4em; }
.art-content blockquote { margin: 1.2em 0; padding: .8em 1.2em; border-inline-start: 6px solid var(--ruby); background: var(--soft); border-radius: 12px; }
.art-content a { color: var(--ruby-d); text-decoration: underline; }
.art-content img { max-width: 100%; height: auto; border-radius: 14px; }
.art-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.art-content th, .art-content td { border: 2px solid var(--line); padding: .5em .7em; }
.related { margin-top: 36px; }

.foot-links { margin: 0 0 .8em; }
.foot-links a { text-decoration: none; font-weight: 500; }
.foot-links a:hover { text-decoration: underline; }

/* الرئيسية */
.home-articles { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: start; }
.home-articles h3 { font-size: 1.4rem; margin-bottom: .6em; }
.ha-main .art-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ha-side { background: var(--white); border: 3px solid var(--line); border-radius: var(--radius); padding: 18px; }
.art-top { list-style: none; margin: 0 0 14px; padding: 0; }
.art-top li + li { border-top: 2px dashed var(--track); }
.art-top a { display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; padding: 10px 0; text-decoration: none; align-items: center; }
.art-top a:hover .t { text-decoration: underline; }
.art-top .rank { grid-row: span 2; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); border: 2px solid var(--line); font-weight: 700; color: var(--ink); }
.art-top .t { font-weight: 600; line-height: 1.45; }
.art-top .v { color: var(--muted); font-size: .82rem; }
@media (max-width: 880px) { .home-articles { grid-template-columns: 1fr; } }