/* Recipe archive: [jec-recipe-archive]. Uses the theme's colour tokens, with fallbacks. */
.jra { margin: 1.5rem 0 2.5rem; }
.jra a { text-decoration: none; }
.jra-form { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1rem; align-items: center; }
.jra-form .jra-q { flex: 1 1 260px; min-width: 0; padding: .65rem .8rem; border: 1px solid var(--jec-line, #e7e2d6); border-radius: 8px; font: inherit; background: var(--jec-bg-elevated, #fff); color: var(--jec-ink, #1f2320); }
.jra-form select { padding: .6rem .7rem; border: 1px solid var(--jec-line, #e7e2d6); border-radius: 8px; font: inherit; background: var(--jec-bg-elevated, #fff); color: var(--jec-ink, #1f2320); max-width: 100%; }
.jra-go { padding: .65rem 1.1rem; border: 0; border-radius: 8px; background: var(--jec-accent, #3d4f66); color: var(--jec-accent-ink, #f4f6f8); font: inherit; cursor: pointer; }
.jra-reset { color: var(--jec-ink-soft, #6b7268); font-size: .9rem; }
.jra-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.jra-chips a { padding: .3rem .7rem; border: 1px solid var(--jec-line, #e7e2d6); border-radius: 999px; background: var(--jec-bg-elevated, #fff); color: var(--jec-ink, #1f2320); font-size: .9rem; }
.jra-chips a span { color: var(--jec-ink-soft, #6b7268); font-size: .8rem; margin-left: .15rem; }
.jra-chips a.on, .jra-chips a:hover { background: var(--jec-accent, #3d4f66); border-color: var(--jec-accent, #3d4f66); color: var(--jec-accent-ink, #f4f6f8); }
.jra-chips a.on span, .jra-chips a:hover span { color: inherit; opacity: .8; }
.jra-count { color: var(--jec-ink-soft, #6b7268); margin: 0 0 1rem; }
.jra-empty { padding: 2rem 0; }
.jra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.jra-card { display: flex; flex-direction: column; background: var(--jec-bg-elevated, #fff); border: 1px solid var(--jec-line, #e7e2d6); border-radius: 10px; overflow: hidden; }
.jra-img { display: block; aspect-ratio: 4 / 3; background: var(--jec-line, #e7e2d6); }
.jra-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jra-body { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.jra-title { font-family: var(--jec-font-display, Georgia, serif); font-weight: 700; font-size: 1.05rem; line-height: 1.3; color: var(--jec-ink, #1f2320); }
.jra-title:hover { color: var(--jec-accent, #3d4f66); text-decoration: underline; }
.jra-meta { color: var(--jec-ink-soft, #6b7268); font-size: .85rem; }
.jra-tags { margin-top: auto; padding-top: .3rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.jra-tags a { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--jec-bg, #fbf9f4); border: 1px solid var(--jec-line, #e7e2d6); color: var(--jec-ink-soft, #6b7268); }
.jra-tags a:hover { color: var(--jec-accent, #3d4f66); border-color: var(--jec-accent, #3d4f66); }
.jra-pages { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin: 1.8rem 0 1rem; align-items: center; }
.jra-pages a { padding: .35rem .7rem; border: 1px solid var(--jec-line, #e7e2d6); border-radius: 6px; background: var(--jec-bg-elevated, #fff); color: var(--jec-ink, #1f2320); }
.jra-pages a.on { background: var(--jec-accent, #3d4f66); border-color: var(--jec-accent, #3d4f66); color: var(--jec-accent-ink, #f4f6f8); }
.jra-note { color: var(--jec-ink-soft, #6b7268); font-size: .85rem; margin-top: 1.5rem; }
@media (max-width: 520px) { .jra-grid { grid-template-columns: 1fr 1fr; gap: .7rem; } .jra-title { font-size: .95rem; } .jra-form select { flex: 1 1 45%; } }
.jra-img.jra-noimg { background: linear-gradient(135deg, var(--jec-line, #e7e2d6), var(--jec-bg, #fbf9f4)); }

/* Wide layout: the theme sets #primary to a fixed 430-750px for its content-plus-sidebar pages. */
body.jra-page #primary { width: 100%; max-width: none; float: none; }
body.jra-page #content.site-content { display: block; }
body.jra-page .jra-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem; }
body.jra-page .jra-form { max-width: 760px; }
@media (min-width: 1100px) { body.jra-page .jra-grid { grid-template-columns: repeat(4, 1fr); } }