/* =========================================================================
   وبلاگ محمودی اسپورت — نسخه پریمیوم / ادیتوریال حرفه‌ای
   فقط در articles.html و article.html بارگذاری می‌شود؛ site.css را دست‌نخورده نگه می‌دارد.
   ========================================================================= */

/* ─── نوار پیشرفت مطالعه (فقط صفحه‌ی تک‌مقاله) ─────────────────────────── */
.reading-progress{
  position:fixed; top:0; right:0; left:0; height:3px; z-index:250;
  background:transparent; pointer-events:none;
}
.reading-progress::after{
  content:""; display:block; height:100%; width:var(--rp,0%);
  background:linear-gradient(90deg,var(--blue-accent),var(--blue-accent-light));
  transition:width .1s linear;
}

/* ─── چیپ عمومی (دسته/زمان مطالعه/تاریخ) ─────────────────────────────── */
.chip{display:inline-flex; align-items:center; gap:5px; padding:5px 12px; border-radius:999px; font-size:11.5px; font-weight:700;}

/* ============================================================
   صفحه آرشیو مقالات (articles.html)
   ============================================================ */
.articles-hero{
  position:relative; border-radius:22px; overflow:hidden; margin-top:6px;
  background:linear-gradient(135deg,var(--navy-900) 0%, var(--navy-700) 100%);
  padding:44px 40px; color:#fff;
}
.articles-hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 20%, rgba(47,111,237,.35), transparent 55%),
             radial-gradient(circle at 10% 90%, rgba(92,141,255,.22), transparent 50%);
  pointer-events:none;
}
.articles-hero-inner{position:relative; z-index:1; max-width:640px;}
.articles-hero .eyebrow{color:var(--blue-accent-light);}
.articles-hero h1{font-size:clamp(24px,3.6vw,38px); font-weight:900; margin-bottom:12px; font-family:'Meem',Tahoma,sans-serif;}
.articles-hero p{color:#c7d2e9; font-size:15px; line-height:1.9; max-width:520px;}
.articles-hero-stats{display:flex; gap:26px; margin-top:26px; flex-wrap:wrap;}
.articles-hero-stats div{display:flex; flex-direction:column; gap:2px;}
.articles-hero-stats b{font-size:20px; font-weight:900; font-family:'Meem',Tahoma,sans-serif;}
.articles-hero-stats span{font-size:11.5px; color:#9fb0d4;}
@media (max-width:640px){ .articles-hero{padding:32px 22px;} }

.articles-toolbar-pro{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:30px 0 8px;
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:10px 10px 10px 16px;
  box-shadow:var(--shadow-sm);
}
.articles-search-box{
  flex:1; min-width:220px; display:flex; align-items:center; gap:10px; background:var(--ice);
  border-radius:12px; padding:11px 16px;
}
.articles-search-box svg{flex-shrink:0; color:var(--gray-600);}
.articles-search-box input{flex:1; background:transparent; border:none; font-size:14px; font-family:inherit; color:var(--gray-900);}
.articles-search-box input:focus{outline:none;}

.articles-cat-filters{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 6px;}
.cat-pill{
  padding:9px 18px; border-radius:100px; background:var(--ice); color:var(--navy-900); font-size:12.5px; font-weight:800;
  border:1.5px solid transparent; transition:var(--speed); display:inline-flex; align-items:center; gap:6px;
}
.cat-pill:hover{border-color:var(--blue-accent);}
.cat-pill.active{background:var(--navy-900); color:#fff;}

.articles-tag-filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}

/* ─── کارت مقاله پریمیوم ─────────────────────────────────────────────── */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:980px){ .article-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .article-grid{grid-template-columns:1fr;} }

.article-card-pro{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:18px;
  overflow:hidden; transition:transform var(--speed), box-shadow var(--speed); height:100%;
}
.article-card-pro:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent;}
.article-card-pro .ac-thumb{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  background:linear-gradient(155deg,#eef2f9,#dde4f1);
}
.article-card-pro .ac-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1);}
.article-card-pro:hover .ac-thumb img{transform:scale(1.07);}
.article-card-pro .ac-cat{
  position:absolute; top:12px; right:12px; background:rgba(10,21,48,.72); backdrop-filter:blur(4px);
  color:#fff; font-size:11px; font-weight:800; padding:6px 13px; border-radius:100px;
}
.article-card-pro .ac-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
.article-card-pro .ac-meta{display:flex; align-items:center; gap:12px; font-size:11.5px; color:var(--gray-600); font-weight:600;}
.article-card-pro .ac-meta span{display:inline-flex; align-items:center; gap:4px;}
.article-card-pro h4{font-size:16px; font-weight:800; color:var(--navy-900); line-height:1.6;}
.article-card-pro .ac-excerpt{font-size:13px; color:var(--gray-600); line-height:1.85; flex:1;}
.article-card-pro .ac-more{
  display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:800; color:var(--blue-accent);
  margin-top:4px;
}
.article-card-pro .ac-more svg{transition:transform var(--speed);}
.article-card-pro:hover .ac-more svg{transform:translateX(-4px);}

.articles-archive-grid{margin-top:8px;}

/* ============================================================
   صفحه‌ی اختصاصی یک مقاله (article.html)
   ============================================================ */
.article-premium-wrap{max-width:820px; margin:0 auto;}

.article-back-pill{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--navy-900);
  background:var(--ice); padding:9px 18px 9px 14px; border-radius:100px; margin-bottom:24px; transition:var(--speed);
}
.article-back-pill:hover{background:var(--line);}
.article-back-pill svg{transition:transform var(--speed);}
.article-back-pill:hover svg{transform:translateX(4px);}

.article-preview-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:#fff7ec; border:1.5px dashed #f3dfb8; color:#8a5a10; border-radius:14px;
  padding:14px 18px; margin-bottom:22px; font-size:13px; font-weight:700;
}
.article-preview-banner button{
  background:#8a5a10; color:#fff; padding:7px 16px; border-radius:100px; font-size:12px; font-weight:700;
}

.article-hero-head{margin-bottom:24px;}
.article-hero-head .ah-cat{
  background:var(--blue-accent); color:#fff; font-weight:800;
}
.article-hero-title{
  font-size:clamp(26px,4.2vw,46px); font-weight:900; line-height:1.35; color:var(--navy-900);
  margin:16px 0 20px; font-family:'Meem',Tahoma,sans-serif;
}
.article-hero-meta{display:flex; align-items:center; gap:18px; flex-wrap:wrap; color:var(--gray-600); font-size:13px; font-weight:600;}
.article-hero-meta .ahm-item{display:inline-flex; align-items:center; gap:6px;}
.article-hero-meta svg{flex-shrink:0; color:var(--blue-accent);}

.article-hero-cover{
  width:100%; border-radius:22px; overflow:hidden; margin:26px 0 8px;
  box-shadow:0 20px 50px -18px rgba(10,21,48,.35); background:linear-gradient(155deg,#eef2f9,#dde4f1);
}
.article-hero-cover img{width:100%; max-height:560px; object-fit:cover; display:block;}

.article-share-row{
  display:flex; align-items:center; gap:10px; margin:22px 0 6px; flex-wrap:wrap;
}
.article-share-row .as-label{font-size:12.5px; font-weight:700; color:var(--gray-600); margin-inline-end:4px;}
.share-btn{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--ice); color:var(--navy-900); transition:var(--speed); border:1px solid var(--line);
}
.share-btn:hover{background:var(--blue-accent); color:#fff; border-color:var(--blue-accent); transform:translateY(-2px);}
.share-btn.copied{background:#16a34a; color:#fff; border-color:#16a34a;}

/* ─── تایپوگرافی محتوای مقاله ─────────────────────────────────────────── */
.article-content{
  font-size:16.5px; line-height:2.05; color:var(--gray-900); margin-top:8px;
}
.article-content > *:first-child{margin-top:0;}
.article-content p{margin:0 0 18px;}
.article-content h2{
  font-size:24px; font-weight:900; color:var(--navy-900); margin:38px 0 16px; line-height:1.5;
  font-family:'Meem',Tahoma,sans-serif;
}
.article-content h3{
  font-size:19.5px; font-weight:800; color:var(--navy-900); margin:30px 0 14px; line-height:1.5;
  display:flex; align-items:center; gap:10px; font-family:'Meem',Tahoma,sans-serif;
}
.article-content h3::before{
  content:""; flex-shrink:0; width:8px; height:8px; border-radius:50%; background:var(--blue-accent);
  box-shadow:0 0 0 4px var(--ice);
}
.article-content h4{font-size:16.5px; font-weight:800; color:var(--navy-900); margin:24px 0 10px;}
.article-content strong, .article-content b{color:var(--navy-900); font-weight:800;}
.article-content a{color:var(--blue-accent); text-decoration:underline; text-underline-offset:3px;}
.article-content ul, .article-content ol{margin:0 0 20px; padding-inline-start:6px;}
.article-content ul{list-style:none;}
.article-content ul li{margin-bottom:11px; padding-inline-start:28px; position:relative;}
.article-content ul li::before{
  content:""; position:absolute; right:0; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--ice); border:1px solid var(--line);
}
.article-content ul li::after{
  content:""; position:absolute; right:5px; top:9.5px; width:6px; height:3px;
  border-right:2px solid var(--blue-accent); border-bottom:2px solid var(--blue-accent); transform:rotate(45deg);
}
.article-content ol{list-style:none; counter-reset:art-ol;}
.article-content ol li{
  margin-bottom:11px; padding-inline-start:34px; position:relative; counter-increment:art-ol;
}
.article-content ol li::before{
  content:counter(art-ol); position:absolute; right:0; top:1px; width:22px; height:22px; border-radius:7px;
  background:var(--navy-900); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.article-content blockquote{
  margin:26px 0; padding:22px 26px; background:var(--ice); border-radius:16px;
  border-inline-start:4px solid var(--blue-accent); position:relative; font-weight:700; color:var(--navy-900);
  font-size:16.5px; line-height:1.95;
}
.article-content blockquote::before{
  content:"\201C"; position:absolute; top:6px; right:16px; font-size:44px; color:var(--blue-accent-light);
  opacity:.5; font-family:Georgia,serif; line-height:1;
}
.article-content hr{border:none; border-top:1px solid var(--line); margin:34px 0;}

/* عکس/گالری داخل متن مقاله */
.article-content figure.art-fig{margin:30px 0;}
.article-content figure.art-fig img{
  width:100%; border-radius:16px; box-shadow:0 14px 34px -14px rgba(10,21,48,.28); display:block;
}
.article-content figure.art-fig figcaption{
  text-align:center; font-size:12.5px; color:var(--gray-600); margin-top:10px; font-style:italic;
}
.article-content figure.art-fig-pair .art-fig-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.article-content figure.art-fig-pair img{aspect-ratio:1/1; object-fit:cover; height:100%;}
@media (max-width:560px){
  .article-content figure.art-fig-pair .art-fig-grid{grid-template-columns:1fr; gap:12px;}
}
/* دکمه‌های جابه‌جایی/حذف عکس فقط داخل پنل مدیریت نمایش داده می‌شوند (admin.css آن‌ها را آشکار می‌کند) */
.art-fig-controls{display:none;}

.info-callout{
  display:flex; gap:14px; align-items:flex-start; background:#fff7ec; border:1px solid #f3dfb8;
  border-radius:14px; padding:18px 20px; margin-bottom:20px; color:#8a5a10;
}
.info-callout svg{flex-shrink:0; margin-top:2px; color:#c98a1f;}
.info-callout p{margin:0; font-size:14px; line-height:1.95; color:#6b4a15;}
.info-callout p b{color:#8a5a10;}

.article-page-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:34px; padding-top:26px; border-top:1px solid var(--line);}
.article-page-tags span{background:var(--ice); color:var(--gray-600); font-size:12px; font-weight:600; padding:6px 14px; border-radius:20px;}

.article-footer-nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:20px; padding-top:20px;
}

.article-related{margin-top:56px; padding-top:40px; border-top:1px solid var(--line);}
.article-related h3{font-size:20px; font-weight:900; color:var(--navy-900); margin-bottom:22px; font-family:'Meem',Tahoma,sans-serif;}
.article-related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){ .article-related-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .article-related-grid{grid-template-columns:1fr;} }

.article-not-found{
  text-align:center; padding:90px 20px; max-width:420px; margin:0 auto;
}
.article-not-found svg{margin:0 auto 22px; opacity:.3; display:block; color:var(--navy-900);}
.article-not-found h2{font-size:19px; font-weight:800; color:var(--navy-900); margin-bottom:10px;}
.article-not-found p{font-size:14px; color:var(--gray-600); margin-bottom:26px; line-height:1.9;}

@media (max-width:640px){
  .article-hero-meta{gap:12px; font-size:12px;}
  .article-content{font-size:15.5px;}
  .article-content h2{font-size:20.5px;}
  .article-content h3{font-size:17.5px;}
}