/*
 * The related block at the foot of an article.
 *
 * Its own file, unscoped, and enqueued only on single posts.
 *
 * storefront.css cannot carry these rules for two reasons: it is enqueued only
 * on pages holding the [tapper_cafe] shortcode, which an article is not, and
 * every rule in it is scoped under #tapper-cafe-app, which this markup is not
 * inside. The same reasoning tapper-cafe-core's guide.css is unscoped for.
 *
 * Deliberately small and colour-light: this sits inside Motta's article
 * template and should read as part of it, so it borrows currentColor rather
 * than stating a palette that would drift from the theme's.
 */

.tc-editorial {
	margin: 2.5rem 0;
	padding: 1.5rem;
	border: 1px solid rgba(128, 128, 128, 0.28);
	border-radius: 0.75rem;
}

.tc-editorial__heading {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	line-height: 1.3;
}

.tc-editorial__method {
	margin: 0 0 1rem;
}

.tc-editorial__pill {
	display: inline-block;
	padding: 0.4375rem 1rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.tc-editorial__roasters,
.tc-editorial__products {
	margin: 0 0 0.75rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
}

.tc-editorial__products {
	margin-bottom: 0;
}

.tc-editorial__roaster,
.tc-editorial__product {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tc-editorial__roaster-name {
	font-weight: 600;
	text-decoration: none;
}

.tc-editorial__city {
	opacity: 0.7;
}

.tc-editorial__city::before {
	content: "·";
	margin: 0 0.3125rem;
}

@media (max-width: 480px) {
	.tc-editorial {
		padding: 1.125rem;
	}

	.tc-editorial__roasters,
	.tc-editorial__products {
		flex-direction: column;
		gap: 0.4375rem;
	}
}

/*
 * The kit on a roaster's brew page: what they sell that suits this method.
 * Links rather than buttons -- see the template for why nothing here is
 * addable to a cart.
 */
.tc-roasterRecipe__kit { margin-top: 32px; }

.tc-roasterRecipe__kitTitle {
	margin: 0 0 12px;
	font-size: 18px;
}

.tc-roasterRecipe__kitList {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tc-roasterRecipe__kitItem {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
}

.tc-roasterRecipe__kitPrice { white-space: nowrap; }

.tc-roasterRecipe__kitFoot { margin: 14px 0 0; }