/* ============================================================
   Related Insights, blog cards + sibling case-type cross-links
   Shared across all solution pages. Family color is themed
   per-page by setting --family-color on the section.
   ============================================================ */

/* ---- Default family color (override per page) ---- */
.related-insights,
.case-type-siblings {
  --family-color: var(--neu-blue, #0498FE);
  --family-color-rgb: 4, 152, 254;
  padding: var(--space-16, 4rem) 0;
}

/* ============================================================
   Related Insights, blog cards section
   ============================================================ */

.related-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6, 1.5rem);
  margin-top: var(--space-12, 3rem);
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* For pages with only 1-2 blogs, center the cards instead of left-aligning */
.related-insights__grid--two { grid-template-columns: repeat(2, 1fr); max-width: 800px; }
.related-insights__grid--one { grid-template-columns: 1fr; max-width: 420px; }

@media (max-width: 1023px) {
  .related-insights__grid { grid-template-columns: 1fr; max-width: 460px; }
  .related-insights__grid--two { grid-template-columns: 1fr; max-width: 460px; }
}

.insight-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--border-radius-lg, 1rem);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.insight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  border-color: rgba(var(--family-color-rgb), 0.25);
}

.insight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--family-color), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.insight-card:hover::before { opacity: 1; }

.insight-card__image {
  height: 180px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--deep-navy, #0F2847), rgba(var(--family-color-rgb), 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
}

.insight-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.insight-card:hover .insight-card__image img {
  transform: scale(1.05);
}

.insight-card__body {
  padding: var(--space-6, 1.5rem);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.insight-card__category {
  font-size: var(--text-xs, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--family-color);
  margin-bottom: var(--space-3, 0.75rem);
}

.insight-card__title {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: var(--text-lg, 1.125rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.35;
  margin: 0 0 var(--space-3, 0.75rem) 0;
}

.insight-card__excerpt {
  font-size: var(--text-sm, 0.875rem);
  color: var(--silver, #94A3B8);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

.insight-card__read-more {
  margin-top: var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--family-color);
  transition: transform 0.2s ease;
  align-self: flex-start;
}

.insight-card:hover .insight-card__read-more {
  transform: translateX(4px);
}

/* ---- Light mode overrides for insight cards ---- */
[data-theme="light"] .insight-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(15, 40, 71, 0.10);
}
[data-theme="light"] .insight-card__title { color: var(--midnight, #0B1A2E); }
[data-theme="light"] .insight-card__excerpt { color: var(--graphite, #334155); }


/* ============================================================
   Case-Type Siblings, cross-link cluster on subpages
   ============================================================ */

.case-type-siblings__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4, 1rem);
  margin-top: var(--space-10, 2.5rem);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px) {
  .case-type-siblings__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .case-type-siblings__grid { grid-template-columns: 1fr; }
}

.sibling-card {
  display: flex;
  align-items: center;
  gap: var(--space-4, 1rem);
  padding: var(--space-5, 1.25rem);
  border-radius: var(--border-radius-md, 0.75rem);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.sibling-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--family-color-rgb), 0.4);
  background: rgba(var(--family-color-rgb), 0.05);
}

.sibling-card__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--family-color) 0%, rgba(var(--family-color-rgb), 0.4) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 700;
}

.sibling-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sibling-card__label {
  font-family: var(--font-primary, 'Poppins', sans-serif);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
}

.sibling-card__desc {
  font-size: 0.78rem;
  color: var(--silver, #94A3B8);
  line-height: 1.3;
}

.sibling-card__arrow {
  margin-left: auto;
  color: var(--family-color);
  font-size: 1.1rem;
  opacity: 0.6;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.sibling-card:hover .sibling-card__arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Hub card variant, slightly stronger styling for the parent FinOps link */
.sibling-card--hub {
  background: rgba(var(--family-color-rgb), 0.06);
  border-color: rgba(var(--family-color-rgb), 0.20);
}

[data-theme="light"] .sibling-card {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 40, 71, 0.10);
}
[data-theme="light"] .sibling-card__label { color: var(--midnight, #0B1A2E); }
[data-theme="light"] .sibling-card__desc { color: var(--graphite, #334155); }


/* ============================================================
   Universal hover-accent line for additional card types
   (blog-card, solution-card, testimonial-card, leader-card,
    value-card, stat-card). Each page can override the line
    color via --family-color on the card or its container.
   ============================================================ */

.blog-card,
.solution-card,
.testimonial-card,
.leader-card,
.value-card,
.stat-card {
  position: relative;
  overflow: hidden;
}

.blog-card::before,
.solution-card::before,
.testimonial-card::before,
.leader-card::before,
.value-card::before,
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent,
    var(--family-color, var(--neu-blue, #0498FE)),
    transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
  pointer-events: none;
}

.blog-card:hover::before,
.solution-card:hover::before,
.testimonial-card:hover::before,
.leader-card:hover::before,
.value-card:hover::before,
.stat-card:hover::before {
  opacity: 1;
}

/* On FinOps page, stat-card sits in the amber family, accent line follows */
.solutions-finops .stat-card::before,
[data-page="finops"] .stat-card::before {
  background: linear-gradient(90deg, transparent, #D4915E, transparent);
}


/* ============================================================
   LIGHT-MODE A11Y FIXES
   Gradient text and low-contrast color elements that need
   solid dark fallbacks on light backgrounds.
   ============================================================ */

/* Platform Tour video card titles, were "white → family-color" gradient.
   In light mode, switch to solid midnight for AAA contrast. The family
   color stays conveyed by the eyebrow above each title. */
[data-theme="light"] .tour-heading {
  background: none;
  -webkit-text-fill-color: var(--midnight, #0B1A2E);
  color: var(--midnight, #0B1A2E);
}

/* Stat-card values (FinOps page), light amber on white = ~3:1 contrast.
   Use deeper cocoa amber in light mode for proper contrast (~7:1). */
[data-theme="light"] .stat-card__value {
  color: #7C4A2D;
}

/* Insight-card category labels, currently use family color, which can
   be borderline on white for the lighter family palettes. Darken slightly. */
[data-theme="light"] .insight-card__category {
  /* If a darker family fallback is needed, individual cards can override.
     Default fallback uses Neu Blue which passes AA on white. */
  color: var(--family-color, var(--neu-blue, #0498FE));
  filter: brightness(0.85);
}


/* ============================================================
   LIGHT-MODE FAMILY-COLOR DARKENING (WCAG AA contrast fix)
   The brand family colors (Neu Blue, Signal Teal, Warm Amber)
   are tuned for dark backgrounds. On white, small text in those
   colors fails WCAG AA contrast. These rules define darker
   per-family variants and apply them ONLY in light mode to
   small-text family-color elements (eyebrows, category labels,
   read-more links).
   ============================================================ */

/* Per-page darkened family color (light-mode only) */
[data-theme="light"][data-page="collections"]      { --family-color-dark: #0369A1; }  /* ~7:1 */
[data-theme="light"][data-page="compliance"]       { --family-color-dark: #0F766E; }  /* ~5.5:1 */
[data-theme="light"][data-page="finops"],
[data-theme="light"][data-page="fraud"],
[data-theme="light"][data-page="disputes"],
[data-theme="light"][data-page="complaints"],
[data-theme="light"][data-page="bankruptcy"],
[data-theme="light"][data-page="replevin"],
[data-theme="light"][data-page="probate"]          { --family-color-dark: #7C4A2D; }  /* ~7:1 */

/* Section eyebrows, fall back to Neu Blue's darker variant for non-data-page pages */
[data-theme="light"] .eyebrow,
[data-theme="light"] .section-header .eyebrow {
  color: var(--family-color-dark, #0369A1);
}

/* Insight-card category labels and read-more links, pick up per-card --family-color-dark
   (set inline alongside --family-color), with a graceful fallback chain. */
[data-theme="light"] .insight-card__category {
  color: var(--family-color-dark, #0369A1);
  filter: none;  /* override the brightness filter from earlier */
}
[data-theme="light"] .insight-card__read-more {
  color: var(--family-color-dark, #0369A1);
}

/* Sibling-card arrows, same treatment */
[data-theme="light"] .sibling-card__arrow {
  color: var(--family-color-dark, #0369A1);
}

/* Homepage blog-card category labels, pick up per-card --family-color-dark inline */
[data-theme="light"] .blog-card__category {
  color: var(--family-color-dark, #0369A1);
}