// =============================================================================
// COMPONENT LABEL — divider bars between components on components.html
// Figma: 1440×154 frames with centred uppercase text (34px line box)
// Also: .drawer-demo — trigger blocks for drawer-based components
// =============================================================================

.component-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.625rem;              // 154px — Figma label frame height
  background-color: var(--color-pampas);

  span {
    font-family: var(--font-body);
    font-size: 1.75rem;          // 28px
    font-weight: var(--fw-semibold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-primary);
  }
}

// Demo block for drawer-triggered components (testimonial detail, drawer, contact)
.drawer-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);           // 24px
  // Section rhythm: 56px mobile+tablet, 80px laptop+ (--section-space,
  // tokens.scss). Was a flat 64px at every width, off the shared rhythm.
  // Demo-only element (components.html), zero production risk.
  padding-block: var(--section-space); // (bg via .bg-cream on <section>; horizontal inset via .container)
  text-align: center;
}

.drawer-demo__hint {
  font-family: var(--font-body);
  font-size: var(--fs-lg);       // 18px
  line-height: var(--lh-lg);
  color: var(--color-text-secondary);
  max-width: 45rem;
  margin: 0;
}