/*
 * Choose your services (plan-bespoke-builder-bnr): the section around the Bespoke plan builder block. The heading
 * and its line sit above the services, and the "Your plan" basket runs down the right beside both. The builder's
 * own styles (assets/css/blocks/bespoke-builder.css) place the services and the basket in this section's grid.
 *
 * On tablets and phones the basket drops below the services.
 */

.wp-block-group.plan-pattern.plan-pattern--bespoke-builder-bnr {
  display: grid;
  grid-template-areas:
    "intro aside"
    "picker aside";
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto 1fr;
  gap: 28px 32px;
  align-items: start;
  margin: 0;
  padding: 48px clamp(24px, 5vw, 64px) 56px;
  border-radius: 0;
  background: var(--white);
  color: var(--text);
  scroll-margin-top: clamp(96px, 12vw, 132px);
}

/* WordPress's wrapper steps aside, so the heading and the builder's parts sit in the grid */

.plan-pattern--bespoke-builder-bnr .wp-block-group__inner-container {
  display: contents;
}

.plan-pattern--bespoke-builder-bnr .plan-pattern__bespoke-builder-bnr-intro {
  display: flex;
  grid-area: intro;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.plan-pattern--bespoke-builder-bnr .plan-pattern__bespoke-builder-bnr-heading {
  margin: 0;
  color: #0d3d39;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.15;
  text-transform: none;
}

.plan-pattern--bespoke-builder-bnr .plan-pattern__bespoke-builder-bnr-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.5;
}

/* Tablets and phones: one column, the basket after the services */

@media (max-width: 999px) {
  .wp-block-group.plan-pattern.plan-pattern--bespoke-builder-bnr {
    grid-template-areas:
      "intro"
      "picker"
      "aside";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }
}