/* ============================================================
   Brain Aneurysm Care in Boston (SEO cornerstone) — visual redesign.
   Applies the homepage design language (body.home-refined) to the
   cornerstone page. Scoped to .cornerstone-refined. Loaded AFTER
   styles.css and BEFORE site-buttons.css.
   Constraints: fonts unchanged (Mukta body / Source Serif display),
   copy + images + links unchanged. Style only. Buttons are themed
   globally by site-buttons.css — no button rules here. The visible
   FAQ wording is mirrored verbatim in FAQPage JSON-LD; styled only.
   ============================================================ */

/* ---- Design tokens (identical values to redesign.css) ---- */
.cornerstone-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) ---- */
.cornerstone-refined ::selection { background: #cfe0f4; color: var(--ink-900); }
.cornerstone-refined :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* ---- Headings: serif display, tight tracking, deep navy.
   Scoped to content <section>s only — the navy callout heading is
   reset to white below. ---- */
.cornerstone-refined section h2,
.cornerstone-refined section h3 {
  font-family: var(--serif);
  color: var(--ink-900);
  letter-spacing: -0.018em;
}
.cornerstone-refined .callout h2 { color: #fff; }

/* ---- Section kickers: refined tracked accent label ---- */
.cornerstone-refined section:not(.hero) .eyebrow {
  display: block;
  font-family: var(--sans);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--accent);
  margin: 0 0 12px;
}
/* Override the inline bright-cyan callout eyebrow to a soft steel on navy. */
.cornerstone-refined .callout .eyebrow { color: #a9c4e4 !important; }

/* ============================================================
   PAGE BANNER — keep height; homepage-style blue-hue overlay
   ============================================================ */
.cornerstone-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%);
}
.cornerstone-refined .breadcrumb { color: #c3d6ec; }

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

/* ============================================================
   SOFT SECTIONS — cool paper band with hairline rules
   ============================================================ */
.cornerstone-refined .section-soft {
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ============================================================
   CARE-NOTE — hairline, no blue top-bar, refined shadow
   ============================================================ */
.cornerstone-refined .care-note {
  border: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}
.cornerstone-refined .care-note li::before { background: var(--accent); }

/* ============================================================
   CONDITION-HUB CARDS — hairline frame, low rest shadow, hover lift
   ============================================================ */
.cornerstone-refined .condition-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.cornerstone-refined .condition-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--rule-strong);
}
.cornerstone-refined .condition-card h3 { color: var(--ink-900); }

/* "Read more" affordance with drawn SVG arrow, nudges right on hover. */
.cornerstone-refined .condition-card .learn-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.88rem;
}
.cornerstone-refined .condition-card .learn-more::after {
  content: "";
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .2s ease;
}
.cornerstone-refined .condition-card:hover .learn-more::after { transform: translateX(4px); }

/* ============================================================
   EDITORIAL SPLIT — accent ticks, refined media frame
   ============================================================ */
.cornerstone-refined .split-list li::before { background: var(--accent); }
.cornerstone-refined .split-media {
  border-radius: 10px;
  box-shadow: var(--shadow-card);
}

/* ============================================================
   FAQ — hairline framed accordions, navy summaries, accent markers
   (wording untouched; mirrored in FAQPage JSON-LD)
   ============================================================ */
.cornerstone-refined .faq details {
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.cornerstone-refined .faq summary { color: var(--ink-900); }
.cornerstone-refined .faq summary:hover { color: var(--accent); }
.cornerstone-refined .faq summary::after { color: var(--accent); }

/* ============================================================
   CALLOUT — navy panel, refined rounding
   ============================================================ */
.cornerstone-refined .callout { border-radius: 12px; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cornerstone-refined .condition-card,
  .cornerstone-refined .condition-card .learn-more::after { transition: none; }
  .cornerstone-refined .condition-card:hover { transform: none; }
  .cornerstone-refined .condition-card:hover .learn-more::after { transform: none; }
}