/* Converted from src/components/site/business/layout.module.css (CSS Module): local classes are prefixed "business-layout__". */
/*
 * Layout primitives of the designed (ex-Elementor) pages: Your Business with us, CSR,
 * Combat Adverse Media. Values measured on the former site at 1440px and 390px.
 * Columns stack below 768px (Elementor mobile breakpoint).
 *
 * Elementor "spacer" widgets are reproduced with padding: a page module sets
 * --col-top / --col-bottom on a column (spacer height + the 20px widget gap).
 */

/* ---------- Theme page content (Elementor flex containers inside .container) ---------- */

/* The Elementor content of a theme page reaches the outer edge of .container (the theme container
   has a 16px gutter, Elementor containers add their own 10px). */
.business-layout__flush {
  margin-inline: calc(var(--container-gutter) * -1);
}

/* Flex container ("e-con-boxed") */
.business-layout__row {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 10px var(--row-bottom, 10px);
}

/* Child container ("e-con-full"): 10px padding, widgets stacked 20px apart */
.business-layout__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 0;
  padding: calc(10px + var(--col-top, 0px)) 10px calc(10px + var(--col-bottom, 0px));
}

@media (min-width: 768px) {
  .business-layout__half {
    width: 50%;
  }

  .business-layout__third {
    width: calc(100% / 3);
  }
}

/* ---------- Full-bleed sections (Elementor section / column layout) ---------- */

.business-layout__band {
  position: relative;
}

/* #191F23FA as on the original: #1e2327 over the white page, a shade darker in dark mode. */
.business-layout__dark {
  background-color: rgb(25 31 35 / 0.98);
}

/* Theme "clb__dark_mode_light": in dark mode the block turns into a light 8% fill
   (over the page for a section, over the band for a column). */
html[data-theme="dark"] .business-layout__darkModeLight {
  background-color: var(--color-fill);
}

/* 1300px boxed container */
.business-layout__boxed {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: var(--container-boxed);
  margin-inline: auto;
}

/* Column with 20px side padding, widgets stacked 20px apart */
.business-layout__bandCol {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  min-width: 0;
  padding: var(--col-top, 0px) 20px var(--col-bottom, 0px);
}

@media (min-width: 768px) {
  .business-layout__bandHalf {
    width: 50%;
  }

  .business-layout__bandThird {
    width: calc(100% / 3);
  }

  .business-layout__bandTwoThirds {
    width: calc(200% / 3);
  }

  /* Wide text column of the landing page: 60px left / 120px right */
  .business-layout__bandWide {
    padding-right: 120px;
    padding-left: 60px;
  }
}

/* Heading kept in view while its column scrolls (theme "-sticky-block", tablet and up). */
@media (min-width: 769px) {
  .business-layout__sticky {
    position: sticky;
    top: 0;
    z-index: 2;
  }
}

/* A sticky heading without its own top spacer would slide under the header logo where the
   content starts close to the left edge (tablets / small laptops): keep it below the header. */
@media (min-width: 769px) and (max-width: 1180px) {
  .business-layout__stickyBelowHeader {
    top: var(--header-h);
  }
}

/* ---------- Widgets ---------- */

/* Text editor */
.business-layout__text {
  display: flow-root;
}

.business-layout__text p {
  margin: 1em 0;
}

.business-layout__text ul {
  margin: 1em 0 1.35em;
  padding-left: 2rem;
}

.business-layout__text li {
  margin: 0.25rem 0;
}

/* 19px body copy of the agreements / CSR pages */
.business-layout__large {
  font-size: 1.1875rem;
}

/* Aeonik medium lead line (1.3em, 29px leading), no space under it */
.business-layout__lead {
  font-family: var(--font-display);
  font-size: 1.3em;
  font-weight: 500;
  line-height: 29px;
}

.business-layout__lead p,
.business-layout__noBottom p {
  margin-bottom: 0;
}

/* First text block of a column: no space above its paragraphs */
.business-layout__flushTop p {
  margin-top: 0;
}

/* Button widget */
.business-layout__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.business-layout__actionsStart {
  justify-content: flex-start;
}

.business-layout__actionsCenter {
  justify-content: center;
}