/* ═══════════════════════════════════════════════════════════════
   أرقام اليمن — صفحة المقال + صفحة التصنيف (شبكة، جانبي، ذات صلة، معرض)
   ═══════════════════════════════════════════════════════════════ */

/* Layout: محتوى + شريط جانبي (يتوافق مع .container والثيم) */
.article-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,310px);
  gap:clamp(24px,3vw,40px);
  align-items:start;
  width:100%;
}
/* يغلب الشبكة على .row في Bootstrap عند الجمع بين الصنفين */
.row.article-layout{
  display:grid;
  margin-left:0;
  margin-right:0;
  --bs-gutter-x:0;
  --bs-gutter-y:0;
}
.row.article-layout > [class*="col-"]{
  width:100%;
  max-width:none;
  flex:none;
  padding-left:0;
  padding-right:0;
}

/* ── محتوى المقال (قراءة أوضح، ضمن عمود واحد) ── */
body.post-single .article-main{
  background:var(--clr-surface);
  border:1px solid var(--clr-border);
  border-radius:var(--r-lg);
  padding:clamp(1.35rem,2.2vw,2rem) clamp(1.25rem,2.8vw,2.5rem);
  box-shadow:0 6px 36px rgba(0,0,0,.22);
}
html[data-bs-theme="light"] body.post-single .article-main,
body[data-bs-theme="light"].post-single .article-main{
  box-shadow:0 4px 22px rgba(15,23,42,.08);
}
body.post-single .article-main .article-content{
  font-size:clamp(1.02rem,0.35vw + 0.97rem,1.125rem);
  line-height:1.92;
  letter-spacing:.015em;
  max-width:min(100%,68ch);
}
body.post-single .article-main .article-content > p:first-of-type{
  font-size:1.06em;
  line-height:1.88;
  color:var(--clr-txt);
}
body.post-single .article-main .article-content h2{
  display:block;
  border-bottom:2px solid rgba(59,130,246,.45);
  padding-bottom:.45em;
  margin:2.2em 0 .85em;
  font-size:clamp(1.22rem,1.8vw,1.52rem);
  font-weight:800;
}
body.post-single .article-main .article-content h3{
  margin:1.65em 0 .65em;
  padding-right:.65em;
  border-right:3px solid var(--clr-sf);
  font-size:1.17rem;
  line-height:1.35;
}
body.post-single .article-main .article-content h4{
  margin-top:1.4em;
  font-size:1.05rem;
  opacity:.95;
}
body.post-single .article-main .article-content p{
  margin-bottom:1.35em;
}
body.post-single .article-main .article-content ul,
body.post-single .article-main .article-content ol{
  margin:1em 0 1.45em;
}
body.post-single .article-main .article-content li{
  margin-bottom:.55em;
}
body.post-single .article-main .article-content blockquote{
  border-right-width:5px;
  padding:18px 22px;
  margin:1.65em 0;
  border-radius:0 var(--r) var(--r) 0;
}
body.post-single .article-main .article-content img{
  border-radius:var(--r-lg);
  box-shadow:0 6px 22px rgba(0,0,0,.2);
}
html[data-bs-theme="light"] body.post-single .article-main .article-content img,
body[data-bs-theme="light"].post-single .article-main .article-content img{
  box-shadow:0 4px 16px rgba(15,23,42,.1);
}
body.post-single .article-main .article-content pre{
  margin:1.65em 0;
  border:1px solid var(--clr-border);
}

/* ── Article Tags ── */
.article-tags{margin-top:32px;padding-top:20px;border-top:1px solid var(--clr-border)}
.article-tags h4{
  display:flex;align-items:center;gap:7px;
  font-size:.92rem;margin-bottom:12px;color:var(--clr-txt2);font-weight:700;
}
.article-tags h4 svg{width:15px;height:15px;color:var(--clr-sf)}
.tags-list{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  padding:5px 14px;border-radius:20px;font-size:.8rem;font-weight:600;
  border:1px solid var(--clr-border);color:var(--clr-txt2);
  transition:all .2s;
}
a.tag:hover{border-color:var(--clr-sf);color:var(--clr-sf);background:rgba(59,130,246,.08)}

/* ── Share Buttons ── */
.article-share{margin-top:28px;padding-top:20px;border-top:1px solid var(--clr-border)}
.article-share h4{
  display:flex;align-items:center;gap:7px;
  font-size:.92rem;margin-bottom:14px;color:var(--clr-txt2);font-weight:700;
}
.article-share h4 svg{width:15px;height:15px;color:var(--clr-sf)}
.share-buttons{display:flex;flex-wrap:wrap;gap:10px}
.share-btn{
  width:42px;height:42px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--clr-border);color:var(--clr-txt2);
  transition:all .2s;
}
.share-btn svg{width:17px;height:17px}
.share-btn.facebook:hover{background:#1877f2;border-color:#1877f2;color:#fff}
.share-btn.twitter:hover{background:#1da1f2;border-color:#1da1f2;color:#fff}
.share-btn.whatsapp:hover{background:#25d366;border-color:#25d366;color:#fff}
.share-btn.linkedin:hover{background:#0a66c2;border-color:#0a66c2;color:#fff}
.share-btn.copy:hover{background:var(--clr-sf);border-color:var(--clr-sf);color:#fff}

/* ── Photos Grid ── */
.article-photos-section,.photos-grid-section{
  margin-top:32px;padding-top:20px;border-top:1px solid var(--clr-border);
}
.section-title-inner{
  display:flex;align-items:center;gap:8px;
  font-size:1.1rem;font-weight:800;margin-bottom:18px;color:var(--clr-txt);
}
.section-title-inner svg{width:17px;height:17px;color:var(--clr-sf)}
.photos-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}
.photo-card{
  background:var(--clr-surface);border:1px solid var(--clr-border);
  border-radius:var(--r);overflow:hidden;
  transition:transform .25s,box-shadow .25s;
}
.photo-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.photo-card-image{display:block;overflow:hidden;aspect-ratio:4/3}
.photo-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.photo-card:hover .photo-card-image img{transform:scale(1.05)}
.photo-card-content{padding:12px 14px}
.photo-card-title{font-size:.88rem;font-weight:700;margin-bottom:5px;color:var(--clr-txt)}
.photo-card-title-link{color:inherit}
.photo-card-title-link:hover{color:var(--clr-sf)}
.photo-card-desc{font-size:.78rem;color:var(--clr-txt2);line-height:1.5}

/* ── FAQ داخل المقال ── */
.article-faq-section{margin-top:32px;padding-top:20px;border-top:1px solid var(--clr-border)}
.faq-list{display:flex;flex-direction:column;gap:10px}
.faq-item{
  background:var(--clr-surface)!important;
  border:1px solid var(--clr-border)!important;
  border-radius:var(--r)!important;
  padding:0!important;
  overflow:hidden;
  cursor:pointer;
}
.faq-item summary{
  font-weight:700!important;font-size:.98rem!important;
  color:var(--clr-txt)!important;
  padding:14px 20px;
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  transition:background .2s;
}
.faq-item summary:hover{background:var(--clr-surface2)}
.faq-item summary span{color:var(--clr-sf);font-size:1.2rem}
.faq-item[open] summary{border-bottom:1px solid var(--clr-border)}
.faq-item>div{
  padding:14px 20px!important;
  color:var(--clr-txt2)!important;
  line-height:1.8!important;
  border-top:none!important;
  background:none!important;
}

/* ── Sidebar ── */
.article-sidebar{
  position:sticky;top:84px;display:flex;flex-direction:column;gap:20px;
  z-index:2;
  min-width:0;
}
.sidebar-widget{
  background:var(--clr-surface);border:1px solid var(--clr-border);
  border-radius:var(--r-lg);padding:20px;
}
.sidebar-widget h3{
  font-size:.95rem;font-weight:800;margin-bottom:16px;
  padding-bottom:10px;border-bottom:1px solid var(--clr-border);
  color:var(--clr-txt);
  display:flex;align-items:center;gap:7px;
}
.sidebar-widget h3 svg{width:15px;height:15px;color:var(--clr-sf)}

/* ── Sidebar: cards + popular tags (markup in post.php) ── */
.sidebar-cards-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.sidebar-card{
  display:flex;
  gap:14px;
  align-items:center;
  padding:14px 12px;
  border-radius:var(--r);
  border:1px solid var(--clr-border);
  background:var(--clr-surface2);
  text-decoration:none;
  transition:transform .2s, border-color .2s, background .2s;
}

.sidebar-card:hover{
  transform:translateY(-2px);
  border-color:rgba(59,130,246,.35);
  background:rgba(59,130,246,.06);
}

.sidebar-card-number{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-weight:900;
  color:var(--carrier-sf);
  background:rgba(59,130,246,.12);
  border:1px solid rgba(59,130,246,.25);
}

.sidebar-card-content{
  flex:1;
  min-width:0;
}

.sidebar-card-title{
  font-size:.9rem;
  font-weight:800;
  color:var(--clr-txt);
  margin:0 0 6px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.sidebar-card-date{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  color:var(--clr-txt2);
  line-height:1.4;
}

.sidebar-card-date i{
  font-size:.95rem;
  color:rgba(59,130,246,.95);
}

.sidebar-card-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:12px;
  border:1px solid var(--clr-border);
  color:var(--carrier-sf);
  background:transparent;
  transition:all .2s;
}

.sidebar-card:hover .sidebar-card-arrow{
  border-color:rgba(59,130,246,.35);
  background:rgba(59,130,246,.08);
}

.sidebar-card-success .sidebar-card-number{
  color:var(--carrier-you);
  background:rgba(139,92,246,.14);
  border-color:rgba(139,92,246,.25);
}
.sidebar-card-success .sidebar-card-arrow{
  color:var(--carrier-you);
}
.sidebar-card-success .sidebar-card-date i{
  color:rgba(139,92,246,.95);
}

.popular-tags-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.popular-tag{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--clr-border);
  background:transparent;
  text-decoration:none;
  transition:all .2s;
  color:var(--clr-txt2);
}

.popular-tag:hover{
  border-color:rgba(59,130,246,.35);
  background:rgba(59,130,246,.08);
  color:var(--clr-sf);
  transform:translateY(-1px);
}

.popular-tag span:first-child{
  font-weight:800;
  color:inherit;
}

.tag-count{
  font-weight:900;
  color:var(--clr-txt);
  background:rgba(59,130,246,.10);
  border:1px solid rgba(59,130,246,.22);
  padding:3px 10px;
  border-radius:999px;
  font-size:.78rem;
}

.sidebar-widget h3.widget-title-accent{color:var(--carrier-mtn)}
.sidebar-widget h3.widget-title-accent svg{color:var(--carrier-mtn)}
.sidebar-widget h3.widget-title-success{color:var(--carrier-you)}
.sidebar-widget h3.widget-title-success svg{color:var(--carrier-you)}
.sidebar-article{
  display:flex;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--clr-border);
}
.sidebar-article:last-child{border-bottom:none;padding-bottom:0}
.sidebar-article-thumb{
  width:64px;height:64px;border-radius:9px;flex-shrink:0;overflow:hidden;
  background:var(--clr-surface2);
}
.sidebar-article-thumb img{width:100%;height:100%;object-fit:cover}
.sidebar-article-info{flex:1;min-width:0}
.sidebar-article-title{
  font-size:.84rem;font-weight:700;color:var(--clr-txt);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-bottom:5px;line-height:1.45;
}
.sidebar-article:hover .sidebar-article-title{color:var(--clr-sf)}
.sidebar-article-date{font-size:.75rem;color:var(--clr-txt3)}

/* ── Related Articles ── */
.related-section{
  position:relative;z-index:1;padding:50px 0;
  border-top:1px solid var(--clr-border);
}
.related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  margin-top:28px;
}

/* FAQ داخل صفحات عادية يستخدم نفس الأكورديون */
.article-faq-section .faq-accordion{max-width:none}

@media(max-width:900px){
  .article-layout{grid-template-columns:1fr}
  .article-sidebar{position:static}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .photos-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .article-hero{min-height:280px}
  .related-grid{grid-template-columns:1fr}
  .photos-grid{grid-template-columns:1fr}
}