/* ── HubSpot drag-and-drop grid ──
   The page editor lays sections out as .row-fluid rows of .span1–.span12
   columns. Without these rules every column stacks full width and the
   editor's column-width handles do nothing. Each column grows in
   proportion to its span, so any split that adds up to 12 fills the row. */
.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.row-fluid [class*='span'] {
  width: 100%;
  min-width: 0;
  min-height: 1px;
}

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    gap: clamp(1.25rem, 2.5vw, 2.5rem);
  }

  .row-fluid .span1 { flex: 1 1 0; }
  .row-fluid .span2 { flex: 2 2 0; }
  .row-fluid .span3 { flex: 3 3 0; }
  .row-fluid .span4 { flex: 4 4 0; }
  .row-fluid .span5 { flex: 5 5 0; }
  .row-fluid .span6 { flex: 6 6 0; }
  .row-fluid .span7 { flex: 7 7 0; }
  .row-fluid .span8 { flex: 8 8 0; }
  .row-fluid .span9 { flex: 9 9 0; }
  .row-fluid .span10 { flex: 10 10 0; }
  .row-fluid .span11 { flex: 11 11 0; }
  .row-fluid .span12 { flex: 12 12 0; }
}

@media (max-width: 767px) {
  .row-fluid {
    row-gap: 1.5rem;
  }
}

/* ── Sections built from HubSpot's own modules ──
   Theme modules bring their own full-bleed wrapper, padding and container:
   a <section>, or one of the few other root classes listed below (add any
   new theme module whose root isn't a <section>). Sections without one
   (rich text, image, button, form…) get the same spacing and width as the
   rest of the site. The editor's padding and max-width settings still
   override these. */
:where(.dnd-section:has(.dnd-module):not(:has(section, .author-card, .marquee, .parallax-scrolling-effect))) {
  padding: var(--spacing-section-y-sm) var(--spacing-container-x);
}

:where(.dnd-section:has(.dnd-module):not(:has(section, .author-card, .marquee, .parallax-scrolling-effect))) > :where(.row-fluid) {
  max-width: var(--container-max);
  margin-inline: auto;
}

:where(.dnd-section:not(:has(section, .author-card, .marquee, .parallax-scrolling-effect))) :where(.dnd-row + .dnd-row) {
  margin-top: 1.5rem;
}