/* arielcity infographic components. Real text everywhere (numbers, labels), CSS/inline-SVG only, logical properties so he (rtl) and ru/en/fr (ltr) share one file.
   Uses the site's own tokens with fallbacks. Categorical charts mirror in RTL by design (bars grow from the inline start); clock/number axes would stay LTR. */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.ig { margin: 28px 0; padding: 20px 18px 16px; border: 1px solid var(--line, #4B2C82); border-radius: 20px; background: linear-gradient(160deg, var(--card, #2C1554), var(--bg-2, #241244)); box-shadow: var(--shadow-1, none); color: var(--text-2, #E1D8F5); }
/* the title is a <p role="heading" aria-level="2"> (a real h3/h2 would trip heading order before the first h2 and inherit the site's heading rules); !important keeps the sitewide #hdr-compact paragraph/heading rules off it */
.ig .ig-t { margin: 0 0 16px !important; font-size: clamp(1.08rem, 4.6vw, 1.4rem) !important; line-height: 1.3 !important; font-weight: 800 !important; font-style: normal !important; color: var(--text, #fff) !important; text-wrap: balance; }
.ig .ig-s { margin: -8px 0 16px; font-size: .95rem; color: var(--text-3, #A594C9); }
.ig .ig-src { margin: 14px 0 0; font-size: .8rem; line-height: 1.4; color: var(--text-3, #A594C9); }
.ig bdi { unicode-bidi: isolate; }

/* ranked bars: label + value on one line, bar under it on phones; one row on wider screens */
.ig-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ig-bars li { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "l n" "b b"; gap: 6px 12px; align-items: baseline; }
.ig-l { grid-area: l; font-size: .98rem; line-height: 1.3; color: var(--text-2, #E1D8F5); overflow-wrap: anywhere; hyphens: auto; }
.ig-l em { display: block; font-style: normal; font-size: .84rem; color: var(--text-3, #A594C9); margin-top: 2px; }
.ig-n { grid-area: n; color: var(--gold, #E8B95F); font-weight: 800; font-size: 1.08rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ig-n small { margin-inline-start: .4em; font-size: .78em; font-weight: 600; color: var(--text-3, #A594C9); }
.ig-bar { grid-area: b; display: block; block-size: 12px; border-radius: 7px; background: rgba(145, 99, 242, .2); overflow: hidden; }
.ig-bar i { display: block; block-size: 100%; inline-size: var(--w); border-radius: 7px; background: var(--accent, #9163F2); position: relative; transition: inline-size 1s cubic-bezier(.2, .8, .2, 1); }
.ig-bar i.hi { background: linear-gradient(90deg, #C99A3F, var(--gold, #E8B95F)); }
.ig-bar i.hi:dir(rtl) { background: linear-gradient(270deg, #C99A3F, var(--gold, #E8B95F)); }
.ig-bar i u { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w2); border-radius: 7px; background: rgba(23, 11, 46, .55); }
.js .ig:not(.on) .ig-bar i { inline-size: 0; }
.js .ig:not(.on) .ig-bar i u { inline-size: 0; }
@media (min-width: 600px) {
  .ig { padding: 24px 26px 20px; }
  .ig-bars li { grid-template-columns: minmax(8.5rem, 34%) 1fr 5.5rem; grid-template-areas: "l b n"; gap: 14px; align-items: center; }
  .ig-n { text-align: end; }
}

.ig-bar i.tg { background: repeating-linear-gradient(45deg, rgba(145, 99, 242, .62) 0 7px, rgba(145, 99, 242, .26) 7px 14px); }
.ig-bar i.tg:dir(rtl) { background: repeating-linear-gradient(-45deg, rgba(145, 99, 242, .62) 0 7px, rgba(145, 99, 242, .26) 7px 14px); }

/* opening hours: day, exact text, 24 h bar (the clock axis is always left to right) */
.ig-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ig-hours li { display: grid; grid-template-columns: 1fr; gap: 6px; }
.ig-hours .ig-l { grid-area: auto; font-weight: 700; color: var(--text, #fff); }       /* .ig-l carries a grid-area for the bars; reset it here */
.ig-hours .ig-h { color: var(--gold, #E8B95F); font-weight: 800; font-variant-numeric: tabular-nums; }
.ig-hours .ig-h em { display: block; font-style: normal; font-weight: 600; font-size: .86rem; color: var(--text-3, #A594C9); }
.ig-hours .trk { position: relative; display: block; block-size: 10px; border-radius: 5px; direction: ltr; background-color: rgba(145, 99, 242, .2);
  background-image: linear-gradient(90deg, transparent calc(25% - 1px), rgba(255, 255, 255, .2) calc(25% - 1px) 25%, transparent 25%, transparent calc(50% - 1px), rgba(255, 255, 255, .2) calc(50% - 1px) 50%, transparent 50%, transparent calc(75% - 1px), rgba(255, 255, 255, .2) calc(75% - 1px) 75%, transparent 75%); }
.ig-hours .trk b { position: absolute; inset-block: 0; left: calc(var(--o) / 24 * 100%); inline-size: calc((var(--c) - var(--o)) / 24 * 100%); border-radius: 5px; background: linear-gradient(90deg, #C99A3F, var(--gold, #E8B95F)); }
@media (min-width: 600px) { .ig-hours li { grid-template-columns: minmax(8.5rem, 30%) 11rem 1fr; align-items: center; gap: 14px; } }

/* progress rings (conic-gradient, no svg) */
.ig-rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 18px 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line, #4B2C82); }
.ig-ring { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ig-ring .r { --p: var(--v); position: relative; display: grid; place-items: center; inline-size: 6.4rem; aspect-ratio: 1; }
.ig-ring .r::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--gold, #E8B95F) calc(var(--p) * 1%), rgba(145, 99, 242, .22) 0);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 11px), #000 calc(100% - 10px)); mask: radial-gradient(farthest-side, #0000 calc(100% - 11px), #000 calc(100% - 10px)); }
.ig-ring strong { position: relative; font-size: 1.45rem; font-weight: 800; color: var(--text, #fff); font-variant-numeric: tabular-nums; }
.ig-ring p { margin: 0; font-size: .9rem; line-height: 1.3; color: var(--text-2, #E1D8F5); text-wrap: balance; }
.ig-ring p span { display: block; color: var(--text-3, #A594C9); font-size: .82rem; }
.js .ig-ring .r { transition: --p 1.2s cubic-bezier(.2, .8, .2, 1); }
.js .ig:not(.on) .ig-ring .r { --p: 0; }

/* stat strip (3-4 big numbers with an icon) */
.ig-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ig-stat { padding: 14px; border: 1px solid var(--line, #4B2C82); border-radius: 16px; background: rgba(23, 11, 46, .35); }
.ig-stat svg { display: block; inline-size: 24px; block-size: 24px; margin-bottom: 8px; fill: none; stroke: var(--gold, #E8B95F); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ig-stat b { display: block; font-size: clamp(1.7rem, 8vw, 2.4rem); line-height: 1.1; font-weight: 800; color: var(--gold, #E8B95F); font-variant-numeric: tabular-nums; }
.ig-stat span { display: block; margin-top: 4px; font-size: .92rem; line-height: 1.3; color: var(--text-2, #E1D8F5); text-wrap: balance; }
@media (min-width: 600px) { .ig-stats { grid-template-columns: repeat(4, 1fr); } .ig-stats.n3 { grid-template-columns: repeat(3, 1fr); } }

/* numbered steps / timeline (semantic <ol>, follows reading direction; vertical on every screen) */
.ig-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: s; }
.ig-steps li { counter-increment: s; position: relative; padding-block: 0 18px; padding-inline-start: 3.1rem; min-block-size: 2.6rem; }
.ig-steps li::before { content: counter(s); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 2.2rem; block-size: 2.2rem; display: grid; place-items: center; border-radius: 50%; background: var(--gold, #E8B95F); color: #241244; font-weight: 800; }
.ig-steps li::after { content: ""; position: absolute; inset-inline-start: 1.05rem; inset-block: 2.4rem 0; inline-size: 2px; background: var(--line, #4B2C82); }
.ig-steps li:last-child { padding-block-end: 0; }
.ig-steps li:last-child::after { display: none; }
.ig-steps b { display: block; font-size: 1.02rem; color: var(--text, #fff); line-height: 1.3; }
.ig-steps span { display: block; margin-top: 2px; font-size: .92rem; color: var(--text-3, #A594C9); line-height: 1.4; }
.ig-steps.dated li::before { content: attr(data-d); inline-size: auto; min-inline-size: 2.2rem; padding-inline: .5rem; border-radius: 1.1rem; font-size: .8rem; white-space: nowrap; position: static; display: inline-grid; margin-bottom: 4px; }
.ig-steps.dated li { padding-inline-start: 0; }
.ig-steps.dated li::after { display: none; }

@media (prefers-reduced-motion: reduce) { .ig-bar i, .ig-ring .r { transition: none !important; } }

/* ===== extra blocks (rows, cards, checks, compare, note, faq): from the real-estate test run; scoped under .igb so sitewide !important rules cannot reach them ===== */
/* ig-extra.css: in-section blocks for the real-estate pages (rows, cards, checks, compare, note, FAQ details).
   Sits next to the skill's infographic.css (same tokens, logical properties, he/ru/en/fr share one file).
   Every selector starts with .igb so the site's sitewide `!important` rules (h3, li, ul, tables) cannot reach it. */
.igb { margin: 6px 0 24px; }
.igb ul, .igb ol { margin: 0; padding: 0; list-style: none; }
.igb li { margin: 0; border: 0; }
.igb bdi { unicode-bidi: isolate; }
.igb svg.ic { inline-size: 26px; block-size: 26px; flex: none; fill: none; stroke: var(--gold, #E8B95F); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* rows: icon + bold line + one grey line (+ optional call button) */
.igb .ig-rows { display: grid; gap: 10px; }
.igb .ig-rows li { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line, #4B2C82); border-radius: 14px; background: linear-gradient(150deg, var(--card, #2C1554), var(--bg-2, #241244)); }
.igb .ig-rows li > svg { grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
.igb .ig-rows b { display: block; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--text, #fff); }
.igb .ig-rows b a { color: inherit; text-decoration: underline; text-decoration-color: rgba(201, 182, 251, .45); text-underline-offset: 4px; }
.igb .ig-rows .t { display: block; font-size: 15px; line-height: 1.45; color: var(--text-3, #A594C9); }
.igb .ig-call { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 14px; margin-block-start: 6px; border-radius: 999px; border: 1px solid rgba(76, 175, 125, .5); background: rgba(76, 175, 125, .13); color: #6FD0A0; font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.igb .ig-call svg { inline-size: 18px; block-size: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* cards: 3 comparable options */
.igb .ig-cards { display: grid; gap: 10px; }
.igb .ig-card { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 14px 16px; border: 1px solid var(--line, #4B2C82); border-radius: 16px; background: linear-gradient(150deg, var(--card, #2C1554), var(--bg-2, #241244)); }
.igb .ig-card > svg { grid-row: 1 / span 3; align-self: start; inline-size: 30px; block-size: 30px; }
.igb .ig-card b { font-family: 'Frank Ruhl Libre', 'Playfair Display', serif; font-size: 25px; line-height: 1.2; font-weight: 700; color: var(--gold, #E8B95F); }
.igb .ig-card .tag { justify-self: start; margin: 4px 0 4px; padding: 1px 10px; border-radius: 999px; background: rgba(145, 99, 242, .22); color: var(--accent-soft, #C9B6FB); font-size: 13.5px; font-weight: 600; line-height: 1.6; }
.igb .ig-card .t { font-size: 15px; line-height: 1.45; color: var(--text-3, #A594C9); }

/* checks: things to verify, one line each */
.igb .ig-checks { display: grid; gap: 8px; }
.igb .ig-checks li { position: relative; padding: 10px 14px; padding-inline-start: 48px; border: 1px solid var(--line, #4B2C82); border-radius: 14px; background: rgba(23, 11, 46, .35); }
.igb .ig-checks li::before { content: ""; position: absolute; inset-inline-start: 14px; inset-block-start: 12px; inline-size: 24px; block-size: 24px; border-radius: 50%; background: rgba(76, 175, 125, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236FD0A0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat; border: 1px solid rgba(76, 175, 125, .55); }
.igb .ig-checks b { display: block; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--text, #fff); }
.igb .ig-checks .t { display: block; font-size: 15px; line-height: 1.45; color: var(--text-3, #A594C9); }

/* compare: same budget, two outcomes */
.igb .ig-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.igb .ig-cmp > div { padding: 14px 14px 16px; border: 1px solid var(--line, #4B2C82); border-radius: 16px; background: rgba(23, 11, 46, .35); }
.igb .ig-cmp > div.hi { border-color: rgba(232, 185, 95, .7); background: linear-gradient(150deg, rgba(232, 185, 95, .16), rgba(145, 99, 242, .12)); }
.igb .ig-cmp small { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--accent-soft, #C9B6FB); }
.igb .ig-cmp b { display: block; margin: 4px 0 2px; font-family: 'Frank Ruhl Libre', 'Playfair Display', serif; font-size: clamp(24px, 7.4vw, 34px); line-height: 1.15; font-weight: 700; color: var(--text-2, #E1D8F5); }
.igb .ig-cmp .hi b { color: var(--gold, #E8B95F); }
.igb .ig-cmp span { display: block; font-size: 14.5px; line-height: 1.4; color: var(--text-3, #A594C9); }
.igb .ig-cmp-cap { margin: 8px 2px 0; font-size: 14px; color: var(--text-3, #A594C9); text-align: center; }

/* note: one short sentence that matters */
.igb .ig-note { margin: 12px 0 0; padding: 12px 16px; border-inline-start: 4px solid var(--accent, #9163F2); border-radius: 4px 14px 14px 4px; background: linear-gradient(135deg, var(--card, #2C1554), var(--card-2, #341C63)); font-size: 16px; line-height: 1.55; color: var(--text-2, #E1D8F5); }
.igb .ig-note a { color: var(--accent-soft, #C9B6FB); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* FAQ: same text, collapsed (in the HTML, so Google and screen readers still get it) */
.igb details.q { margin: 0 0 8px; border: 1px solid var(--line, #4B2C82); border-radius: 14px; background: linear-gradient(150deg, var(--card, #2C1554), var(--bg-2, #241244)); }
.igb details.q summary { position: relative; display: block; min-block-size: 44px; padding: 12px 16px; padding-inline-end: 46px; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--text, #fff); cursor: pointer; list-style: none; }
.igb details.q summary::-webkit-details-marker { display: none; }
.igb details.q summary::after { content: "+"; position: absolute; inset-inline-end: 16px; inset-block-start: 8px; font-size: 24px; line-height: 1.4; color: var(--gold, #E8B95F); }
.igb details.q[open] summary::after { content: "–"; }
.igb details.q .a { padding: 0 16px 14px; font-size: 16px; line-height: 1.65; color: var(--text-2, #E1D8F5); }
.igb details.q .a p { margin: 0 0 10px; }


/* fixes found while previewing in RTL (candidates to merge into infographic.css) */
.ig-steps.dated li::before { direction: ltr; unicode-bidi: isolate; }              /* 2025-26 must not read 26-2025 inside a Hebrew page */
main img.hero-img { aspect-ratio: 2 / 1; height: auto; object-fit: cover; object-position: 50% 58%; }   /* one small aligned photo slot, no 780x585 block */

/* preview-only marker for the AI-plate slot (not part of the deliverable CSS) */
.pv-slot { max-inline-size: 460px; aspect-ratio: 2 / 1; display: grid; place-items: center; text-align: center; margin: 14px 0 20px; border: 2px dashed rgba(201, 182, 251, .5); border-radius: 18px; color: var(--accent-soft, #C9B6FB); font: 600 15px/1.4 system-ui, sans-serif; padding: 12px; }

@media (min-width: 600px) {
  .igb .ig-cards { grid-template-columns: repeat(3, 1fr); }
  .igb .ig-card { grid-template-columns: 1fr; }
  .igb .ig-card > svg { grid-row: auto; margin-bottom: 6px; }
  .igb .ig-rows:not(:has(.ig-call)), .igb .ig-checks { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .igb .ig-rows:not(:has(.ig-call)):has(li:nth-child(odd):last-child) li:last-child { grid-column: 1 / -1; }
  .igb .ig-rows li:has(.ig-call) { grid-template-columns: auto 1fr auto; }
  .igb .ig-call { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .igb * { transition: none !important; animation: none !important; } }