/* WPStats — pages.css — shared styles for inner pages */

/* Inherits main.css — include AFTER main.css */

/* ── Page hero ───────────────────────────────────────────────── */
.page-hero {
  padding: 120px 1.25rem 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 700px 400px at 50% 0%, rgba(14,165,233,0.07), transparent 70%);
  pointer-events: none;
}
.page-hero .page-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px;
  background: rgba(14,165,233,0.1);
  border: 1px solid rgba(14,165,233,0.2);
  border-radius: 100px;
  font-size: 12px; font-weight: 500; color: var(--c-accent2);
  margin-bottom: 1.25rem;
  animation: fadeInUp 0.5s ease both;
}
.page-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700; color: var(--c-text);
  margin-bottom: 1rem;
  animation: fadeInUp 0.5s 0.08s ease both;
}
.page-hero .page-sub {
  font-size: 16px; color: var(--c-text2); max-width: 600px; margin: 0 auto;
  animation: fadeInUp 0.5s 0.15s ease both;
}

/* ── Prose ───────────────────────────────────────────────────── */
.prose {
  max-width: 760px; margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
  animation: fadeInUp 0.5s 0.2s ease both;
}
.prose h2 {
  font-size: 1.35rem; font-weight: 700;
  color: var(--c-text); margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-border);
}
.prose h3 { font-size: 1.1rem; font-weight: 600; color: var(--c-text); margin: 1.5rem 0 0.5rem; }
.prose p  { color: var(--c-text2); font-size: 15px; line-height: 1.8; margin-bottom: 1rem; }
.prose ul, .prose ol { color: var(--c-text2); font-size: 15px; line-height: 1.8; margin: 0 0 1rem 1.5rem; }
.prose li { margin-bottom: 0.4rem; }
.prose a  { color: var(--c-accent); }
.prose a:hover { color: var(--c-accent2); }
.prose strong { color: var(--c-text); font-weight: 600; }
.prose code {
  background: var(--c-surface2); color: var(--c-accent2);
  padding: 2px 6px; border-radius: 4px; font-size: 13px;
  font-family: 'Courier New', monospace;
}
.prose blockquote {
  border-left: 3px solid var(--c-accent);
  padding: 0.75rem 1.25rem;
  background: rgba(14,165,233,0.05);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 1.5rem 0; color: var(--c-text2);
  font-style: italic;
}
.prose .last-updated {
  font-size: 12px; color: var(--c-text3);
  margin-bottom: 2rem;
  display: flex; align-items: center; gap: 6px;
}
.prose .last-updated i { font-size: 14px; }

/* Info card inside prose */
.info-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.info-card h3 { margin-top: 0; border: none; }

/* Table */
.prose table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  margin: 1.5rem 0; color: var(--c-text2);
}
.prose th {
  background: var(--c-surface2); color: var(--c-text);
  padding: 10px 14px; text-align: left; font-weight: 600; font-size: 13px;
  border-bottom: 1px solid var(--c-border2);
}
.prose td { padding: 10px 14px; border-bottom: 1px solid var(--c-border); }
.prose tr:last-child td { border-bottom: none; }

/* ── Blog index ──────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 20px;
  padding: 0 1.25rem 5rem;
  max-width: 980px; margin: 0 auto;
}
.blog-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color var(--trans), transform var(--trans);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
  animation: fadeInUp 0.4s ease both;
}
.blog-card:hover { border-color: rgba(14,165,233,0.35); transform: translateY(-3px); }
.blog-card:nth-child(1)  { animation-delay: 0.03s; }
.blog-card:nth-child(2)  { animation-delay: 0.06s; }
.blog-card:nth-child(3)  { animation-delay: 0.09s; }
.blog-card:nth-child(4)  { animation-delay: 0.12s; }
.blog-card:nth-child(5)  { animation-delay: 0.15s; }
.blog-card:nth-child(6)  { animation-delay: 0.18s; }
.blog-card:nth-child(7)  { animation-delay: 0.21s; }
.blog-card:nth-child(8)  { animation-delay: 0.24s; }
.blog-card:nth-child(9)  { animation-delay: 0.27s; }
.blog-card:nth-child(10) { animation-delay: 0.30s; }
.blog-card:nth-child(11) { animation-delay: 0.33s; }
.blog-card:nth-child(12) { animation-delay: 0.36s; }

.blog-card-thumb {
  height: 160px; display: flex; align-items: center; justify-content: center;
  font-size: 52px; position: relative; overflow: hidden;
}
.blog-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-cat {
  font-size: 11px; font-weight: 600; color: var(--c-accent);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 0.5rem;
}
.blog-card-title {
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  color: var(--c-text); line-height: 1.35; margin-bottom: 0.75rem;
}
.blog-card-excerpt { font-size: 13px; color: var(--c-text3); line-height: 1.6; flex: 1; margin-bottom: 1rem; }
.blog-card-meta {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--c-text3);
  padding-top: 0.75rem; border-top: 1px solid var(--c-border);
}
.blog-card-meta .read-time { display: flex; align-items: center; gap: 4px; }

/* ── Article page ─────────────────────────────────────────────── */
.article-header {
  max-width: 760px; margin: 0 auto;
  padding: 120px 1.25rem 2rem;
  animation: fadeInUp 0.5s ease both;
}
.article-header .art-cat {
  font-size: 12px; font-weight: 600; color: var(--c-accent);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 1rem;
}
.article-header h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700; line-height: 1.2;
  margin-bottom: 1rem; color: var(--c-text);
}
.article-header .art-meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: var(--c-text3); margin-bottom: 1.5rem;
}
.article-header .art-meta span { display: flex; align-items: center; gap: 5px; }
.article-header .art-meta i { font-size: 14px; }
.article-header .art-excerpt {
  font-size: 17px; color: var(--c-text2); line-height: 1.7;
  border-left: 3px solid var(--c-accent);
  padding-left: 1.25rem; margin-bottom: 2rem;
}

/* Article body — same as .prose but wider layout */
.article-body { max-width: 760px; margin: 0 auto; padding: 0 1.25rem 5rem; }
.article-body h2 {
  font-size: 1.4rem; font-weight: 700; color: var(--c-text);
  margin: 2.5rem 0 0.75rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--c-border);
}
.article-body h3 { font-size: 1.1rem; font-weight: 600; color: var(--c-text); margin: 1.75rem 0 0.5rem; }
.article-body p  { color: var(--c-text2); font-size: 15px; line-height: 1.85; margin-bottom: 1.1rem; }
.article-body ul, .article-body ol {
  color: var(--c-text2); font-size: 15px; line-height: 1.8;
  margin: 0.5rem 0 1.25rem 1.5rem;
}
.article-body li { margin-bottom: 0.5rem; }
.article-body a { color: var(--c-accent); }
.article-body a:hover { color: var(--c-accent2); }
.article-body strong { color: var(--c-text); font-weight: 600; }
.article-body code {
  background: var(--c-surface2); color: var(--c-accent2);
  padding: 2px 7px; border-radius: 4px; font-size: 13px; font-family: monospace;
}
.article-body pre {
  background: var(--c-surface2);
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 1.25rem; margin: 1.5rem 0; overflow-x: auto;
  font-size: 13px; line-height: 1.7; color: var(--c-accent2);
}
.article-body pre code { background: none; padding: 0; }
.article-body blockquote {
  border-left: 3px solid var(--c-accent); padding: 0.75rem 1.25rem;
  background: rgba(14,165,233,0.05); border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: 1.5rem 0; color: var(--c-text2); font-style: italic;
}
.article-body .tip-box {
  background: rgba(14,165,233,0.07);
  border: 1px solid rgba(14,165,233,0.2);
  border-radius: var(--r-lg); padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.article-body .tip-box p { margin: 0; }
.article-body .tip-box strong { color: var(--c-accent); }
.article-body .warn-box {
  background: rgba(245,158,11,0.07);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--r-lg); padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.article-body .warn-box p { margin: 0; color: #fcd34d; }

/* Related articles */
.related-section { padding: 3rem 1.25rem 5rem; max-width: 980px; margin: 0 auto; }
.related-section h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--c-text); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }

/* Back to blog link */
.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--c-text3);
  padding: 6px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 100px;
  transition: var(--trans);
  margin-bottom: 2rem;
}
.back-link:hover { color: var(--c-accent); border-color: rgba(14,165,233,0.3); }
.back-link i { font-size: 14px; }

/* CTA strip */
.cta-strip {
  background: linear-gradient(135deg, rgba(14,165,233,0.1), rgba(139,92,246,0.1));
  border: 1px solid rgba(14,165,233,0.2);
  border-radius: var(--r-xl); padding: 2rem 2.5rem;
  text-align: center; margin: 3rem 0;
}
.cta-strip h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.75rem; }
.cta-strip p  { color: var(--c-text2); font-size: 14px; margin-bottom: 1.25rem; }
.cta-strip a  {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 24px; background: var(--c-accent); color: #fff;
  border-radius: var(--r-lg); font-weight: 600; font-size: 14px;
  transition: background var(--trans);
}
.cta-strip a:hover { background: #0284c7; color: #fff; }

@media (max-width: 640px) {
  .article-header { padding-top: 90px; }
  .cta-strip { padding: 1.5rem; }
}