/* Recipe detail (recipes.html RecipePopup body), used in the hub popup and on the recipe page.
   Breakpoint: useMobile(900). */
.cc-recipe{display:flex;flex-direction:row;align-items:stretch;gap:60px;color:#000}
.cc-recipe__media{flex:0 0 389px;display:flex;align-items:flex-end;overflow:hidden;min-height:320px}
.cc-recipe__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.cc-recipe__ph{width:100%;height:100%;min-height:320px;background:#F2EDBF;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center}
.cc-recipe__ph span{font-family:var(--font-mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#9a935a}
.cc-recipe__text{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:40px}
.cc-recipe__head{display:flex;flex-direction:column;gap:10px}
.cc-recipe__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:32px;line-height:1.02;letter-spacing:-1.6px;text-transform:uppercase;color:#000}
.cc-recipe__best,.cc-recipe__meta{margin:0;font-family:var(--font-mono);font-weight:400;font-size:16px;line-height:1.3;color:#000}
.cc-recipe__best a:hover{color:inherit;text-decoration:underline;text-underline-offset:3px}
.cc-recipe__meta{font-size:14px;letter-spacing:.04em}
.cc-recipe__ingredients,.cc-recipe__steps{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:14px}
.cc-recipe__ingredients{list-style:disc;gap:8px}
.cc-recipe__ingredients li,.cc-recipe__steps li,.cc-recipe__steps--plain{font-family:var(--font-display);font-weight:400;font-size:16px;line-height:1.3;color:#000;text-wrap:pretty}
.cc-recipe__steps--plain{padding-left:0}
.cc-recipe__note{opacity:.7}
@media (max-width:900px){
  .cc-recipe{flex-direction:column;gap:24px}
  .cc-recipe__media{flex:0 0 auto;height:clamp(200px,52vw,300px);min-height:0}
  .cc-recipe__ph{min-height:0}
  .cc-recipe__text{gap:28px}
  .cc-recipe__title{font-size:clamp(24px,7vw,32px)}
  .cc-recipe__ingredients li,.cc-recipe__steps li,.cc-recipe__steps--plain{font-size:14px}
}

/* Recipe page (single-recipes.php): the popup card, standalone on amber */
.cc-recipe-page{padding:clamp(36px,5vw,84px) 0 120px}
.cc-recipe-page__card{position:relative;background:var(--cream);max-width:925px;margin:0 auto;padding:48px 40px}
.cc-recipe-page__back{position:absolute;top:20px;right:20px;z-index:2;background:var(--amber);color:#000;font-family:var(--font-mono);font-weight:500;font-size:14px;letter-spacing:1.4px;text-transform:uppercase;padding:7px 10px;line-height:1}
.cc-recipe-page__back:hover{color:#000}
@media (max-width:900px){
  .cc-recipe-page{padding:24px 0 88px}
  .cc-recipe-page__card{padding:40px 16px}
  .cc-recipe-page__back{top:12px;right:12px}
}
