/* FlexiBuild R3.2.1 — Public Layout & Gutter System
   One responsive horizontal grid for every public surface.
   Scoped to .fb-public-layout so authenticated/admin shells are untouched. */

.fb-public-layout {
  --fb-public-shell-max: 1360px;
  --fb-public-gutter: clamp(20px, 4vw, 56px);
  overflow-x: clip;
}

/* Canonical public container.
   R1 constrained width but did not provide a universal gutter. R3/R3.2
   introduced full-width sections with vertical-only padding. This layer
   makes every .wrap responsible for safe horizontal breathing room. */
.fb-public-layout .wrap {
  width: 100%;
  max-width: var(--fb-public-shell-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fb-public-gutter);
  padding-right: var(--fb-public-gutter);
}

/* Horizontal spacing now belongs to the container rather than individual
   sections. This prevents double gutters and keeps all section edges aligned. */
.fb-public-layout .section {
  padding-left: 0;
  padding-right: 0;
}

/* Keep the public navigation on the same vertical grid as page content. */
.fb-public-layout .fb3-nav {
  width: 100%;
  max-width: var(--fb-public-shell-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--fb-public-gutter);
  padding-right: var(--fb-public-gutter);
}

/* Give major split layouts enough internal breathing room at desktop sizes. */
.fb-public-layout .fb32-home-grid,
.fb-public-layout .fb32-hero-grid,
.fb-public-layout .fb32-article-hero-grid,
.fb-public-layout .fb32-national-grid,
.fb-public-layout .fb3-enquiry-grid,
.fb-public-layout .fb3-product-detail-grid,
.fb-public-layout .fb3-answer-grid,
.fb-public-layout .fb3-civic-band > .wrap {
  column-gap: clamp(30px, 4.5vw, 72px);
}

/* Prevent very wide controls/cards from forcing content back to the viewport edge. */
.fb-public-layout .fb3-enquiry form,
.fb-public-layout .fb32-hero-visual,
.fb-public-layout .fb32-home-mosaic,
.fb-public-layout .fb3-product-card,
.fb-public-layout .fb32-article-card,
.fb-public-layout .fb32-side-card {
  min-width: 0;
}

/* Footer uses the exact same container boundary as the header and content. */
.fb-public-layout .fb3-footer-grid,
.fb-public-layout .fb3-footer-bottom {
  width: 100%;
}

/* Preserve useful vertical rhythm while ensuring full-bleed backgrounds remain full bleed. */
.fb-public-layout .fb32-home-hero,
.fb-public-layout .fb32-hero,
.fb-public-layout .fb32-article-hero,
.fb-public-layout .fb3-market-hero,
.fb-public-layout .fb3-growth-hero,
.fb-public-layout .fb3-home-hero,
.fb-public-layout .fb3-category-hero,
.fb-public-layout .fb3-enquiry,
.fb-public-layout .fb3-footer {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 900px) {
  .fb-public-layout {
    --fb-public-gutter: clamp(20px, 5vw, 36px);
  }

  .fb-public-layout .fb32-home-grid,
  .fb-public-layout .fb32-hero-grid,
  .fb-public-layout .fb32-article-hero-grid,
  .fb-public-layout .fb32-national-grid,
  .fb-public-layout .fb3-enquiry-grid,
  .fb-public-layout .fb3-product-detail-grid,
  .fb-public-layout .fb3-answer-grid,
  .fb-public-layout .fb3-civic-band > .wrap {
    column-gap: 0;
  }
}

@media (max-width: 520px) {
  .fb-public-layout {
    --fb-public-gutter: 20px;
  }
}