/* assets/css/components/section-eyebrow.css
 * @layer components — Section Eyebrow (small all-caps overline)
 *
 * Site-wide editorial signpost that introduces a section before its
 * heading. One pattern, used everywhere — Industries, Services, About
 * (Pioneer), Insights Hub, FAQ, Contact, About Us sub-page sections.
 *
 * BEM:
 *   .section-eyebrow         — flex row, orange rule + caps label
 *   .section-eyebrow__rule   — short horizontal --secondary rule
 *   .section-eyebrow__label  — caps overline text
 *
 * Auto-dark adaptation: when nested inside a dark .section data-theme
 * (primary / dark / primary-dark), the label flips to white; the rule
 * keeps its --secondary so the brand accent stays visible.
 *
 * All values come from tokens.css — no raw colour, spacing, or px.
 */

@layer components {

  .section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-m);
    margin: 0;
  }

  .section-eyebrow__rule {
    display: block;
    inline-size: var(--space-xl);
    block-size: var(--line-thick);
    background: var(--secondary);
    flex-shrink: 0;
  }

  .section-eyebrow__label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-overline);
    text-transform: uppercase;
    color: var(--text-subtle);
    line-height: var(--leading-tight);
  }

  /* On-dark adaptation — when the section background is teal/dark, flip
     the label to on-dark white. The rule stays --secondary so the brand
     accent is still visible against the dark background. */
  .section[data-theme="primary"] .section-eyebrow__label,
  .section[data-theme="dark"] .section-eyebrow__label,
  .section[data-theme="primary-dark"] .section-eyebrow__label {
    color: var(--text-on-dark);
  }
}