<section data-block="coffee:brew_guide" class="py-12 md:py-16 bg-background text-foreground{% if class %} {{ class }}{% endif %}">
	<div class="mx-auto max-w-3xl px-4">
		<div class="coffee-card p-6 md:p-8">
			{% if kicker %}<p class="coffee-hand text-2xl text-accent">{{ kicker }}</p>{% endif %}
			{% if method %}<h3 class="coffee-display text-3xl text-primary"><span class="coffee-doodle-underline">{{ method }}</span></h3>{% endif %}
			{% if intro %}<p class="coffee-body mt-3 text-muted-foreground">{{ intro }}</p>{% endif %}
			<div class="mt-6 flex flex-wrap gap-2">
				{% if ratio %}<span class="coffee-chip"><span class="coffee-hand text-base text-accent">Ratio</span> <span class="coffee-mono">{{ ratio }}</span></span>{% endif %}
				{% if grind %}<span class="coffee-chip"><span class="coffee-hand text-base text-accent">Grind</span> {{ grind }}</span>{% endif %}
				{% if water %}<span class="coffee-chip"><span class="coffee-hand text-base text-accent">Water</span> <span class="coffee-mono">{{ water }}</span></span>{% endif %}
				{% if temperature %}<span class="coffee-chip"><span class="coffee-hand text-base text-accent">Temp</span> <span class="coffee-mono">{{ temperature }}</span></span>{% endif %}
				{% if time %}<span class="coffee-chip"><span class="coffee-hand text-base text-accent">Time</span> <span class="coffee-mono">{{ time }}</span></span>{% endif %}
			</div>
			{% if steps %}
			<ol class="mt-8 space-y-5">
				{% for step in steps %}
				<li class="flex gap-4">
					<span class="coffee-stamp coffee-stamp-sm shrink-0">{{ forloop.Counter }}</span>
					<div class="pt-1">
						{% if step.title %}<p class="coffee-display text-lg text-primary">{{ step.title }}</p>{% endif %}
						{% if step.text %}<p class="coffee-body text-foreground">{{ step.text }}</p>{% endif %}
					</div>
				</li>
				{% endfor %}
			</ol>
			{% endif %}
		</div>
	</div>
</section>
