/* Container and DND Section Styles */
/* Uses CSS custom properties from theme-overrides.css */

/* WARNING: NOT IN THE LIVE RENDER PATH (verified 2026-07-02). This file is only
   pulled in (via a HubL include) by css/main-optimized.css and css/main-minimal.css,
   neither of which is loaded by any template — layouts load css/modern.css. So the
   column-level width cap below (.dnd-section .dnd-column > .row-fluid) never
   renders; the effective cap is the section-level rule inlined in
   layouts/base.html / base-barebone.html / base-landing.html. Do not rely on
   the rules here until this file is wired into a loaded stylesheet.
   NOTE: do NOT write a literal HubL include tag inside this CSS comment — HubSpot's
   template validator parses it even in a CSS comment and rejects the file. */

.content-wrapper {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

/* SECTIONS: Full-width by default for backgrounds */
.dnd-section {
  width: 100%;
}

/* CONTENT INSIDE SECTIONS: Constrained by container width */
.dnd-section > .row-fluid {
  max-width: 100%;  /* Let section be full width */
  margin: 0 auto;
}

/* The actual content constraint happens at the column level */
.dnd-section .dnd-column > .row-fluid {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Or if there's a single column spanning full width */
.dnd-section > .row-fluid > [class*="span12"] {
  max-width: var(--container-width, 1200px);
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column > .row-fluid {
    padding: 0 1rem;
  }
}

/* For sections that explicitly need full-width content (edge to edge) */
.dnd-section--full-width .dnd-column > .row-fluid,
.dnd-section--full-width > .row-fluid > [class*="span12"] {
  max-width: 100%;
  padding: 0;
}

/* For sections with narrow/readable content (articles, tutorials, docs) */
.dnd-section--narrow .dnd-column > .row-fluid,
.dnd-section--narrow > .row-fluid > [class*="span12"] {
  max-width: var(--container-width-narrow, 800px);
}

/* Prose/article styling for rich text content */
.dnd-section--narrow .hs_cos_wrapper_type_rich_text,
.dnd-section--narrow .hs_cos_wrapper_type_module {
  font-size: 1.125rem;
  line-height: 1.7;
}