/*
 * Mobile typography guardrails shared by every public template.
 * JavaScript adds the two utility classes only when text actually wraps.
 */
@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .trel-mobile-wrapped-copy {
    text-align: left !important;
    text-wrap: pretty;
  }

  :is(h1, h2, h3).trel-mobile-tight-heading {
    line-height: 1.4 !important;
  }

  /* The presentation cover previously kept its desktop title on one line. */
  .trel-deck-page .trel-slide__inner,
  .trel-deck-page .trel-cover__copy,
  .trel-deck-page .trel-story {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .trel-deck-page .trel-slide__inner {
    scrollbar-gutter: auto;
  }

  .trel-deck-page .trel-slide--intro h1 {
    max-width: 100%;
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    word-break: normal;
    overflow-wrap: anywhere;
    text-wrap: balance !important;
  }
}