/* ============================================================
   Maxillo Clinic — Articles / Blog (مقالات)
   built on the design system (system.css)
   ============================================================ */

/* page head (shared with archives) */
.phead{ padding-top:clamp(40px,6vw,80px); padding-bottom:clamp(24px,4vw,46px); }
.phead h1{ margin:.18em 0 0; }
.phead .lead{ margin-top:22px; }

/* ── grid ── */
.art-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding-block:clamp(28px,4vw,52px); }
@media(max-width:1040px){ .art-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .art-grid{ grid-template-columns:1fr; } }

.art-card{
  display:flex; flex-direction:column; border-radius:var(--radius-l); overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
}
.art-card__media{ position:relative; display:block; aspect-ratio:16/10; overflow:hidden; }
.art-card__media .ph{ position:absolute; inset:0; }
.art-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.art-card__cat{ position:absolute; top:14px; right:14px; z-index:2; }
.art-card__body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.art-card__meta{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-3); direction:rtl; }
.art-card__title{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; line-height:1.25; margin:10px 0 0; }
.art-card__title a{ color:var(--ink); transition:color .25s; }
.art-card__title a:hover{ color:var(--green-d); }
.art-card__excerpt{ font-size:.94rem; color:var(--ink-2); line-height:1.7; margin:12px 0 0; flex:1; }
.art-card__more{ margin-top:18px; }

/* ── pagination ── */
.art-pagination{ display:flex; justify-content:center; padding-bottom:clamp(40px,6vw,80px); }
.art-pagination .nav-links{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.art-pagination .page-numbers{
  display:grid; place-items:center; min-width:44px; height:44px; padding:0 14px; border-radius:var(--radius-btn);
  background:var(--surface); border:1px solid var(--line);
  color:var(--ink); font-weight:700; font-size:.92rem; transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.art-pagination a.page-numbers:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.art-pagination .page-numbers.current{ background:var(--ink); color:#fff; border-color:var(--ink); }
.art-pagination .page-numbers.dots{ background:transparent; border:0; box-shadow:none; }

/* ── single article ── */
.single-art{ max-width:780px; margin-inline:auto; padding-block:clamp(32px,5vw,60px); }
.single-art__head{ text-align:center; }
.single-art__head h1{ margin:.2em 0 0; }
.art-meta{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:20px; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-3); direction:rtl; }
.art-meta .sep{ width:4px; height:4px; border-radius:50%; background:var(--green); opacity:.6; }
.single-art__media{ position:relative; aspect-ratio:16/9; border-radius:var(--radius-l); overflow:hidden; margin:clamp(26px,4vw,40px) 0; border:1px solid var(--line); }
.single-art__media img{ width:100%; height:100%; object-fit:cover; }
.single-art__media .ph{ position:absolute; inset:0; }

/* prose */
.art-content{ color:var(--ink-2); }
.art-content > *{ margin:0 0 1.1em; }
.art-content p,.art-content li{ font-size:clamp(1.04rem,1.2vw,1.16rem); line-height:1.95; }
.art-content h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(1.5rem,2.4vw,2rem); color:var(--ink); margin:1.5em 0 .4em; }
.art-content h3{ font-family:var(--font-display); font-weight:800; font-size:1.28rem; color:var(--ink); margin:1.3em 0 .3em; }
.art-content a{ color:var(--green-d); border-bottom:1px solid var(--line); }
.art-content a:hover{ border-color:var(--green); }
.art-content img,.art-content figure img{ border-radius:var(--radius); border:1px solid var(--line); height:auto; }
.art-content blockquote{ margin:1.4em 0; padding:4px 22px; border-inline-start:3px solid var(--green); color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:1.2rem; }
.art-content ul,.art-content ol{ padding-inline-start:1.4em; }
.art-content figcaption{ font-size:.84rem; color:var(--ink-3); text-align:center; margin-top:.5em; }

.art-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:clamp(26px,4vw,40px); padding-top:24px; border-top:1px solid var(--line); }
.art-back{ margin-top:24px; }

/* final CTA on single */
.art-cta{ max-width:780px; margin:clamp(26px,4vw,48px) auto 0; background:var(--ink); color:var(--cream); border-radius:var(--radius-l); padding:clamp(32px,5vw,56px); display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; }
.art-cta h2{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.5rem,3vw,2.4rem); margin:0; line-height:1.1; }
.art-cta p{ color:rgba(238,243,251,.7); margin:8px 0 0; max-width:42ch; }
.art-cta .btn-primary{ background:#fff; color:var(--ink); }
.art-cta .btn-primary .arr{ background:var(--green); color:#fff; }
.art-cta .btn-primary:hover .arr{ transform:rotate(-45deg); }

/* empty */
.art-empty{ text-align:center; padding:80px 0; color:var(--ink-3); font-family:var(--font-mono); }