/* BSP Section: shared frontend/editor presentation. No page-specific selectors.
 * Palette values inherit WordPress Global Styles; presets are defaults, not locks.
 * Layout belongs here, interactive components retain their own styles.
 */
.bsp-section-block {
  --bsp-section-media: 1fr;
  --bsp-section-copy: 1fr;
  --bsp-section-padding: clamp(52px, 6vw, 88px);
  --bsp-section-flow: clamp(18px, 1.7vw, 26px);
  --bsp-section-column-gap: clamp(28px, 4vw, 64px);
  --bsp-section-width: var(--wp--style--global--wide-size, 1200px);
  --bsp-section-copy-width: 840px;
  --bsp-section-bg: transparent;
  --bsp-section-heading: var(--wp--preset--color--bsp-blue, #201b51);
  --bsp-section-minor: var(--bsp-section-heading);
  --bsp-section-text: var(--wp--preset--color--bsp-text, #5b5552);
  --bsp-section-eyebrow: var(--wp--preset--color--bsp-readable-red, #aa0e13);
  --bsp-section-divider: var(--wp--preset--color--bsp-yellow, #fcb040);
  --bsp-section-align: left;
  --bsp-section-justify: flex-start;
  box-sizing: border-box;
  /* Let WordPress native alignwide/alignfull geometry determine the outer width.
   * A forced 100% width combines badly with the template's negative alignment
   * margins and leaves a one-gutter gap on the right. */
  width: auto;
  max-width: none;
  margin: 0;
  padding: var(--bsp-section-padding) clamp(20px, 4.5vw, 72px);
  background-color: var(--bsp-section-bg);
  color: var(--bsp-section-text);
  text-align: var(--bsp-section-align);
}

/* Full-bleed belongs to WordPress's full alignment and the page template,
 * never to a 100vw/negative-margin escape that breaks nested sections. */
.bsp-section-block__inner {
  display: grid;
  grid-template-columns: minmax(0, var(--bsp-section-media)) minmax(0, var(--bsp-section-copy));
  align-items: center;
  gap: var(--bsp-section-column-gap);
  width: 100%;
  max-width: var(--bsp-section-width);
  margin-inline: auto;
}
.bsp-section-block--40-60 { --bsp-section-media: 42fr; --bsp-section-copy: 58fr; }
.bsp-section-block--58-42 { --bsp-section-media: 58fr; --bsp-section-copy: 42fr; }
.bsp-section-block--40-60-exact { --bsp-section-media: 40fr; --bsp-section-copy: 60fr; }
.bsp-section-block--60-40 { --bsp-section-media: 60fr; --bsp-section-copy: 40fr; }
.bsp-section-block--33-67 { --bsp-section-media: 1fr; --bsp-section-copy: 2fr; }
.bsp-section-block--67-33 { --bsp-section-media: 2fr; --bsp-section-copy: 1fr; }
/* Ratios describe MEDIA / COPY, regardless of which side the image uses. */
.bsp-section-block--media-right .bsp-section-block__inner {
  grid-template-columns: minmax(0, var(--bsp-section-copy)) minmax(0, var(--bsp-section-media));
}
.bsp-section-block--media-right .bsp-section-block__media { order: 2; }
.bsp-section-block--media-right .bsp-section-block__content { order: 1; }
.bsp-section-block--text-only .bsp-section-block__inner { display: block; }
.bsp-section-block--text-only .bsp-section-block__content {
  max-width: var(--bsp-section-copy-width);
  margin-inline: auto;
}
.bsp-section-block--width-wide { --bsp-section-copy-width: var(--bsp-section-width); }
.bsp-section-block--width-narrow { --bsp-section-copy-width: 680px; }
.bsp-section-block--width-hero { --bsp-section-copy-width: 900px; }
.bsp-section-block--spacing-compact { --bsp-section-padding: clamp(32px, 4vw, 56px); }
.bsp-section-block--spacing-spacious { --bsp-section-padding: clamp(72px, 8vw, 112px); }
.bsp-section-block--spacing-hero {
  --bsp-section-flow: clamp(18px, 1.5vw, 22px);
  padding-top: clamp(40px, 4.5vw, 64px);
  padding-bottom: clamp(36px, 4vw, 56px);
}
.bsp-section-block--text-center { --bsp-section-align: center; --bsp-section-justify: center; }
.bsp-section-block--text-right { --bsp-section-align: right; --bsp-section-justify: flex-end; }
.bsp-section-block--align-top .bsp-section-block__inner { align-items: start; }
.bsp-section-block--align-stretch .bsp-section-block__inner { align-items: stretch; }

/* The same content wrapper is used by useInnerBlocksProps in the editor
 * and InnerBlocks.Content on the frontend. Explicit block margins win. */
.bsp-section-block__content { min-width: 0; }
.bsp-section-block__content > :where(*) { margin-block: 0; }
.bsp-section-block__content > :where(* + *) { margin-block-start: var(--bsp-section-flow); }
.bsp-section-block__content > :where(.bsp-eyebrow + .wp-block-heading) { margin-block-start: 10px; }
.bsp-section-block--spacing-hero .bsp-section-block__content > :where(.bsp-eyebrow + .wp-block-heading) {
  margin-block-start: clamp(18px, 1.5vw, 22px);
}
.bsp-section-block__content > :where(.wp-block-buttons) {
  justify-content: var(--bsp-section-justify);
  margin-block-start: clamp(24px, 2.5vw, 36px);
}
.bsp-section-block__content > :where(.bsp-eyebrow) {
  width: auto;
  max-width: none;
  text-align: inherit;
}
/* Do not color every descendant: nested cards/buttons/styles own their text. */
.bsp-section-block__content > :where(h1,h2):not(.has-text-color):not([style*="color:"]) { color: var(--bsp-section-heading); }
.bsp-section-block__content > :where(h3,h4,h5,h6):not(.has-text-color):not([style*="color:"]) { color: var(--bsp-section-minor); }
.bsp-section-block__content > :where(p,ul,ol):not(.has-text-color):not([style*="color:"]) { color: var(--bsp-section-text); }
.bsp-section-block__content > :where(.bsp-eyebrow):not(.has-text-color):not([style*="color:"]) { color: var(--bsp-section-eyebrow); }
.bsp-section-block__content > :where(.has-text-align-left) { text-align: left; }
.bsp-section-block__content > :where(.has-text-align-center) { text-align: center; }
.bsp-section-block__content > :where(.has-text-align-right) { text-align: right; }
.bsp-section-block__content > .wp-block-buttons.is-content-justification-left { justify-content: flex-start; }
.bsp-section-block__content > .wp-block-buttons.is-content-justification-center { justify-content: center; }
.bsp-section-block__content > .wp-block-buttons.is-content-justification-right { justify-content: flex-end; }

/* A heading divider follows the heading alignment, including per-block edits. */
.bsp-section-block__content > :where(.wp-block-heading:not(:last-child):not(.bsp-no-divider))::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  margin-block-start: 18px;
  margin-inline: 0 auto;
  background: var(--bsp-section-divider);
}
.bsp-section-block--text-center .bsp-section-block__content > :where(.wp-block-heading)::after { margin-inline: auto; }
.bsp-section-block--text-right .bsp-section-block__content > :where(.wp-block-heading)::after { margin-inline: auto 0; }
.bsp-section-block .bsp-section-block__content > .has-text-align-left::after { margin-inline: 0 auto; }
.bsp-section-block .bsp-section-block__content > .has-text-align-center::after { margin-inline: auto; }
.bsp-section-block .bsp-section-block__content > .has-text-align-right::after { margin-inline: auto 0; }
.bsp-section-block--divider-none .bsp-section-block__content > .wp-block-heading::after { content: none; }

.bsp-section-block--light { --bsp-section-bg: var(--wp--preset--color--bsp-light, #faf9f5); }
.bsp-section-block--surface { --bsp-section-bg: var(--wp--preset--color--bsp-surface, #f0efe9); }
.bsp-section-block--navy {
  --bsp-section-bg: var(--wp--preset--color--bsp-blue, #201b51);
  --bsp-section-heading: #fff;
  --bsp-section-minor: var(--wp--preset--color--bsp-yellow, #fcb040);
  --bsp-section-text: #fff;
  --bsp-section-eyebrow: var(--wp--preset--color--bsp-yellow, #fcb040);
}
.bsp-section-block--yellow {
  --bsp-section-bg: var(--wp--preset--color--bsp-yellow, #fcb040);
  --bsp-section-text: var(--wp--preset--color--bsp-blue, #201b51);
  --bsp-section-divider: var(--wp--preset--color--bsp-readable-red, #aa0e13);
}
.bsp-section-block--red {
  --bsp-section-bg: var(--wp--preset--color--bsp-readable-red, #aa0e13);
  --bsp-section-heading: #fff;
  --bsp-section-minor: #fff;
  --bsp-section-text: #fff;
  --bsp-section-eyebrow: var(--wp--preset--color--bsp-yellow, #fcb040);
}
.bsp-section-block--yellow ::selection { background: #aa0e13; color: #fff; }

.bsp-section-block__media {
  position: relative;
  min-width: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--wp--preset--color--bsp-surface, #f0efe9);
}
.bsp-section-block .bsp-section-block__media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bsp-section-block--align-stretch .bsp-section-block__media:not(.bsp-section-block__media--video) {
  aspect-ratio: auto;
  min-height: 300px;
}
.bsp-section-block__media--video { aspect-ratio: auto; background: transparent; }
.bsp-section-block__video { position: relative; aspect-ratio: 16 / 9; background: #272727; }
.bsp-section-block__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Editor chrome only: never duplicate public typography or layout here. */
.editor-styles-wrapper .bsp-section-block { position: relative; }
.editor-styles-wrapper .bsp-section-block:is(.is-selected,.has-child-selected) { outline: 2px solid #201b51; outline-offset: -2px; }
.bsp-section-block__media-tools { position: absolute; z-index: 3; left: 12px; bottom: 12px; display: flex; gap: 8px; padding: 8px; background: #fff; }
.bsp-section-block__media-placeholder { display: grid; place-items: center; min-height: 240px; padding: 24px; color: #5b5552; text-align: center; border: 1px dashed #201b51; }
@media (max-width: 781px) {
  .bsp-section-block .bsp-section-block__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .bsp-section-block--media-right .bsp-section-block__media,
  .bsp-section-block--media-right .bsp-section-block__content { order: initial; }
  .bsp-section-block .bsp-section-block__media:not(.bsp-section-block__media--video) { aspect-ratio: 16 / 10; min-height: 0; }
}