/* Shared Legacy family card. The Landing/Home carousel and full Legacy directory
   both render this component so portrait, typography, relationship, and focus styling cannot drift. */
.legacy-family-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  justify-items: center;
  align-self: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: clamp(12px, 3.55cqi, 16px) clamp(7px, 4.7cqi, 11px) clamp(12px, 3.8cqi, 16px);
  overflow: hidden;
  border: 1px solid rgba(190, 143, 65, 0.5);
  border-radius: clamp(18px, 11cqi, 22px);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.72), transparent 48%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(249, 242, 229, 0.94));
  box-shadow:
    0 0 0 1px rgba(255, 250, 239, 0.58) inset,
    0 0.34rem 0.85rem rgba(76, 49, 25, 0.055);
  color: rgba(45, 29, 20, 0.95);
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.legacy-family-card:focus-visible {
  outline: 2px solid rgba(132, 86, 25, 0.88);
  outline-offset: 3px;
  border-color: rgba(168, 111, 31, 0.76);
}

@media (hover: hover) and (pointer: fine) {
  .legacy-family-card:hover {
    border-color: rgba(165, 108, 29, 0.68);
    box-shadow:
      0 0 0 1px rgba(255, 250, 239, 0.64) inset,
      0 0.48rem 1rem rgba(76, 49, 25, 0.085);
    transform: translateY(-1px);
  }
}

.legacy-family-card__header {
  display: grid;
  justify-items: center;
  gap: clamp(3px, 2.2cqi, 5px);
  width: 100%;
  min-width: 0;
}

.legacy-family-card__generation {
  display: block;
  max-width: calc(100% - 0.5rem);
  overflow: hidden;
  color: rgba(124, 83, 28, 0.9);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: clamp(6.6px, 4.65cqi, 8px);
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: 0.075em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.legacy-family-card__relationship {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: calc(100% - 0.8rem);
  min-height: 1.26rem;
  padding: clamp(2.5px, 2.1cqi, 3.5px) clamp(6px, 4.5cqi, 8px);
  overflow: hidden;
  border: 1px solid rgba(187, 132, 43, 0.46);
  border-radius: 999px;
  background: rgba(255, 252, 245, 0.52);
  color: rgba(64, 43, 29, 0.86);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(6.8px, 5.45cqi, 8.65px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.045em;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  box-sizing: border-box;
}

.legacy-family-card__relationship--long {
  max-width: calc(100% - 0.42rem);
  padding-inline: clamp(4px, 3.2cqi, 6px);
  font-size: clamp(6.25px, 4.75cqi, 7.75px);
  letter-spacing: 0.018em;
}

.legacy-family-card.is-focal-person {
  border-color: rgba(183, 126, 35, 0.78);
  box-shadow:
    0 0 0 2px rgba(229, 190, 101, 0.2),
    0 0 0 1px rgba(255, 250, 237, 0.76) inset,
    0 0.48rem 1rem rgba(104, 63, 14, 0.11);
}

/* The current perspective is intentionally clearer than other relationships,
   but remains a quiet cream-and-gold badge instead of a loud status chip. */
.legacy-family-card.is-focal-person .legacy-family-card__relationship {
  position: relative;
  gap: 0.26em;
  border-color: #bf8427;
  background: linear-gradient(180deg, rgba(255, 250, 232, 0.99), rgba(245, 226, 178, 0.98));
  box-shadow:
    0 0 0 1px rgba(255, 253, 244, 0.88) inset,
    0 2px 7px rgba(117, 72, 13, 0.13),
    0 0 0.36rem rgba(203, 155, 66, 0.09);
  color: #744a0c;
  font-size: clamp(7.2px, 5.7cqi, 9.1px);
  font-weight: 760;
  letter-spacing: 0.052em;
}

.legacy-family-card.is-focal-person .legacy-family-card__relationship::before {
  content: "✦";
  flex: 0 0 auto;
  color: #b27417;
  font-size: 0.72em;
  line-height: 1;
}

.legacy-family-card__portrait-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  margin-top: clamp(6px, 4.8cqi, 9px);
  isolation: isolate;
}

.legacy-family-card__portrait-ring {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(82px, 70cqi, 108px);
  aspect-ratio: 1 / 1;
  padding: clamp(2px, 2.2cqi, 3px);
  border-radius: 50%;
  background: linear-gradient(145deg, #9a681b 0%, #f0ce73 28%, #b47918 54%, #f9e29a 76%, #8f5d16 100%);
  box-shadow:
    0 0 0 1px rgba(116, 73, 17, 0.24),
    0 0 0 3px rgba(255, 249, 233, 0.82),
    0 0.3rem 0.72rem rgba(67, 43, 20, 0.1);
  box-sizing: border-box;
}

.legacy-family-card img {
  -webkit-user-drag: none;
  user-select: none;
}

.legacy-family-card__portrait {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255, 246, 219, 0.88);
  border-radius: 50%;
  background: rgba(242, 229, 204, 0.9);
  object-fit: cover;
  object-position: center top;
  filter: sepia(0.17) saturate(0.92) contrast(1.03);
  box-sizing: border-box;
}

.legacy-family-card__olive {
  position: absolute;
  z-index: 1;
  top: 53%;
  width: clamp(31px, 31cqi, 48px);
  height: auto;
  opacity: 0.23;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.legacy-family-card__olive--left { left: 0; transform: translateY(-50%) rotate(-10deg); }
.legacy-family-card__olive--right { right: 0; transform: translateY(-50%) scaleX(-1) rotate(-10deg); }

.legacy-family-card__identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  gap: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: clamp(7px, 5cqi, 10px);
  overflow: hidden;
}

.legacy-family-card__name {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: rgba(42, 27, 18, 0.98);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(14px, 11.6cqi, 18px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.008em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-family-card__fact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 3.1cqi, 5px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: clamp(5px, 4.2cqi, 7px) 0 0;
  color: rgba(57, 42, 32, 0.8);
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(11.5px, 9.5cqi, 15px);
  font-weight: 500;
  line-height: 1.12;
  text-align: center;
}

.legacy-family-card__fact--profession {
  align-items: center;
  min-height: 0;
  margin-top: clamp(4px, 3.4cqi, 6px);
}
.legacy-family-card__fact > span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legacy-family-card__fact svg {
  flex: 0 0 auto;
  width: clamp(11px, 9.2cqi, 15px);
  height: clamp(11px, 9.2cqi, 15px);
  fill: none;
  stroke: rgba(179, 119, 30, 0.92);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legacy-family-card__traits {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(3px, 2.6cqi, 5px);
  width: 100%;
  min-width: 0;
  margin-top: clamp(8px, 5.6cqi, 11px);
}

.legacy-family-card__traits > span {
  min-width: 0;
  max-width: 33.333%;
  padding: clamp(2.5px, 2.3cqi, 4px) clamp(5px, 3.8cqi, 8px);
  overflow: hidden;
  border: 1px solid rgba(184, 132, 50, 0.28);
  border-radius: 999px;
  background: rgba(255, 250, 239, 0.74);
  color: rgba(91, 61, 30, 0.9);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: clamp(6.8px, 4.8cqi, 8.5px);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Full Legacy directory empty-data affordances. These occupy the same content
   slots as real values so every directory card keeps one consistent height. */
.legacy-family-card__missing-detail {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, 2.8cqi, 5px);
  width: fit-content;
  max-width: calc(100% - 0.5rem);
  min-height: clamp(18px, 12cqi, 22px);
  padding: clamp(2.5px, 2.1cqi, 4px) clamp(6px, 4.2cqi, 9px);
  border: 1px dashed rgba(180, 124, 38, 0.34);
  border-radius: 999px;
  background: rgba(255, 250, 239, 0.58);
  color: rgba(121, 81, 29, 0.82);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: clamp(6.8px, 4.9cqi, 8.6px);
  font-weight: 650;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

button.legacy-family-card__missing-detail {
  appearance: none;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

button.legacy-family-card__missing-detail:hover {
  border-color: rgba(172, 111, 24, 0.58);
  background: rgba(248, 233, 198, 0.76);
  color: #71470e;
  transform: translateY(-1px);
}

button.legacy-family-card__missing-detail:focus-visible {
  outline: 2px solid rgba(176, 119, 32, 0.46);
  outline-offset: 2px;
  border-style: solid;
}

.legacy-family-card__missing-detail svg {
  flex: 0 0 auto;
  width: clamp(11px, 8.5cqi, 14px);
  height: clamp(11px, 8.5cqi, 14px);
  fill: none;
  stroke: rgba(177, 116, 25, 0.94);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.legacy-family-card__identity > .legacy-family-card__missing-detail--occupation {
  margin-top: clamp(4px, 3.4cqi, 6px);
}

.legacy-family-card__missing-detail--traits {
  margin-top: clamp(8px, 5.6cqi, 11px);
}

@container (min-width: 180px) {
  .legacy-family-card__identity { width: calc(100% - clamp(0.35rem, 1.2vw, 0.7rem)); }
  .legacy-family-card__fact { max-width: calc(100% - 0.2rem); }
}

@media (min-width: 451px) {
  .legacy-family-card__identity {
    width: calc(100% - clamp(0.35rem, 1.2vw, 0.7rem));
  }

  .legacy-family-card__fact {
    max-width: calc(100% - 0.2rem);
    font-size: clamp(12.5px, 2.8vw, 15px);
  }
}

@media (min-width: 501px) {
  .legacy-family-card__fact {
    font-size: clamp(13.25px, 1.08vw, 16.25px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .legacy-family-card { transition: none; }
}