/* Articles Detail - Modular styles matching modern theme */

.detail-section {
  padding: 40px 0 80px;
}

.detail-container.modern-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
  padding: 28px;
}

.detail-header {
  margin-bottom: 18px;
}

.article-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #eaf2ff;
  color: #1b5fbf;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.detail-title {
  margin: 14px 0 10px;
  font-size: 1.875rem;
  line-height: 1.25;
  color: #0f172a;
}

.detail-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: #64748b;
  font-size: 14px;
}

.detail-meta .meta-item { display: inline-flex; align-items: center; gap: 8px; }

.detail-image { margin: 16px 0 20px; border-radius: 14px; overflow: hidden; }
.detail-image img { width: 100%; height: auto; display: block; object-fit: cover; max-height: 420px; }

.detail-content { color: #2b2f3a; line-height: 1.8; font-size: 1.0625rem; }
.detail-content h2, .detail-content h3 { color: #0f172a; margin-top: 1.4em; margin-bottom: .6em; }
.detail-content img { max-width: 100%; height: auto; border-radius: 10px; }
.detail-content blockquote { border-left: 4px solid #2563eb; padding: 12px 16px; background:#f8fafc; border-radius:8px; }

.article-footer { margin-top: 26px; display:flex; justify-content: flex-start; align-items: center; gap: 16px; flex-wrap: wrap; background: transparent; padding: 0; }

.back-button { display:inline-flex; align-items:center; gap:10px; background:#eff6ff; color:#1d4ed8; border-radius:999px; padding:10px 16px; font-weight:600; transition: all .2s ease; width:auto; max-width:max-content; margin:0; }
.back-button:hover { background:#dbeafe; transform: translateX(-2px); text-decoration: none; }

/* Breadcrumb + header tuneups are defined in global modern CSS; page header here just spacing overrides if needed */
.page-header-modern { padding: 36px 0; }

@media (max-width: 768px) {
  .detail-container.modern-card { padding: 18px; border-radius: 12px; }
  .detail-title { font-size: 1.5rem; }
  .detail-image img { max-height: 320px; }
}