/*
 * Dish context banner — canonical "you're acting on X" affordance.
 * Surfaces: pairing /pairing, restaurant pairing, recipe-driven flows.
 * Plan: docs/plans/surface-handoff-pattern.md §3.
 *
 * Mobile-first; min-height respects 44px tap target on action buttons
 * (already enforced via .btn-small in accessibility.css).
 * Uses design tokens — no hardcoded font sizes (Sofia S5).
 */

.dish-context-banner {
  display: flex;
  align-items: center;
  gap: var(--space-md, 0.75rem);
  padding: var(--space-md, 0.75rem) var(--space-lg, 1rem);
  margin-bottom: var(--space-md, 0.75rem);
  background: var(--surface-muted, rgba(0, 0, 0, 0.04));
  border-left: 3px solid var(--accent, #8b5a3c);
  border-radius: var(--radius-md, 6px);
  /* role=region — give screen readers a meaningful label via aria-label */
}

.dish-context-banner__icon {
  font-size: var(--font-h3);
  line-height: 1;
  flex-shrink: 0;
}

.dish-context-banner__text {
  flex: 1;
  min-width: 0; /* allow primary truncation inside flex container */
}

.dish-context-banner__primary {
  font-size: var(--font-h4);
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dish-context-banner__secondary {
  font-size: var(--font-h5);
  color: var(--text-secondary, #4a4a4a);
  margin-top: 0.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dish-context-banner__actions {
  display: flex;
  gap: var(--space-sm, 0.5rem);
  flex-shrink: 0;
}

.dish-context-banner__action {
  /* Inherits .btn / .btn-small / .btn-link sizing + 44px tap target
     from accessibility.css. No size overrides here. */
}

/* Mobile-tight — keep banner above the fold; reduce horizontal padding */
@media (max-width: 480px) {
  .dish-context-banner {
    padding: var(--space-sm, 0.5rem) var(--space-md, 0.75rem);
    gap: var(--space-sm, 0.5rem);
  }
  .dish-context-banner__icon {
    font-size: var(--font-h4);
  }
}