/* Recipe pages — generated by scripts/build_recipe_pages.mjs in the app repo.
   Edit it there, not here; this file is overwritten on every run.

   Built on the app's visual language rather than the site's default card:
   soft diffused shadows instead of borders, pale-green dividers, and the
   macro dot colours from RecipeModal.css. */

:root {
    /* The app's border colour is pale green; the site's is grey. Same variable
       name, different value — this one is scoped so recipe pages get the app's. */
    --recipe-divider: #e3ffde;
    --recipe-ink: #1b1e21;
    --recipe-muted: #5a6268;
    /* The brand green #81bc71 is 2.24:1 on white — far below the 4.5:1 WCAG AA
       needs for small text, and the cuisine label is small AND uppercase. This
       is that same green at 68% brightness, the lightest shade that passes
       (4.56:1). Anything nearer the brand colour fails. */
    --recipe-green: #58804d;
    --shadow-soft: 0 4px 20px rgba(27, 30, 33, .04);
    --shadow-card: 0 12px 32px rgba(27, 30, 33, .06);
    --shadow-lift: 0 20px 48px rgba(27, 30, 33, .09);
}

/* Layout ─────────────────────────────────────────────────────────────────── */

.recipe-page { max-width: 720px; margin: 2rem auto 5rem; padding: 0 5%; color: var(--recipe-ink); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    font-size: .85rem; color: var(--recipe-muted); margin-bottom: 1.25rem; }
.breadcrumbs a { color: var(--recipe-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--recipe-green); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--recipe-ink); font-weight: 500; }

/* Capped so the image cannot swallow the fold — it was 507px tall. */
.recipe-hero { width: 100%; height: auto; aspect-ratio: 16 / 10; max-height: 380px;
    object-fit: cover; border-radius: 24px; box-shadow: var(--shadow-card); display: block; }

.recipe-header { margin: 2rem 0 2.5rem; }
.recipe-cuisine { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .08em; color: var(--recipe-green); margin-bottom: .6rem; }
.recipe-header h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em;
    margin-bottom: .75rem; color: var(--recipe-ink); text-wrap: balance; }
.recipe-summary { font-size: 1.05rem; line-height: 1.65; color: var(--recipe-muted); max-width: 62ch; }

/* Stats and macros ───────────────────────────────────────────────────────── */

.recipe-stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.75rem;
    padding: 1.1rem 1.35rem; background: #fff; border-radius: 20px; box-shadow: var(--shadow-soft); }
.stat { display: inline-flex; align-items: center; gap: .5rem; font-size: .95rem; color: var(--recipe-muted); }
.stat strong { color: var(--recipe-ink); font-size: 1.1rem; font-weight: 700; }
.stat-icon { color: var(--recipe-green); flex-shrink: 0; }

.recipe-macros { display: flex; gap: .75rem; margin-top: .85rem; flex-wrap: wrap; }
.macro { flex: 1; min-width: 100px; background: #fff; border-radius: 20px;
    padding: .9rem 1.1rem; box-shadow: var(--shadow-soft); }
.macro-label-row { display: flex; align-items: center; gap: .4rem;
    font-size: .8rem; font-weight: 500; color: var(--recipe-muted); }
.macro-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.macro-dot--protein { background: #88d879; }
.macro-dot--carbs   { background: #f2e864; }
.macro-dot--fat     { background: #eaa0d9; }
.macro-value { display: block; margin-top: .2rem; font-size: 1.15rem; font-weight: 700; color: var(--recipe-ink); }

.recipe-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.recipe-tag { font-size: .78rem; font-weight: 500; padding: .35rem .8rem; border-radius: 9999px;
    background: var(--primary-light); color: #3d6b31; }

/* Ingredients and method ─────────────────────────────────────────────────── */

.recipe-section { margin-top: 2rem; background: #fff; border-radius: 24px;
    padding: 1.75rem; box-shadow: var(--shadow-soft); }
.recipe-section h2 { font-size: 1.3rem; letter-spacing: -.01em; margin-bottom: .35rem; text-align: left; }
.recipe-portion-note { font-size: .85rem; color: var(--recipe-muted); margin-bottom: 1rem; }

.recipe-ingredients { list-style: none; padding: 0; margin: 0; }
.recipe-ingredients li { display: flex; gap: 1rem; padding: .75rem 0;
    border-bottom: 1px solid var(--recipe-divider); }
.recipe-ingredients li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Sized to the content rather than a fixed column, so "2" does not leave a gulf. */
.ing-amount { flex: 0 0 auto; min-width: 4.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ing-name { flex: 1; color: var(--recipe-muted); }
.ing-name:first-child { color: var(--recipe-ink); }

.recipe-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.recipe-steps li { counter-increment: step; position: relative; padding-left: 2.75rem;
    margin-bottom: 1.35rem; line-height: 1.7; }
.recipe-steps li:last-child { margin-bottom: 0; }
/* Numbered chips, echoing the accent-coloured ::marker in the app. */
.recipe-steps li::before { content: counter(step); position: absolute; left: 0; top: -.1rem;
    display: flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 50%; background: var(--primary); color: var(--recipe-ink);
    font-size: .85rem; font-weight: 700; }

/* Related, CTA, listing ──────────────────────────────────────────────────── */

.recipe-related { margin-top: 3rem; }
.recipe-related h2 { font-size: 1.4rem; margin-bottom: 1.25rem; text-align: left; }

.recipe-cta { margin-top: 3rem; background: linear-gradient(135deg, #eeffeb 0%, #e3ffde 100%);
    border-radius: 28px; padding: 2.75rem 2rem; text-align: center; box-shadow: var(--shadow-soft); }
.recipe-cta h2 { font-size: 1.5rem; letter-spacing: -.01em; margin-bottom: .5rem; }
.recipe-cta p { color: var(--recipe-muted); line-height: 1.65; max-width: 44ch; margin: 0 auto 1.75rem; }

/* Filter sidebar ─────────────────────────────────────────────────────────── */

.recipe-layout { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 2rem; align-items: start; }

.recipe-filter { background: #fff; border-radius: 24px; padding: 1.5rem 1.35rem;
    box-shadow: var(--shadow-card); position: sticky; top: 1.5rem;
    max-height: calc(100vh - 3rem); overflow-y: auto; }
.recipe-filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.recipe-filter-head h2 { font-size: 1.15rem; margin: 0; text-align: left; }
.filter-clear { border: 0; background: none; padding: 0; font: inherit; font-size: .85rem;
    color: var(--recipe-green); text-decoration: underline; cursor: pointer; }

.facet-group { margin-bottom: 1.5rem; }
.facet-group:last-child { margin-bottom: 0; }
.facet-group h3 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--recipe-muted); margin: 0 0 .6rem; }

.facet-list { list-style: none; margin: 0; padding: 0; }
/* 31 cuisines would push everything else off the screen. */
.facet-list--scroll { max-height: 232px; overflow-y: auto; padding-right: .35rem; }

.facet { display: flex; align-items: center; gap: .6rem; padding: .38rem .3rem;
    border-radius: 10px; text-decoration: none; color: var(--recipe-ink); font-size: .92rem; }
.facet:hover { background: var(--primary-light); }
.facet-box { width: 17px; height: 17px; flex-shrink: 0; border-radius: 5px;
    border: 1.5px solid #cbd8c6; background: #fff; position: relative; }
.facet.is-on .facet-box { background: var(--primary); border-color: var(--primary); }
.facet.is-on .facet-box::after { content: ""; position: absolute; left: 5px; top: 1px;
    width: 4px; height: 9px; border: solid var(--recipe-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.facet-label { flex: 1; }
.facet-count { font-size: .8rem; color: var(--recipe-muted); font-variant-numeric: tabular-nums; }
.facet.is-on { font-weight: 600; }

.facet-range input[type=range] { width: 100%; accent-color: var(--primary-dark); }
.facet-range-value { font-size: .88rem; color: var(--recipe-muted); margin-top: .4rem; }
.facet-range-value strong { color: var(--recipe-ink); }

.result-count { font-size: .9rem; color: var(--recipe-muted); margin-bottom: 1rem; }
.no-results { grid-column: 1 / -1; padding: 2.5rem 1rem; text-align: center; color: var(--recipe-muted); }

/* Shown only on narrow screens, where the sidebar collapses. */
.filter-toggle { display: none; }

/* Wider than the site's 1200px --max-width, and only here. A 268px sidebar
   plus three legible cards does not fit in 1200px: it leaves 252px per card,
   barely more than nothing, and titles start clipping again. At 1400px the
   grid is 1004px and each card gets 318px.

   The padding is a clamp rather than 5% because percentage padding resolves
   against the containing block — the viewport — not against the 1400px box.
   At 5% the padding kept growing after the container had stopped, so a 1920px
   display ended up with a *narrower* grid (708px) than a 1280px laptop (772px).
   The clamp still yields ~20px on a phone, which is what 5% gave there. */
.recipe-index { max-width: 1400px; margin: 3rem auto 5rem; padding: 0 clamp(1.25rem, 4vw, 3rem); }
.recipe-index-header { text-align: center; margin-bottom: 2.5rem; }
.recipe-index-header h1 { font-size: clamp(2rem, 5vw, 2.8rem); letter-spacing: -.02em;
    margin-bottom: .5rem; text-wrap: balance; }
.recipe-index-header p { color: var(--recipe-muted); }

/* 260px floor puts three cards in the 1004px grid, two around 1024px, one on
   a phone. Also used by the related-recipes strip on a detail page, which sits
   in a 720px column and so lands on two. */
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }

/* Card — mirrors src/components/RecipeCard.css in the app.
   --shadow-card, not --shadow-soft: at 4% opacity over the page's green-tinted
   ground the card read as a shape cut out of the page rather than resting above
   it, while the filter sidebar beside it used --shadow-card and did look
   elevated. The two halves of the page were sitting on different planes. */
.recipe-card { display: flex; flex-direction: column; height: 100%; background: #fff;
    border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-card);
    text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) {
    .recipe-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
    .recipe-card:hover .recipe-image { transform: scale(1.05); }
}

/* A ratio, not a fixed height. 160px was reasonable when the card was 220px
   wide, but at 318px it becomes a 2:1 letterbox that slices the top and bottom
   off every plate. The sources are square, so 4:3 crops the least while still
   reading as a card rather than a tile. */
.recipe-img-container { position: relative; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; flex-shrink: 0; }
.recipe-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
/* Dark and frosted rather than white: a white pill on a white card had no
   hierarchy, and on a pale photograph its edge disappeared entirely. */
.recipe-badge-cuisine { position: absolute; top: 10px; left: 10px; background: rgba(20, 23, 20, .62);
    color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    padding: 4px 12px; border-radius: 9999px; font-size: .75rem; font-weight: 600; }

.recipe-content { padding: 1.05rem 1.15rem 1.15rem; flex: 1; display: flex; flex-direction: column; }
/* Both blocks reserve their full height whether or not the text fills it.
   Without that, the leftover space collected between the meta row and the
   bottom-pinned tags, so one card in a row looked half-empty. Reserved, every
   card in a row is the same height by construction. */
.recipe-card-title { font-size: 1.125rem; line-height: 1.3; margin: 0 0 .4rem; text-align: left;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Four lines. Summaries run 86-162 characters and the text column here is
   282px, so measured against the real corpus: 3 lines clips 329 of 450, while
   4 clips 3. Nor is the fourth line wasted space — 326 of 450 summaries use
   exactly four. Two lines, which is what this was, clipped all 450. */
.recipe-card-summary { font-size: .875rem; line-height: 1.45; color: var(--recipe-muted); margin: 0 0 .85rem;
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Reserved heights, and only where they buy something. Below 592px the grid is
   a single column, so there is no neighbour to line up with and reserving space
   is just dead air under every short title. Above it, reserving is what keeps
   the meta row and tags of adjacent cards on the same line — otherwise the
   slack collects mid-card and one card in a row looks half-empty. */
@media (min-width: 592px) {
    .recipe-card-title { min-height: calc(2 * 1.3em); }
    .recipe-card-summary { min-height: calc(4 * 1.45em); }
}

/* Time carries the weight; calories sit beside it. Across all 450 recipes
   calories span 610-890 and 89% fall between 700 and 850, so the number
   cannot help anyone choose — while cook time ranges 10-180 and is the thing
   the product is sold on. Equal billing overstated the weaker fact. */
.recipe-card-meta { display: flex; flex-wrap: wrap; gap: .85rem; align-items: baseline;
    margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--recipe-divider); }
.recipe-card-meta .meta-item { display: inline-flex; align-items: center; gap: 5px; }
.recipe-card-meta .meta-time { font-size: .95rem; font-weight: 600; color: var(--recipe-ink); }
.recipe-card-meta .meta-kcal { font-size: .82rem; color: var(--recipe-muted); }
.recipe-card-meta .stat-icon { color: var(--recipe-green); flex-shrink: 0; }

/* Tinted fill, matching .recipe-tag on the detail page. The old white pill with
   an rgba(155,229,137,.55) border composited to 1.25:1 against the card — below
   the 3:1 WCAG asks of a component boundary, and invisible in practice. The two
   pages also disagreed about the same component; now they don't. */
.recipe-dietary-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: .7rem; }
.dietary-tag { background: var(--primary-light); color: #3d6b31; font-size: .755rem; font-weight: 500;
    padding: 3px 10px; border-radius: 9999px; }
/* Filled neutral rather than outlined: a pale-green border on white would have
   repeated the 1.25:1 mistake this rule exists to fix. */
.dietary-tag--more { background: #eef1ed; color: var(--recipe-muted); }

.recipe-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 3rem; }
.recipe-pager a, .recipe-pager-current { display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 .7rem; border-radius: 9999px;
    font-weight: 600; text-decoration: none; }
.recipe-pager a { background: #fff; color: var(--recipe-ink); box-shadow: var(--shadow-soft); }
.recipe-pager a:hover { background: var(--primary-light); }
.recipe-pager-current { background: var(--primary); color: var(--recipe-ink); }

/* Keyboard focus — there was none. */
.recipe-card:focus-visible, .recipe-pager a:focus-visible,
.breadcrumbs a:focus-visible, .recipe-cta a:focus-visible {
    outline: 3px solid var(--recipe-green); outline-offset: 3px;
}

/* 940, not 900. Between 901 and 916px the sidebar still took its 268px while
   the grid was left with 529 — too narrow for two cards, so the row collapsed
   to a single 529px-wide card. Collapsing the sidebar slightly earlier removes
   that band: at 941px the grid is 566px and holds two. */
@media (max-width: 940px) {
    .recipe-layout { grid-template-columns: 1fr; gap: 1.25rem; }
    .recipe-filter { position: static; max-height: none; display: none; }
    .recipe-filter.is-open { display: block; }
    .filter-toggle { display: block; width: 100%; margin-bottom: 1rem; padding: .85rem 1rem;
        border: 0; border-radius: 9999px; background: #fff; box-shadow: var(--shadow-soft);
        font: inherit; font-weight: 600; color: var(--recipe-ink); cursor: pointer; }
    .filter-toggle[aria-expanded="true"] { background: var(--primary-light); }
}

@media (max-width: 600px) {
    .recipe-page { margin-top: 1rem; }
    .recipe-hero { aspect-ratio: 4 / 3; border-radius: 18px; }
    .recipe-section { padding: 1.35rem 1.15rem; border-radius: 20px; }
    .recipe-stats { gap: 1.1rem; padding: 1rem; }
    .ing-amount { min-width: 4rem; }
}

/* People print recipes. Drop everything that is not the recipe. */
@media print {
    .navbar, footer, .recipe-cta, .recipe-related, .breadcrumbs, .recipe-pager { display: none !important; }
    body { background: #fff; }
    .recipe-page { max-width: none; margin: 0; padding: 0; }
    .recipe-hero { max-height: 55mm; box-shadow: none; }
    .recipe-section { box-shadow: none; padding: 0; margin-top: 1.25rem; break-inside: avoid; }
    .recipe-stats, .macro { box-shadow: none; border: 1px solid #ddd; }
    .recipe-steps li { break-inside: avoid; }
    a[href]::after { content: ""; }
}