/* ==========================================================================
   Section bands - Fresh Ground's block-root system, transcribed.

   THIS FILE CARRIES THE STRUCTURAL SIGNATURE OF THE DESIGN.

   Every section on freshground.co.uk is a <section> carrying a background
   variant, optionally with a full-bleed image layer behind it and light
   typography on top. Read down any of their pages and you get alternating
   off-white (#f7f6f6) and white (#fff) bands, punctuated by image-backed dark
   bands. That alternation is what makes the site legible without borders,
   shadows or card chrome - so it is reproduced exactly.

   Extracted verbatim from main.min.css:
     .layout--site-bg   background-color #f7f6f6
     .layout--white-bg  background-color #fff
     .layout--black-bg  background-color #000 ; * -> #f0f0f0 ; h1,h2 -> #fff
     .layout--grey-bg   background-color #d9d8d9
     .block-root__img-bg img  object-fit cover, 100% x 100%
     .sb-root__bg-image:before  rgba(0,0,0,.2) overlay
     .sb-root__inner-block                 padding 1.875rem 0
     .sb-root__inner-block.padding-medium  1.875rem -> 4.375rem
     .sb-root__inner-block.padding-large   4.375rem -> 6.875rem
   ========================================================================== */

.mx-block {
	position: relative;
	width: 100%;
}

/* ---- Background variants ------------------------------------------------ */

.mx-block--site  { background-color: var(--mx-site-bg); }
.mx-block--white { background-color: var(--mx-white-bg); }
.mx-block--grey  { background-color: var(--mx-light-grey-bg); }
.mx-block--dark  { background-color: var(--mx-dark-bg); }
.mx-block--cream { background-color: var(--mx-cream); }

.mx-block--black {
	background-color: #000;
}

.mx-block--black,
.mx-block--black p,
.mx-block--black li {
	color: #f0f0f0;
}

.mx-block--black h1,
.mx-block--black h2,
.mx-block--black h3,
.mx-block--black h4 {
	color: #fff;
}

/* ---- Full-bleed image background ---------------------------------------- */

.mx-block__img-bg {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

.mx-block__img-bg img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Legibility scrim. Fresh Ground uses .2 behind section imagery and .4 behind
   the hero video - the hero is busier and needs the extra weight. */
.mx-block__img-bg::before {
	background-color: rgba(0, 0, 0, .2);
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

.mx-block__img-bg--scrim-strong::before {
	background-color: var(--mx-scrim);
}

.mx-block__img-bg--no-scrim::before {
	display: none;
}

/* ---- Inner block and the padding scale ---------------------------------- */

.mx-block__inner {
	padding: var(--mx-block-pad) 0;
	position: relative;
	z-index: 2;
}

.mx-block__inner--medium {
	padding: 1.875rem 0;
}

.mx-block__inner--large {
	padding: 4.375rem 0;
}

@media (min-width: 48rem) {
	.mx-block__inner--medium {
		padding: 4.375rem 0;
	}

	.mx-block__inner--large {
		padding: 6.875rem 0;
	}
}

.mx-block__inner--flush-top    { padding-top: 0; }
.mx-block__inner--flush-bottom { padding-bottom: 0; }

.mx-block__inner--center {
	align-items: center;
	display: flex;
	flex-direction: column;
	text-align: center;
}

/* ---- Section head ------------------------------------------------------- */

.mx-section-head {
	margin-bottom: var(--mx-grid-gap);
	max-width: var(--mx-w-medium);
}

.mx-block__inner--center .mx-section-head {
	margin-left: auto;
	margin-right: auto;
}

.mx-section-head--split {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	justify-content: space-between;
	max-width: none;
}

.mx-section-head__title {
	margin-bottom: 0;
}

.mx-section-head__text {
	margin-top: 1.25rem;
	max-width: var(--mx-wrapper-prose);
}

/* Lede paragraph beneath a section title - Fresh Ground steps body copy up to
   1.125rem, and to 1.3125rem on wide viewports, inside intro blocks. */
.mx-lede p,
.mx-lede {
	font-size: var(--mx-text-medium);
	line-height: 1.6;
}

@media (min-width: 68.75rem) {
	.mx-lede p,
	.mx-lede {
		font-size: 1.3125rem;
		line-height: 1.55;
	}
}

/* ---- Two-column text + media band --------------------------------------- */

.mx-split {
	align-items: center;
	display: grid;
	gap: var(--mx-grid-gap);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mx-split--top {
	align-items: start;
}

.mx-split__media img {
	display: block;
	height: auto;
	width: 100%;
}

@media (max-width: 48rem) {
	.mx-split {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	/* Media leads on mobile so the band opens on an image, not a wall of text. */
	.mx-split--media-first .mx-split__media {
		order: -1;
	}
}

/* ---- Logo band ---------------------------------------------------------- */

.mx-logos {
	align-items: center;
	display: grid;
	gap: var(--mx-grid-gap-row-lg) var(--mx-grid-gap);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	justify-items: center;
}

/* A sector band can hold fewer than four logos. Four hard-coded columns left
   them packed against the left edge with empty columns beside them, so the
   track count follows the item count. */
.mx-logos--1 { grid-template-columns: minmax(0, 1fr); }
.mx-logos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mx-logos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mx-logos__item img {
	display: block;
	height: auto;
	max-height: 3.5rem;
	object-fit: contain;
	width: auto;
	max-width: 100%;
}

/* Mono treatment so eight different brand palettes do not fight the band. */
.mx-block--dark .mx-logos__item img,
.mx-block--black .mx-logos__item img {
	filter: brightness(0) invert(1);
	opacity: .85;
}

.mx-block--site .mx-logos__item img,
.mx-block--white .mx-logos__item img {
	filter: grayscale(1);
	opacity: .7;
	transition: opacity var(--mx-motion), filter var(--mx-motion);
}

@media (hover: hover) {
	.mx-block--site .mx-logos__item:hover img,
	.mx-block--white .mx-logos__item:hover img {
		filter: grayscale(0);
		opacity: 1;
	}
}

@media (max-width: 64rem) {
	.mx-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 35.4375rem) {
	.mx-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}