/**
 * Homepage section heights: let sections grow instead of overlapping.
 *
 * THE FAULT. The "Meet Raynefyre" section is given a FIXED height by the
 * builder: `height:100vh` at desktop and tablet, `height:1700px` below 767px.
 * A fixed height does not grow to fit its content. When the content is taller
 * than the box, it overflows, and the next section, which is a normal in-flow
 * block placed immediately after the box, paints on top of the overflow. The
 * section that follows has its own background and a diagonal divider, so it
 * occludes rather than blends, and the result reads as the next row sliding
 * over Meet Raynefyre rather than pushing it down.
 *
 * MEASURED, at 1440x620:
 *
 *     before   section box 620px, content ran to 242.6px BELOW the box,
 *              next section started at the box bottom, so 242.6px of the
 *              portrait, the pull quote and the "More About Raynefyre"
 *              button were covered
 *     after    section grows to 955.6px, content clears the next section
 *              by 93px, nothing is covered
 *
 * THE FIX is `min-height` instead of `height`. The intent behind the original
 * value was a floor, not a ceiling: fill the viewport. `min-height` keeps that
 * floor exactly, so the section looks identical at every viewport where the
 * content already fitted, and only changes where it was previously overlapping.
 * `height:auto` is set alongside it to unset the builder's declaration rather
 * than rely on it being absent.
 *
 * THE ORIGINAL VALUES ARE PRESERVED AS THE MINIMUM. 100vh and 1700px are
 * deliberate design choices and this file does not second-guess them; it only
 * stops them acting as a ceiling.
 *
 * SPECIFICITY. The builder emits `.et_pb_section_2 { height:... }` (0,1,0) from
 * an inline <style> late in the document, so an equal-specificity rule in a
 * linked stylesheet loses on source order. `div.et_pb_section.et_pb_section_2`
 * is (0,2,1) and takes it without `!important`. This mirrors the selector the
 * builder itself uses for that section's background.
 *
 * SECTIONS 3 AND 5 CARRY THE SAME PATTERN and are NOT changed here.
 * `.et_pb_section_3` is `height:700px` and `.et_pb_section_5` is `90vh` /
 * `1400px`. Neither was reported as overlapping and neither was observed to
 * overlap at the viewports checked, so they are left alone rather than changed
 * speculatively. If either is reported later, the fix is the same shape.
 */

div.et_pb_section.et_pb_section_2 {
	height: auto;
	min-height: 100vh;
}

@media only screen and ( max-width: 767px ) {
	div.et_pb_section.et_pb_section_2 {
		height: auto;
		min-height: 1700px;
	}
}