/* ==========================================================================
   Single Recipe template — ported from mockup 05.
   Only styles NOT already in main.css (buttons, tags, stars, callouts, FAQ,
   grids, cards, aff-block, nutri-card, breadcrumb, byline etc. are global).
   ========================================================================== */

/* ----- Full-bleed hero (LCP) ----- */
.recipe-hero{position:relative; width:100%; aspect-ratio:21/9; max-height:520px; overflow:hidden; background:linear-gradient(135deg,var(--forest),var(--olive) 60%,#B7C08A); display:flex; align-items:center; justify-content:center;}
.recipe-hero img{width:100%; height:100%; object-fit:cover;}
.recipe-hero .hero-sprig{width:70px; height:70px; stroke:rgba(255,253,248,.85); stroke-width:1;}

/* ----- Narrow article column (mockup wrap is 820px vs global 1180px) ----- */
.recipe-wrap{max-width:820px; margin:0 auto; padding:0 24px;}
.recipe-wrap > .breadcrumb{padding:18px 0 16px;}

/* ----- Head ----- */
.rec-head h1{font-size:34px; margin:10px 0 14px;}
.headnote{font-size:16px; color:var(--bark-soft); line-height:1.65; margin-bottom:20px;}
.jump-row{margin-bottom:28px;}

/* ----- Summary card ----- */
.summary-card{background:var(--paper); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--shadow-soft); margin-bottom:32px; scroll-margin-top:90px;}
.summary-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:16px;}
.summary-card .tag-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px;}
.time-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; border-top:1px solid var(--border); padding-top:16px;}
.time-item .l{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--bark-soft); font-weight:700; margin-bottom:3px;}
.time-item .v{font-size:15px; font-weight:700; color:var(--forest-deep);}

/* ----- Recipe sections ----- */
section.rec-sec{margin-bottom:34px; scroll-margin-top:90px;}
.rec-sec h2{font-size:24px; margin-bottom:14px;}

/* ----- Ingredients: header row + serving multiplier ----- */
.ing-head{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
.ing-head h2{margin-bottom:0;}
.serv-scale{display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; background:var(--paper); box-shadow:var(--shadow-soft);}
.serv-scale button{border:none; background:none; font-family:var(--font-body); font-weight:700; font-size:13px; padding:8px 15px; cursor:pointer; color:var(--bark-soft);}
.serv-scale button + button{border-left:1px solid var(--border);}
.serv-scale button:hover{background:var(--olive-light); color:var(--forest);}
.serv-scale button.active{background:var(--forest); color:var(--white);}

/* ----- Ingredients: tap-to-strike checklist ----- */
.ing-list{list-style:none;}
.ing-item{border-bottom:1px dashed var(--border);}
.ing-item label{display:flex; align-items:baseline; gap:12px; padding:10px 2px; font-size:15px; cursor:pointer;}
.ing-check{width:17px; height:17px; flex-shrink:0; transform:translateY(2px); accent-color:var(--forest); cursor:pointer;}
.ing-amt{font-weight:700; color:var(--forest-deep); min-width:100px; flex-shrink:0;}
.ing-note{color:var(--bark-soft);}
.ing-item.is-done .ing-amt,
.ing-item.is-done .ing-text{text-decoration:line-through; opacity:.55;}

/* ----- Instructions ----- */
.instructions{counter-reset:step;}
.instr-step{display:flex; gap:16px; margin-bottom:20px;}
.instr-step .num{counter-increment:step; flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--forest); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display);}
.instr-step .num:before{content:counter(step);}
.instr-step .step-body{padding-top:5px; min-width:0;}
.instr-step p{margin:0; font-size:15.5px;}
.step-img{margin-top:12px; border-radius:var(--r-md); box-shadow:var(--shadow-soft); max-width:420px; width:100%; height:auto;}

/* ----- Nutrition + Tips two-column ----- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;}

/* ----- Print row ----- */
.print-save{display:flex; gap:10px; margin-bottom:30px;}

/* ----- Comments (collapsed) ----- */
.recipe-comments summary{cursor:pointer; font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--forest-deep); padding:4px 0;}
.recipe-comments details[open] summary{margin-bottom:14px;}

/* ----- Responsive ----- */
@media(max-width:640px){
	.rec-head h1{font-size:27px;}
	.two-col{grid-template-columns:1fr;}
	.time-grid{grid-template-columns:1fr 1fr;}
	.ing-amt{min-width:84px;}
}

/* ----- Print (main.css already hides header/footer/aff-block/comments) ----- */
@media print{
	.recipe-hero{max-height:300px;}
	.serv-scale, .jump-row, .print-save, .js-print, .ing-check,
	.recipe-related, .recipe-shop, .recipe-comments{display:none !important;}
	.summary-card, .ing-item, .instr-step, .callout{break-inside:avoid;}
}