/* ==========================================================================
   Structural patterns.

   The devices that give each Fresh Ground page type its particular shape.
   Several deliberately add no new CSS at all - they are compositions of the
   existing card and stack components, and their PHP helpers live in
   inc/template-parts.php. Only what genuinely needs new styling is here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pain question

   freshground.co.uk/how-it-works/ band 2: a full-bleed image band carrying one
   question and nothing else - "Tired of bad coffee, unreliable machines, and
   lengthy waits for repairs?"

   It works because it is empty. No supporting copy, no button, no cards. The
   reader supplies the answer. Do not add anything to this band.
   -------------------------------------------------------------------------- */

.mx-pain {
	margin: 0 auto;
	max-width: 24ch;
	text-align: center;
}

.mx-pain__question {
	color: #fff;
	font-size: clamp(1.75rem, 4vw, 3.25rem);
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Reviews strip

   A thin centred social-proof band, structurally distinct from the testimonial
   card grid. On the reference site this slot holds a reviews.io carousel;
   that is their business infrastructure, so the slot keeps its job here and
   carries our own short quotes instead.
   -------------------------------------------------------------------------- */

.mx-reviews__title {
	font-size: var(--mx-h3);
	margin-bottom: 1.875rem;
	text-align: center;
}

.mx-reviews__list {
	display: grid;
	gap: var(--mx-grid-gap);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.mx-reviews__item {
	text-align: center;
}

.mx-reviews__quote {
	font-family: var(--mx-font-heading);
	font-size: var(--mx-text-medium);
	letter-spacing: var(--mx-heading-track);
	line-height: 1.35;
	margin-bottom: .625rem;
}

.mx-reviews__cite {
	color: var(--mx-grey-01);
	font-size: var(--mx-text-xsmall);
	font-style: normal;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.mx-block--dark .mx-reviews__cite,
.mx-block--black .mx-reviews__cite {
	color: rgba(255, 255, 255, .75);
}

/* Below the fold of a phone, three quotes stack badly. Scroll them instead. */
@media (max-width: 48rem) {
	.mx-reviews__list {
		grid-auto-columns: minmax(78%, 1fr);
		grid-auto-flow: column;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.mx-reviews__item {
		scroll-snap-align: center;
	}
}

/* --------------------------------------------------------------------------
   Versus stack

   freshground.co.uk/free-on-loan-coffee-machines/ band 4: "The benefits of free
   loan - Versus rental / Versus purchase". A comparison against the named
   alternatives rather than an abstract feature list.
   -------------------------------------------------------------------------- */

.mx-versus__label {
	color: var(--mx-accent);
	display: block;
	font-family: var(--mx-font-body);
	font-size: var(--mx-text-xsmall);
	font-weight: 700;
	letter-spacing: .1em;
	margin-bottom: .5rem;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Tier cards - the "fra" price

   Fresh Ground quotes every tier as "from GBP x per week" rather than a flat
   figure, which keeps a range honest without hiding it.
   -------------------------------------------------------------------------- */

.mx-tier__from {
	color: var(--mx-grey-01);
	display: block;
	font-family: var(--mx-font-body);
	font-size: var(--mx-text-xsmall);
	font-weight: 700;
	letter-spacing: .1em;
	margin-bottom: .25rem;
	text-transform: uppercase;
}

.mx-tier__unit {
	color: var(--mx-grey-01);
	font-family: var(--mx-font-body);
	font-size: var(--mx-text-small);
	letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Story cards - the closing proof band

   Recurs on /why-rental/, /how-it-works/, /contact/ and /coffee-machine-trials/.
   Always the same anatomy: image, title, and a "Name, City" subtitle.
   -------------------------------------------------------------------------- */

.mx-link-card__subtitle {
	color: rgba(255, 255, 255, .85);
	display: block;
	font-family: var(--mx-font-body);
	font-size: var(--mx-text-xsmall);
	letter-spacing: .06em;
	margin-top: .25rem;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Idea band

   freshground.co.uk/about/ bands 4, 5 and 6: three consecutive bands, each
   carrying one h2 and a short paragraph. No cards, no grid. Weight comes from
   a whole band being given to a single idea.
   -------------------------------------------------------------------------- */

.mx-idea {
	margin: 0 auto;
	max-width: var(--mx-w-medium);
	text-align: center;
}

.mx-idea__title {
	margin-bottom: 1.25rem;
}

.mx-idea__text {
	font-size: var(--mx-text-medium);
	line-height: 1.6;
	margin: 0 auto;
	max-width: 60ch;
}

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

/* --------------------------------------------------------------------------
   Tile group - the category-landing repeat

   freshground.co.uk/coffee-machines/ runs the same 3-up tile group four times,
   once per sub-type. The repetition IS the page: it lets someone browse a
   whole range without leaving.
   -------------------------------------------------------------------------- */

.mx-tile-group + .mx-tile-group {
	margin-top: var(--mx-grid-gap-row-lg);
}

.mx-tile-group__title {
	border-bottom: 1px solid var(--mx-hairline);
	font-size: var(--mx-h3);
	margin-bottom: var(--mx-grid-gap);
	padding-bottom: .875rem;
}

/* --------------------------------------------------------------------------
   FAQ cards

   freshground.co.uk/faq is TWO bands and uses no accordion at all: a card grid
   of questions grouped by topic. The accordion is reserved for holding "the
   details in full" inside other page types.
   -------------------------------------------------------------------------- */

.mx-faq-group + .mx-faq-group {
	margin-top: var(--mx-grid-gap-row-lg);
}

.mx-faq-group__title {
	border-bottom: 1px solid var(--mx-hairline-strong);
	font-size: var(--mx-h3);
	margin-bottom: var(--mx-grid-gap);
	padding-bottom: .875rem;
}

.mx-faq-card__q {
	display: block;
	font-family: var(--mx-font-heading);
	font-size: var(--mx-h4);
	font-weight: var(--mx-heading-weight);
	letter-spacing: var(--mx-heading-track);
	line-height: 1.25;
	margin-bottom: .625rem;
}

.mx-faq-card__a {
	font-size: var(--mx-body);
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Placeholder scaffolding

   Used through the structural build so an unfinished band can never be
   mistaken for a finished one. The hatch reads unmistakably as "not designed
   yet" rather than as a grey design decision.
   -------------------------------------------------------------------------- */

.mx-ph {
	align-items: center;
	background-color: var(--mx-grey-04);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(0, 0, 0, .05) 0,
		rgba(0, 0, 0, .05) 12px,
		transparent 12px,
		transparent 24px
	);
	color: var(--mx-grey-01);
	display: flex;
	flex-direction: column;
	font-family: var(--mx-font-body);
	font-size: var(--mx-text-xsmall);
	justify-content: center;
	letter-spacing: .1em;
	min-height: 10rem;
	padding: 1.25rem;
	text-align: center;
	text-transform: uppercase;
}

.mx-ph--media {
	aspect-ratio: 4 / 3;
	min-height: 0;
}

.mx-ph--square {
	aspect-ratio: 1 / 1;
	min-height: 0;
}

.mx-ph--video {
	aspect-ratio: 16 / 9;
	min-height: 0;
}

.mx-ph--tall {
	min-height: 18rem;
}

.mx-block--dark .mx-ph,
.mx-block--black .mx-ph {
	background-color: rgba(255, 255, 255, .08);
	background-image: repeating-linear-gradient(
		45deg,
		rgba(255, 255, 255, .06) 0,
		rgba(255, 255, 255, .06) 12px,
		transparent 12px,
		transparent 24px
	);
	color: rgba(255, 255, 255, .8);
}