/*
 * Case-study cross-links: the "See It in Action" section on the solution pages.
 *
 * The markup is emitted by the WPCode snippet "Case Study Cross-Links on
 * Solution Pages" (989985) on the theme's `sharering_after_content` hook, so it
 * renders inside #main, on the page ground, above the footer. The snippet used
 * to ship its own <style> block: DM Sans (a face that is not in this design
 * system), six hardcoded hex values, and `margin-top: -40px`. The negative
 * margin was there to close a gap in the old Elementor layout, and once the
 * section stopped being reparented above the footer it was what dragged a dark
 * navy heading onto the dark navy footer. None of it survives here: type, ink
 * and spacing all resolve to tokens, and the section owns its own vertical
 * rhythm instead of stealing space from whatever happens to sit above it.
 *
 * Structurally this is a card grid, not a sequence: the two case studies are
 * peers, either one is a valid next click, so they are not numbered and not
 * ordered. The only accent in the section is the eyebrow and the read-more
 * arrow, both in brand blue; everything else is ink on canvas.
 */

.cs-crosslink-section {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-9) var(--gutter) var(--space-10);
  font-family: var(--font-ui);
  color: var(--sr-ink);
}

.cs-crosslink-section .cs-cl-eyebrow {
  margin: 0 0 var(--space-2);
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sr-chrome-accent);
}

.cs-crosslink-section .cs-cl-title {
  margin: 0 0 var(--space-2);
  font-size: var(--type-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--sr-ink);
}

.cs-crosslink-section .cs-cl-subtitle {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
  font-size: var(--type-lead);
  line-height: var(--leading-normal);
  color: var(--sr-ink-soft);
}

.cs-crosslink-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-5);
}

/* The whole card is the link, so the card carries the hover, the focus ring and
   the hit area. Nothing inside it is separately clickable. */
.cs-crosslink-card {
  display: block;
  padding: var(--space-5);
  background: var(--sr-canvas);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}

.cs-crosslink-card:hover {
  transform: translateY(calc(var(--space-1) * -0.5));
  border-color: var(--sr-chrome-accent);
  box-shadow: var(--shadow-md);
}

.cs-crosslink-card .cs-cl-card-title {
  margin: 0 0 var(--space-3);
  font-size: var(--type-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--sr-ink);
}

.cs-crosslink-card p {
  margin: 0 0 var(--space-3);
  font-size: var(--type-body);
  line-height: var(--leading-normal);
  color: var(--sr-ink-soft);
}

.cs-crosslink-card .cs-cl-arrow {
  display: inline-block;
  font-size: var(--type-caption);
  font-weight: var(--weight-semibold);
  color: var(--sr-chrome-accent);
}