/*
 * One recipe, large photograph, on any of the sites that carry it.
 *
 * ⚠⚠ THE CARD DECLARES ITS OWN COLOURS.
 *
 * This module lands on a dark-bodied site (gregloucks.com: body colour
 * #d7d7d7) and on a light restaurant template (gregloucks.food), and inside
 * page-builder sections that paint themselves near-white without setting a
 * text colour. A card that inherited would be pale-on-pale on exactly the
 * page it was asked for. So the surface and the ink are stated together and
 * neither is left to the template.
 */
.mfr { margin: 0 0 1.2rem; max-width: 100%; }
.mfr__heading { margin: 0 0 .35rem; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; }
.mfr__sub { margin: 0 0 .8rem; font-size: .86rem; opacity: .75; }

.mfr__card {
	display: grid;
	/*
	 * ⚠⚠ THE CARD STACKS ON ITS OWN WIDTH, NOT THE WINDOW'S.
	 *
	 * A viewport media query is the wrong instrument here: this module lands
	 * in a half-page column and in a narrow sidebar on a 1280px desktop, where
	 * "the window is wide" is true and "there is room for a photograph beside
	 * the text" is false. auto-fit with a floor asks the container.
	 */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	align-items: stretch;
	gap: 0;
	background: #fffdf8;
	color: #2a2520;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 8px;
	overflow: hidden;
}

.mfr__media { display: block; margin: 0; min-width: 0; }

/*
 * ⚠ A FIXED 4:3 FRAME WITH A CEILING. The photographs are every shape there
 * is; letting each set its own height makes the text column jump every time
 * the card re-picks. The ceiling is the other half of it - at half of a
 * 1140px page the aspect ratio alone gives a 427px-tall photograph with two
 * lines of text beside it, which is a tower, not a card.
 */
.mfr__img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 15rem;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: #ece7dd;
}

.mfr__body { padding: 1rem; min-width: 0; align-self: center; }
.mfr__title { margin: 0 0 .4rem; font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; }
.mfr__title a { color: inherit; text-decoration: none; }
.mfr__title a:hover { text-decoration: underline; }
.mfr__blurb { margin: 0 0 .5rem; font-size: .88rem; line-height: 1.45; color: #554d44; overflow-wrap: anywhere; }
.mfr__meta { margin: 0 0 .7rem; font-size: .8rem; letter-spacing: .02em; text-transform: uppercase; color: #8a7c6b; }
.mfr__actions { margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

.mfr__reroll {
	font: inherit;
	font-size: .85rem;
	padding: .4rem .9rem;
	border-radius: 999px;
	border: 1px solid #d9b26a;
	background: #d9b26a;
	color: #2a2520;
	cursor: pointer;
}
.mfr__reroll:hover { background: #c79f58; border-color: #c79f58; }

.mfr__all { font-size: .85rem; color: #8a6d2f; text-decoration: underline; }
.mfr__all:hover { color: #6f571f; }