/* ==========================================================================
   FTS: layout.css
   Purpose: Layout helpers (container, gutters, rhythm, reading width).
   Notes:
   - Everything opt-in via classes.
   ========================================================================== */


  :root {
    --fts-container: 1400px;

    --fts-gutter: 48px;
    --fts-gutter-md: 32px;
    --fts-gutter-sm: 20px;

    --fts-stack: 24px;
    --fts-stack-sm: 16px;

    --fts-reading: 115ch;
  }

  .fts-container {
    width: 100%;
    max-width: var(--fts-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fts-gutter);
    padding-right: var(--fts-gutter);
  }

  @media (max-width: 991.98px) {
    .fts-container {
      padding-left: var(--fts-gutter-md);
      padding-right: var(--fts-gutter-md);
    }
  }

  @media (max-width: 767.98px) {
    .fts-container {
      padding-left: var(--fts-gutter-sm);
      padding-right: var(--fts-gutter-sm);
    }
  }

  /* Vertical spacing helper */
  .fts-stack > :where(* + *) { margin-top: var(--fts-stack); }
  .fts-stack :where(.fl-col-content > .fl-module + .fl-module) { margin-top: var(--fts-stack); }

  @media (max-width: 767.98px) {
    .fts-stack > :where(* + *) { margin-top: var(--fts-stack-sm); }
    .fts-stack :where(.fl-col-content > .fl-module + .fl-module) { margin-top: var(--fts-stack-sm); }
  }

  /* Guard against accidental max-width constraints */
  :where(.fl-builder-content, .fl-module-content) { max-width: 100%; }

  /* Reading width */
  .fts-reading {
    display: block;
    width: 100%;
    max-width: var(--fts-reading);
    margin-left: auto;
    margin-right: auto;
  }

  .fts-center { margin-left: auto; margin-right: auto; }

  /* Gaps */
  .fts-gap-sm { gap: 8px; }
  .fts-gap-md { gap: 16px; }
  .fts-gap-lg { gap: 24px; }

  /* Section spacing */
  .fts-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  @media (max-width: 991.98px) {
    .fts-section { padding-top: 48px; padding-bottom: 48px; }
  }

  @media (max-width: 767.98px) {
    .fts-section { padding-top: 32px; padding-bottom: 32px; }
  }
