/* Cake, cookie and catering pricing pages: additions on top of the recipe cost calculator's page CSS
   (../../recipe-cost-calculator/css/recipe-cost.css), which supplies the calculator card, ingredient lines,
   results card, app band and video facade. Proposed for promotion to /calculators/css/. */

.calc-head.two { grid-template-columns: 1fr 130px; }
.calc-head.three { grid-template-columns: 1fr 110px 130px; }
.block { margin-top: 16px; border-top: 1.5px solid var(--line); padding-top: 14px; }
.block-title { font-family: var(--font-main); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy); margin-bottom: 10px; }
.block-note { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }
.field-out { font-size: 0.95rem; font-weight: 800; color: var(--navy); padding: 9px 0; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 12px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* "what you charge now" check inside the results card */
.results .check { margin-top: 14px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px dashed rgba(255,255,255,0.35); }
.results .check label { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.04em; }
.results .check input { font: inherit; font-size: 0.95rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); border: 1.5px solid transparent; border-radius: 10px; padding: 8px 10px; background: #fff; width: 100%; }
.results .check input:focus { outline: none; box-shadow: 0 0 0 3px rgba(245,242,85,0.6); }
.results .check dl > div { padding: 7px 0; }
.results .check dl > div:last-child { border-bottom: 0; }
.results dd.neg { color: #ffb4a0; }
.results .sub dt { padding-left: 10px; font-size: 0.8rem; }
.results .sub dd { font-size: 0.92rem; font-weight: 700; }

/* catering menu lines: dish | cost per portion | portions per guest | per guest | remove */
.dish { display: grid; grid-template-columns: minmax(140px, 1.6fr) 130px 130px 90px 30px; gap: 8px; align-items: center; padding: 6px 0; }
.dish-head { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border-bottom: 1.5px solid var(--line); padding-bottom: 8px; }
.dish input { font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 10px; background: #fff; width: 100%; min-width: 0; }
.dish input:focus { border-color: var(--navy); outline: none; box-shadow: 0 0 0 3px rgba(1,3,79,0.12); }
.dish .cost { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--navy); }
.dish .cost.err { color: var(--error); font-size: 0.72rem; font-weight: 700; line-height: 1.2; }
.dish .rm { width: 30px; height: 30px; border-radius: 50%; color: var(--muted); font-size: 1.1rem; line-height: 1; }
.dish .rm:hover { background: #f3eee4; color: var(--error); }
.dish .mlabel { display: none; }

.example-note { font-size: 0.8rem; color: var(--muted); margin: -6px 0 14px; }
.related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.related a { display: inline-block; padding: 8px 14px; border: 2px solid var(--navy); border-radius: 40px; font-weight: 700; font-size: 0.88rem; text-decoration: none; color: var(--navy); }
.related a:hover { background: var(--navy); color: #fff; }
.prose table { border-collapse: collapse; width: 100%; margin: 10px 0 16px; font-size: 0.95rem; }
.prose th, .prose td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.prose th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.prose td.r, .prose th.r { text-align: right; font-variant-numeric: tabular-nums; }

/* desktop: the results card here is taller than recipe-cost.css's sticky card (the "what you charge now" check),
   so cap it at the viewport and let it scroll inside instead of running past the bottom of the screen */
@media (min-width: 1081px) {
  .results { max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; }
}

@media (max-width: 720px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .calc-head.three { grid-template-columns: 1fr 1fr; }
  .calc-head.three .grow, .calc-head.two .grow { grid-column: 1 / -1; }
  .calc-head.two { grid-template-columns: 1fr 1fr; }
  .dish-head { display: none; }
  .dish { grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px; margin-bottom: 10px; border: 1.5px solid var(--line); border-radius: 12px; position: relative; }
  .dish .c-name { grid-column: 1 / -1; padding-right: 34px; }
  .dish .mlabel { display: block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 3px; }
  .dish .cost { grid-column: 1 / -1; text-align: right; font-size: 1.1rem; }
  .dish .rm { position: absolute; top: 8px; right: 8px; }
}