/* MCP brand lockups v0.3 draft.
   Consumers must set --mcp-parent-mark-url to the approved parent asset. */

:root {
  --mcp-brand-ink: #f7f5f0;
  --mcp-brand-surface: #0b0d12;
  --mcp-brand-accent: #c8831a;
  --mcp-brand-font: Arial, Helvetica, sans-serif;
}

.mcp-lockup {
  --product-accent: var(--mcp-brand-accent);
  display: grid;
  grid-template-columns: minmax(88px, 118px) 2px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  min-height: 6rem;
  color: var(--mcp-brand-ink);
  font-family: var(--mcp-brand-font);
}

.mcp-lockup__parent {
  width: 100%;
  aspect-ratio: 795 / 321;
  background: var(--mcp-parent-mark-url) left center / contain no-repeat;
}

.mcp-lockup__divider {
  width: 2px;
  height: 3.9rem;
  background: var(--product-accent);
}

.mcp-lockup__name {
  min-width: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.7rem);
  font-weight: 600;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.mcp-endorsed-brand {
  display: grid;
  gap: 0.75rem;
  color: var(--mcp-brand-ink);
  font-family: var(--mcp-brand-font);
}

.mcp-endorsed-brand__relationship {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mcp-endorsed-brand__identity {
  padding-top: 0.75rem;
  border-top: 2px solid var(--product-accent);
}

.mcp-endorsed-brand__name {
  display: block;
  font-size: clamp(1.6rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 0.95;
}

.mcp-powered-by {
  font-size: 0.75rem;
  color: currentColor;
}

@media (max-width: 30rem) {
  .mcp-lockup {
    grid-template-columns: minmax(76px, 96px) 2px minmax(0, 1fr);
    gap: 0.6rem;
  }

  .mcp-lockup__divider {
    height: 3.2rem;
  }
}