/*
 * Site-wide layout.
 *
 * Content column: 1240 wide (77.5rem) with 100 (6.25rem) gutters at a
 * 1440 viewport, as in every desktop frame of the design; 24 (1.5rem) side
 * gutters under 768, so a 390 screen gets a 342 column. The kit .container caps
 * max-width with !important at every breakpoint and pads by
 * var(--spacer--md) under border-box, so the 1440 rule drops that padding
 * and lets the auto margins make the gutters.
 *
 * Section headlines (cards and basic sections) take the section's Color
 * Scheme text colour instead of the kit's accent. Inside one section the
 * headline and the body copy share one alignment: centred in a cards section
 * (bucket and video hub frames), left in a basic section (no frame shows one;
 * the kit default) and in the aside cards layout (video secondary frame; see
 * card-types/video/video.css). Text case stays as entered.
 *
 * Space under the hero: the hero's bottom padding and the top padding of the
 * section after it are half their usual values (--hero--padding and
 * --section--padding, their --mobile values below 768), so the first section
 * sits closer to the hero (client feedback 2026-11-05: halve the space under
 * every hero). A Basic section with nothing in it (no headline, copy or
 * buttons: its container has no child element) prints only padding, so it is
 * hidden, and the section after it takes the halved top padding instead.
 *
 * Pricing page: the Basic section right before the "Your partnership fee
 * includes" Text + Media section has half the usual bottom padding (client
 * feedback 2026-11-06: halve the padding above that section). Scoped by the
 * page's slug body class (pricing); no other page changes.
 *
 * Not Found page: the parent search form under the not-found section is
 * printed with .pb-0 (padding-bottom: 0 !important), so on the 404 page it
 * gets back a standard section's bottom padding (--section--padding--mobile,
 * --section--padding from 768) with !important, keeping the section's own
 * background behind the spacing. The not-found section's bottom padding and
 * the search section's top padding would stack to two section paddings above
 * the search bar; the search section drops its top padding there, so the gap
 * above the bar equals the gap below it. Search forms elsewhere are untouched.
 *
 * Section rhythm: a .section that directly follows another .section with the
 * same Color Scheme class (one of the section_color_schemes keys in
 * color-schemes.json, or the empty key, printed as the bare color-scheme__
 * token) drops its top padding, so two consecutive same-background sections
 * sit one section padding apart (--section--padding from 768,
 * --section--padding--mobile below) instead of two. Bottom paddings are
 * unchanged. Both sides of the + must carry .section, so the section after a
 * hero (section.hero) or after the breadcrumb row keeps its full top padding,
 * as does a section whose neighbour has a different scheme. The food drawing
 * section paints its own white band (and drops its bottom padding under 768),
 * so it is never one side of a same-scheme pair: it keeps its top padding and
 * the section after it keeps its own.
 *
 * Headline-only basic sections: a basic section whose container holds its
 * headline and nothing else (no copy, no buttons) is a heading for the section
 * after it, so from 768 its bottom padding shrinks to --spacer--xl and the
 * headline sits close to the content it introduces instead of a full section
 * padding above it. Below 768 it keeps the mobile section padding. Basic
 * sections with copy or buttons keep the section rhythm above.
 *
 * Centred images: imported copy centres an image by an inline text-align on
 * its paragraph, which a block image (the kit reset) ignores; an image in such
 * a paragraph inside .content is centred by auto inline margins. Images in
 * other paragraphs keep the left placement.
 */

@media (max-width: 767.98px) {
  .container {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 77.5rem !important;
    padding-right: 0;
    padding-left: 0;
  }
}

.cards__headline.headline,
.basic__headline.headline {
  color: var(--text);
}

.cards__headline.headline,
.cards__content.content {
  text-align: center;
}

.basic__headline.headline,
.basic__content.content {
  text-align: left;
}

/*
 * Copy that ends in a block centred inline (an imported page whose buttons
 * sat in that centred run) centres the button row that follows it too.
 */
.basic__content.content:has(> :last-child[style*="text-align: center"]) + .button-group,
.basic__content.content:has(> :last-child[style*="text-align:center"]) + .button-group {
  justify-content: center;
}

.content p[style*="text-align: center"] img,
.content p[style*="text-align:center"] img {
  margin-inline: auto;
}

.section.color-scheme__:not(.section-food-drawing) + .section.color-scheme__:not(.section-food-drawing),
.section.color-scheme__green:not(.section-food-drawing) + .section.color-scheme__green:not(.section-food-drawing),
.section.color-scheme__tan:not(.section-food-drawing) + .section.color-scheme__tan:not(.section-food-drawing),
.section.color-scheme__sand:not(.section-food-drawing) + .section.color-scheme__sand:not(.section-food-drawing),
.section.color-scheme__paper:not(.section-food-drawing) + .section.color-scheme__paper:not(.section-food-drawing),
.section.color-scheme__plum:not(.section-food-drawing) + .section.color-scheme__plum:not(.section-food-drawing),
.section.color-scheme__dark:not(.section-food-drawing) + .section.color-scheme__dark:not(.section-food-drawing) {
  padding-top: 0;
}

@media (min-width: 768px) {
  .section.section-basic:has(> .container > .basic__headline:only-child) {
    padding-bottom: var(--spacer--xl);
  }
}

.error404 .search-form.pb-0 {
  padding-top: 0;
  padding-bottom: var(--section--padding--mobile) !important;
}

@media (min-width: 768px) {
  .error404 .search-form.pb-0 {
    padding-bottom: var(--section--padding) !important;
  }
}

.section.section-basic:not(:has(> * > *)) {
  display: none;
}

body .hero {
  padding-bottom: calc(var(--hero--padding--mobile) / 2);
}

.hero + .section,
.hero + .section.section-basic:not(:has(> * > *)) + .section {
  padding-top: calc(var(--section--padding--mobile) / 2) !important;
}

@media (min-width: 768px) {
  body .hero {
    padding-bottom: calc(var(--hero--padding) / 2);
  }

  .hero + .section,
  .hero + .section.section-basic:not(:has(> * > *)) + .section {
    padding-top: calc(var(--section--padding) / 2) !important;
  }
}

body.pricing .section.section-basic:has(+ .section.section-text-media) {
  padding-bottom: calc(var(--section--padding--mobile) / 2);
}

@media (min-width: 768px) {
  body.pricing .section.section-basic:has(+ .section.section-text-media) {
    padding-bottom: calc(var(--section--padding) / 2);
  }
}