/* ==========================================================================
   FTS: layout.css
   Purpose: Layout defaults (width, gutters, vertical rhythm helpers).
   Notes:
   - Everything in this file is opt-in via FTS classes.
   - Avoid global row/column/module padding rules here. Those belong in
     Beaver Builder Global Settings (per README).
   ========================================================================== */

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

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

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

  --fts-reading: 118ch;
}

/* --- Container Helper --- */
/* NOTE: Apply .fts-container to BB rows/modules for consistent max width + gutters. */
.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 --- */
/* NOTE: Use .fts-stack on a column or wrapper to add consistent spacing between modules. */

/* Standard (non-BB) stacking */
.fts-stack > :where(* + *) {
  margin-top: var(--fts-stack);
}

/* Beaver Builder column/module stacking */
.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);
  }
}

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



/* --- Reading Width Helper --- */
/* NOTE: Apply to a module/column/row to constrain measure for readability.
   This is strictly opt-in and only affects the element with the class. */
.fts-reading {
  display: block;
  width: 100%;
  max-width: var(--fts-reading);
}

/* --- Horizontal Centering Utility --- */
/* NOTE: Use for single elements that need centering without extra wrappers. */
.fts-center {
  margin-left: auto;
  margin-right: auto;
}

/* --- Gap Utilities --- */
/* NOTE: For flex/grid layouts only. Avoid using for vertical rhythm. */
.fts-gap-sm { gap: 8px; }
.fts-gap-md { gap: 16px; }
.fts-gap-lg { gap: 24px; }

/* --- Section Spacing Helper --- */
/* NOTE: Use for top/bottom spacing between major page sections. */
.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;
  }
}