/**
 * Fat Boy's — "How much, and how long" panel on the product page.
 *
 * Built on the tokens already in mockup.css. Mobile first, one column, and the
 * definition rows are allowed to wrap rather than forcing a minimum width — the demo
 * is checked at ten widths and must not overflow at any of them.
 */

.fb-facts {
	margin: 1.5rem 0;
	padding: 1rem 1.1rem 1.15rem;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	background: #fff;
}

.fb-facts__title {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
	line-height: 1.2;
	text-transform: none;
}

.fb-facts__grid {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem;
}

.fb-facts__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.35rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	min-width: 0;
}

.fb-facts__row:last-child {
	border-bottom: 0;
}

.fb-facts__grid dt {
	flex: 0 0 auto;
	min-width: 8.5em;
	margin: 0;
	font-weight: 700;
	opacity: 0.75;
	font-size: 0.9rem;
}

.fb-facts__grid dd {
	flex: 1 1 12em;
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.fb-facts__hint {
	display: inline-block;
	margin-left: 0.4rem;
	font-size: 0.78rem;
	opacity: 0.6;
}

/* The 75C rows are a food-safety floor, not a preference. Marked, not shouted. */
.fb-facts__row--safety dd {
	font-weight: 700;
}

.fb-facts__note {
	margin: 0.75rem 0 0;
	font-size: 0.86rem;
	opacity: 0.75;
}

@media (min-width: 560px) {
	.fb-facts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.4rem 1.5rem;
	}
}

/*
 * Link out to the week planner. Same weight as the portion note above it — this is a
 * next step, not a call to action, and the panel is meant to read as a reference card.
 */
.fb-facts__more {
	margin: 0.6rem 0 0;
	font-size: 0.86rem;
}