/* ═══════════════════════════════════════
   كليفا شاين — Articles Pages Styles
   (reuses :root variables from style.css)
═══════════════════════════════════════ */

.articles-page,
.article-detail-page { padding-top:60px; padding-bottom:80px; background:var(--light-gray); min-height:50vh; }

/* ── Page banner ──
   Same dark gradient as the homepage hero, so the header sits on top of it
   exactly like on index.html (transparent → solid only once scrolled). */
.page-banner {
  background:linear-gradient(135deg,#080f1a 0%,#0d1e33 40%,#0a2b20 100%);
  padding:150px clamp(12px,4vw,32px) 60px;
  text-align:center;
}
.page-banner-inner { max-width:820px; margin:0 auto; }
.page-banner .section-tag { margin-bottom:14px; }
.page-banner-title {
  font-size:clamp(28px,4.5vw,44px); font-weight:900; color:#fff;
  line-height:1.3; margin-bottom:14px;
}
.page-banner-title .hl { color:var(--accent); }
.page-banner-desc { font-size:16px; color:rgba(255,255,255,.65); line-height:1.85; max-width:560px; margin:0 auto; }
.page-banner-date  { font-size:13px; color:var(--accent); font-weight:700; margin-bottom:14px; }

/* ── Listing grid ── */
.articles-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.article-card {
  background:#fff; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--border);
  transition:var(--transition); display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.article-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:var(--accent); }

.article-card-img { position:relative; height:200px; overflow:hidden; flex-shrink:0; background:var(--primary); }
.article-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.article-card:hover .article-card-img img { transform:scale(1.07); }
.article-card-img-empty {
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.3); font-size:36px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
}

.article-card-body { padding:22px 22px 24px; flex:1; display:flex; flex-direction:column; }
.article-card-date { font-size:12px; color:var(--accent); font-weight:700; margin-bottom:8px; }
.article-card-title { font-size:18px; font-weight:800; color:var(--primary); margin-bottom:10px; line-height:1.5; }
.article-card-excerpt { font-size:14px; color:var(--gray); line-height:1.85; flex:1; }
.article-card-link {
  display:inline-flex; align-items:center; gap:7px;
  color:var(--accent); font-size:14px; font-weight:700;
  margin-top:18px; transition:var(--transition);
}
.article-card:hover .article-card-link { gap:12px; }

.articles-empty {
  grid-column:1/-1; text-align:center; color:var(--gray);
  font-size:15px; padding:60px 20px;
}

/* ── Single article ── */
.article-detail-inner { max-width:820px; }

.article-notfound { text-align:center; padding:20px 20px 60px; }
.article-notfound i { font-size:52px; color:var(--border); margin-bottom:20px; display:block; }
.article-notfound p { color:var(--gray); margin-bottom:26px; }

.article-detail-img {
  border-radius:var(--radius); overflow:hidden; margin-bottom:32px;
  box-shadow:var(--shadow-lg);
}
.article-detail-img img { width:100%; max-height:460px; object-fit:cover; }

.article-detail-body { font-size:17px; line-height:2; color:var(--primary); }
.article-detail-body p { margin-bottom:22px; }
.article-detail-body p:last-child { margin-bottom:0; }

.article-back-link {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:40px; padding:12px 26px;
  background:#fff; border:1.5px solid var(--border); border-radius:50px;
  color:var(--primary); font-weight:700; font-size:14px; text-decoration:none;
  transition:var(--transition);
}
.article-back-link:hover { border-color:var(--accent); color:var(--accent-dark); }

/* ── Minimal footer (no quick-links grid) ── */
footer.footer-minimal { padding-top:32px; }

/* ── Responsive ── */
@media (max-width:1100px) {
  .articles-grid { grid-template-columns:repeat(2,1fr); gap:20px; }
}
@media (max-width:768px) {
  .page-banner { padding-top:120px; padding-bottom:44px; }
}
@media (max-width:600px) {
  .articles-grid { grid-template-columns:1fr; gap:16px; }
  .article-detail-body { font-size:15.5px; line-height:1.95; }
  .article-detail-img img { max-height:280px; }
}