/* ================================================================
   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;
  max-width: 25%;
}
body .span4 {
  flex: 33.333333;
  max-width: 33.333333%;
}
body .span5 {
  flex: 41.666667;
  max-width: 41.666667%;
}
body .span6 {
  flex: 50;
  max-width: 50%;
}
body .span7 {
  flex: 58.333333;
  max-width: 58.333333%;
}
body .span8 {
  flex: 66.666667;
  max-width: 66.666667%;
}
body .span9 {
  flex: 75;
  max-width: 75%;
}
body .span10 {
  flex: 83.333333;
  max-width: 83.333333%;
}
body .span11 {
  flex: 91.666667;
  max-width: 91.666667%;
}
body .span12 {
  flex: 100;
  max-width: 100%;
}

@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;
  }
}