/* ============================================================
   Editorial Policy — visual redesign.
   Applies the homepage design language (body.home-refined) to
   the editorial-policy page. Scoped to .policy-refined. Loaded
   AFTER styles.css and BEFORE site-buttons.css.
   Constraints: fonts unchanged (Mukta body / Source Serif display),
   copy + images + links unchanged. Style only.
   ============================================================ */

/* ---- Design tokens (identical values to redesign.css) ---- */
.policy-refined {
  --ink-900: #0c2143;
  --accent: #12457e;
  --rule: #e7ecf2;
  --rule-strong: #d3dbe6;
  --paper: #f5f8fc;
  --shadow-card: 0 18px 40px -24px rgba(12,33,67,0.45);
  accent-color: var(--accent);
}

/* ---- Browser surfaces (themed, not default) ---- */
.policy-refined ::selection { background: #cfe0f4; color: var(--ink-900); }
.policy-refined :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ============================================================
   PAGE BANNER — keep height; homepage-style blue-hue overlay
   ============================================================ */
.policy-refined .page-banner .hero-overlay {
  background: linear-gradient(90deg,
    rgba(16,42,82,0.77) 0%, rgba(16,42,82,0.57) 45%, rgba(16,42,82,0.37) 100%);
}
.policy-refined .breadcrumb { color: #c3d6ec; }

/* ============================================================
   ARTICLE META — hairline card, no thick blue left bar
   ============================================================ */
.policy-refined .article-meta {
  border: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px 18px;
}
.policy-refined .article-meta span { color: var(--ink-900); }
.policy-refined .article-meta a { color: var(--accent); }

/* ============================================================
   INTRO — soft paper panel, hairline framed
   ============================================================ */
.policy-refined .detail-intro {
  border: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 12px;
}
.policy-refined .detail-intro p { color: var(--ink-900); }

/* ============================================================
   POLICY CARDS — hairline frame, radius, no thick blue top bar.
   Titles become proper serif card headings (not small all-caps).
   ============================================================ */
.policy-refined .policy-grid > section {
  border: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}
.policy-refined .policy-grid h2 {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: -0.014em;
  font-size: 1.2rem;
  color: var(--ink-900);
}
.policy-refined .policy-grid p { color: var(--slate); }

/* ============================================================
   RELATED LINKS — serif label + accent link chips
   ============================================================ */
.policy-refined .related-links h3 {
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 1.15rem;
  color: var(--ink-900);
}
.policy-refined .related-links a {
  color: var(--accent);
  border-color: var(--rule-strong);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.policy-refined .related-links a:hover {
  border-color: var(--accent);
  background: var(--paper);
  color: var(--accent);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .policy-refined .related-links a { transition: none; }
}