/* assets/css/components/section-header.css */
@layer components {
  .section-header { display: flex; flex-direction: column; gap: var(--space-xs); }
  .section-header--centered { align-items: center; text-align: center; }
  .section-header__eyebrow { font-size: var(--text-overline); font-weight: var(--weight-semibold); color: var(--text-accent); letter-spacing: var(--tracking-overline); text-transform: uppercase; margin: 0; }
  .section-header__heading { font-family: var(--font-heading); font-size: var(--heading-m); font-weight: var(--weight-bold); color: var(--text-main); line-height: var(--leading-tight); margin: 0; }
  .section-header__subline { font-size: var(--text-m); color: var(--text-body); line-height: var(--leading-relaxed); margin: 0; }
  .section-header--centered .section-header__subline { max-inline-size: 32.5rem; }
  .section-header--with-arrows { flex-direction: row; justify-content: space-between; align-items: center; }
  .section-header__arrows { display: flex; gap: var(--space-xs); }
  .section-header__arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-m); background: var(--white); border: 1px solid var(--border-default); color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); }
  .section-header__arrow:hover { background: var(--surface-tinted); border-color: var(--border-strong); color: var(--text-main); }
  .section-header__arrow--next { background: var(--surface-primary); border-color: var(--surface-primary); color: var(--text-on-primary); }
  .section-header__arrow--next:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
  .section-header__arrow-icon { width: 1.125rem; height: 1.125rem; }
}