/* ============================================================
   fp-content-extras.css — Related Articles + Authority Links
   Created: March 18, 2026
   Fixes missing Astro scoped styles for related-blog cards
   and adds visual treatment for authority resource links.
   Load AFTER index.CAZ6xOla.css via print/onload pattern.
   ============================================================ */

/* ── RELATED ARTICLES — Blog Card Grid ──
   Used on ~24 service pages. Scoped Astro CSS was never generated.
   These class names (related-blog-*) are unique to this component. */

.related-blog {
  max-width: 1100px;
  margin: var(--space-lg, 2rem) auto;
  padding: var(--space-md, 1.5rem);
  background: #fff;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 10px 40px #0000000f, 0 1px 3px #0000000a;
  border: 1px solid rgba(0,0,0,.04);
}

.related-blog h2 {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  color: var(--fp-dark, #0b1220);
  text-shadow: none;
}

.related-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .6rem;
}

.related-blog-card {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .85rem;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: var(--radius, 14px);
  background: #f8fbfa;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .15s;
  border-left: 3px solid transparent;
}

.related-blog-card:hover {
  background: #f0f8f5;
  border-left-color: var(--fp-accent, #00796b);
  transform: translateX(3px);
  text-decoration: none;
}

.related-blog-icon {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
}

.related-blog-title {
  flex: 1;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fp-ink, #204652);
}

.related-blog-arrow {
  flex-shrink: 0;
  font-size: .95rem;
  color: var(--fp-accent, #00796b);
  opacity: .5;
  transition: opacity .2s, transform .2s;
}

.related-blog-card:hover .related-blog-arrow {
  opacity: 1;
  transform: translateX(2px);
}

/* ── AUTHORITATIVE MEDICAL RESOURCES ──
   Subtle reference bar. Used on ~71 EN + 70 ES pages. */

.authority-resources {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .5rem;
  margin: var(--space-md, 1.5rem) 0 .5rem;
  padding: .6rem 1rem;
  background: #f6f9fb;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 8px;
  font-size: .82rem;
  line-height: 1.55;
  color: #546e7a;
}

.authority-resources strong {
  font-weight: 700;
  color: var(--fp-ink, #204652);
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.authority-resources a {
  color: var(--fp-accent, #00796b);
  text-decoration: underline;
  text-decoration-color: #00796b4d;
  text-underline-offset: 2px;
  font-weight: 500;
  font-size: .82rem;
  transition: text-decoration-color .2s;
}

.authority-resources a:hover {
  text-decoration-color: var(--fp-accent, #00796b);
}

/* ── MOBILE ── */

@media (max-width: 640px) {
  .related-blog {
    padding: 1rem;
    margin: var(--space-md, 1.25rem) auto;
  }

  .related-blog h2 {
    font-size: 1.1rem;
    margin-bottom: .5rem;
  }

  .related-blog-grid {
    grid-template-columns: 1fr;
    gap: .45rem;
  }

  .related-blog-card {
    padding: .5rem .7rem;
  }

  .related-blog-title {
    font-size: .84rem;
  }

  .authority-resources {
    padding: .5rem .75rem;
    font-size: .78rem;
    gap: .15rem .35rem;
  }

  .authority-resources strong {
    font-size: .72rem;
  }

  .authority-resources a {
    font-size: .78rem;
  }
}