/* MrLicense Articles – بازسازی بخش «دانش و راهنمای انتخاب راهکار» (همهٔ کلاس‌ها با .mla شروع می‌شوند) */

.mla{
  --mla-navy:#0b132b;--mla-blue:#1d4ed8;--mla-ink:#0f172a;--mla-muted:#475569;
  --mla-card:#f8fafc;--mla-line:rgba(226,232,240,.8);
  padding:80px 0;background:var(--mla-bg,#fff);color:var(--mla-ink);
  font-family:inherit;line-height:1.5;text-align:right;
}
.mla,.mla *,.mla *:before,.mla *:after{box-sizing:border-box}
.mla a{color:inherit;text-decoration:none}

.mla__wrap{max-width:1280px;margin:0 auto;padding:0 16px}

/* ---------- سرتیتر ---------- */
.mla__head{display:flex;flex-direction:column;margin-bottom:64px}
.mla__head>div:first-child{flex:1 1 auto;min-width:0}
.mla__kicker{display:block;color:var(--mla-blue);font-size:14px;line-height:20px;font-weight:600}
.mla .mla__title{margin:8px 0 0;color:var(--mla-navy);font-size:30px;line-height:36px;font-weight:800;letter-spacing:normal}
.mla .mla__all{margin-top:16px;color:var(--mla-blue);font-size:14px;line-height:20px;font-weight:600}
.mla .mla__all:hover{text-decoration:underline}

/* ---------- شبکه ---------- */
.mla__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}

/* ---------- کارت ---------- */
.mla__card{
  position:relative;display:block;overflow:hidden;
  background:var(--mla-card);border:1px solid var(--mla-line);border-radius:16px;
  transition:border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.mla__card:hover{
  border-color:rgba(37,99,235,.4);
  box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
}

/* بالای کارت (گرادینت + برچسب + زمان مطالعه) */
.mla__art{
  position:relative;display:flex;align-items:flex-end;overflow:hidden;
  height:192px;padding:24px;
  background:linear-gradient(to top right,#0b132b,#1e293b);
}
.mla__card--b .mla__art{background:linear-gradient(to top right,#0f172a,#1c2541)}
.mla__card--c .mla__art{background:linear-gradient(to top right,#1e293b,#1e3a8a)}

.mla__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block;margin:0;max-width:none;border-radius:0}

/* برچسب دسته: هر کارت یک رنگ (۸ رنگ، به‌صورت چرخشی) */
.mla__badge{
  --mla-rgb:37,99,235;--mla-light:#93c5fd;
  position:absolute;z-index:2;top:16px;right:16px;
  padding:4px 10px;border-radius:4px;
  background:rgba(var(--mla-rgb),.2);color:var(--mla-light);
  font-size:12px;line-height:16px;font-weight:600;
}
.mla__c1{--mla-rgb:37,99,235;--mla-light:#93c5fd}
.mla__c2{--mla-rgb:139,92,246;--mla-light:#c4b5fd}
.mla__c3{--mla-rgb:16,185,129;--mla-light:#6ee7b7}
.mla__c4{--mla-rgb:245,158,11;--mla-light:#fcd34d}
.mla__c5{--mla-rgb:244,63,94;--mla-light:#fda4af}
.mla__c6{--mla-rgb:6,182,212;--mla-light:#67e8f9}
.mla__c7{--mla-rgb:236,72,153;--mla-light:#f9a8d4}
.mla__c8{--mla-rgb:99,102,241;--mla-light:#a5b4fc}
/* وقتی تصویر پشت برچسب است، رنگ پررنگ و خوانا می‌شود */
.mla__art.has-img .mla__badge{background:rgb(var(--mla-rgb));color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.mla__c4.mla__badge{--mla-rgb:217,119,6}
.mla__time{position:relative;z-index:2;color:#cbd5e1;font-size:12px;line-height:16px}
.mla__art.has-img .mla__time{padding:2px 8px;border-radius:4px;background:rgba(11,19,43,.7);color:#fff}

/* بدنهٔ کارت */
.mla__body{padding:24px;text-align:right}
.mla .mla__card-title{
  margin:0 0 12px;color:var(--mla-navy);font-size:18px;line-height:1.375;font-weight:700;letter-spacing:normal;
  transition:color .15s ease;
}
.mla__card:hover .mla__card-title{color:var(--mla-blue)}
/* کل کارت قابل کلیک است */
.mla__link:after{content:"";position:absolute;inset:0;z-index:3}
.mla__link:focus-visible{outline:2px solid var(--mla-blue);outline-offset:2px}

.mla .mla__excerpt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
  margin:0 0 16px;color:var(--mla-muted);font-size:14px;line-height:1.625;
}
.mla__more{display:inline-flex;align-items:center;color:var(--mla-blue);font-size:14px;line-height:20px;font-weight:600}
.mla__more svg{width:16px;height:16px;margin-right:4px;transform:rotate(180deg)}

.mla-notice{padding:16px;border:1px dashed #cbd5e1;border-radius:8px;text-align:center;color:#64748b;font-size:14px}

/* ---------- انیمیشن ورود (فقط وقتی جاوااسکریپت فعال باشد) ---------- */
.mla__card.mla-pre,.mla__card.mla-in{
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),
             border-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);
}
.mla__card.mla-pre{opacity:0;transform:translateY(24px)}
.mla__card.mla-in{opacity:1;transform:none}

/* ---------- ریسپانسیو ---------- */
@media(min-width:640px){
  .mla__wrap{padding:0 24px}
  .mla .mla__title{font-size:36px;line-height:40px}
}
@media(min-width:768px){
  .mla__head{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .mla .mla__all{margin-top:0}
  .mla__grid{grid-template-columns:repeat(var(--mla-cols-md,3),minmax(0,1fr))}
}
@media(min-width:1024px){
  .mla__wrap{padding:0 32px}
  .mla__grid{grid-template-columns:repeat(var(--mla-cols,3),minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .mla__card.mla-pre{opacity:1;transform:none}
  .mla__card.mla-pre,.mla__card.mla-in{transition:none}
}