/* ==========================================================================
   FTS: layout.css
   Layout utilities — container, gutters, stack spacing, section rhythm.
   Everything is opt-in via classes. No :root declarations — tokens.css.
   ========================================================================== */

.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 — owl selector adds top margin between all direct children */
.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); }
}

/* BB occasionally constrains .fl-module-content width — reset it */
:where(.fl-builder-content, .fl-module-content) { max-width: 100%; }

/* --------------------------------------------------------------------------
   .fts-column-max / .fts-reading (alias for backwards compatibility)
   Constrains a content block to --fts-column-max and centers it.

   BB columns are float-based. Floated elements ignore auto side margins,
   so single-column layouts need the float cleared before centering works.
   For multi-column layouts, apply this class to an inner module instead.
-------------------------------------------------------------------------- */
.fts-column-max,
.fts-reading {
  display: block;
  width: 100%;
  max-width: var(--fts-column-max);
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Single-column BB float neutralization */
.fl-col-group > .fl-col:is(.fts-column-max, .fts-reading):only-child {
  float: none !important;
  width: 100% !important;
  max-width: var(--fts-column-max);
  margin-left: auto !important;
  margin-right: auto !important;
}

.fl-col:is(.fts-column-max, .fts-reading) > .fl-col-content {
  width: 100%;
  max-width: var(--fts-column-max);
  margin-left: auto !important;
  margin-right: auto !important;
}

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

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

.fts-section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

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

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