/* Recipe pages (/recipes/) and inline photos in blog posts. Builds on blog.css tokens. */

.recipe-top { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; align-items: start; margin: 8px 0 28px; }
.recipe-photo { margin: 0; }
.recipe-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; background: var(--coral-tint); }
.recipe-photo figcaption, .inline-photo figcaption { font-size: 11px; color: var(--gray-1); margin-top: 8px; }
.recipe-facts { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.recipe-facts li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--border); margin: 0; }
.recipe-facts li:first-child { border-top: 0; }
.recipe-facts span { color: var(--gray-1); font-weight: 600; }
.recipe-ingredients li, .recipe-steps li { margin-bottom: 8px; }
.recipe-steps { padding-left: 1.3em; }
.recipe-card .card-media { aspect-ratio: 4 / 3; }
.recipes-index { padding: 8px 0 48px; }
.recipes-index .key-answer { max-width: 760px; margin: 0 auto 8px; }
.recipe-group { margin-top: 36px; }
.recipe-group h2 { margin-bottom: 18px; }
.recipes-index .app-cta, .recipes-index .disclaimer, .recipes-more { max-width: 760px; margin-left: auto; margin-right: auto; }
.recipes-more { margin-top: 24px; color: var(--ink-2); }

/* inline illustrative photos inside blog posts */
.inline-photo { margin: 28px auto; max-width: 520px; }
.inline-photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; background: var(--coral-tint); }
.inline-photo.app-shot { max-width: 300px; }
.inline-photo.app-shot img { aspect-ratio: auto; border-radius: 26px; box-shadow: var(--shadow-md); }
.inline-photo figcaption a { color: var(--coral-dark); font-weight: 600; }

@media (max-width: 760px) {
  .recipe-top { grid-template-columns: 1fr; }
  .recipe-photo { max-width: 420px; }
  .inline-photo { margin: 22px auto; }
}

/* Sources box on health posts (seo/apply_seo.py) */
.article-sources { margin: 36px 0 8px; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--cream); }
.article-sources h2 { font-size: 1.15rem; margin: 0 0 8px; }
.article-sources p { font-size: .95rem; color: var(--ink-2); margin-bottom: 8px; }
.article-sources ul { margin: 0 0 8px 1.1em; }
.article-sources li { margin-bottom: 4px; font-size: .95rem; }
.article-sources .article-updated { font-size: .85rem; color: var(--gray-1); margin: 0; }