/* Destination cards have one link and one complete hit area.
 * Grouped relations use separate TextLinks in a static Core Group card. */
/* Three columns need 3 x 230px, measured including card padding/borders.
 * A Core Group composition supplies this container; global breakpoints stay put. */
.eg-relations-layout { container-type: inline-size; container-name: eg-relations; }
.eg-relations-layout > .eg-relations { margin: 0; }
.eg-relations { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-block: var(--eg-hairline) solid var(--eg-color-line); }
.eg-relation-card {
  position: relative; box-sizing: border-box; min-width: 0; min-height: 0; padding: 22px var(--eg-relation-padding-inline);
  border-block-start: var(--eg-hairline) solid var(--eg-color-line); color: var(--eg-color-text); background: var(--eg-family-surface, var(--eg-color-surface)); font-family: var(--eg-font); overflow-wrap: anywhere;
}
.eg-relation-card:first-child { border-block-start: 0; }
.eg-relations > .eg-relation-card { margin: 0; }
.eg-relation-card > * { margin-block-start: 0; }
.eg-relation-card > .eg-relation-card__label { margin: 0 0 var(--eg-space-2); color: var(--eg-family-accent, var(--eg-color-link)); font-size: var(--eg-relation-label-size); font-weight: var(--eg-weight-label); line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.eg-relation-card--destination > .eg-relation-card__label { padding-inline-end: var(--eg-space-3); }
.eg-relation-card > .eg-relation-card__title { margin: 0 0 var(--eg-space-1); padding-inline-end: var(--eg-space-3); color: var(--eg-color-text); font-size: var(--eg-relation-title-size); font-weight: 700; line-height: var(--eg-line-compact); letter-spacing: 0; }
.eg-relation-card > .eg-relation-card__body { max-width: 265px; margin: 0; color: var(--eg-color-muted); font-size: var(--eg-relation-body-size); line-height: var(--eg-line-compact); }
.eg-relation-card > .eg-relation-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-space-1); margin: var(--eg-space-2) 0 0; }
.eg-relation-card__actions > .eg-text-link { margin: 0; }
.eg-relation-card__actions .eg-text-link a { display: inline-flex; align-items: center; min-height: var(--eg-control-height-compact); }
/* Select the Core title link, not an inline class that RichText may replace. */
.eg-relation-card__title a[href] { position: static; color: inherit; text-decoration: none; }
.eg-relation-card__title a[href]::after { position: absolute; z-index: 1; inset: 0; content: ''; }
/* Empty generated content + an SVG mask: decorative and independent of the
 * editable link text. Native LinkControl text replacement removes inline spans. */
.eg-relation-card--destination::before {
  position: absolute; right: var(--eg-relation-padding-inline); top: 22px; width: var(--eg-arrow-size); height: var(--eg-arrow-size); content: ''; pointer-events: none;
  background-color: var(--eg-family-accent, var(--eg-color-link));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M4 3h9v9' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.eg-relation-card--current { box-shadow: inset 0 var(--eg-indicator) 0 var(--eg-color-accent); }
.eg-relation-card--current .eg-relation-card__title { padding-inline-end: 0; }
.eg-relation-card--destination { transition: background-color var(--eg-ui-duration) var(--eg-ui-ease); }
.eg-relation-card--destination:hover { background: var(--eg-family-surface-alt, var(--eg-color-surface-alt)); }
.eg-relation-card__title a[href]:focus-visible { outline: none; }
.eg-relation-card--destination:has(.eg-relation-card__title a[href]:focus-visible) { z-index: 2; outline: var(--eg-focus-width) solid var(--eg-family-accent, var(--eg-color-link)); outline-offset: var(--eg-focus-offset); }
/* Editor: the surface overlay must not intercept selection of sibling blocks. */
.editor-styles-wrapper .eg-relation-card__title a[href]::after { content: none; }
@container eg-relations (min-width: 690px) {
  .eg-relations { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .eg-relation-card { min-height: var(--eg-relation-min-height); padding-block: var(--eg-relation-padding-block); border-block-start: 0; border-inline-start: var(--eg-hairline) solid var(--eg-color-line); }
  .eg-relation-card:first-child { border-inline-start: 0; }
  .eg-relation-card--destination::before { top: var(--eg-relation-padding-block); }
}
@media (prefers-reduced-motion: reduce) { .eg-relation-card--destination { transition: none; } }