/**
 * core/group — the "Wash (Webtron)" style.
 *
 * White fading to pale blue with two soft diagonal swooshes, behind the
 * One-Touch intro and flow. Entirely decorative, so it is a CSS background and
 * never an image element; there is no text in it for anything to miss.
 *
 * Also the container the display heading, lede and kicker measure their `cqi`
 * sizes against.
 *
 * IMPORTANT: an inline-size container does not take its width from its
 * content, so inside an auto-width flex item it collapses to zero. `width:
 * 100%` covers the normal case; never place a wash group in a core/row.
 */

.wp-block-group.is-style-wmb-wash {
  container-type: inline-size;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  background-color: #fff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' preserveAspectRatio='none'%3E%3Cpath d='M0 560C260 470 520 520 760 430S1100 250 1200 180v220C1080 470 900 560 660 610S220 640 0 700Z' fill='%23d6e9f8' fill-opacity='.55'/%3E%3Cpath d='M0 380C300 300 560 350 820 260S1120 90 1200 40v120C1100 230 900 330 640 380S240 420 0 480Z' fill='%23ffffff' fill-opacity='.6'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #fff 0%, #f1f7fd 45%, #e4f0fb 100%);
  background-size:
    100% 100%,
    100% 100%;
  background-repeat: no-repeat;
}

/*
 * The wash's own rhythm: the lockup, headline stack and flow sit close, as
 * designed. Two classes, so it beats a theme's flow-layout margins; an
 * author's margin on a block is inline and still wins. Padding is in % —
 * the wash is a container and would measure `cqi` against its ancestor.
 */
.wp-block-group.is-style-wmb-wash {
  padding: 1.8% 1.4% 1.2%;
}

.wp-block-group.is-style-wmb-wash > * {
  margin-block: 0;
}

.wp-block-group.is-style-wmb-wash > * + * {
  margin-block-start: 0.9cqi;
}

.wp-block-group.is-style-wmb-wash > .wp-block-webtron-mb-integration-flow {
  margin-block-start: 1.6cqi;
}

/*
 * Pattern scaffolding. Patterns add these as ordinary CSS classes on core
 * groups, so an author can remove them like any other class.
 *
 * `wmb-stack` spaces a section's children in proportion to its width, and is
 * the container they measure against.
 *
 * `wmb-panels` is a fallback grid for a pair of feature panels. It is wrapped
 * in :where() so it has no specificity: where WordPress prints its own layout
 * CSS, the group's grid settings win; where a theme strips that CSS (the live
 * webtronOA theme prints no global styles and no block-support styles at
 * all), this is what lays the panels out.
 */
.wp-block-group.wmb-stack {
  container-type: inline-size;
  width: 100%;
  box-sizing: border-box;
}

.wp-block-group.wmb-stack > * {
  margin-block: 0;
}

.wp-block-group.wmb-stack > * + * {
  margin-block-start: clamp(16px, 2.8cqi, 52px);
}

:where(.wp-block-group.wmb-panels) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 16px;
}