/* PantryOS recipe pages: thin layer over styles.css + blog.css.
   Only recipe-specific layout lives here: meta chips, ingredient and step
   lists, nutrition box, variant list. Everything else reuses the shared
   sheets (nav, footer, buttons, post-card, badge, crumbs, prose, article-cta,
   related). Palette: navy #0A1F44, cream #F8F9FB, blue #93B5FF. */

/* Lead paragraph under the recipe title. */
.recipe-lead { max-width: 640px; margin: 14px auto 0; color: #4a5568; font-size: 18px; line-height: 1.6; }

/* Meta chips: przygotowanie, gotowanie, razem, porcje. Row that wraps on mobile. */
.recipe-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 820px; margin: 24px auto 0; padding: 0; list-style: none; }
.recipe-meta__chip { display: inline-flex; align-items: center; gap: 6px; background: #eef2fb; color: var(--navy); border: 1px solid var(--blue-line); border-radius: 999px; padding: 7px 14px; font-size: 14px; line-height: 1; }
.recipe-meta__chip strong { font-weight: 700; }

/* Content sections: Skladniki / Przygotowanie / Warianty. */
.recipe-section { max-width: 820px; margin: 40px auto 0; }
.recipe-section > h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -0.02em; margin: 0 0 16px; color: var(--ink); }
.recipe-section > p { color: #2c3852; font-size: 17px; line-height: 1.7; margin: 0 0 16px; }

/* Ingredients: clean bulleted list, comfortable line height. */
.recipe-ingredients { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.recipe-ingredients li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.55; color: #2c3852; }
.recipe-ingredients li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

/* Steps: numbered, readable spacing. */
.recipe-steps { margin: 0; padding-left: 28px; list-style: decimal; }
.recipe-steps li { margin: 0 0 14px; padding-left: 6px; font-size: 17px; line-height: 1.7; color: #2c3852; }
.recipe-steps li::marker { color: var(--blue-ink); font-weight: 700; }

/* Variants: co czym zastapic. Dash marker to read as swaps, not a checklist. */
.recipe-variants { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.recipe-variants li { position: relative; padding-left: 26px; font-size: 17px; line-height: 1.55; color: #2c3852; }
.recipe-variants li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 12px; height: 2px; border-radius: 2px; background: var(--blue-ink); }

/* Nutrition: small muted box for orientacyjne values. */
.recipe-nutrition { max-width: 820px; margin: 32px auto 0; background: var(--card); border: 1px solid var(--border); border-left: 4px solid #93B5FF; border-radius: 10px; padding: 14px 18px; font-size: 14px; line-height: 1.6; color: #4a5568; }
.recipe-nutrition strong { color: var(--navy); font-weight: 700; }