/* ============================================================
   Maxillo Clinic — Treatments list (درمان‌ها)
   built on the design system (system.css)
   ============================================================ */

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

/* filter bar (reuses .filterbar / .fbtn from before-after.css when enqueued) */

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

.tx-card{
  display:flex; flex-direction:column; border-radius:var(--radius-l); overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  transition:opacity .45s var(--ease);
}
.tx-card.hide{ display:none; }

.tx-card__media{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; }
.tx-card__media .ph{ position:absolute; inset:0; }
.tx-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tx-card__cat{ position:absolute; top:14px; right:14px; z-index:2; }

.tx-card__body{ padding:24px 26px 26px; display:flex; flex-direction:column; flex:1; }
.tx-card__en{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; color:var(--tan); direction:ltr; }
.tx-card__title{ font-family:var(--font-display); font-weight:800; font-size:1.3rem; line-height:1.25; margin:10px 0 0; }
.tx-card__title a{ color:var(--ink); transition:color .25s; }
.tx-card__title a:hover{ color:var(--green-d); }
.tx-card__desc{ font-size:.94rem; color:var(--ink-2); line-height:1.7; margin:12px 0 0; flex:1; }
.tx-card__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line-soft); }
.tx-card__from{ font-size:.78rem; color:var(--ink-3); }
.tx-card__from b{ display:block; font-family:var(--font-display); font-size:1.1rem; color:var(--ink); font-weight:800; margin-top:2px; }
.tx-card__more{ flex:none; }

/* CTA strip (matches before-after .strip) */
.strip{ background:var(--ink); color:var(--cream); border-radius:var(--radius-l); padding:clamp(34px,5vw,64px); display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-block:clamp(30px,5vw,60px); }
.strip h2{ font-family:var(--font-display); font-weight:900; font-size:clamp(1.8rem,4vw,3rem); margin:0; line-height:1.05; }
.strip p{ color:rgba(238,243,251,.65); margin:12px 0 0; max-width:40ch; }
.strip .btn-primary{ background:#fff; color:var(--ink); }
.strip .btn-primary .arr{ background:var(--green); color:#fff; }
.strip .btn-primary:hover .arr{ transform:rotate(-45deg); }

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