/* ==========================================================================
   Devgun Family Law -- related-articles band (practice-area pages)

   Sibling of the profile "Featured Blog" band (page/person.css
   .profile-featured-blog, Figma 7146:1076) and deliberately built to the
   same values: same 3-up BlogCards grid, same section rhythm, same white
   surface. No Figma frame specifies this band on a practice page, so
   matching the one designed blog-card band is the honest source rather than
   inventing a second treatment.

   WHITE, not cream, is a decision: on the practice pages the last band
   above this one is usually the cream FAQ, and the band below is always the
   green consultation callout. White keeps three distinct surfaces in a row
   instead of merging into the FAQ. The cards carry their own Lighter Blue-2
   panel, so they still read as cards against it.

   Loaded by templates/App/Includes/RelatedArticles.ss. Card styling lives
   in blocks/blog-cards.css -- this file owns only the band around it.
   Consumes tokens from foundation/tokens.css only -- no raw hex.
   ========================================================================== */

.related-articles {
  padding: var(--space-section-y) 0;
  background-color: var(--color-bg-page);
}

.related-articles__inner {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--space-page-gutter);
}

/* Matches .blog-list-heading (page/blog.css) -- the established treatment
   for "a heading introducing a list of articles". */
.related-articles__heading {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--color-text-heading);
  margin: 0 0 var(--space-gap);
}

/* The band always carries an h2 so the section has an accessible name, but
   the heading COPY is client-editable and may be blank. When it is, the
   heading is removed visually while staying in the accessibility tree --
   not `display: none`, which would take it out of both. */
.related-articles__heading--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.related-articles__more {
  margin: var(--space-gap) 0 0;
}

/* Deliberately NOT the foundation link colour. `a { color: var(--color-link) }`
   is Canopy, which lands at 3.19:1 on white -- fine for the large bold link
   text it was designed for, short of AA 4.5:1 for anything smaller. This
   link sits under a card grid at body size, so it takes the Dark Blue
   action colour (9.26:1) and keeps a permanent underline: a text link
   outside a card should not depend on colour alone to read as a link. */
.related-articles__more-link {
  color: var(--color-action);
  font-size: var(--fs-body1);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (hover: hover) {
  .related-articles__more-link:hover {
    color: var(--color-action-hover);
  }
}