/* ==========================================================================
   recipe.css — recipe detail page
   ========================================================================== */

.recipe-hero {
	margin-top: var(--s-6);
	margin-bottom: var(--s-6);
	max-width: 52rem;
}

.recipe-hero__title {
	margin-top: var(--s-2);
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--ink-faint);
}

.breadcrumb a {
	color: var(--ink-faint);
}

.breadcrumb a:hover {
	color: var(--ink);
}

/* --- media + nutrition column -------------------------------------------- */

.recipe-figure {
	margin-bottom: var(--s-5);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	background: var(--mint-soft);
	aspect-ratio: 4 / 3;
}

.recipe-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nutrition {
	background: var(--mint);
	border-radius: var(--r-lg);
	padding: var(--s-5);
}

.nutrition__title {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--t-md);
	font-weight: 700;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	margin-bottom: var(--s-4);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid rgba(0, 100, 0, .18);
}

.nutrition__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	gap: var(--s-3);
}

.nutrition__item {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: var(--s-3);
	background: color-mix(in srgb, var(--surface) 62%, transparent);
	border-radius: var(--r-md);
}

.nutrition__label {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--ink-muted);
	line-height: 1.3;
}

.nutrition__value {
	font-size: var(--t-lg);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.nutrition__value span {
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--ink-muted);
	letter-spacing: 0;
}

/* --- method column ------------------------------------------------------- */

.recipe-method {
	background: var(--surface);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-sm);
	padding: var(--s-5);
}

@media (min-width: 48rem) {
	.recipe-method {
		padding: var(--s-6) var(--s-7);
	}
}

.recipe-method__title {
	font-size: var(--t-md);
	font-weight: 700;
	letter-spacing: var(--track-caps);
	text-transform: uppercase;
	color: var(--ink-muted);
	padding-bottom: var(--s-3);
	margin-bottom: var(--s-5);
	border-bottom: 1px solid var(--line);
}

/* --- rich text emitted by the Quill editor -------------------------------
   Content comes from data/posts/<slug>.html and is normalised in the
   browser by static/js/recipe.js. */

.recipe-content {
	font-size: var(--t-base);
	line-height: var(--lh-body);
}

.recipe-content> * + * {
	margin-top: var(--s-4);
}

.recipe-content h1,
.recipe-content h2,
.recipe-content h3,
.recipe-content h4 {
	margin-top: var(--s-6);
	margin-bottom: var(--s-3);
}

.recipe-content h1 {
	font-size: var(--t-2xl);
}

.recipe-content h2 {
	font-size: var(--t-xl);
}

.recipe-content h3 {
	font-size: var(--t-lg);
}

.recipe-content ul,
.recipe-content ol {
	padding-left: 1.4em;
}

.recipe-content li + li {
	margin-top: var(--s-2);
}

.recipe-content li::marker {
	color: var(--ink-faint);
	font-weight: 600;
}

.recipe-content ol li[data-list="bullet"] {
	list-style-type: disc;
}

/* Quill restarts numbering at each indent level; letter the nested one so a
   sub-step never reads as step 1 again. */
.recipe-content ol ol {
	list-style-type: lower-alpha;
}

.recipe-content ul ul {
	list-style-type: circle;
}

.recipe-content img {
	width: 100%;
	border-radius: var(--r-md);
	margin-block: var(--s-5);
}

.recipe-content a {
	text-decoration: underline;
}

.recipe-content blockquote {
	padding: var(--s-3) var(--s-5);
	border-left: 3px solid var(--mint);
	color: var(--ink-muted);
	font-style: italic;
}

.recipe-content strong,
.recipe-content b {
	font-weight: 700;
}

.recipe-content .ql-align-center {
	text-align: center;
}

.recipe-content .ql-align-right {
	text-align: right;
}

.recipe-content .ql-align-justify {
	text-align: justify;
}

.recipe-content .ql-indent-1 {
	padding-left: 3em;
}

.recipe-content .ql-indent-2 {
	padding-left: 6em;
}

.recipe-content .ql-ui {
	display: none;
}

/* --- share row ----------------------------------------------------------- */

.recipe-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s-3);
	margin-top: var(--s-6);
	padding-top: var(--s-5);
	border-top: 1px solid var(--line);
}

.recipe-share .eyebrow {
	margin-right: var(--s-1);
}