/* Shared surfaces for content cards. Keep components with distinct roles,
   including pricing tiers and editorial callouts, in their own templates. */
#main-content :is(
  .content-card, .related-card, .icp-card, .case-card, .home-blog-card, .blog-card,
  .service-card, .agent-card, .market-workflow, .audience-grid > .aud,
  .eng-grid > .eng, .section-block :is(.grid-3, .three-col) > .card
) {
  min-inline-size: 0;
  border: 1px solid var(--cx-card-border);
  border-radius: var(--cx-card-radius);
  overflow-wrap: anywhere;
}

#main-content :is(
  .content-card, .related-card, .icp-card, .blog-card, .service-card, .agent-card,
  .market-workflow, .audience-grid > .aud, .eng-grid > .eng,
  .section-block :is(.grid-3, .three-col) > .card
) {
  padding: var(--cx-card-padding);
}

#main-content .blog-grid {
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  padding-block-start: 12px;
}

#main-content .content-card {
  display: block;
  color: inherit;
  background: var(--cx-card-surface);
  text-decoration: none;
}

#main-content a:is(
  .content-card, .related-card, .icp-card, .case-card, .home-blog-card, .blog-card,
  .section-block :is(.grid-3, .three-col) > .card
) {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#main-content a:is(
  .content-card, .related-card, .icp-card, .case-card, .home-blog-card, .blog-card,
  .section-block :is(.grid-3, .three-col) > .card
):hover {
  border-color: rgba(155, 138, 251, 0.52);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

#main-content a:is(
  .content-card, .related-card, .icp-card, .case-card, .home-blog-card, .blog-card,
  .section-block :is(.grid-3, .three-col) > .card
):focus-visible {
  outline: 2px solid var(--cx-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  #main-content a:is(
    .content-card, .related-card, .icp-card, .case-card, .home-blog-card, .blog-card,
    .section-block :is(.grid-3, .three-col) > .card
  ) {
    transition: none;
  }

  #main-content a:is(
    .content-card, .related-card, .icp-card, .case-card, .home-blog-card, .blog-card,
    .section-block :is(.grid-3, .three-col) > .card
  ):hover {
    transform: none;
  }
}