/*
 * Background block child-theme extensions.
 */

/* Parent theme sets `.bg { display: flex; justify-content: center }` which
 * centers all child blocks horizontally (hero-section behaviour). Inside a
 * column we want normal block flow so text-align and block widths work.
 * Neutralise only when bg sits inside a column. */
.wp-block-column > .wp-block-acf-bg > .bg {
  justify-content: flex-start;
  align-items: stretch;
}

.wp-block-column > .wp-block-acf-bg {
  text-align: start;
}

.wp-block-column > .wp-block-acf-bg > .bg > .bg__container {
  width: 100%;
  flex: 1 1 auto;
  align-self: stretch;
}

/* Reset WP layout constraint rules (margin-inline: auto + max-width from
 * global styles / theme.json) on blocks inside bg-in-column. Without this
 * paragraphs and headings appear visually centred even though text-align
 * is left, because WP constrains their width and centres them with auto margins.
 *
 * WP wraps inner blocks in .is-layout-constrained / .is-layout-flow divs, so
 * we need to target both the direct child and the blocks inside those wrappers
 * (two levels deep covers the typical structure). */
.wp-block-column > .wp-block-acf-bg > .bg > .bg__container > *,
.wp-block-column > .wp-block-acf-bg > .bg > .bg__container > * > * {
  max-width: 100% !important;
  margin-inline: 0 !important;
}

/* Explicit override for WP's .is-layout-constrained rule which uses :where()
 * and applies margin-inline:auto to every direct child of the layout wrapper. */
.wp-block-column > .wp-block-acf-bg .is-layout-constrained > :where(*),
.wp-block-column > .wp-block-acf-bg .is-layout-flow > :where(*) {
  max-width: 100% !important;
  margin-inline: 0 !important;
}

.wp-block-acf-bg.gxn-feature-bg--fit-mode-fit .bg__background__media {
  max-height: none;
  transform: none !important;
}

.wp-block-acf-bg.gxn-feature-bg--fit-mode-fit .bg__background__media img,
.wp-block-acf-bg.gxn-feature-bg--fit-mode-fit .bg__background__media video {
  object-fit: contain;
}

.wp-block-acf-bg.gxn-feature-bg--fit-mode-fit .bg.bg--env-front video {
  transform: none !important;
}

.wp-block-acf-bg.gxn-feature-bg--parallax-off .bg__background__media {
  transform: translateY(0) !important;
}

.wp-block-acf-bg.gxn-feature-bg--has-custom-height .bg {
  min-height: var(--gxn-feature-bg-height);
}

.wp-block-acf-bg.gxn-feature-bg--has-custom-height .bg__background__media {
  max-height: none;
}

.wp-block-acf-bg.gxn-feature-bg--has-custom-height .bg__background__media,
.wp-block-acf-bg.gxn-feature-bg--has-custom-height .bg__background__media__video-wrapper,
.wp-block-acf-bg.gxn-feature-bg--has-custom-height .bg__background__media__video-wrapper video {
  height: 100%;
}

.wp-block-columns > .wp-block-column:has(> .wp-block-acf-bg.gxn-feature-bg--height-stretch),
.wp-block-column:has(> .wp-block-acf-bg.gxn-feature-bg--height-stretch),
.wp-block-columns > .wp-block-column:has(> .wp-block-acf-bg > .bg.bg--height-stretch),
.wp-block-column:has(> .wp-block-acf-bg > .bg.bg--height-stretch) {
  display: flex;
  flex-direction: column;
}

.wp-block-column > .wp-block-acf-bg.gxn-feature-bg--height-stretch,
.wp-block-column > .wp-block-acf-bg > .bg.bg--height-stretch {
  align-self: stretch;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: 100%;
}

.wp-block-column > .wp-block-acf-bg.gxn-feature-bg--height-stretch > .bg,
.wp-block-column > .wp-block-acf-bg > .bg.bg--height-stretch {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* align-items: stretch prevents bg--vertical-align-middle's align-items:center
   * from shrink-wrapping .bg__container when flex-direction is column. */
  align-items: stretch;
  min-height: 100%;
  height: 100%;
  width: 100%;
}

.wp-block-column > .wp-block-acf-bg.gxn-feature-bg--height-stretch > .bg > .bg__background,
.wp-block-column > .wp-block-acf-bg.gxn-feature-bg--height-stretch > .bg > .bg__container,
.wp-block-column > .wp-block-acf-bg.gxn-feature-bg--height-stretch > .bg > .block-editor-inner-blocks,
.wp-block-column > .wp-block-acf-bg > .bg.bg--height-stretch > .bg__background,
.wp-block-column > .wp-block-acf-bg > .bg.bg--height-stretch > .bg__container,
.wp-block-column > .wp-block-acf-bg > .bg.bg--height-stretch > .block-editor-inner-blocks {
  min-height: 100%;
  height: 100%;
}

.wp-block-column > .wp-block-acf-bg.gxn-feature-bg--height-stretch > .bg > .bg__container,
.wp-block-column > .wp-block-acf-bg > .bg.bg--height-stretch > .bg__container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.wp-block-column > .wp-block-acf-bg.gxn-cover-align-top,
.wp-block-column > .wp-block-acf-bg > .bg.gxn-cover-align-top {
  align-self: flex-start;
  width: 100%;
}

.wp-block-column > .wp-block-acf-bg.gxn-cover-align-middle,
.wp-block-column > .wp-block-acf-bg > .bg.gxn-cover-align-middle {
  align-self: center;
  width: 100%;
}

.wp-block-column > .wp-block-acf-bg.gxn-cover-align-bottom,
.wp-block-column > .wp-block-acf-bg > .bg.gxn-cover-align-bottom {
  align-self: flex-end;
  width: 100%;
}

.wp-block-column > .wp-block-acf-bg.gxn-cover-align-stretch,
.wp-block-column > .wp-block-acf-bg > .bg.gxn-cover-align-stretch {
  align-self: stretch;
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  height: auto;
}

.wp-block-columns > .wp-block-column:has(> .wp-block-acf-bg.gxn-cover-align-stretch),
.wp-block-column:has(> .wp-block-acf-bg.gxn-cover-align-stretch),
.wp-block-columns > .wp-block-column:has(> .wp-block-acf-bg > .bg.gxn-cover-align-stretch),
.wp-block-column:has(> .wp-block-acf-bg > .bg.gxn-cover-align-stretch) {
  display: flex;
  flex-direction: column;
}

.wp-block-column > .wp-block-acf-bg.gxn-cover-align-stretch > .bg,
.wp-block-column > .wp-block-acf-bg > .bg.gxn-cover-align-stretch {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  width: 100%;
}

.wp-block-column > .wp-block-acf-bg.gxn-cover-align-stretch > .bg > .bg__background,
.wp-block-column > .wp-block-acf-bg.gxn-cover-align-stretch > .bg > .bg__container,
.wp-block-column > .wp-block-acf-bg.gxn-cover-align-stretch > .bg > .block-editor-inner-blocks,
.wp-block-column > .wp-block-acf-bg > .bg.gxn-cover-align-stretch > .bg__background,
.wp-block-column > .wp-block-acf-bg > .bg.gxn-cover-align-stretch > .bg__container,
.wp-block-column > .wp-block-acf-bg > .bg.gxn-cover-align-stretch > .block-editor-inner-blocks {
  min-height: 100%;
  height: 100%;
}

.wp-block-column > .wp-block-acf-bg.gxn-cover-align-stretch > .bg > .bg__container,
.wp-block-column > .wp-block-acf-bg > .bg.gxn-cover-align-stretch > .bg__container {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}