/*------------------------------------*\
    Blocks
\*------------------------------------*/

/*
 * Every block sits between its neighbours on one margin-top rhythm – never
 * padding, so a block's own padding stays free for its background band and
 * adjacent gaps cannot double up. Contained blocks sit in
 * .container > .row > .col-xl-10 (inc/blocks.php); Image with Form, Image with
 * Text and a banner-size Image / Video run edge to edge. The rhythm is Howe
 * Green House's: about 90px between sections on a desktop.
 *
 * scroll-margin-top keeps a sticky header (the frame's) from covering a
 * section the one-page menu scrolls to – js/utilities/frame.js measures it.
 */
.blockContent {
	margin-top: 48px;
	margin-bottom: 0;
	scroll-margin-top: var(--landing-header-offset, 0px);

	@media (min-width: 576px) {
		margin-top: 64px;
	}
	@media (min-width: 992px) {
		margin-top: 90px;
	}

	/* frame.js focuses a section the menu scrolls to (for screen readers and
	   the next Tab); a ring round a whole section helps no one */
	&:focus {
		outline: 0;
	}
}

/* The page's last block keeps the rhythm above the footer – unless it is a
   full-bleed band, which runs into the footer on purpose. */
.landingContent > .blockContent:last-child:not(.block-image-form, .block-image-text, :has(.size-page-banner)) {
	margin-bottom: 48px;

	@media (min-width: 576px) {
		margin-bottom: 64px;
	}
	@media (min-width: 992px) {
		margin-bottom: 90px;
	}
}

/* Shared section title – the Heading 2 style */
.sectionTitle {
	margin: 0 0 20px;
	font: var(--text-h2);
	font-size: 30px;
	color: var(--landing-heading);

	@media (min-width: 768px) {
		font: var(--text-h2);
	}
}

/* Full-width Image – a banner-size Image / Video block spans the viewport:
   the photo's own shape on a phone, then Howe Green's band – 400px tall from
   992px, 550px from 1200px – cropped to fit. */
.block-image .image-item:has(.size-page-banner) {
	margin: 0;

	img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
		object-fit: cover;

		@media (min-width: 992px) {
			height: 400px;
			aspect-ratio: auto;
		}
		@media (min-width: 1200px) {
			height: 550px;
		}
	}

	.imageItemCaption {
		margin: 0.5rem 0 0;
		padding: 0 15px;
		text-align: center;
	}
}

/*
 * Image panel band – Image with Form (blocks/image-form): a photo beside a
 * solid panel in the school's main colour. Stacked below 992px (photo
 * first); side by side above it, the photo taking seven twelfths (Howe
 * Green's three fifths, near enough) and filling the panel's height.
 */
.imagePanel {

	.imagePanel-image {
		position: relative;

		img {
			display: block;
			width: 100%;
			height: auto;
			aspect-ratio: 3 / 2;
			object-fit: cover;
		}

		/* the panel sets the band's height; the photo covers whatever it is */
		@media (min-width: 992px) {
			img {
				position: absolute;
				inset: 0;
				height: 100%;
				aspect-ratio: auto;
			}
		}
	}

	.imagePanel-panel {
		background: var(--landing-panel-bg);
		color: var(--landing-panel-text);
	}

	.imagePanel-content {
		max-width: 620px;
		padding: 48px 15px;

		@media (min-width: 576px) {
			padding: 50px 30px;
		}
		@media (min-width: 992px) {
			padding: 50px 40px;
		}
		@media (min-width: 1400px) {
			padding: 60px 55px;
		}

		.sectionTitle,
		:is(h2, h3, h4, h5, h6) {
			color: var(--landing-panel-text);
		}

		p {
			letter-spacing: 0.055em;
		}

		a:not(.button) {
			color: inherit;
			text-decoration: underline;
		}

		> :last-child {
			margin-bottom: 0;
		}
	}
}

/* A button on a panel – the form's submit, Image with Text's link – is
   outlined in the panel's text colour (.button--onDark in buttons.css). */
:is(.imagePanel, .imageInset) .button {
	--button-bg: transparent;
	--button-border: var(--landing-panel-text);
	--button-label: var(--landing-panel-text);
	--button-bg-hover: var(--landing-button-bg);
	--button-border-hover: var(--landing-button-bg);
	--button-label-hover: var(--landing-button-text);
}