/* Блок hero. @layer components. */
@layer components {
  .bbq-hero { background: linear-gradient(180deg, var(--bbq-surface), var(--bbq-bg)); border-bottom: 1px solid var(--bbq-line); }
  .bbq-hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-block: 56px; }
  .bbq-hero__lead { font-size: 18px; color: var(--bbq-ink-soft); max-width: 46ch; }

  /* Бейджи доверия — карточки с иконкой (как в макете) */
  .bbq-hero__badges { list-style: none; margin: 24px 0; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; }
  .bbq-hero__badge { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--bbq-line); border-radius: 14px; padding: 12px 16px; }
  .bbq-hero__badge-ic { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
  .bbq-hero__badge-tx { display: flex; flex-direction: column; line-height: 1.15; }
  .bbq-hero__badge-tx strong { font-family: var(--bbq-font-head); font-size: 22px; color: var(--bbq-ink); }
  .bbq-hero__badge-tx span { color: var(--bbq-muted); font-size: 13px; }

  .bbq-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }
  .bbq-hero__note { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--bbq-muted); font-size: 14px; }
  .bbq-hero__note svg { width: 16px; height: 16px; flex: 0 0 auto; }

  .bbq-hero__media img { width: 100%; border-radius: var(--bbq-radius); }

  /* Нижняя плашка доверия */
  .bbq-hero-trust { background: var(--bbq-surface); border-top: 1px solid var(--bbq-line); }
  .bbq-hero-trust__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 20px; }
  .bbq-hero-trust__item { display: flex; align-items: center; gap: 12px; }
  .bbq-hero-trust__ic { width: 36px; height: 36px; object-fit: contain; flex: 0 0 auto; }
  .bbq-hero-trust__item span { color: var(--bbq-ink-soft); font-size: 14px; line-height: 1.25; }

  @media (max-width: 900px) {
    .bbq-hero__inner { grid-template-columns: 1fr; gap: 28px; padding-block: 36px; }
    .bbq-hero__media { order: -1; }
    .bbq-hero-trust__inner { grid-template-columns: 1fr 1fr; gap: 16px; }
  }
  @media (max-width: 560px) { .bbq-hero-trust__inner { grid-template-columns: 1fr; } }
}