/* =========================================================
   Trust Relay — Guidance hub + articles
   Sits on top of styles-prototype.css + styles-prototype-pages.css
   (articles also load styles-policy.css for the prose body).
   ========================================================= */

/* ---------- Shared: back link ---------- */

.guidance-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-decoration: none;
  transition: color .15s ease;
}
.guidance-back:hover { color: var(--oxblood); }
.guidance-back .guidance-back-arrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
}

/* ---------- Hub: article library ---------- */

.guidance-library {
  padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 9vw, 128px);
}
/* Directly after the page hero the stacked paddings read as a void —
   trim to match .page-hero + .tight-section on FAQ/Pricing. */
.page-hero + .guidance-library { padding-top: clamp(16px, 2.5vw, 32px); }

.guidance-library-head {
  max-width: 60ch;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.guidance-library-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin-bottom: 14px;
}
.guidance-library-head p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* A named group of articles within the hub (e.g. "Retirement & benefits"). */
.guidance-group { margin-bottom: clamp(44px, 5vw, 76px); }
.guidance-group:last-child { margin-bottom: 0; }

.guidance-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(20px, 2.4vw, 28px);
}

.guidance-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(28px, 3.2vw, 40px);
  background: var(--cream-soft);
  border: 1px solid var(--paper-line);
  border-left: 4px solid var(--oxblood);
  border-radius: 6px;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.guidance-card:hover {
  background: var(--cream-deep);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -18px rgba(26, 20, 16, 0.45);
}

.guidance-card-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
}

.guidance-card-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
.guidance-card-title a {
  color: inherit;
  text-decoration: none;
}
/* Stretch the title link across the whole card so it is one clean
   click target while the heading keeps its semantics. */
.guidance-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
}
.guidance-card-title a:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 4px;
}

.guidance-card-summary {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

.guidance-card-cue {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--oxblood);
}
.guidance-card-cue span { transition: margin-left .18s ease; display: inline-block; }
.guidance-card:hover .guidance-card-cue span { margin-left: 4px; }

/* ---------- Article: quiet inline pull-quote ---------- */

.guidance-pullquote {
  margin: clamp(36px, 5vw, 56px) 0;
  padding-left: clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--oxblood);
}
.guidance-pullquote blockquote { margin: 0; }
.guidance-pullquote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 26ch;
}