/* Réttirnir. Its own stylesheet rather than base.css, because this is one
   page's layout and not shared chrome. Two things live here: the opening band
   (parts/nutrition.php) and the recipe grid under it. */

/* ---- the opening band: what the food is ---------------------------- */
.nutrition{padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,64px)}
.nutri-band{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:860px){.nutri-band{grid-template-columns:1fr;gap:26px;align-items:start}}
.nutri-lead h1{margin:14px 0 14px;max-width:12em}
.nutri-lead p{color:var(--ink-soft);font-size:1rem;line-height:1.65;margin:0 0 18px;max-width:36ch}
/* The shape of every recipe in one line, where a table of figures used to be.
   What is actually in one recipe is on that recipe's card. */
.nutri-line{font-weight:600;font-size:.98rem;color:var(--ink)!important;margin:0!important}

.nutri-side{display:flex;flex-direction:column;align-items:flex-start}
/* The picture keeps its own shape: it is a flat lay, and the ingredients around
   the bowl are the point, so a fixed height would crop them away. The empty
   slot borrows a 3:2 frame so the gap looks like the picture. */
.nutri-photo{width:100%;border-radius:var(--radius);overflow:hidden}
.nutri-photo .nd-photo{width:100%;height:auto;display:block}
.nutri-photo .photo-slot{width:100%;aspect-ratio:3/2;min-height:0}
/* Four claims, directly under the picture, with nothing written beneath them. */
.nut-chips{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 0;padding:0;list-style:none}
.nut-chips li{background:#fff;border-radius:999px;font-size:.8rem;font-weight:600;padding:8px 15px;box-shadow:var(--shadow-soft);list-style:none;margin:0}
.nutri-cta{margin-top:22px}

/* ---- the recipes, as one grid -------------------------------------- */
.rettir-list{padding:clamp(48px,6vw,84px) 0}
.rettir-list .section-head{margin-bottom:clamp(24px,3vw,36px)}
.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
@media (max-width:1020px){.recipe-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.recipe-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}
.recipe{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.recipe:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.pack-window{position:relative;aspect-ratio:1/0.86;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;background:linear-gradient(180deg,var(--icy),#f2feff)}
.recipe[data-flavor="turkey"] .pack-window{background:linear-gradient(180deg,var(--yellow),#fff8e6)}
.recipe[data-flavor="fish"] .pack-window{background:linear-gradient(180deg,var(--pink),#fff3f6)}
.pack-window .pack{width:56%;transform:translateY(6%);filter:drop-shadow(0 22px 26px rgba(26,31,30,.18));transition:transform .9s var(--ease)}
.recipe:hover .pack-window .pack{transform:translateY(4%) scale(1.05)}
.pack-window .pack-photo{width:86%;height:auto;max-height:100%;object-fit:contain;border-radius:14px}
.recipe-badge{z-index:2;position:absolute;top:18px;left:18px;background:#fff;border-radius:999px;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:7px 14px;box-shadow:0 4px 12px rgba(26,31,30,.1)}
.recipe-badge.soon{background:rgba(255,255,255,.75)}
/* The one you can buy pops: yellow, the site's action colour. */
.recipe-badge:not(.soon){background:var(--yellow)}
/* Coming-soon packs used to be desaturated and faded; the photo is the product, it stays as shot. */
.recipe.is-soon .recipe-badge.soon{background:var(--oat)}
.recipe-body{padding:24px 24px 22px;display:flex;flex-direction:column;flex:1}
.recipe-body h3{font-size:1.3rem;font-weight:600;margin:0}
/* The ingredients, no percentages. Everything declared opens in the dialog. */
.recipe-body .r-sub{font-size:.88rem;line-height:1.55;color:var(--ink-soft);margin:8px 0 16px}
/* The dialog opener sits at the foot of the card, so a short list and a long
   one still line their buttons up across the row. */
.recipe-body .nd-ing-open{margin-top:auto}