/* ═══════════════════════════════════════════════════════════════
 * עמוד מתכון — עיצוב חדש. 2026-08-06.
 * מאושר ע"י טל על בסיס דמו: _Claude/פעיל/דמו-עמוד-מתכון.html
 *
 * ⛔ כל כלל בקובץ הזה מקונן תחת .recipe-new. הקובץ נטען בכל האתר
 *    (הוא אינו רשום ב-$scope שב-functions.php), ולכן הקינון הוא
 *    מה שמונע ממנו לגעת בעמוד אחר. אין להוסיף כאן סלקטור גלובלי.
 * ⛔ צבעים מהטוקנים בלבד (יסודות תשתית, נעול 13.7.2026).
 *    פטל = רקע/הדגשה, לעולם לא צבע טקסט.
 * ═══════════════════════════════════════════════════════════════ */

/* ═══════════ הירו — שתי עמודות ═══════════
   09.08.2026. אושר ע"י טל אחרי חמישה סבבים. דמו: _Claude/פעיל/דמו-הירו-מתכון.html
   ⛔ המסגרת ריבועית עם חיתוך. שלוש חלופות נפסלו: יחס טבעי (גובה קופץ),
      יחס 4:5 (חתך 40 אחוז מתמונה לרוחב), ורקע מטושטש ("לא נראה כטשטוש").
      אין להחזיר אף אחת מהן בלי החלטה מחודשת. */
.recipe-new .rc-hero { padding-block: var(--sp-6) 0; }
.recipe-new .rc-hero-grid {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 420px);
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
}
.recipe-new .rc-hero-media {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-md);
  /* ⛔ 4:3 — נקבע ממדידה של כל 177 התמונות באתר (09.08.2026):
       122 לרוחב · 41 לגובה · 14 ריבועיות בערך.
     שתי גרסאות נפסלו: 4:5 חתך 40 אחוז מתמונה לרוחב; ריבוע נבחר על סמך
     מדגם של שש תמונות בלבד והתברר כשגוי — הוא חתך רבע מ-122 תמונות.
     ב-4:3 הרוב המוחלט של הספרייה נכנס כמעט בלי חיתוך, ו-41 התמונות
     לגובה מאבדות רבע מהגובה, למעלה ולמטה — בטוח יותר לצלחת.
     ⛔ אין לשנות את היחס בלי למדוד מחדש את הספרייה. */
  aspect-ratio: 4/3; background: var(--espresso-3);
}
.recipe-new .rc-hero-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.recipe-new .rc-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(176, 58, 82, .18);
  border: 1px solid rgba(176, 58, 82, .45);
  color: var(--gold-soft);
  font-size: .82rem; font-weight: 500;
  padding: .32rem .85rem; border-radius: var(--radius-pill);
  margin-bottom: var(--sp-3);
}
.recipe-new .rc-eyebrow svg { width: 15px; height: 15px; flex: none; }
.recipe-new .rc-hero h1 {
  font-size: clamp(1.8rem, 4.4vw, 3rem);
  line-height: 1.2; letter-spacing: -.5px;
  /* ⛔ 24ch (הערך שהועתק מהעיצוב הישן) שבר כמעט כל כותרת מתכון: כמעט כולן
     מסתיימות ב"ללא גלוטן" ועוברות 24 תווים, כך שהמילה האחרונה נפלה לבדה
     לשורה שנייה. 30ch מכיל את רובן בשורה אחת ועדיין מגביל שורה ארוכה מדי. */
  /* בהירו של שתי עמודות הכותרת צרה ממילא — 20 תווים מונע שורה ארוכה
     ומשאיר מקום נשימה מול התמונה. */
  max-width: 20ch;
  /* כשכותרת כן נשברת — שתי שורות באורך דומה במקום מילה יתומה. */
  text-wrap: balance;
}
/* ⛔ 100vw בהירו המובייל יוצר גלילה אופקית בלי החסימה הזו. */
.recipe-new { overflow-x: clip; }
.recipe-new .rc-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); color: var(--text-muted); font-size: .92rem;
}
.recipe-new .rc-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--gold), var(--cocoa-2));
  display: grid; place-items: center;
  color: var(--espresso); font-weight: 600; font-size: .95rem;
}
.recipe-new .rc-byline b { color: var(--cream); font-weight: 500; }

/* ── כרטיס הנתונים — יושב בתוך עמודת הטקסט, מתחת לשורת המחברת ── */
.recipe-new .rc-stats-inner {
  margin-top: var(--sp-6);
  background: var(--espresso-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: grid; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.recipe-new .rc-stat {
  padding: var(--sp-4) var(--sp-2); text-align: center;
  border-inline-start: 1px solid rgba(201, 162, 75, .14);
}
.recipe-new .rc-stat:first-child { border-inline-start: 0; }
.recipe-new .rc-stat svg {
  width: 22px; height: 22px; display: block;
  margin: 0 auto .45rem; stroke: var(--gold); fill: none;
  stroke-width: 1.8; stroke-linecap: round;
}
.recipe-new .rc-stat-label { font-size: .76rem; color: var(--text-muted); letter-spacing: .3px; }
.recipe-new .rc-stat-value {
  font-size: 1.06rem; font-weight: 600; color: var(--cream);
  margin-top: .1rem; font-variant-numeric: tabular-nums;
}

/* ── פעולות ── */
.recipe-new .rc-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  /* מיושר לתחילת השורה (ימין ב-RTL) — הכפתורים שייכים לעמודת הטקסט,
     ומרכוז שלהם מנתק אותם מהכותרת שמעליהם. */
  justify-content: flex-start; margin-top: var(--sp-5);
}
.recipe-new .rc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 46px; padding: .6rem 1.3rem;
  border-radius: var(--radius-pill);
  font-family: inherit; font-size: .95rem; font-weight: 500;
  border: 1px solid var(--border); background: transparent;
  color: var(--cream); cursor: pointer;
  /* ⛔ הכרחי: כלל קישור גלובלי באתר מוסיף קו תחתון וצבע זהב לכל <a> בתוכן.
     הכפתור הראשי הוא <a> לעוגן, ובלי השורה הזו הוא נראה כמו קישור טקסט. */
  text-decoration: none;
  transition: color .22s ease, border-color .22s ease, background-color .22s ease;
}
.recipe-new .rc-btn svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.recipe-new .rc-btn:hover { border-color: var(--gold); color: var(--gold-soft); background: rgba(201, 162, 75, .08); }
.recipe-new .rc-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.recipe-new .rc-btn--primary { background: var(--gold); color: var(--espresso); border-color: var(--gold); font-weight: 600; }
.recipe-new .rc-btn--primary:hover { background: var(--gold-soft); color: var(--espresso); border-color: var(--gold-soft); }

/* ── פתיח ── */
.recipe-new .rc-intro { max-width: 760px; margin: var(--sp-6) auto 0; font-size: 1.05rem; color: var(--cream-soft); }
.recipe-new .rc-intro p { margin-bottom: 1rem; }
.recipe-new .rc-intro a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }

/* ── הגריד ── */
.recipe-new .rc-grid {
  display: grid; align-items: start;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-7) var(--sp-6);
}
.recipe-new .rc-card {
  background: var(--espresso-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: var(--sp-6);
}
.recipe-new .rc-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-bottom: var(--sp-4); margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.recipe-new .rc-card-head h2 {
  font-size: 1.32rem; font-weight: 600; color: var(--cream); margin: 0;
  display: flex; align-items: center; gap: .55rem;
}
.recipe-new .rc-card-head h2 svg { width: 21px; height: 21px; flex: none; stroke: var(--gold); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.recipe-new .rc-pill {
  font-size: .78rem; color: var(--gold-soft); white-space: nowrap;
  background: rgba(201, 162, 75, .12); border: 1px solid var(--border);
  padding: .2rem .65rem; border-radius: var(--radius-pill);
  font-variant-numeric: tabular-nums;
}
.recipe-new .rc-col-ing { position: sticky; top: var(--sp-5); }

/* ── מצרכים ──
   ⛔ הסימונים לא נשמרים בשום מקום ולא נשלחים לשום מקום (החלטת טל, 05.08.2026).
   רענון עמוד = רשימה נקייה. אין localStorage, אין עוגייה, אין בקשת רשת. */
.recipe-new .rc-ings { list-style: none; margin: 0; padding: 0; display: block; }
.recipe-new .rc-ings li { padding: 0; margin: 0; }
.recipe-new .rc-ings li::before { content: none; }
.recipe-new .rc-ing {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .55rem .2rem; min-height: 44px;
  border-radius: 10px; cursor: pointer;
  transition: background-color .18s ease;
}
.recipe-new .rc-ing:hover { background: rgba(201, 162, 75, .07); }
.recipe-new .rc-ing input { position: absolute; opacity: 0; width: 0; height: 0; }
.recipe-new .rc-box {
  width: 21px; height: 21px; flex: none; margin-top: .28rem;
  border: 2px solid rgba(201, 162, 75, .5); border-radius: 6px;
  position: relative; transition: background-color .2s ease, border-color .2s ease;
}
.recipe-new .rc-box::after {
  content: ""; position: absolute; inset-inline-start: 5px; top: 1px;
  width: 6px; height: 11px;
  border: solid var(--espresso); border-width: 0 2.6px 2.6px 0;
  transform: rotate(45deg) scale(.4); opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
}
.recipe-new .rc-ing input:checked ~ .rc-box { background: var(--gold); border-color: var(--gold); }
.recipe-new .rc-ing input:checked ~ .rc-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.recipe-new .rc-ing input:focus-visible ~ .rc-box { outline: 3px solid var(--gold); outline-offset: 2px; }
.recipe-new .rc-t { font-size: 1rem; color: var(--cream); transition: color .2s ease; }
.recipe-new .rc-ing input:checked ~ .rc-t {
  color: var(--text-muted); text-decoration: line-through;
  text-decoration-color: rgba(201, 162, 75, .6);
}
/* פסקאות ביניים בתוך כרטיס המצרכים — כותרות משנה כמו "לגנאש שוקולד:" */
.recipe-new .rc-col-ing p {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: .9rem; color: var(--gold); font-weight: 600;
}
.recipe-new .rc-col-ing p:first-child { margin-top: 0; }

/* ── שלבים ── */
.recipe-new .rc-steps { list-style: none; counter-reset: rcstep; margin: 0; padding: 0; display: block; }
.recipe-new .rc-step {
  counter-increment: rcstep; position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4);
  padding: var(--sp-4) 0; margin: 0;
  border-bottom: 1px solid rgba(201, 162, 75, .13);
}
.recipe-new .rc-step::before {
  content: counter(rcstep);
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, var(--gold), var(--sapir-gold-d, #B0894A));
  color: var(--espresso); font-weight: 700; font-size: 1.05rem;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(201, 162, 75, .28);
  font-variant-numeric: tabular-nums;
  position: static; inset: auto; top: auto;
}
.recipe-new .rc-step:last-child { border-bottom: 0; }
.recipe-new .rc-step-t { font-size: 1.04rem; line-height: 1.75; color: var(--cream-soft); padding-top: .35rem; }
.recipe-new .rc-step.is-done .rc-step-t { opacity: .45; }
.recipe-new .rc-step.is-done::before {
  background: var(--espresso-3); color: var(--gold);
  box-shadow: none; border: 1px solid var(--border);
}
/* פסקאות ביניים בכרטיס השלבים — למשל "בתאבון!" */
.recipe-new .rc-col-steps p { margin: var(--sp-4) 0 0; color: var(--cream-soft); }
.recipe-new .rc-col-steps img { max-height: 420px; width: auto; max-width: 100%; display: block; margin: var(--sp-4) auto; border-radius: var(--radius); }

/* ── מובייל ── */
@media (max-width: 980px) {
  .recipe-new .rc-grid { grid-template-columns: 1fr; gap: var(--sp-5); padding-block: var(--sp-6); }
  .recipe-new .rc-col-ing { position: static; }
  .recipe-new .rc-card { padding: var(--sp-5); }

  /* ── ההירו במובייל: עמודה אחת, התמונה מקצה לקצה ── */
  .recipe-new .rc-hero { padding-block: var(--sp-5) 0; }
  .recipe-new .rc-hero-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .recipe-new .rc-hero h1 { max-width: none; }
  /* יוצאת מהמיכל אל קצה המסך משני הצדדים. ⛔ overflow-x חבוי ב-body
     נדרש כדי ש-100vw לא ייצור גלילה אופקית. */
  .recipe-new .rc-hero-media {
    order: -1;
    margin-inline: calc(50% - 50vw);
    width: 100vw; max-width: 100vw;
    border-radius: 0; border-inline: 0; border-block-start: 0;
    /* ⛔ 4:3 ולא ריבוע — ריבוע ברוחב מסך מלא בולע את כל המסך ודוחף
       את המצרכים מתחת לקו הקיפול, ושם הסיבה שהגולשת נכנסה לעמוד. */
    aspect-ratio: 4/3;
  }
  .recipe-new .rc-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .recipe-new .rc-stat:nth-child(3) { border-inline-start: 0; }
  .recipe-new .rc-stat:nth-child(3),
  .recipe-new .rc-stat:nth-child(4) { border-block-start: 1px solid rgba(201, 162, 75, .14); }
  .recipe-new .rc-actions .rc-btn { flex: 1 1 45%; }

  .recipe-new .rc-step { gap: var(--sp-3); }
  .recipe-new .rc-step::before { width: 34px; height: 34px; font-size: .95rem; }
  .recipe-new .rc-step-t { font-size: 1rem; }
}
@media (max-width: 420px) {
  .recipe-new .rc-actions .rc-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .recipe-new * { transition: none !important; animation: none !important; }
}