/* ================================================================
   HubSpot DnD Sections & Columns — Atlas Theme
   Container widths reference --atlas-* variables from theme_overrides.hubl.css.
   ================================================================ */

/* Remove HubSpot's default outer padding so sections render edge-to-edge */
#main-content > .container-fluid {
  padding: 0;
}

/* HubSpot native modules (rich text, image, etc.) have no .container of their own —
   apply container behaviour directly to the module wrapper. Custom React modules
   are excluded via :not(:has()) because they provide their own .container. */
.dnd-section:not([class$="-force-full-width-section"]) .dnd-module > .hs_cos_wrapper_type_module:not(:has(.container, .container-fluid)) {
  --atlas-gutter-x: var(--atlas-container-padding);
  box-sizing: border-box;
  width: 100%;
  padding-right: calc(var(--atlas-gutter-x) * 0.5);
  padding-left: calc(var(--atlas-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

/* Apply matching edge padding to .container inside custom React modules.
   The multi-column release rules (higher specificity) override --atlas-gutter-x
   back to 0 in column contexts so padding is not doubled. */
.dnd-section:not([class$="-force-full-width-section"]) .dnd-module > .hs_cos_wrapper_type_module :is(.container, .container-fluid) {
  --atlas-gutter-x: var(--atlas-container-padding);
  box-sizing: border-box;
  padding-right: calc(var(--atlas-gutter-x) * 0.5);
  padding-left: calc(var(--atlas-gutter-x) * 0.5);
}

@media (min-width: 576px) {
  .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > .hs_cos_wrapper_type_module:not(:has(.container, .container-fluid)) {
    max-width: var(--atlas-container-sm);
  }
}

@media (min-width: 768px) {
  .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > .hs_cos_wrapper_type_module:not(:has(.container, .container-fluid)) {
    max-width: var(--atlas-container-md);
  }
}

@media (min-width: 992px) {
  .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > .hs_cos_wrapper_type_module:not(:has(.container, .container-fluid)) {
    max-width: var(--atlas-container-lg);
  }
}

@media (min-width: 1200px) {
  .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > .hs_cos_wrapper_type_module:not(:has(.container, .container-fluid)) {
    max-width: var(--atlas-container-xl);
  }
}

@media (min-width: 1400px) {
  .dnd-section:not([class$="-force-full-width-section"]) .dnd-module > .hs_cos_wrapper_type_module:not(:has(.container, .container-fluid)) {
    max-width: var(--atlas-container-xxl);
  }
}

/* Legacy fallback — no :has() support: centre the row-fluid at roughly the max container width */
@supports not selector(:has(.container)) {
  #main-content > .container-fluid > .row-fluid-wrapper > .row-fluid > .span12 > .dnd-section[class*="vertical-alignment"] > .row-fluid {
    max-width: var(--atlas-container-xxl);
    margin-left: auto;
    margin-right: auto;
  }
}

/* Force-full-width sections: Bootstrap containers must not be capped */
.dnd-section[class$="-force-full-width-section"] :is(.container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) {
  max-width: 100%;
}

/* Replace legacy float-based row with flexbox */
body .row-fluid {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--atlas-grid-gutter);
  row-gap: 0;
}

/* .span1–.span12 → proportional flex columns (col / 12 * 100, rounded to 6 dp) */
body .span1  { flex: 8.333333;  max-width: 8.333333%; }
body .span2  { flex: 16.666667; max-width: 16.666667%; }
body .span3  { flex: 25.0;      max-width: 25.0%; }
body .span4  { flex: 33.333333; max-width: 33.333333%; }
body .span5  { flex: 41.666667; max-width: 41.666667%; }
body .span6  { flex: 50.0;      max-width: 50.0%; }
body .span7  { flex: 58.333333; max-width: 58.333333%; }
body .span8  { flex: 66.666667; max-width: 66.666667%; }
body .span9  { flex: 75.0;      max-width: 75.0%; }
body .span10 { flex: 83.333333; max-width: 83.333333%; }
body .span11 { flex: 91.666667; max-width: 91.666667%; }
body .span12 { flex: 100.0;     max-width: 100.0%; }

@media (max-width: 1199px) {
  body .span10,
  body .span11,
  body .span12 { max-width: 100%; width: 100%; flex: unset; }

  body .span1,
  body .span2 { max-width: unset; }
}

@media (max-width: 991px) {
  body .span7,
  body .span8,
  body .span9,
  body .span10,
  body .span11,
  body .span12 { max-width: 100%; width: 100%; flex: unset; }

  body .span1,
  body .span2,
  body .span3,
  body .span4,
  body .span5 { max-width: unset; }
}

@media (max-width: 767px) {
  body .span4,
  body .span5,
  body .span6,
  body .span7,
  body .span8,
  body .span9,
  body .span10,
  body .span11,
  body .span12 { max-width: 100%; width: 100%; flex: unset; }

  body .span1,
  body .span2,
  body .span3,
  body .span4,
  body .span5,
  body .span6,
  body .span7,
  body .span8 { max-width: unset; }
}

@media (max-width: 575px) {
  body .span1,
  body .span2,
  body .span3,
  body .span4,
  body .span5,
  body .span6,
  body .span7,
  body .span8,
  body .span9,
  body .span10,
  body .span11,
  body .span12 { max-width: 100%; width: 100%; flex: unset; }

  body .span1,
  body .span2,
  body .span3,
  body .span4,
  body .span5,
  body .span6,
  body .span7,
  body .span8,
  body .span9,
  body .span10,
  body .span11 { max-width: unset; }
}

/* ================================================================
   :has() progressive enhancement

   Section padding is conditional on a module being present.

   For multi-column rows, .row-fluid becomes the single container
   and descendant module wrappers / Bootstrap containers are
   released (--atlas-gutter-x: 0; max-width: initial) to prevent
   double-constraining.

   Two patterns are handled:
   A) dnd-section > .row-fluid with non-span12 direct children
   B) dnd-section > .row-fluid > .span12 > .row-fluid-wrapper > .row-fluid
      with non-span12 direct children (HubSpot's common nested layout)
   ================================================================ */
@supports selector(:has(.container)) {
  body .dnd-section {
    padding-block: initial;
  }

  /* Pattern A — multi-column row is a direct child of .dnd-section */
  .dnd-section:not([class$="-force-full-width-section"]):has(> .row-fluid > :not(.span12)) > .row-fluid {
    --atlas-gutter-x: var(--atlas-container-padding);
    box-sizing: border-box;
    width: 100%;
    padding-right: calc(var(--atlas-gutter-x) * 0.5);
    padding-left: calc(var(--atlas-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
  }

  .dnd-section:not([class$="-force-full-width-section"]):has(> .row-fluid > :not(.span12)) > .row-fluid
  :is(.dnd-module > .hs_cos_wrapper_type_module, .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) {
    --atlas-gutter-x: 0;
    max-width: initial;
  }

  @media (min-width: 576px) {
    .dnd-section:not([class$="-force-full-width-section"]):has(> .row-fluid > :not(.span12)) > .row-fluid {
      max-width: var(--atlas-container-sm);
    }
  }

  @media (min-width: 768px) {
    .dnd-section:not([class$="-force-full-width-section"]):has(> .row-fluid > :not(.span12)) > .row-fluid {
      max-width: var(--atlas-container-md);
    }
  }

  @media (min-width: 992px) {
    .dnd-section:not([class$="-force-full-width-section"]):has(> .row-fluid > :not(.span12)) > .row-fluid {
      max-width: var(--atlas-container-lg);
    }
  }

  @media (min-width: 1200px) {
    .dnd-section:not([class$="-force-full-width-section"]):has(> .row-fluid > :not(.span12)) > .row-fluid {
      max-width: var(--atlas-container-xl);
    }
  }

  @media (min-width: 1400px) {
    .dnd-section:not([class$="-force-full-width-section"]):has(> .row-fluid > :not(.span12)) > .row-fluid {
      max-width: var(--atlas-container-xxl);
    }
  }

  /* Pattern B — multi-column row nested one level inside a .span12 cell */
  .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid > .span12 > .row-fluid-wrapper > .row-fluid:has(> :not(.span12)) {
    --atlas-gutter-x: var(--atlas-container-padding);
    box-sizing: border-box;
    width: 100%;
    padding-right: calc(var(--atlas-gutter-x) * 0.5);
    padding-left: calc(var(--atlas-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
  }

  .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid > .span12 > .row-fluid-wrapper > .row-fluid:has(> :not(.span12))
  :is(.dnd-module > .hs_cos_wrapper_type_module, .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) {
    --atlas-gutter-x: 0;
    max-width: initial;
  }

  @media (min-width: 576px) {
    .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid > .span12 > .row-fluid-wrapper > .row-fluid:has(> :not(.span12)) {
      max-width: var(--atlas-container-sm);
    }
  }

  @media (min-width: 768px) {
    .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid > .span12 > .row-fluid-wrapper > .row-fluid:has(> :not(.span12)) {
      max-width: var(--atlas-container-md);
    }
  }

  @media (min-width: 992px) {
    .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid > .span12 > .row-fluid-wrapper > .row-fluid:has(> :not(.span12)) {
      max-width: var(--atlas-container-lg);
    }
  }

  @media (min-width: 1200px) {
    .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid > .span12 > .row-fluid-wrapper > .row-fluid:has(> :not(.span12)) {
      max-width: var(--atlas-container-xl);
    }
  }

  @media (min-width: 1400px) {
    .dnd-section:not([class$="-force-full-width-section"]) > .row-fluid > .span12 > .row-fluid-wrapper > .row-fluid:has(> :not(.span12)) {
      max-width: var(--atlas-container-xxl);
    }
  }
}

/* col-x-0 utility — zero-width column at a specific breakpoint */
.col-sm-0,
.col-0 {
  width: 0;
  padding: 0;
}

@media (min-width: 576px) {
  .col-md-0 {
    width: 0;
    padding: 0;
  }
}

@media (min-width: 768px) {
  .col-lg-0 {
    width: 0;
    padding: 0;
  }
}

@media (min-width: 992px) {
  .col-xl-0 {
    width: 0;
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .col-xxl-0 {
    width: 0;
    padding: 0;
  }
}

@media (min-width: 1400px) {
  .col-xxxl-0 {
    width: 0;
    padding: 0;
  }
}