/* Page Header Component */

/* Page title and subtitle pattern used across settings and content pages */

@layer components {
  /* ============================================
     BASE PAGE HEADER
     ============================================ */
  .page-header {
    margin-bottom: var(--space-2xl);
  }

  .page-header__title {
    font-size: var(--font-size-heading-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-dark);
    margin: 0;
    line-height: 1.2;
  }

  .page-header__subtitle {
    color: var(--color-gray-4);
    margin-top: var(--space-xs);
    font-size: var(--font-size-base);
    margin-bottom: 0;
    line-height: 1.5;
  }

  /* ============================================
     RESPONSIVE
     ============================================ */

  /* On small screens, reduce title size */
  @media (width <= 640px) {
    .page-header__title {
      font-size: var(--font-size-heading-lg);
    }

    .page-header__subtitle {
      font-size: var(--font-size-sm);
    }
  }
}