/* ===================================================================
   Recipe single (design: recipe-single.html).
   No sidebar: single flowing column, masthead in two split rows,
   ingredients/steps split (blocks/recipe/style.css), nutrition, related.
   =================================================================== */

.recipe-page{max-width:1080px; margin:0 auto; width:100%;}

/* ---- masthead: 2 stacked rows, each split left/right ---- */
.recipe-masthead{display:flex; flex-direction:column; gap:40px; margin-bottom:44px;}
.masthead-row{display:grid; grid-template-columns:363px 1fr; gap:64px;}
.masthead-row.row-1{align-items:center;}
.masthead-row.row-2{align-items:start;}
.masthead-row.no-hero,.masthead-row.no-meta{grid-template-columns:1fr;}
.masthead-row.no-meta .masthead-desc{max-width:70ch;}

.recipe-byline{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-family:var(--font-mono); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.55; margin-bottom:14px;}
.recipe-byline .dot{opacity:.5;}
.recipe-byline a:hover{text-decoration:underline;}
.masthead-title h1{font-family:var(--font-display); font-size:44px; font-weight:700; line-height:1.06; letter-spacing:-.01em; margin-bottom:14px; overflow-wrap:break-word;}
.recipe-subtitle{font-size:17px; line-height:1.5; opacity:.7; margin:0 0 14px;}
.recipe-rating{display:inline-flex; align-items:center; gap:8px; margin-bottom:0;}
.recipe-rating .stars{color:var(--gold-deep); font-size:15px; letter-spacing:1px;}
.recipe-rating .count{font-family:var(--font-mono); font-size:11px; opacity:.55;}
.recipe-rating:hover .count{opacity:1; text-decoration:underline;}
.recipe-jump{margin-top:22px; --btn-shadow:var(--gold);}

/* ---- hero photo ---- */
.recipe-hero{position:relative; aspect-ratio:3/2; overflow:hidden; border:1.5px solid var(--ink); box-shadow:10px 10px 0 var(--gold); margin:0;}
.recipe-hero img{width:100%; height:100%; object-fit:cover; display:block;}
.recipe-hero .credit{position:absolute; right:0; bottom:0; background:var(--ink); color:var(--cream); font-family:var(--font-mono); font-size:10px; font-weight:600; padding:7px 12px; margin:0; opacity:1; letter-spacing:0;}

/* ---- masthead description ---- */
.masthead-desc{font-size:17px; line-height:1.7; opacity:.8;}
.masthead-desc p{margin-bottom:16px;}
.masthead-desc p:last-child{margin-bottom:0;}
.masthead-desc a{text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:3px;}

/* ---- content flow: readable measure, recipe card & wide media go wide ---- */
.recipe-content{margin-bottom:52px; border-top:1px solid var(--line-soft); padding-top:44px;}
.recipe-content + .recipe-content,.mg-recipe + .recipe-content{border-top:none; padding-top:0;}
.recipe-content > :not(.mg-recipe):not(.alignwide):not(.alignfull):not(.photo-break):not(.wp-block-image):not(.recipe-video-sec){max-width:760px; margin-left:auto; margin-right:auto;}
.recipe-content > .wp-block-image img{width:100%; height:auto;}
.recipe-content > .mg-recipe.is-compact{border-top:none;}
.recipe-page > .mg-recipe{margin:0 0 52px;}
.recipe-content .recipe-video-sec{margin-top:52px;}
.post-signature{font-style:italic;}

/* ---- nutrition facts ---- */
.nutrition{border:1.5px solid var(--ink); margin-bottom:44px; background:var(--paper);}
.nutrition h2{font-family:var(--font-mono); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:14px 20px; border-bottom:1.5px solid var(--ink); margin:0;}
.nutrition h2 .per{opacity:.5; text-transform:none; font-weight:500;}
.nutrition-grid{display:grid; grid-template-columns:repeat(4,1fr); margin:0;}
.nutrition-grid .nut{display:flex; flex-direction:column-reverse; justify-content:flex-end; text-align:center; padding:16px 8px; border-left:1px solid var(--line-soft); border-top:1px solid var(--line-soft);}
.nutrition-grid .nut:nth-child(4n+1){border-left:none;}
.nutrition-grid .nut:nth-child(-n+4){border-top:none;}
.nutrition-grid .nut .v{display:block; font-family:var(--font-display); font-weight:700; font-size:18px; margin:0;}
.nutrition-grid .nut .k{display:block; font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.03em; opacity:.55; margin-top:5px;}
.nutrition .foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 18px; font-family:var(--font-mono); font-size:10px; padding:10px 20px; border-top:1px solid var(--line-soft);}
.nutrition .foot .note{opacity:.55; margin-right:auto;}
.nutrition .nutri-logo img{max-height:36px; width:auto; display:block;}

/* ---- related recipes: photo tiles ---- */
.recipe-related{border-top:2px solid var(--gold); padding-top:28px; margin-top:0;}
.recipe-related .sec-head{margin-bottom:26px;}
.recipe-related .recipes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px;}
.recipe-related .recipe{display:block;}
.recipe-related .recipe .img-wrap{display:block; aspect-ratio:4/5; overflow:hidden; position:relative; margin-bottom:14px; border:1.5px solid var(--ink);}
.recipe-related .recipe img{width:100%; height:100%; object-fit:cover;}
.recipe-related .recipe .fan-time{position:absolute; left:0; bottom:0; background:var(--ink); color:var(--cream); font-family:var(--font-mono); font-size:9.5px; font-weight:600; padding:6px 10px;}
.recipe-related .recipe .eyebrow{display:block; color:var(--green);}
.recipe-related .recipe .recipe-title{font-family:var(--font-display); font-size:18px; font-weight:700; line-height:1.28; margin-top:10px;}

@media (max-width:1080px){
  .masthead-row{grid-template-columns:1fr; gap:22px;}
  .masthead-row.row-1{display:flex; flex-direction:column-reverse; align-items:stretch;}
  .recipe-hero{aspect-ratio:16/10; box-shadow:6px 6px 0 var(--gold);}
  .recipe-related .recipes-grid{grid-template-columns:repeat(3,1fr); gap:20px;}
}

@media (max-width:640px){
  .masthead-title h1{font-size:29px;}
  .recipe-hero{aspect-ratio:4/3;}
  .masthead-desc{font-size:15.5px;}
  .recipe-content{padding-top:32px;}
  .recipe-related .recipes-grid{grid-template-columns:repeat(2,1fr); gap:18px;}
  .recipe-related .recipes-grid > :nth-child(3){display:none;}
  .nutrition-grid{grid-template-columns:repeat(2,1fr);}
  .nutrition-grid .nut:nth-child(4n+1){border-left:1px solid var(--line-soft);}
  .nutrition-grid .nut:nth-child(-n+4){border-top:1px solid var(--line-soft);}
  .nutrition-grid .nut:nth-child(2n+1){border-left:none;}
  .nutrition-grid .nut:nth-child(-n+2){border-top:none;}
}