/* _ingredient.css · مكوّنات صفحات المكوّنات الجديدة فقط.
   كل ما عداها يعيد استخدام recipes/_recipe.css (.rcp-*) و _landing.css.
   EEINA v4.3.x · tokens فقط · لا hardcoded HEX · لا em-dash. */

/* Quick facts box (sidebar) */
.ing-facts { background: var(--bg-soft); border-radius: 14px; padding: 18px 20px; margin-block-start: 16px; }
.ing-facts h4 { font-size: 12px; font-weight: 600; color: var(--olive-dark); text-transform: uppercase; letter-spacing: 0.08em; margin-block-end: 12px; }
.ing-facts dl { margin: 0; display: grid; gap: 10px; }
.ing-facts .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; align-items: baseline; }
.ing-facts dt { color: var(--text-soft); }
.ing-facts dd { margin: 0; font-weight: 600; color: var(--text); text-align: end; }

/* Product slot · خامد حتى Phase 1 · الـ markup معلّق في HTML.
   النمط مكتوب الآن ليكون جاهزاً عند التفعيل. */
.ing-product { background: var(--cream); border: 1px solid var(--border); border-radius: 16px; padding: 22px; margin-block-start: 16px; }
.ing-product .pname { font-size: 15px; font-weight: 600; color: var(--text); margin-block-end: 6px; }
.ing-product .pdesc { font-size: 13px; line-height: 1.7; color: var(--text-soft); margin-block-end: 14px; }
.ing-product .pprice { font-size: 14px; font-weight: 600; color: var(--text); font-feature-settings: "tnum"; margin-block-end: 14px; }
.ing-product .pprice .member { color: var(--olive-dark); }

/* DIY blend ingredient list · مقادير خلطة "اصنعها بنفسك" */
.ing-diy-list { list-style: none; padding: 0; margin: 0 0 16px; }
.ing-diy-list li { display: flex; justify-content: space-between; gap: 14px; padding-block: 9px; border-block-end: 1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size: 14.5px; }
.ing-diy-list li:last-child { border: none; }
.ing-diy-list .qty { font-weight: 600; color: var(--olive-dark); font-feature-settings: "tnum"; white-space: nowrap; }

/* مُبدّل مقادير خلطة DIY · segmented control هادئ */
.ing-scaler { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; flex-wrap: wrap; }
.ing-scaler .lbl { font-size: 13px; color: var(--text-soft); font-weight: 600; }
.ing-scaler .seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
.ing-scaler button { font: inherit; font-size: 13px; font-weight: 600; padding: 7px 16px; background: var(--white); color: var(--text-soft); border: none; cursor: pointer; font-feature-settings: "tnum"; transition: background 160ms var(--ease-out-quart), color 160ms var(--ease-out-quart); }
.ing-scaler button + button { border-inline-start: 1px solid var(--border-strong); }
.ing-scaler button:hover { background: var(--bg-soft); }
.ing-scaler button.active { background: var(--olive-dark); color: var(--white); }

/* Spice index · شبكة مكوّنات الخلطة الملوّنة · variety-led على نهج D-023 المُقفل.
   كل توبل بلون طبيعيّ حقيقيّ (يقود اللونُ المكوّنُ · لا أكواد مفروضة). */
.ing-spice-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-block: 22px; }
@media (min-width: 560px) { .ing-spice-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .ing-spice-grid { grid-template-columns: repeat(3, 1fr); } }
.ing-spice { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 18px; transition: border-color 160ms var(--ease-out-quart), box-shadow 160ms var(--ease-out-quart); }
.ing-spice:hover { border-color: var(--olive); box-shadow: var(--shadow-md); }
.ing-spice-head { display: flex; align-items: center; gap: 11px; margin-block-end: 9px; }
.ing-spice-swatch { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; box-shadow: inset 0 0 0 2px var(--white), 0 0 0 1px var(--border); }
.ing-spice-swatch.sm { width: 16px; height: 16px; }
.ing-spice-name { font-size: 15.5px; font-weight: 600; color: var(--text); }
.ing-spice-role { font-size: 13.5px; line-height: 1.8; color: var(--text-soft); margin: 0; }
/* بطاقة توبل قابلة للنقر · تقود لصفحة التوبل المفرد */
a.ing-spice { text-decoration: none; color: inherit; display: block; }

/* اسم المكوّن في قائمة DIY · مع نقطة لونه */
.ing-diy-name { display: flex; align-items: center; gap: 10px; }

/* صورة الهيرو · نمط .rcp-visual.has-photo (نهج صفحات الوصفات) */
.rcp-visual.has-photo { background: var(--bg-section); padding: 0; }
.rcp-visual.has-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* صورة داخل المحتوى */
.ing-figure { margin-block: 26px; }
.ing-figure img { width: 100%; border-radius: 16px; display: block; }
.ing-figure figcaption { font-size: 12px; color: var(--text-soft); margin-block-start: 8px; text-align: center; }

/* صورة خطوة التحضير داخل بطاقة الخطوة */
.rcp-steps .ing-step-photo { width: 100%; border-radius: 10px; margin-block-start: 12px; display: block; }

/* ═══════════════════════════════════════════════════════════════
   INGREDIENT ARTICLE SYSTEM · نظام صفحة المكوّن الموسوعيّة (مستقلّ)
   هيكل مقالة عمود واحد · لا يعيد استخدام .rcp-* (نظام الوصفات).
   التنوّع: --ing-accent يُضبط لكل صفحة (لون التوبل) · Olive يبقى أساس إيناء.
   ═══════════════════════════════════════════════════════════════ */

.ing-page { --ing-accent: var(--olive); --ing-accent-soft: var(--olive-tint); --ing-accent-ink: var(--olive-dark); }

/* HERO · editorial banner */
.ing-hero { padding-block: calc(var(--nav-h) + clamp(20px, 4vw, 36px)) clamp(18px, 3vw, 28px); }
.ing-hero-inner { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.ing-crumb { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-soft); margin-block-end: 22px; flex-wrap: wrap; }
.ing-crumb a { color: var(--text-soft); text-decoration: none; }
.ing-crumb a:hover { color: var(--ing-accent); }
.ing-crumb svg { width: 10px; height: 10px; opacity: 0.5; }
.ing-kicker { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--ing-accent-ink); margin-block-end: 12px; }
.ing-hero h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; margin-block-end: 16px; }
.ing-hero-lede { font-size: clamp(16px, 1.8vw, 19px); line-height: 1.8; color: var(--text-soft); max-width: 58ch; margin-block-end: 26px; }
.ing-hero-media { aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--ing-accent-soft); }
.ing-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* TOC · chip bar */
.ing-toc { max-width: 1180px; margin: 26px auto 0; padding-inline: var(--gutter); }
.ing-toc-inner { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; }
.ing-toc-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--text-soft); margin-block-end: 11px; }
.ing-toc-links { display: flex; flex-wrap: wrap; gap: 8px; }
.ing-toc-links a { font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 999px; transition: border-color 160ms var(--ease-out-quart), background 160ms var(--ease-out-quart); }
.ing-toc-links a:hover { border-color: var(--ing-accent); background: var(--ing-accent-soft); }

/* ARTICLE · عمود واحد متمركز */
.ing-article { max-width: var(--container, 1180px); margin: 0 auto; padding: clamp(30px, 5vw, 52px) var(--gutter); }
/* Constraint for readability: text columns should not exceed 760px */
.ing-article > p, 
.ing-article > ul, 
.ing-article > ol, 
.ing-article > h2, 
.ing-article > h3, 
.ing-article > .medical-disclaimer, 
.ing-article > .ing-author, 
.ing-article > .ing-meta-strip,
.ing-article > .ing-note,
.ing-article > .ing-caution,
.ing-article > .ing-factcard { 
  max-width: 760px; 
  margin-inline: auto; 
}
/* Visual grids and cards can take the full 1180px */
.ing-article > .bnf-grid,
.ing-article > .cook-grid,
.ing-article > .rel-grid,
.ing-article > .type-grid,
.ing-article > .recipe-grid,
.ing-article > .final-cta {
  max-width: 1180px;
  margin-inline: auto;
}

.ing-article section { scroll-margin-top: calc(var(--nav-h) + 20px); }
.ing-article h2 { font-size: clamp(22px, 2.6vw, 29px); font-weight: 600; line-height: 1.3; color: var(--text); margin-block: 42px 16px; padding-block-start: 16px; border-block-start: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.ing-article section:first-of-type h2 { margin-block-start: 0; padding-block-start: 0; border-block-start: none; }
.ing-h2-mark { width: 20px; height: 3px; border-radius: 2px; background: var(--ing-accent); flex-shrink: 0; }
.ing-article p { font-size: 16.5px; line-height: 1.95; color: var(--text); margin-block-end: 16px; }
.ing-article ul { padding-inline-start: 22px; margin-block-end: 16px; }
.ing-article li { font-size: 16px; line-height: 1.9; color: var(--text); margin-block-end: 7px; }
.ing-article strong { font-weight: 600; }
.ing-article a.ing-inline { color: var(--olive-dark); font-weight: 600; text-decoration: none; border-block-end: 1px solid var(--olive); }
.ing-article a.ing-inline:hover { background: var(--olive-tint); }

/* FACT CARD · بطاقة المكوّن */
.ing-factcard { background: var(--ing-accent-soft); border: 1px solid color-mix(in srgb, var(--ing-accent) 32%, transparent); border-radius: 16px; padding: 22px 26px; margin-block: 24px; }
.ing-factcard h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; color: var(--ing-accent-ink); margin-block-end: 14px; }
.ing-factcard dl { margin: 0; }
.ing-factcard .frow { display: flex; justify-content: space-between; gap: 16px; padding-block: 11px; border-block-end: 1px solid color-mix(in srgb, var(--ing-accent) 20%, transparent); }
.ing-factcard .frow:last-child { border-block-end: none; }
.ing-factcard dt { font-size: 14px; color: var(--text-soft); }
.ing-factcard dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); text-align: end; }

/* TYPES · بطاقات الأنواع */
.ing-types { display: grid; grid-template-columns: 1fr; gap: 12px; margin-block: 20px; }
@media (min-width: 620px) { .ing-types { grid-template-columns: repeat(3, 1fr); } }
.ing-type { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.ing-type h4 { font-size: 15px; font-weight: 600; color: var(--text); margin-block-end: 7px; }
.ing-type p { font-size: 13.5px; line-height: 1.8; color: var(--text-soft); margin: 0; }

/* NUTRITION · جدول القيمة الغذائيّة */
.ing-nutri { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-block: 22px; }
.ing-nutri-head { background: var(--bg-soft); padding: 14px 22px; font-size: 13px; font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.ing-nutri-head small { font-size: 11px; color: var(--text-soft); font-weight: 500; }
.ing-nutri dl { margin: 0; }
.ing-nutri .nrow { display: flex; justify-content: space-between; padding: 12px 22px; border-block-start: 1px solid var(--border); }
.ing-nutri dt { font-size: 14.5px; color: var(--text); }
.ing-nutri dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--text); font-feature-settings: "tnum"; }

/* CONTENT IMAGE */
.ing-fig { margin-block: 24px; }
.ing-fig img { width: 100%; border-radius: 14px; display: block; }
.ing-fig figcaption { font-size: 12px; color: var(--text-soft); margin-block-start: 8px; text-align: center; }

/* د. منى NOTE */
.ing-note { background: var(--olive-tint); border: 1px solid color-mix(in srgb, var(--olive) 28%, transparent); border-radius: 14px; padding: 20px 24px; margin-block: 24px; }
.ing-note-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--olive-dark); margin-block-end: 9px; }
.ing-note-label svg { width: 15px; height: 15px; flex-shrink: 0; }
.ing-note p { font-size: 15px; line-height: 1.85; color: var(--text); margin: 0; }

/* FAQ */
.ing-faq details { border-block-end: 1px solid var(--border); }
.ing-faq summary { font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-block: 15px; }
.ing-faq summary::-webkit-details-marker { display: none; }
.ing-faq summary::after { content: '+'; font-size: 24px; line-height: 1; color: var(--ing-accent); transition: transform 200ms var(--ease-out-quart); }
.ing-faq details[open] summary::after { transform: rotate(45deg); }
.ing-faq .ing-faq-a { font-size: 15px; line-height: 1.85; color: var(--text-soft); padding-block: 0 16px; }

/* CTA inline */
.ing-cta { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; background: var(--olive-dark); color: var(--white); border-radius: 12px; font-size: 15px; font-weight: 600; text-decoration: none; transition: background 160ms var(--ease-out-quart); }
.ing-cta:hover { background: var(--olive-darker); }
.ing-cta svg { width: 15px; height: 15px; }

/* RELATED */
.ing-related { background: var(--bg-section); padding-block: clamp(36px, 5vw, 54px); }
.ing-related-inner { max-width: 1180px; margin: 0 auto; padding-inline: var(--gutter); }
.ing-related h2 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; margin-block-end: 20px; }
.ing-related-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .ing-related-grid { grid-template-columns: repeat(3, 1fr); } }
.ing-related-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; text-decoration: none; color: var(--text); transition: border-color 160ms var(--ease-out-quart), transform 160ms var(--ease-out-quart); }
.ing-related-card:hover { border-color: var(--olive); transform: translateY(-2px); }
.ing-related-card .rc-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-soft); margin-block-end: 6px; }
.ing-related-card h3 { font-size: 16px; font-weight: 600; line-height: 1.4; }

/* h3 داخل المقالة · عناوين فرعيّة */
.ing-article h3 { font-size: 17.5px; font-weight: 600; color: var(--text); margin-block: 24px 10px; display: flex; align-items: center; gap: 9px; }
.ing-h3-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ing-accent); flex-shrink: 0; }

/* جدول المقارنة · الأنواع */
.ing-compare { margin-block: 22px; overflow-x: auto; }
.ing-compare table { width: 100%; min-width: 540px; border-collapse: collapse; background: var(--white); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; font-size: 14px; }
.ing-compare th, .ing-compare td { padding: 12px 15px; text-align: start; border-block-end: 1px solid var(--border); line-height: 1.7; }
.ing-compare thead th { background: var(--bg-soft); font-size: 12.5px; font-weight: 600; color: var(--text); }
.ing-compare tbody tr:last-child td { border-block-end: none; }
.ing-compare .ct-name { font-weight: 600; color: var(--ing-accent-ink); }

/* صندوق الاحتياطات */
.ing-caution { background: color-mix(in srgb, var(--warning) 12%, var(--white)); border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); border-radius: 14px; padding: 20px 24px; margin-block: 24px; }
.ing-caution-label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: #856404; margin-block-end: 11px; }
.ing-caution-label svg { width: 16px; height: 16px; flex-shrink: 0; }
.ing-caution ul { margin: 0; padding-inline-start: 20px; }
.ing-caution li { font-size: 14.5px; line-height: 1.85; color: var(--text); margin-block-end: 7px; }
.ing-caution li:last-child { margin-block-end: 0; }
.ing-caution .ing-caution-note { font-size: 13.5px; color: var(--text-soft); margin: 12px 0 0; line-height: 1.8; }