/* ============================================================
   _badges.css — TRUST/CREDENTIAL BADGE COMPONENT

   Usage:
     <div class="bee-trust">
       <div class="bee-trust__logo">
         <img src="..." alt="PADI 5-Star">
       </div>
       <div class="bee-trust__text">
         <span class="bee-trust__title">PADI Certified</span>
         <span class="bee-trust__sub">5-Star Dive Center</span>
       </div>
     </div>

   Reusable across hero, footer, about page, etc.

   NOTE: Old `.hero-trust` classes are aliased below for backward
   compatibility — migrate to bee-trust__* in new sections.
   ============================================================ */

.bee-trust {
  display: inline-flex;
  align-items: center !important;
  gap: var(--bee-space-sm);
  padding: 0.625rem 1rem 0.625rem 0.625rem;
  border-radius: var(--bee-radius-pill);
  background: var(--bee-surface-glass);
  border: 1px solid var(--bee-surface-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: fit-content;
}

.bee-trust__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bee-trust__logo img {
  width: 44px;
  height: 44px;
  display: block;
  object-fit: contain;
}

.bee-trust__text {
  display: flex;
  flex-direction: column;
  gap: var(--bee-space-3xs);
  line-height: var(--bee-leading-snug);
  padding: 0;
}

.bee-trust__title {
  font-size: var(--bee-text-sm);
  font-weight: 700;
  color: #fff;
  letter-spacing: var(--bee-tracking-wide);
}

.bee-trust__sub {
  font-size: var(--bee-text-xs);
  font-weight: 500;
  color: var(--bee-text-muted);
  letter-spacing: var(--bee-tracking-wider);
}