/* HubSpot drag-and-drop grid.
   Expanded to plain CSS from cms-theme-boilerplate css/objects/_layout.css —
   in CMS themes the span column widths are the THEME's responsibility; without
   this file dnd columns flex to content width (or stack full-width) instead of
   honoring their 12-column spans. Loaded by templates/layouts/base.hubl.html. */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile: every column full width, rows wrap (columns stack). */
.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.row-fluid .span1,
.row-fluid .span2,
.row-fluid .span3,
.row-fluid .span4,
.row-fluid .span5,
.row-fluid .span6,
.row-fluid .span7,
.row-fluid .span8,
.row-fluid .span9,
.row-fluid .span10,
.row-fluid .span11,
.row-fluid .span12 {
  min-height: 1px;
  width: 100%;
}

/* Mobile-only image-vs-content order in a two-column split section.
   An ImageBlock tags its <figure> with data-bz-media="below"|"above"
   (default "below"). Without this, the stack order is just DOM order, so
   image-left sections show the image first on phones and image-right sections
   show content first — inconsistent. We force the chosen order, and add a row
   gap so the image and content never touch. Desktop (>=768px) keeps the
   original left/right layout untouched — these rules live in the mobile query.
   Scoped with :not(:only-child) so it only fires when the row genuinely has
   two columns (never the inner single-module dnd_row). */
@media (max-width: 767px) {
  .row-fluid > [class*='span']:not(:only-child):has([data-bz-media='below']) {
    order: 2;
  }

  .row-fluid > [class*='span']:not(:only-child):has([data-bz-media='above']) {
    order: 0;
  }

  /* Gap so the image and content never touch when stacked. */
  .row-fluid:has(> [class*='span'] [data-bz-media]) {
    row-gap: 2rem;
  }
}

/* Desktop: 12-column grid; leftover space between columns becomes the gutter. */
@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .row-fluid .span1 {
    width: calc(
      var(--column-width-multiplier) * 1% * 1 - var(--column-gap) *
        (11 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span2 {
    width: calc(
      var(--column-width-multiplier) * 1% * 2 - var(--column-gap) *
        (10 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span3 {
    width: calc(
      var(--column-width-multiplier) * 1% * 3 - var(--column-gap) *
        (9 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span4 {
    width: calc(
      var(--column-width-multiplier) * 1% * 4 - var(--column-gap) *
        (8 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span5 {
    width: calc(
      var(--column-width-multiplier) * 1% * 5 - var(--column-gap) *
        (7 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span6 {
    width: calc(
      var(--column-width-multiplier) * 1% * 6 - var(--column-gap) *
        (6 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span7 {
    width: calc(
      var(--column-width-multiplier) * 1% * 7 - var(--column-gap) *
        (5 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span8 {
    width: calc(
      var(--column-width-multiplier) * 1% * 8 - var(--column-gap) *
        (4 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span9 {
    width: calc(
      var(--column-width-multiplier) * 1% * 9 - var(--column-gap) *
        (3 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span10 {
    width: calc(
      var(--column-width-multiplier) * 1% * 10 - var(--column-gap) *
        (2 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span11 {
    width: calc(
      var(--column-width-multiplier) * 1% * 11 - var(--column-gap) *
        (1 * var(--column-width-multiplier) / 100)
    );
  }

  .row-fluid .span12 {
    width: 100%;
  }

  /* HubSpot renders column offsets as nothing on the front end (no class, no
     generated CSS) — a lone non-full column (offset=1 width=10, offset=2
     width=8 … the standard centering pattern) reaches the browser as a single
     spanN and would sit flush left. Center lone columns instead. */
  .row-fluid > [class*='span']:only-child {
    margin-left: auto;
    margin-right: auto;
  }
}