/* ifg.css — the house infographic (his ask, 2026-10-31).

   One HTML source, three outputs: the block lives INSIDE the article as real
   HTML (responsive, readable by Google, sharp on every phone), and
   scripts/ifg/build_ifg.py renders the same markup to a 1080x1920 story and a
   1080-wide long picture for Telegram and Instagram. The 30.10 pig
   infographic was a picture, and on a phone its text was too small to read.

   The block carries its OWN dark ground, the same in the light news column,
   in the dark one and in the renders: it is an object, like a pasted card,
   so it reads as ours wherever it lands.

   Responsive by container query, not by viewport: the article column, a
   phone and the 540 px render frame all size it from its own width.

   Icons are Lucide (lucide-static 0.544, ISC), one file each under
   /assets/ifg/, drawn through a CSS mask so they take the text colour. A
   <span class="ifg-ic i-NAME"> survives the DLE editor; an inline <svg> does
   not. NEVER draw an illustration here (his rule, 2026-10-31): pictures come
   from the stock bank or his ChatGPT, through the `pic` block.

   Spec and blocks: docs/INFOGRAPHIC.md. */

.ifg {
  --ig-bg:   #15171d;
  --ig-line: rgba(255,255,255,.13);
  --ig-pane: rgba(255,255,255,.055);
  --ig-fg:   #ffffff;
  --ig-dim:  rgba(255,255,255,.74);
  --ig-gold: #e7c873;
  --ig-pink: #c93f86;
  --ig-paper:#f6f1e7;
  container-type: inline-size;
  direction: rtl;
  margin: 30px 0;
  border-radius: 20px;
  overflow: hidden;
  color: var(--ig-fg);
  background: radial-gradient(120% 55% at 90% 0%, #3a2440 0%, transparent 62%), var(--ig-bg);
  font-family: Vazirmatn, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  text-align: start;
}
.ifg *, .ifg *::before, .ifg *::after { box-sizing: border-box; }
.ifg-in { padding: 24px 18px 18px; }
.ifg p, .ifg ul, .ifg ol, .ifg li, .ifg h2, .ifg h3 { margin: 0; padding: 0; }
.ifg h2::after, .ifg h3::after { content: none; }
.ifg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ifg .ifg-ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* ── head ─────────────────────────────────────────────────────────────── */
.ifg .ifg-kick { display: inline-block; background: var(--ig-gold); color: #15171d; font-weight: 800;
  font-size: 13.5px; line-height: 1.5; padding: 3px 12px; border-radius: 7px; }
/* !important: main.css sets every article h2/h3 to Vazirmatn 800 from html[data-ir2-tpl] .v3,
   a selector no class chain here can outrank; the card's title is Javan, as in its renders */
.ifg h2.ifg-title { font-family: Javan, Vazirmatn, system-ui, sans-serif !important; font-weight: 400 !important; font-synthesis: none;
  font-size: clamp(30px, 9.5cqi, 56px); line-height: 1.15; color: var(--ig-gold); margin: 12px 0 6px;
  border: 0; padding: 0; background: none; letter-spacing: 0; }
.ifg .ifg-sub { font-size: 16px; font-weight: 600; color: var(--ig-dim); line-height: 1.7; }

/* ── one block ────────────────────────────────────────────────────────── */
.ifg .ifg-b { margin-top: 26px; }
.ifg h3.ifg-h { display: flex; align-items: center; gap: 10px; font-family: Vazirmatn, system-ui, sans-serif;
  font-size: 18px; font-weight: 900 !important; line-height: 1.45; color: var(--ig-fg); margin: 0 0 12px; border: 0; padding: 0; }
.ifg h3.ifg-h::before { content: ""; flex: none; width: 5px; height: 1.2em; border-radius: 3px; background: var(--ig-gold); }
.ifg .ifg-p { font-size: 16px; color: var(--ig-dim); }
.ifg .ifg-p + .ifg-p { margin-top: 8px; }

/* the icon: a Lucide file as a mask, in the colour of the text around it */
.ifg .ifg-ic { display: inline-block; flex: none; width: 24px; height: 24px; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* ── steps: numbered paper cards ──────────────────────────────────────── */
.ifg .ifg-steps { display: grid; gap: 10px; grid-template-columns: 1fr; }
.ifg .ifg-step { display: flex; gap: 12px; align-items: flex-start; background: var(--ig-paper); color: #15171d;
  border-radius: 16px; padding: 14px 16px; }
.ifg .ifg-n { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #15171d; color: var(--ig-gold);
  font-weight: 900; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.ifg .ifg-step.is-hot .ifg-n { background: var(--ig-pink); color: #fff; }
.ifg .ifg-step b { display: block; font-size: 17px; font-weight: 900; line-height: 1.5; }
.ifg .ifg-step p { font-size: 15px; line-height: 1.65; color: #34343a; }

/* ── stats: the big numbers ───────────────────────────────────────────── */
.ifg .ifg-stats { display: grid; gap: 10px; grid-template-columns: 1fr; }
.ifg .ifg-stat { background: var(--ig-pane); border: 1px solid var(--ig-line); border-top: 3px solid var(--ig-gold);
  border-radius: 14px; padding: 12px 14px; }
.ifg .ifg-stat strong { display: block; font-size: clamp(26px, 7cqi, 38px); font-weight: 900; line-height: 1.25; color: var(--ig-gold); }
.ifg .ifg-stat span { display: block; font-size: 14px; line-height: 1.6; color: var(--ig-dim); }

/* ── list: signs, rules, tips (pink icons = warning signs) ───────────── */
.ifg ul.ifg-list { list-style: none; display: grid; gap: 8px; grid-template-columns: 1fr; }
.ifg ul.ifg-list > li { display: flex; gap: 12px; align-items: flex-start; background: var(--ig-pane);
  border: 1px solid var(--ig-line); border-radius: 14px; padding: 12px 14px; font-size: 15.5px; line-height: 1.65; }
.ifg ul.ifg-list > li > .ifg-ic { color: var(--ig-gold); margin-top: 1px; }
.ifg ul.ifg-list.is-warn > li > .ifg-ic { color: #ff7d9c; }
.ifg ul.ifg-list > li b { display: block; font-weight: 900; }

/* ── check: claim against fact (the fact-check table) ─────────────────── */
.ifg .ifg-check { display: grid; gap: 10px; grid-template-columns: 1fr; }
.ifg .ifg-row { --vc: var(--ig-gold); background: var(--ig-pane); border: 1px solid var(--ig-line);
  border-inline-start: 5px solid var(--vc); border-radius: 14px; padding: 12px 14px; }
.ifg .ifg-row.v-true   { --vc: #5ec27a; }
.ifg .ifg-row.v-false  { --vc: #ff6b81; }
.ifg .ifg-row.v-half   { --vc: #e7c873; }
.ifg .ifg-row.v-hidden { --vc: #8fbfec; }
.ifg .ifg-v { display: inline-flex; align-items: center; gap: 6px; background: var(--vc); color: #15171d;
  font-size: 13.5px; font-weight: 900; line-height: 1.6; border-radius: 999px; padding: 2px 12px 2px 10px; }
.ifg .ifg-v .ifg-ic { width: 17px; height: 17px; }
.ifg .ifg-claim { display: block; margin-top: 8px; font-size: 16.5px; font-weight: 800; line-height: 1.6; }
.ifg .ifg-fact { margin-top: 4px; font-size: 15px; line-height: 1.7; color: var(--ig-dim); }

/* ── cost: rows of money (amounts in Latin digits, his rule) ──────────── */
.ifg .ifg-cost { background: var(--ig-pane); border: 1px solid var(--ig-line); border-radius: 14px; overflow: hidden; }
.ifg .ifg-crow { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 14px;
  border-bottom: 1px dashed var(--ig-line); font-size: 15.5px; }
.ifg .ifg-crow:last-child { border-bottom: 0; }
.ifg .ifg-crow b { flex: none; direction: ltr; unicode-bidi: isolate; font-weight: 900; color: var(--ig-gold); white-space: nowrap; }
.ifg .ifg-crow.is-total { background: rgba(231,200,115,.12); border-top: 2px solid var(--ig-gold); font-weight: 900; }
.ifg .ifg-note { margin-top: 8px; font-size: 13.5px; line-height: 1.7; color: var(--ig-dim); }

/* ── timeline ─────────────────────────────────────────────────────────── */
.ifg ol.ifg-tl { list-style: none; border-inline-start: 2px solid rgba(231,200,115,.55); padding-inline-start: 18px;
  display: grid; gap: 14px; margin-inline-start: 6px; }
.ifg ol.ifg-tl > li { position: relative; font-size: 15.5px; line-height: 1.65; }
.ifg ol.ifg-tl > li::before { content: ""; position: absolute; inset-inline-start: -25px; top: 7px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--ig-gold); box-shadow: 0 0 0 3px var(--ig-bg); }
.ifg .ifg-d { display: block; font-size: 14px; font-weight: 900; color: var(--ig-gold); }

/* ── act: «what do I do» (the reader's urgent question) ──────────────── */
.ifg .ifg-act { background: var(--ig-pink); border-radius: 18px; padding: 16px; }
.ifg .ifg-act h3.ifg-h { color: #fff; }
.ifg .ifg-act h3.ifg-h::before { background: #fff; }
.ifg .ifg-act ul.ifg-list > li { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); }
.ifg .ifg-act ul.ifg-list > li > .ifg-ic { color: #fff; }

/* ── quote, picture ───────────────────────────────────────────────────── */
.ifg .ifg-quote { border-inline-start: 4px solid var(--ig-gold); padding: 2px 14px; font-size: 18px; font-weight: 700; line-height: 1.7; }
.ifg .ifg-quote cite { display: block; margin-top: 4px; font-size: 14px; font-style: normal; font-weight: 600; color: var(--ig-dim); }
.ifg .ifg-pic { border-radius: 16px; overflow: hidden; background: #000; }
.ifg .ifg-pic img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }
.ifg .ifg-cred { margin-top: 6px; font-size: 13px; color: var(--ig-dim); }

/* ── foot ─────────────────────────────────────────────────────────────── */
.ifg .ifg-foot { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--ig-line); display: flex; align-items: center;
  justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; font-size: 13.5px; line-height: 1.6; color: var(--ig-dim); }
.ifg .ifg-brand { display: inline-flex; align-items: center; gap: 8px; direction: ltr; font-weight: 900; font-size: 15px; color: var(--ig-gold); }
.ifg .ifg-owl { width: 34px; height: 34px; border-radius: 50%; background: #2a2d36 url(/assets/ig-owl.webp) center / cover; }

/* ── wider: two columns where a pair reads better ─────────────────────── */
@container (min-width: 560px) {
  .ifg-in { padding: 32px 30px 22px; }
  .ifg .ifg-steps, .ifg ul.ifg-list { grid-template-columns: 1fr 1fr; }
  .ifg .ifg-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .ifg .ifg-act ul.ifg-list { grid-template-columns: 1fr; }
  .ifg .ifg-check { grid-template-columns: 1fr 1fr; }
}

/* ── icons (generated by scripts/ifg/build_ifg.py; do not edit by hand) ── */
/* ifg-icons:start */
.ifg .i-arrow-left{--i:url(/assets/ifg/arrow-left.svg)}
.ifg .i-baby{--i:url(/assets/ifg/baby.svg)}
.ifg .i-badge-check{--i:url(/assets/ifg/badge-check.svg)}
.ifg .i-ban{--i:url(/assets/ifg/ban.svg)}
.ifg .i-banknote{--i:url(/assets/ifg/banknote.svg)}
.ifg .i-book-open{--i:url(/assets/ifg/book-open.svg)}
.ifg .i-briefcase{--i:url(/assets/ifg/briefcase.svg)}
.ifg .i-building-2{--i:url(/assets/ifg/building-2.svg)}
.ifg .i-calendar{--i:url(/assets/ifg/calendar.svg)}
.ifg .i-check{--i:url(/assets/ifg/check.svg)}
.ifg .i-circle-alert{--i:url(/assets/ifg/circle-alert.svg)}
.ifg .i-circle-check{--i:url(/assets/ifg/circle-check.svg)}
.ifg .i-circle-help{--i:url(/assets/ifg/circle-help.svg)}
.ifg .i-circle-x{--i:url(/assets/ifg/circle-x.svg)}
.ifg .i-clock{--i:url(/assets/ifg/clock.svg)}
.ifg .i-credit-card{--i:url(/assets/ifg/credit-card.svg)}
.ifg .i-euro{--i:url(/assets/ifg/euro.svg)}
.ifg .i-eye-off{--i:url(/assets/ifg/eye-off.svg)}
.ifg .i-file-text{--i:url(/assets/ifg/file-text.svg)}
.ifg .i-globe{--i:url(/assets/ifg/globe.svg)}
.ifg .i-graduation-cap{--i:url(/assets/ifg/graduation-cap.svg)}
.ifg .i-hand-coins{--i:url(/assets/ifg/hand-coins.svg)}
.ifg .i-heart{--i:url(/assets/ifg/heart.svg)}
.ifg .i-hourglass{--i:url(/assets/ifg/hourglass.svg)}
.ifg .i-house{--i:url(/assets/ifg/house.svg)}
.ifg .i-info{--i:url(/assets/ifg/info.svg)}
.ifg .i-landmark{--i:url(/assets/ifg/landmark.svg)}
.ifg .i-lightbulb{--i:url(/assets/ifg/lightbulb.svg)}
.ifg .i-link{--i:url(/assets/ifg/link.svg)}
.ifg .i-list-checks{--i:url(/assets/ifg/list-checks.svg)}
.ifg .i-lock{--i:url(/assets/ifg/lock.svg)}
.ifg .i-mail{--i:url(/assets/ifg/mail.svg)}
.ifg .i-map-pin{--i:url(/assets/ifg/map-pin.svg)}
.ifg .i-message-circle{--i:url(/assets/ifg/message-circle.svg)}
.ifg .i-octagon-alert{--i:url(/assets/ifg/octagon-alert.svg)}
.ifg .i-phone{--i:url(/assets/ifg/phone.svg)}
.ifg .i-piggy-bank{--i:url(/assets/ifg/piggy-bank.svg)}
.ifg .i-plane{--i:url(/assets/ifg/plane.svg)}
.ifg .i-receipt{--i:url(/assets/ifg/receipt.svg)}
.ifg .i-scale{--i:url(/assets/ifg/scale.svg)}
.ifg .i-school{--i:url(/assets/ifg/school.svg)}
.ifg .i-search{--i:url(/assets/ifg/search.svg)}
.ifg .i-shield-alert{--i:url(/assets/ifg/shield-alert.svg)}
.ifg .i-siren{--i:url(/assets/ifg/siren.svg)}
.ifg .i-smartphone{--i:url(/assets/ifg/smartphone.svg)}
.ifg .i-trending-down{--i:url(/assets/ifg/trending-down.svg)}
.ifg .i-trending-up{--i:url(/assets/ifg/trending-up.svg)}
.ifg .i-triangle-alert{--i:url(/assets/ifg/triangle-alert.svg)}
.ifg .i-user{--i:url(/assets/ifg/user.svg)}
.ifg .i-users{--i:url(/assets/ifg/users.svg)}
.ifg .i-wallet{--i:url(/assets/ifg/wallet.svg)}
.ifg .i-x{--i:url(/assets/ifg/x.svg)}
/* ifg-icons:end */