/* Block: Section (acf/section) */

.section--block {
	position: relative;
}

/* Editor canvas only (.acf-block-preview never exists on the front end): ACF
   puts the block's native padding on its own wrapper div, one level above our
   <section>, so a background image/video would stop at the padding edge.
   section.php re-applies that padding to the <section> in preview, so the
   wrapper's copy has to go — it is an inline style, hence !important. */
.acf-block-preview.wp-block-acf-section {
	padding: 0 !important;
}

/* Background image (set inline via the ACF field in section.php). */
.section--block.has-background-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Background video: silent loop covering the section, under the overlay.
   The section clips it so a short section doesn't leak video. */
.section--block.has-background-video {
	overflow: hidden;
}

.section--block > .section--bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	z-index: 0;
}

/* Optional transparent overlay over the background image/video.
   Opacity is driven by --section-overlay-opacity (0–1) from the ACF range field. */
.section--block.has-overlay::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: var(--section-overlay-opacity, 0.5);
	pointer-events: none;
	z-index: 1;
}

/* Keep content above the video and overlay. */
.section--inner {
	position: relative;
	z-index: 2;
}

/* Minimum height locked to the background's aspect ratio (--section-ratio,
   set inline from the ACF field). aspect-ratio is a preferred size — content
   taller than the ratio expands the section past it. Flex column carries the
   vertical alignment; the video/overlay stay absolute and unaffected. Not an
   is-layout-flex container, so core's flex-child margin-zeroing doesn't apply. */
.section--block.has-ratio-lock {
	aspect-ratio: var(--section-ratio);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.section--block.has-ratio-lock > .section--inner {
	width: 100%;
}
.section--block.section--valign-center {
	justify-content: center;
}
.section--block.section--valign-bottom {
	justify-content: flex-end;
}

/* --- Accent line ----------------------------------------------------------
   A vertical rule beside the content that runs past the section's bottom
   edge, changing color where it crosses (cream over the photo, green on the
   band below). The content is indented by --section-line-gutter so the two
   never collide.

   The section becomes a three-row grid so the rule can span from the top of
   the content to the bottom of the section whatever the vertical alignment:
   row 2 holds .section--inner, rows 1 and 3 absorb the free space the ratio
   lock leaves above and below it. Declared AFTER the ratio-lock rules on
   purpose — same specificity, so the later `display` wins. */
.section--block.has-accent-line {
	--section-line-width: 4px;
	--section-line-gutter: 30px;   /* rule + gap; the content indents by this */
	--section-line-overhang: 40px; /* how far the tail runs past the section */
	--section-line-color: var(--wp--preset--color--cream, #efede6);
	--section-line-color-tail: var(--wp--preset--color--green, #1a3d39);

	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 0fr auto 1fr;
}
.section--block.has-accent-line.section--valign-center {
	grid-template-rows: 1fr auto 1fr;
}
.section--block.has-accent-line.section--valign-bottom {
	grid-template-rows: 1fr auto 0fr;
}

/* Without a photo behind it there is nothing dark for cream to read against. */
.section--block.has-accent-line:not(.has-background-image):not(.has-background-video) {
	--section-line-color: var(--wp--preset--color--green, #1a3d39);
}

/* The tail has to escape the section, so the video clip is released here. The
   video is inset:0 + object-fit:cover, so it is already bounded without it. */
.section--block.has-accent-line.has-background-video {
	overflow: visible;
}

.section--block.has-accent-line > .section--inner {
	grid-row: 2;
	grid-column: 1;
	padding-left: calc(var(--theme-content-padding) + var(--section-line-gutter));
}

/* The rule itself. A container-width box painted with one gradient stripe:
   a single element covers both of the comp's segments, and the color break
   lands exactly on the section's bottom edge. The box tracks .section--inner's
   own centering, so the stripe stays aligned with the content column at any
   width; --theme-content-padding walks it in to the content edge. */
.section--block.has-accent-line::after {
	content: "";
	grid-row: 2 / -1;
	grid-column: 1;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1400px);
	margin-inline: auto;
	margin-bottom: calc(-1 * (var(--section-line-pad-bottom, 0px) + var(--section-line-overhang)));
	background-image: linear-gradient(
		to bottom,
		var(--section-line-color) 0 calc(100% - var(--section-line-overhang)),
		var(--section-line-color-tail) calc(100% - var(--section-line-overhang)) 100%
	);
	background-repeat: no-repeat;
	background-size: var(--section-line-width) 100%;
	background-position: var(--theme-content-padding) top;
	pointer-events: none;
	z-index: 2;
}

@media (max-width: 755px) {
	.section--block.has-accent-line {
		--section-line-width: 3px;
		--section-line-gutter: 16px;
		--section-line-overhang: 24px;
	}
}