{
  "recipeContractVersion": 1,
  "recipes": [
    {
      "id": "editorial-hero",
      "label": "Editorial hero",
      "description": "Full-bleed image hero with restrained overlay copy and a primary action.",
      "roles": [
        "section",
        "media",
        "conversion"
      ],
      "performanceBudget": 14,
      "contentFields": [
        {
          "key": "hero.image",
          "label": "Hero image",
          "type": "image",
          "required": true
        },
        {
          "key": "hero.eyebrow",
          "label": "Eyebrow",
          "type": "text",
          "defaultValue": "Welcome home"
        },
        {
          "key": "hero.heading",
          "label": "Heading",
          "type": "text",
          "required": true
        },
        {
          "key": "hero.body",
          "label": "Body",
          "type": "text"
        },
        {
          "key": "hero.ctaLabel",
          "label": "Action label",
          "type": "text",
          "defaultValue": "Explore availability"
        },
        {
          "key": "hero.ctaUrl",
          "label": "Action link",
          "type": "url",
          "defaultValue": "/availability"
        }
      ],
      "tree": {
        "type": "BackgroundMedia",
        "props": {
          "image": {
            "$content": "hero.image"
          },
          "overlay": {
            "$token": "color.background"
          },
          "overlayOpacity": 0.82,
          "minHeight": "88vh",
          "contentPosition": "bottom-left"
        },
        "children": [
          {
            "type": "Container",
            "props": {
              "maxWidth": "wide",
              "paddingX": "2xl",
              "paddingY": "2xl"
            },
            "children": [
              {
                "type": "Container",
                "props": {
                  "display": "flex",
                  "direction": "vertical",
                  "gap": "md",
                  "align": "start",
                  "paddingX": "none",
                  "paddingY": "none",
                  "width": "auto",
                  "maxWidth": "none"
                },
                "children": [
                  {
                    "type": "Text",
                    "props": {
                      "content": {
                        "$content": "hero.eyebrow"
                      },
                      "variant": "overline"
                    }
                  },
                  {
                    "type": "Text",
                    "props": {
                      "content": {
                        "$content": "hero.heading"
                      },
                      "variant": "display"
                    }
                  },
                  {
                    "type": "Text",
                    "props": {
                      "content": {
                        "$content": "hero.body"
                      },
                      "variant": "body-lg"
                    }
                  },
                  {
                    "type": "Link",
                    "props": {
                      "content": {
                        "$content": "hero.ctaLabel"
                      },
                      "to": {
                        "$content": "hero.ctaUrl"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    {
      "id": "split-media-story",
      "label": "Split media story",
      "description": "Two-column image and narrative section that collapses safely on small screens.",
      "roles": [
        "section",
        "media",
        "content"
      ],
      "performanceBudget": 14,
      "contentFields": [
        {
          "key": "story.image",
          "label": "Story image",
          "type": "image",
          "required": true
        },
        {
          "key": "story.imageAlt",
          "label": "Image description",
          "type": "text",
          "required": true
        },
        {
          "key": "story.eyebrow",
          "label": "Eyebrow",
          "type": "text"
        },
        {
          "key": "story.heading",
          "label": "Heading",
          "type": "text",
          "required": true
        },
        {
          "key": "story.body",
          "label": "Body",
          "type": "text",
          "required": true
        },
        {
          "key": "story.ctaLabel",
          "label": "Action label",
          "type": "text",
          "defaultValue": "Learn more"
        },
        {
          "key": "story.ctaUrl",
          "label": "Action link",
          "type": "url",
          "defaultValue": "/availability"
        }
      ],
      "tree": {
        "type": "Container",
        "props": {
          "as": "section",
          "maxWidth": "wide",
          "paddingY": "2xl"
        },
        "children": [
          {
            "type": "Grid",
            "props": {
              "columns": 2,
              "gap": "xl",
              "responsiveGap": {
                "sm": "1.5rem",
                "lg": "4rem"
              }
            },
            "children": [
              {
                "type": "Image",
                "props": {
                  "src": {
                    "$content": "story.image"
                  },
                  "alt": {
                    "$content": "story.imageAlt"
                  }
                }
              },
              {
                "type": "Container",
                "props": {
                  "display": "flex",
                  "direction": "vertical",
                  "gap": "md",
                  "justify": "center",
                  "paddingX": "none",
                  "paddingY": "none",
                  "width": "auto",
                  "maxWidth": "none"
                },
                "children": [
                  {
                    "type": "Text",
                    "props": {
                      "content": {
                        "$content": "story.eyebrow"
                      },
                      "variant": "overline"
                    }
                  },
                  {
                    "type": "Text",
                    "props": {
                      "content": {
                        "$content": "story.heading"
                      },
                      "variant": "h2"
                    }
                  },
                  {
                    "type": "Text",
                    "props": {
                      "content": {
                        "$content": "story.body"
                      },
                      "variant": "body-lg"
                    }
                  },
                  {
                    "type": "Link",
                    "props": {
                      "content": {
                        "$content": "story.ctaLabel"
                      },
                      "to": {
                        "$content": "story.ctaUrl"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    {
      "id": "sticky-media-story",
      "label": "Sticky media story",
      "description": "Sticky visual with a scrolling narrative column and reduced-motion-safe parallax.",
      "roles": [
        "section",
        "media",
        "motion",
        "content"
      ],
      "performanceBudget": 20,
      "contentFields": [
        {
          "key": "sticky.image",
          "label": "Sticky image",
          "type": "image",
          "required": true
        },
        {
          "key": "sticky.imageAlt",
          "label": "Image description",
          "type": "text",
          "required": true
        },
        {
          "key": "sticky.heading",
          "label": "Heading",
          "type": "text",
          "required": true
        },
        {
          "key": "sticky.bodyOne",
          "label": "First paragraph",
          "type": "text",
          "required": true
        },
        {
          "key": "sticky.bodyTwo",
          "label": "Second paragraph",
          "type": "text"
        }
      ],
      "tree": {
        "type": "Container",
        "props": {
          "as": "section",
          "maxWidth": "wide",
          "paddingY": "2xl"
        },
        "children": [
          {
            "type": "Grid",
            "props": {
              "columns": 2,
              "gap": "xl"
            },
            "children": [
              {
                "type": "StickyFrame",
                "props": {
                  "top": "6rem",
                  "disableOnMobile": true
                },
                "children": [
                  {
                    "type": "Container",
                    "props": {
                      "maxWidth": "none",
                      "paddingX": "none",
                      "paddingY": "none",
                      "overflow": "hidden"
                    },
                    "children": [
                      {
                        "type": "Parallax",
                        "props": {
                          "axis": "y",
                          "direction": "reverse",
                          "distance": 36,
                          "scale": 1.04
                        },
                        "children": [
                          {
                            "type": "Image",
                            "props": {
                              "src": {
                                "$content": "sticky.image"
                              },
                              "alt": {
                                "$content": "sticky.imageAlt"
                              }
                            }
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                "type": "Container",
                "props": {
                  "display": "flex",
                  "direction": "vertical",
                  "gap": "xl",
                  "paddingX": "none",
                  "paddingY": "none",
                  "width": "auto",
                  "maxWidth": "none"
                },
                "children": [
                  {
                    "type": "Text",
                    "props": {
                      "content": {
                        "$content": "sticky.heading"
                      },
                      "variant": "h2"
                    }
                  },
                  {
                    "type": "Text",
                    "props": {
                      "content": {
                        "$content": "sticky.bodyOne"
                      },
                      "variant": "body-lg"
                    }
                  },
                  {
                    "type": "Text",
                    "props": {
                      "content": {
                        "$content": "sticky.bodyTwo"
                      },
                      "variant": "body-lg"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    },
    {
      "id": "availability-conversion",
      "label": "Availability and conversion",
      "description": "Property-scoped availability explorer followed by a configurable lead form.",
      "roles": [
        "section",
        "data",
        "conversion"
      ],
      "requiredContexts": [
        "property"
      ],
      "performanceBudget": 18,
      "contentFields": [
        {
          "key": "availability.heading",
          "label": "Heading",
          "type": "text",
          "defaultValue": "Find your home"
        },
        {
          "key": "availability.body",
          "label": "Body",
          "type": "text"
        },
        {
          "key": "availability.formHeading",
          "label": "Form heading",
          "type": "text",
          "defaultValue": "Stay in the loop"
        }
      ],
      "tree": {
        "type": "Container",
        "props": {
          "as": "section",
          "maxWidth": "wide",
          "paddingY": "2xl"
        },
        "children": [
          {
            "type": "Container",
            "props": {
              "display": "flex",
              "direction": "vertical",
              "gap": "xl",
              "paddingX": "none",
              "paddingY": "none",
              "width": "auto",
              "maxWidth": "none"
            },
            "children": [
              {
                "type": "Text",
                "props": {
                  "content": {
                    "$content": "availability.heading"
                  },
                  "variant": "h2"
                }
              },
              {
                "type": "Text",
                "props": {
                  "content": {
                    "$content": "availability.body"
                  },
                  "variant": "body-lg"
                }
              },
              {
                "type": "UnitExplorer",
                "props": {
                  "layout": "grid",
                  "showFilters": true,
                  "showSort": true
                }
              },
              {
                "type": "Text",
                "props": {
                  "content": {
                    "$content": "availability.formHeading"
                  },
                  "variant": "h3"
                }
              },
              {
                "type": "ContactForm",
                "props": {
                  "source": "studio-availability",
                  "layout": "grid",
                  "columns": 2
                }
              }
            ]
          }
        ]
      }
    },
    {
      "id": "specials-banner-sticky-navigation",
      "label": "Specials banner above sticky navigation",
      "description": "Shared site layout with a dismissible specials banner above sticky navigation, preserving navigation that overlays page content.",
      "roles": [
        "layout",
        "navigation",
        "conversion"
      ],
      "requiredContexts": [
        "property"
      ],
      "guidance": [
        "Apply this composition to the shared site layout used by the affected routes. Inspect the existing layout, page Slot and referenced symbols before editing; the tree is a structural template, not a replacement site.",
        "Reuse existing promotion, Nav, Slot, page and footer nodes with their IDs, bindings, content and order intact. Preserve promotion mode, offer data, CTA, frequency and dismissal settings, and navigation links, branding, responsive settings and scroll styles. Change only the required layout props and parent relationships; create only missing wrappers or a requested banner.",
        "Place SpecialPromotion with presentation=banner before the navigation/content region in normal flow. The template uses automatic specials and requires an existing property context or propertyId binding. Keep an existing manual promotion manual; never invent an offer or remove its bindings.",
        "For overlay navigation, use one Container with display=grid, overlapChildren=true and align=start. Its two direct children are Nav with overlay=true, sticky=true and positioning=layout, and one content Container holding the existing page Slot followed by every footer node. The content layer must span the whole page so the navigation remains sticky through the footer.",
        "Use width=full, maxWidth=none, paddingX=none and paddingY=none on the outer, grid and content wrappers, with no gap. Leave their height content-driven and overflow visible; scrolling or clipping ancestors can constrain sticky positioning. Nav positioning=layout supplies top alignment without a custom class.",
        "For ordinary non-overlay navigation, keep normal sequential flow: banner, sticky Nav, page Slot and footer under a common full-page parent. Keep overlay=false and do not enable overlapping children solely to place a banner above the Nav.",
        "Preserve authored hero clearance and navigation top/scrolled contrast. Do not add fixed banner-height offsets: the banner can wrap on mobile, load late, have no active offer, or be dismissed, and normal flow must determine the navigation's starting position.",
        "Verify affected routes at desktop and mobile widths: banner above Nav at the top, Nav sticky at the viewport top while scrolling through the footer, readable scrolled styles, working mobile menu, and no empty banner gap after dismissal or an empty specials result. Test dismissal in an interactive preview where editor selection does not intercept it."
      ],
      "performanceBudget": 14,
      "contentFields": [],
      "tree": {
        "type": "Container",
        "props": {
          "display": "flex",
          "direction": "vertical",
          "gap": "none",
          "width": "full",
          "maxWidth": "none",
          "paddingX": "none",
          "paddingY": "none"
        },
        "children": [
          {
            "type": "SpecialPromotion",
            "props": {
              "mode": "auto",
              "presentation": "banner"
            }
          },
          {
            "type": "Container",
            "props": {
              "display": "grid",
              "overlapChildren": true,
              "align": "start",
              "gap": "none",
              "width": "full",
              "maxWidth": "none",
              "paddingX": "none",
              "paddingY": "none"
            },
            "children": [
              {
                "type": "Nav",
                "props": {
                  "overlay": true,
                  "sticky": true,
                  "positioning": "layout"
                }
              },
              {
                "type": "Container",
                "props": {
                  "width": "full",
                  "maxWidth": "none",
                  "paddingX": "none",
                  "paddingY": "none"
                },
                "children": [
                  {
                    "type": "Slot",
                    "props": {}
                  },
                  {
                    "type": "Container",
                    "props": {
                      "as": "footer",
                      "width": "full",
                      "maxWidth": "none",
                      "paddingX": "none",
                      "paddingY": "none"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  ]
}