/**
 * MB4 Category 2 — Fix vertical title clipping on mobile
 * Force horizontal layout for every page/header title selector.
 */

@media (max-width: 768px) {
  .page-title,
  .page-header h1,
  .page-header h2,
  [class*="page-title"],
  [class*="pageTitle"],
  .header-title,
  #pageTitle,
  .content-area > h1,
  .content-area > h2,
  .dashboard-title,
  .section-title {
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: calc(100vw - 120px) !important;
    display: inline-block !important;
    text-align: start !important;
    font-size: clamp(1.05rem, 4vw, 1.5rem) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }

  .page-header,
  .header-container,
  .header,
  [class*="page-header"] {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    overflow-x: hidden !important;
  }

  /* Break long words only when truly necessary */
  h1, h2, h3, h4 {
    word-break: normal !important;
    hyphens: none !important;
  }

  /* Fluid heading scale */
  h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  h2 { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; }
  h3 { font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important; }
}

@media (max-width: 360px) {
  .page-title-emoji,
  .title-emoji {
    display: none !important;
  }
}