/* Natige — recipe filters, page grid, and home preview (one clear row + faded second). */

.recipe-cats {
	--recipe-blue: #3A78BA;
	--recipe-lime: #C6E260;
	margin: 0 0 28px;
	padding: 0;
	background: none;
}

.recipe-cats__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 12px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

.recipe-cats .recipe-icon {
	color: inherit;
}
.recipe-cats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	min-width: 88px;
	padding: 4px 6px 6px;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.recipe-cats__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(#ffffff, #f5fbff);
	color: var(--recipe-blue);
	box-shadow: 0 8px 15px rgba(186, 189, 191, 0.35);
	transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.recipe-icon {
	width: 40px;
	height: 40px;
	display: block;
	overflow: visible;
	object-fit: contain;
}

.recipe-cats__item.is-active .recipe-cats__mark,
.recipe-cats__item:hover .recipe-cats__mark {
	background: var(--recipe-blue);
	color: #fff;
	box-shadow: 0 8px 15px rgba(186, 189, 191, 0.35);
}

.recipe-cats__item.is-active .recipe-cats__mark img,
.recipe-cats__item:hover .recipe-cats__mark img {
	filter: brightness(0) invert(1);
}

.recipe-cats__label {
	max-width: 9em;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.25;
	text-align: center;
	color: var(--recipe-blue);
}

.recipe-cats__item.is-active .recipe-cats__label,
.recipe-cats__item:hover .recipe-cats__label {
	font-weight: 700;
	color: var(--recipe-blue);
}

.recipe-cats__item:active .recipe-cats__mark {
	transform: scale(0.97);
}

.recipe-cats__item:focus-visible {
	outline: 2px solid var(--recipe-blue);
	outline-offset: 4px;
	border-radius: 12px;
}

.recipe-page {
	padding-bottom: 80px;
	background:
		radial-gradient(1200px 420px at 50% -80px, rgba(198, 226, 96, 0.12), transparent 70%),
		#ffffff;
}

.recipe-page__head {
	text-align: center;
	padding: 24px 0 8px;
}

.recipe-page__title {
	margin: 0 0 24px;
	font-size: 36px;
	font-weight: 800;
	line-height: 1.15;
	color: #3A78BA;
}

.recipe-home {
	--recipe-blue: #3A78BA;
	--recipe-lime: #C6E260;
	background: #fff;
	padding: 64px 0;
}

.recipe-home__head {
	max-width: 36em;
	margin: 0 auto 32px;
	padding: 0;
	text-align: center;
	background: none;
	color: inherit;
}

.recipe-home__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--recipe-lime);
}

.recipe-home__title {
	margin: 0;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.12;
	color: var(--recipe-blue);
}

.recipe-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px 16px;
	margin: 0;
	padding: 0 0 16px;
	list-style: none;
}

.recipe-grid__item {
	min-width: 0;
}

.recipe-preview {
	position: relative;
}

.recipe-preview .recipe-grid__item:nth-child(n+5),
.recipe-preview .recipe-grid__item.is-veiled {
	pointer-events: none;
}

.recipe-preview.is-ready .recipe-grid__item {
	pointer-events: auto;
}

.recipe-preview.is-ready .recipe-grid__item.is-veiled {
	pointer-events: none;
}

.recipe-preview .recipe-grid__item.is-off {
	display: none !important;
}

.recipe-preview__veil {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 52%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 16px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 28%, rgba(255, 255, 255, 0.92) 62%, #fff 88%);
	pointer-events: auto;
}

.recipe-preview--mid .recipe-preview__veil {
	height: 50%;
}

.recipe-preview--short .recipe-preview__veil {
	display: none;
}

.recipe-preview--short .recipe-grid__item.is-veiled,
.recipe-preview--short .recipe-grid__item:nth-child(n+5) {
	pointer-events: auto;
}

.recipe-preview__more {
	pointer-events: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 12px 32px;
	border-radius: 999px;
	background: #3A78BA;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	opacity: 0;
	transform: translateY(8px);
	box-shadow: 0 12px 28px rgba(58, 120, 186, 0.28);
	transition: background 160ms ease, transform 200ms ease, opacity 200ms ease;
}

.recipe-preview__veil:hover .recipe-preview__more,
.recipe-preview__veil:focus-within .recipe-preview__more {
	pointer-events: auto;
	opacity: 1;
	transform: none;
}

.recipe-preview__more:hover,
.recipe-preview__more:focus-visible {
	background: #FCB43C;
	color: #243040;
	text-decoration: none;
}

.recipe-preview__more:active {
	transform: scale(0.98);
}

.recipe-preview__more:focus-visible {
	outline: 2px solid #FCB43C;
	outline-offset: 3px;
}

.recipe-preview__more i {
	font-size: 18px;
	line-height: 1;
}

@media (hover: none) {
	.recipe-preview__more {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

.recipe-card__body {
	display: block;
	min-width: 0;
	margin-top: 16px;
}

.recipe-card__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 8px;
	color: rgba(52, 58, 64, 0.72);
}

.recipe-card__fact {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	color: rgba(52, 58, 64, 0.72);
}

.recipe-card__fact + .recipe-card__fact {
	padding-left: 16px;
	border-left: 1px solid rgba(52, 58, 64, 0.16);
}

.recipe-grid__item[hidden] {
	display: none !important;
}

.recipe-card__fact .recipe-icon {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	color: #3A78BA;
}

.recipe-card,
.recipe-card:hover,
.recipe-card:focus,
.recipe-card:focus-visible {
	display: block;
	min-width: 0;
	color: #343a40;
	text-decoration: none;
}

.recipe-card__media {
	position: relative;
	display: block;
	padding-top: 62%;
	overflow: hidden;
	border-radius: 12px;
	background-color: #f4f6f4;
}

.recipe-card__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.9s cubic-bezier(0.35, 0, 0.14, 1);
}

.recipe-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
	margin-top: 0;
	font-family: var(--font-display, "Work Sans", sans-serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--natige-ink, #243040);
	transition: color 0.4s ease;
}

.recipe-card:hover .recipe-card__img,
.recipe-card:focus-visible .recipe-card__img {
	transform: scale(1.06);
}
.recipe-card:hover .recipe-card__title,
.recipe-card:focus-visible .recipe-card__title {
	color: #3A78BA;
}
.recipe-card:focus-visible .recipe-card__media {
	outline: 2px solid #3A78BA;
	outline-offset: 4px;
}

.recipe-sheet {
	--recipe-blue: #3A78BA;
	--recipe-lime: #C6E260;
	padding: 16px 0 80px;
	background: #fff;
}

.recipe-sheet__crumbs {
	margin: 0 0 24px;
}

.recipe-sheet__crumbs .breadcrumb {
	margin: 0;
}

.recipe-sheet__stage {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: 40px 56px;
	align-items: start;
}

.recipe-sheet__photo {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	background: #f4f6f4;
	min-height: 420px;
}

.recipe-sheet__photo img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	object-fit: cover;
}

.recipe-sheet__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--recipe-lime);
}

.recipe-sheet__title {
	margin: 0 0 16px;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.12;
	color: var(--recipe-blue);
}

.recipe-sheet__lead {
	margin: 0 0 24px;
	max-width: 38em;
	font-size: 17px;
	line-height: 1.55;
	color: #5a6168;
}

.recipe-sheet__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.recipe-sheet__facts li {
	padding: 12px 8px 10px;
	border-radius: 12px;
	background: #ffffff;
	border: 1px solid rgba(58, 120, 186, 0.12);
	text-align: center;
}

.recipe-sheet__facts strong {
	display: block;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--recipe-blue);
}

.recipe-sheet__facts span {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5a6168;
}

.recipe-sheet__macros {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.recipe-sheet__macros li {
	padding: 10px 8px;
	text-align: center;
}

.recipe-sheet__macros strong {
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--recipe-blue);
}

.recipe-sheet__macros span {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #5a6168;
}

.recipe-sheet__cook {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 48px 56px;
	align-items: start;
	margin-top: 56px;
}

.recipe-sheet__ing,
.recipe-sheet__steps {
	min-width: 0;
}

.recipe-sheet__ing {
	padding: 24px;
	border-radius: 16px;
	background: #ffffff;
	border: 1px solid rgba(58, 120, 186, 0.12);
}

.recipe-sheet__ing h2,
.recipe-sheet__steps h2,
.recipe-sheet__more h2 {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: 700;
	color: var(--recipe-blue);
}

.recipe-sheet__ing ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.recipe-sheet__ing li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(58, 120, 186, 0.12);
}

.recipe-sheet__ing li:first-child {
	padding-top: 0;
}

.recipe-sheet__ing li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.recipe-sheet__ing-name {
	font-size: 16px;
	line-height: 1.4;
	color: #1c2430;
}

.recipe-sheet__ing-amt {
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--recipe-blue);
	text-align: right;
}

.recipe-sheet__steps ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: recipe-step;
}

.recipe-sheet__steps li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid rgba(58, 120, 186, 0.16);
}

.recipe-sheet__steps li:last-child {
	border-bottom: 1px solid rgba(58, 120, 186, 0.16);
}

.recipe-sheet__steps li::before {
	content: counter(recipe-step, decimal-leading-zero);
	counter-increment: recipe-step;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--recipe-blue);
}

.recipe-sheet__steps p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: #343a40;
}

.recipe-sheet__more {
	margin-top: 64px;
	padding-top: 32px;
	border-top: 1px solid rgba(58, 120, 186, 0.14);
}

.recipe-sheet__more .recipe-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 992px) {
	.recipe-sheet__ing {
		position: sticky;
		top: 96px;
	}
}

.recipe-rail__empty {
	margin: 24px 0 0;
	text-align: center;
	font-size: 17px;
	color: #343a40;
}

@media (max-width: 1199.98px) {
	.recipe-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 991.98px) {
	.recipe-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 16px;
	}
	.recipe-home__title,
	.recipe-page__title {
		font-size: 28px;
	}
	.recipe-cats__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		width: 100%;
		gap: 12px 8px;
	}
	.recipe-cats__item {
		min-width: 0;
	}
	.recipe-preview:not(.is-ready) .recipe-grid__item:nth-child(n+5) {
		display: none;
	}
	.recipe-preview .recipe-grid__item:nth-child(n+3) {
		pointer-events: none;
	}
	.recipe-preview--short .recipe-grid__item:nth-child(n+3) {
		pointer-events: auto;
	}
	.recipe-preview__veil {
		height: 52%;
	}
	.recipe-sheet__stage,
	.recipe-sheet__cook {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.recipe-sheet__title {
		font-size: 32px;
	}
	.recipe-sheet__photo,
	.recipe-sheet__photo img {
		min-height: 280px;
	}
	.recipe-sheet__facts {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}
	.recipe-sheet__facts li {
		padding: 10px 6px 8px;
	}
	.recipe-sheet__facts strong {
		font-size: 22px;
	}
	.recipe-sheet__macros {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		border: 1px solid rgba(58, 120, 186, 0.12);
		border-radius: 12px;
		overflow: hidden;
	}
	.recipe-sheet__macros li {
		padding: 10px 4px;
		border-right: 1px solid rgba(58, 120, 186, 0.12);
	}
	.recipe-sheet__macros li:last-child {
		border-right: 0;
	}
	.recipe-sheet__macros strong {
		font-size: 16px;
	}
	.recipe-sheet__cook {
		margin-top: 40px;
	}
	.recipe-sheet__more .recipe-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.recipe-home {
		padding: 48px 0;
	}
	.recipe-home__head {
		margin-bottom: 24px;
	}
}

@media (max-width: 575.98px) {
	.recipe-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px 10px;
	}
	.recipe-cats__list {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		justify-content: stretch;
		width: 100%;
		padding: 0;
		border-radius: 0;
	}
	.recipe-cats__item {
		min-width: 0;
		padding: 4px 2px 6px;
	}
	.recipe-cats__mark {
		width: 64px;
		height: 64px;
	}
	.recipe-cats__mark .recipe-icon {
		width: 36px;
		height: 36px;
	}
	.recipe-preview:not(.is-ready) .recipe-grid__item:nth-child(n+5) {
		display: none;
	}
	.recipe-preview .recipe-grid__item:nth-child(n+3) {
		pointer-events: none;
	}
	.recipe-preview--short .recipe-grid__item:nth-child(n+3) {
		pointer-events: auto;
	}
	.recipe-preview__veil {
		height: 52%;
	}
	.recipe-home {
		padding: 48px 0;
	}
	.recipe-home__head {
		padding: 0;
		margin-bottom: 24px;
	}
	.recipe-sheet__facts strong {
		font-size: 18px;
	}
	.recipe-sheet__facts span,
	.recipe-sheet__macros span {
		font-size: 10px;
		letter-spacing: 0.02em;
	}
	.recipe-sheet__macros strong {
		font-size: 15px;
	}
	.recipe-sheet__more .recipe-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (prefers-reduced-motion: reduce) {
	.recipe-card__img,
	.recipe-card__title,
	.recipe-preview__more,
	.recipe-cats__mark {
		transition: none;
	}
	.recipe-cats__item:active .recipe-cats__mark {
		transform: none;
	}
}