/*
 * CP-08 Business card — app/components/ui/business_card_component.rb
 *
 * Layout glue for the composed card: logo+name header, industry tag
 * wrap, inset reward-terms row, and the CTA disabled-state wrapper used
 * when `suspended: true` (opacity + pointer-events, since the CTA
 * arrives as opaque pre-rendered content that can't be given a real
 * `disabled` attribute from here).
 */

.ui-cp08__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ui-cp08__name {
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-ink);
}

/* Trailing edge of the header. `margin-left: auto` rather than
   `justify-content: space-between` on the header, so a card with no marker
   keeps the logo and name tight together exactly as before. */
.ui-cp08__marker {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
}

.ui-cp08__industries {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ui-cp08__terms {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.ui-cp08__terms-label {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

.ui-cp08__terms-value {
  font-weight: 500;
  color: var(--color-ink);
}

.ui-cp08__cta {
  margin-top: var(--space-4);
}

/*
 * Suspended CTA stays legible — no opacity fade on the button (its label
 * text would drop below AA contrast). `pointer-events: none` plus the
 * adjacent note and the warning strip above already communicate the
 * disabled state without colour.
 */
.ui-cp08__cta--disabled .ui-cp08__cta-content {
  pointer-events: none;
  display: block;
}

.ui-cp08__cta-note {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-top: var(--space-1);
}