/* ==========================================================================
   Splitter - Fresh Ground's fic-root, transcribed.

   THIS IS THE MOST RECOGNISABLE DEVICE ON THE REFERENCE SITE.

   It appears three times on freshground.co.uk's homepage alone, plus on
   /why-rental/, /our-coffee/ and /coffee-machines/. It is how that site routes
   people: a centred introduction, then an unbroken band of square photographs
   you click into.

   Structure, read out of their markup:

     .fic-root
       .typography--center (max-width medium)
          h2  -  usually with one <strong> phrase
          p   -  two or three lines
          a.link-style--black    <- one black button, centred
       ul.layout__grid--two-cols.layout__grid--no-gap
          li.layout--aspect-square
             .banner-root__inner-block--learning-hub   padding 4% 0 2%
                h3.text-white
                a.link-style--white                    <- centred white button
             .banner-root__bg-image                    absolute cover
                picture + rgba(0,0,0,.2) scrim

   The two details that make it work and are easy to lose:
     1. NO GAP between tiles. They butt against each other edge to edge.
     2. SQUARE tiles, with PERCENTAGE padding inside (4% 0 2%), so the type
        block scales with the tile instead of drifting off-centre.
   ========================================================================== */

.mx-splitter {
	width: 100%;
}

/* ---- Centred introduction ------------------------------------------------ */

.mx-splitter__intro {
	margin: 0 auto var(--mx-grid-gap);
	max-width: var(--mx-wrapper-medium);
	text-align: center;
}

.mx-splitter__intro p {
	font-size: var(--mx-text-medium);
	line-height: 1.5;
	margin-bottom: .625rem;
}

.mx-splitter__intro .mx-btn {
	margin-top: 1.875rem;
}

/* ---- The tile band ------------------------------------------------------- */

.mx-splitter__tiles {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

@media (min-width: 48rem) {
	.mx-splitter__tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mx-splitter__tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mx-splitter__tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68.75rem) {
	.mx-splitter__tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- One tile ------------------------------------------------------------ */

.mx-splitter__tile {
	align-items: center;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	overflow: hidden;
	position: relative;
	text-align: center;
}

@supports not (aspect-ratio: 1 / 1) {
	.mx-splitter__tile::before {
		content: "";
		display: block;
		padding-top: 100%;
	}
}

.mx-splitter__bg {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
}

.mx-splitter__bg img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--mx-easing);
	width: 100%;
}

/* Fresh Ground's scrim on these tiles is .2 - light, because the photography
   is already dark enough to carry white type. */
.mx-splitter__bg::after {
	background-color: rgba(0, 0, 0, .2);
	bottom: 0;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
}

@media (hover: hover) {
	.mx-splitter__tile:hover .mx-splitter__bg img {
		transform: scale(1.05);
	}
}

/* Percentage padding, exactly as their banner-root__inner-block--learning-hub.
   Fixed rem here would drift off-centre as the square resizes. */
.mx-splitter__inner {
	padding: 4% 1.25rem 2%;
	position: relative;
	width: 100%;
	z-index: 2;
}

/* The tile is one whole link, so its internals are spans - that keeps the
   entire square clickable with a single tab stop and no nested interactive
   elements, and avoids emitting a heading for every tile in the band. Spans
   inherit neither display mode nor the heading face, so both are restored. */
.mx-splitter__title {
	color: #fff;
	display: block;
	font-family: var(--mx-font-heading);
	font-size: var(--mx-h3);
	font-weight: var(--mx-heading-weight);
	letter-spacing: var(--mx-heading-track);
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

.mx-splitter__actions {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 1.25rem;
}

a.mx-splitter__tile {
	text-decoration: none;
}

a.mx-splitter__tile:focus-visible {
	box-shadow: inset var(--mx-focus-ring-dark);
	outline: none;
}

/* Placeholder ground, used while real photography is still outstanding. The
   diagonal hatch makes it unmistakably a placeholder rather than a design
   decision, so an unfinished tile can never be mistaken for a finished one. */
.mx-splitter__bg--placeholder {
	background-color: var(--mx-grey-01);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, .06) 0,
		rgba(255, 255, 255, .06) 12px,
		transparent 12px,
		transparent 24px
	);
}

.mx-splitter__bg--placeholder::after {
	background-color: rgba(0, 0, 0, .35);
}

/* A whole-tile link: the tile is the target, the button is the affordance. */
.mx-splitter__link {
	bottom: 0;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3;
}

.mx-splitter__link:focus-visible {
	box-shadow: inset var(--mx-focus-ring-dark);
	outline: none;
}