/* ==========================================================================
   Recipes — cards/grid (homepage widget + /recipes/) and the recipe page.
   ========================================================================== */

/* ---------- Recipe grid: 1 / 2 / 3 per row ---------- */
/* Without an explicit width, Elementor's flex container sized the widget from the
   grid's intrinsic height on phones (cards collapsed and overlapped the next section). */
.elementor-widget-gcf-recipe-grid { width: 100%; }

.gcf-rgrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gcf-rgrid__item { margin: 0; padding: 0; }
.gcf-rgrid__item::before,
.gcf-rgrid__item::marker { content: none; }

@media (min-width: 768px) {
	.gcf-rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 1024px) {
	.gcf-rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
}

/* ---------- Recipe card: Landspire's project card hover ----------
   Same effect as Mascot's projects skin "current-theme4": a second copy of the
   photo wipes in from the right (stretched + blurred → sharp), and a frosted
   panel with the labels and title slides up from the bottom. The panel is
   charcoal-tinted (the demo's was a faint green tint) so white text stays
   readable over bright food photos. Touch screens have no hover, so there the
   panel is always up. */
.gcf-rcard { height: 100%; }
.gcf-rcard__link {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 15px;
	background: var(--gcf-charcoal);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}
@media (min-width: 768px) {
	.gcf-rcard__link { aspect-ratio: 4 / 5; }
}
.gcf-rcard__media,
.gcf-rcard__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.gcf-rcard__img {
	z-index: 0;
	object-fit: cover;
	transition: transform .5s ease, opacity .5s ease, filter .5s ease;
}
.gcf-rcard__img--wipe {
	z-index: 1;
	opacity: 0;
	filter: blur(10px);
	transform: translateX(50%) scaleX(2);
}
.gcf-rcard__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 26px 28px 24px;
	border-radius: 15px;
	background: rgba(30, 30, 30, .55);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	transform: translateY(calc(100% + 2px));
	transition: transform .3s ease;
}
.gcf-rcard__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin-bottom: 12px;
	padding-bottom: 11px;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}
.gcf-rcard__label {
	color: #fff;
	font-family: var(--gcf-font);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
}
html body .gcf-rcard__title {
	margin: 0;
	color: #fff;
	font-family: var(--gcf-font-heading);
	font-size: clamp(22px, 2.1vw, 28px);
	line-height: 1.15;
}

/* Hover and keyboard focus */
.gcf-rcard__link:hover .gcf-rcard__img--wipe,
.gcf-rcard__link:focus-visible .gcf-rcard__img--wipe {
	opacity: 1;
	filter: blur(0);
	transform: translateX(0) scaleX(1);
}
.gcf-rcard__link:hover .gcf-rcard__img:not(.gcf-rcard__img--wipe),
.gcf-rcard__link:focus-visible .gcf-rcard__img:not(.gcf-rcard__img--wipe) {
	opacity: 0;
	filter: blur(10px);
	transform: translateX(-50%) scaleX(2);
}
.gcf-rcard__link:hover .gcf-rcard__body,
.gcf-rcard__link:focus-visible .gcf-rcard__body { transform: translateY(0); }
html .gcf-rcard__link:focus-visible { outline-offset: 3px; }

/* Touch screens: no hover, so the panel and title stay visible. */
@media (hover: none), (pointer: coarse) {
	.gcf-rcard__body,
	.gcf-rcard__link:hover .gcf-rcard__body { padding: 20px 20px 18px; transform: none; }
	.gcf-rcard__img--wipe { display: none; }
	.gcf-rcard__link:hover .gcf-rcard__img { opacity: 1; filter: none; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.gcf-rcard__img,
	.gcf-rcard__body { transition: none; }
	.gcf-rcard__img--wipe { display: none; }
	.gcf-rcard__link:hover .gcf-rcard__img,
	.gcf-rcard__link:focus-visible .gcf-rcard__img { opacity: 1; filter: none; transform: none; }
}

/* Video recipes: a play badge on the photo (top right). */
.gcf-rcard__play {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--gcf-red-ui);
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
.gcf-rcard__play svg { margin-left: 3px; }

/* "Coming soon" placeholder (a brand with fewer than 3 recipes): not a link. */
.gcf-rcard--soon {
	position: relative;
	/* The aspect ratio sets the height (with .gcf-rcard's height: 100% the row stretched it wider). */
	width: 100%;
	height: auto;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	border-radius: 15px;
	background: var(--gcf-charcoal);
	color: #fff;
}
@media (min-width: 768px) {
	.gcf-rcard--soon { aspect-ratio: 4 / 5; }
}
.gcf-rcard--soon .gcf-rcard__img { filter: grayscale(.6) brightness(.55); }
.gcf-rcard--soon .gcf-rcard__body { padding: 20px 22px 18px; transform: none; }
.gcf-rcard--soon .gcf-rcard__title { display: block; font-size: clamp(19px, 1.7vw, 23px); }

/* ---------- Filter buttons: All recipes + one per brand (/recipes/ and brand pages) ---------- */
.gcf-rfilter { margin: 0 0 32px; }
.gcf-rfilter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gcf-rfilter__list li { margin: 0; }
.gcf-rfilter__list li::before,
.gcf-rfilter__list li::marker { content: none; }
html body .gcf-rfilter__btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid var(--gcf-line);
	border-radius: 999px;
	background: #fff;
	color: var(--gcf-charcoal);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
html body .gcf-rfilter__btn:hover { border-color: var(--gcf-red-ui); color: var(--gcf-red-ui); }
html body .gcf-rfilter__btn[aria-current="page"] { border-color: var(--gcf-red-ui); background: var(--gcf-red-ui); color: #fff; }
@media (max-width: 599.98px) {
	/* One sideways-scrolling row on phones. */
	.gcf-rfilter__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
	.gcf-rfilter__list li { flex: none; }
}

/* ---------- /recipes/ archive and brand recipe pages ---------- */
.gcf-recipes-archive { padding: 56px 0 80px; }
.gcf-recipes-archive .pagination,
.gcf-recipes-archive .navigation { margin-top: 40px; }
.gcf-recipes-archive__empty { margin: 0 0 28px; text-align: center; }

/* ---------- Homepage: recipes by brand (GCF Recipes by Brand widget) ---------- */
.elementor-widget-gcf-recipe-brands { width: 100%; }
.gcf-rbrands__cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 40px;
}
.gcf-rbrand {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 4.2;
	border-radius: 20px;
	background: var(--gcf-charcoal);
	color: #fff;
	isolation: isolate;
	transition: transform .3s ease, box-shadow .3s ease;
}
html body .gcf-rbrand { text-decoration: none; }
.gcf-rbrand__media,
.gcf-rbrand__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.gcf-rbrand__img { object-fit: cover; transition: transform .5s ease; }
.gcf-rbrand__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0) 35%, rgba(20, 20, 20, .82) 100%);
}
.gcf-rbrand__body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	padding: 22px;
}
.gcf-rbrand__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 56px;
	padding: 8px 10px;
	border-radius: 12px;
	background: #fff;
}
html body .gcf-rbrand__logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 40px; object-fit: contain; }
.gcf-rbrand__logo-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--gcf-charcoal);
	line-height: 1.1;
	text-align: center;
}
.gcf-rbrand__logo-text b { color: var(--gcf-red-ui); font-family: var(--gcf-font-heading); font-size: 16px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; }
.gcf-rbrand__logo-text small { margin-top: 2px; font-size: 10px; font-weight: 600; }
/* Beats Elementor's `.elementor img { height: auto }`: photos fill their cards. */
html body .gcf-rbrand__img,
html body .gcf-rcard--soon .gcf-rcard__img { height: 100%; max-width: none; }
.gcf-rbrand__name {
	color: #fff;
	font-family: var(--gcf-font-heading);
	font-size: clamp(19px, 1.6vw, 24px);
	line-height: 1.15;
}
.gcf-rbrand:hover .gcf-rbrand__img,
.gcf-rbrand:focus-visible .gcf-rbrand__img { transform: scale(1.05); }
/* The chosen brand: red ring, lifted. Others dim a little once the tabs are live. */
.gcf-rbrand[aria-selected="true"] {
	box-shadow: 0 0 0 3px var(--gcf-page), 0 0 0 6px var(--gcf-red-ui), 0 18px 40px rgba(0, 0, 0, .18);
	transform: translateY(-4px);
}
.gcf-rbrand[aria-selected="true"] .gcf-rbrand__name::after {
	content: "";
	display: block;
	width: 36px;
	height: 3px;
	margin-top: 10px;
	border-radius: 2px;
	background: var(--gcf-red);
}
.is-ready .gcf-rbrand[aria-selected="false"] .gcf-rbrand__img { filter: saturate(.75) brightness(.8); }
.gcf-rbrands__panel:focus-visible { outline-offset: 8px; border-radius: 15px; }
.gcf-rbrands__more { margin: 32px 0 0; text-align: center; }
html body .gcf-rbrands__all {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	min-height: 48px;
	padding: 12px 26px;
	border-radius: 999px;
	background: var(--gcf-red-ui);
	color: #fff;
	font-weight: 600;
	transition: background-color .2s ease;
}
html body .gcf-rbrands__all:hover,
html body .gcf-rbrands__all:focus-visible { background: var(--gcf-red-dark); color: #fff; }
.gcf-rbrands__all .gcf-icon { width: 18px; height: 18px; transform: scaleX(-1); }

/* Tablet: 4 narrower cards. Phones: one sideways-swiping row. */
@media (max-width: 1023.98px) {
	.gcf-rbrands__cards { gap: 14px; }
	.gcf-rbrand__body { padding: 16px; }
	.gcf-rbrand__logo { width: 80px; height: 48px; }
}
@media (max-width: 767.98px) {
	.gcf-rbrands__cards {
		display: flex;
		gap: 14px;
		margin: 0 -20px 28px;
		padding: 10px 20px 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.gcf-rbrands__cards::-webkit-scrollbar { display: none; }
	/* About two cards across, the next one peeking in. */
	.gcf-rbrand { flex: 0 0 44%; aspect-ratio: 3 / 4; border-radius: 16px; scroll-snap-align: start; }
	.gcf-rbrand__body { gap: 8px; padding: 12px; }
	.gcf-rbrand__logo { width: 68px; height: 40px; padding: 5px 7px; border-radius: 9px; }
	html body .gcf-rbrand__logo img { max-height: 28px; }
	.gcf-rbrand__logo-text b { font-size: 12px; }
	.gcf-rbrand__logo-text small { font-size: 8px; }
	.gcf-rbrand__name { font-size: 16px; }
	.gcf-rbrand[aria-selected="true"] { transform: none; }
	/* Three recipe cards side by side would be too narrow: same sideways row. */
	.gcf-rgrid--brand {
		display: flex;
		gap: 14px;
		margin: 0 -20px;
		padding: 0 20px 6px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		scrollbar-width: none;
	}
	.gcf-rgrid--brand::-webkit-scrollbar { display: none; }
	.gcf-rgrid--brand .gcf-rgrid__item { flex: 0 0 78%; scroll-snap-align: start; }
	.gcf-rgrid--brand .gcf-rcard__link,
	.gcf-rgrid--brand .gcf-rcard--soon { aspect-ratio: 4 / 5; }
}
@media (min-width: 768px) {
	.gcf-rgrid--brand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.gcf-rbrand,
	.gcf-rbrand__img { transition: none; }
	.gcf-rbrand[aria-selected="true"] { transform: none; }
	.gcf-rbrand:hover .gcf-rbrand__img,
	.gcf-rbrand:focus-visible .gcf-rbrand__img { transform: none; }
}

/* ---------- Recipe page ---------- */
.gcf-recipe { background: var(--gcf-page); }
.gcf-recipe__top { padding: 32px 0 40px; }
.gcf-recipe__top-grid {
	display: grid;
	gap: 28px;
	align-items: center;
}
@media (min-width: 1024px) {
	.gcf-recipe__top { padding: 56px 0 64px; }
	.gcf-recipe__top-grid {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 64px;
	}
	.gcf-recipe__top-grid--text { grid-template-columns: minmax(0, 760px); }
}

/* Media: the aspect ratio of the video (or 4:5 photo), capped at 76% of the viewport height. */
.gcf-recipe__media {
	justify-self: center;
	width: min(100%, calc(76vh * var(--gcf-ar, .8)));
}
@media (min-width: 1024px) {
	.gcf-recipe__media { width: min(520px, calc(76vh * var(--gcf-ar, .8))); }
}
.gcf-rvideo,
.gcf-recipe__photo {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--gcf-media-ratio, 4 / 5);
	border-radius: 16px;
	background: var(--gcf-ink);
}
.gcf-recipe__photo img,
.gcf-rvideo__poster,
.gcf-rvideo__player {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.gcf-rvideo__player { object-fit: contain; background: #000; }
.gcf-rvideo__play {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff;
}
.gcf-rvideo__play::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .18);
	transition: background .2s ease;
}
.gcf-rvideo__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--gcf-red-ui);
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
	transform: translate(-50%, -50%);
	transition: background .2s ease, transform .2s ease;
}
.gcf-rvideo__icon svg { margin-left: 4px; }
.gcf-rvideo__play:hover .gcf-rvideo__icon,
.gcf-rvideo__play:focus-visible .gcf-rvideo__icon {
	background: var(--gcf-red-dark);
	transform: translate(-50%, -50%) scale(1.06);
}
.gcf-rvideo__play:hover::after { background: rgba(0, 0, 0, .08); }
html .gcf-rvideo__play:focus-visible { outline-offset: -4px; outline-color: #fff !important; }

/* Title block */
/* Brand link above the title → the brand's recipe page. */
.gcf-recipe__brand { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; }
html body .gcf-recipe__brand a {
	color: var(--gcf-red-ui);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}
html body .gcf-recipe__brand a:hover { color: var(--gcf-red-dark); }

html body .gcf-recipe__title {
	margin: 0 0 14px;
	color: var(--headings-color);
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.05;
}
.gcf-recipe__intro {
	max-width: 46ch;
	margin: 0 0 28px;
	color: var(--text-color);
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.55;
}

/* Info card: Sankofa yellow highlight, dark text (11.4:1). */
.gcf-recipe__info {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	max-width: 620px;
	margin: 0;
	padding: 8px;
	border-radius: 16px;
	background: var(--gcf-yellow);
	color: #1E1E1E;
}
@media (min-width: 768px) {
	.gcf-recipe__info { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.gcf-recipe__info-item { padding: 12px 14px; }
.gcf-recipe__info-item + .gcf-recipe__info-item { border-left: 1px solid rgba(30, 30, 30, .18); }
@media (max-width: 767px) {
	.gcf-recipe__info-item:nth-child(3) { border-left: 0; }
	.gcf-recipe__info-item:nth-child(n+3) { border-top: 1px solid rgba(30, 30, 30, .18); }
}
.gcf-recipe__info dt {
	margin: 0 0 2px;
	color: #1E1E1E;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.gcf-recipe__info dd {
	margin: 0;
	color: #1E1E1E;
	font-family: var(--gcf-font-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
}

/* Ingredients + method */
.gcf-recipe__body {
	padding: 48px 0 56px;
	border-top: 1px solid var(--gcf-line);
	background: #fff;
}
.gcf-recipe__cols { display: grid; gap: 40px; }
@media (min-width: 1024px) {
	.gcf-recipe__body { padding: 72px 0 80px; }
	.gcf-recipe__cols {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: 72px;
		align-items: start;
	}
	.gcf-recipe__ingredients {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--gcf-header-h-compact, 64px) + 24px);
	}
}
html body .gcf-recipe__h2 {
	margin: 0 0 20px;
	color: var(--headings-color);
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.15;
}
.gcf-recipe__ing-list {
	margin: 0;
	padding: 20px 24px;
	border-radius: 16px;
	background: var(--gcf-page);
	list-style: none;
}
.gcf-recipe__ing-list li {
	position: relative;
	margin: 0;
	padding: 10px 0 10px 22px;
	color: var(--gcf-charcoal);
	font-size: 17px;
	line-height: 1.45;
}
.gcf-recipe__ing-list li + li { border-top: 1px solid var(--gcf-line); }
.gcf-recipe__ing-list li::before {
	content: "";
	position: absolute;
	top: 19px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gcf-red);
}
.gcf-recipe__step-list { margin: 0; padding: 0; list-style: none; }
.gcf-recipe__step {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 18px;
	margin: 0;
	padding: 22px 0;
}
.gcf-recipe__step + .gcf-recipe__step { border-top: 1px solid var(--gcf-line); }
.gcf-recipe__step:first-child { padding-top: 4px; }
.gcf-recipe__step-num {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--gcf-red-ui);
	color: #fff;
	font-family: var(--gcf-font-heading);
	font-size: 18px;
	font-weight: 700;
}
html body .gcf-recipe__step-title {
	margin: 8px 0 6px;
	color: var(--headings-color);
	font-size: 21px;
	line-height: 1.25;
}
.gcf-recipe__step-body p {
	margin: 0;
	color: var(--text-color);
	font-size: 17px;
	line-height: 1.65;
}
/* Product names: red (4.7:1 on white), no underline; darker red on hover. */
html body .gcf-recipe__product-link {
	color: var(--gcf-red-ui);
	font-weight: 600;
	text-decoration: none;
}
html body .gcf-recipe__product-link:hover { color: var(--gcf-red-dark); }

/* Products used */
.gcf-recipe__products {
	padding: 56px 0 80px;
	background: var(--gcf-page);
}
@media (min-width: 1024px) {
	.gcf-recipe__products { padding: 72px 0 96px; }
}

/* A brand with no recipes yet: one "Recipes coming soon" card, centred. */
html body .gcf-rgrid--soon { display: grid; grid-template-columns: minmax(0, 400px); justify-content: center; margin: 0; padding: 0; overflow: visible; }
html body .gcf-rgrid--soon .gcf-rgrid__item { flex: none; }

/* The play control is a <button> (2026-11-09: the video always plays on our page). */
html body .gcf-rvideo__play {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	cursor: pointer;
}
html body .gcf-rvideo__poster { height: 100%; max-width: none; }
/* Instagram's embed is a white card (header, video, footer). */
.gcf-rvideo.is-instagram { background: #fff; }
.gcf-rvideo.is-instagram .gcf-rvideo__player { background: #fff; }
/* Beats Elementor's `.elementor img { height: auto }`: card photos (incl. 16:9 YouTube thumbnails) fill the card. */
html body .gcf-rcard__img { height: 100%; max-width: none; }