/*
 * bills-guides.css: דפי המדריכים (/guides, /guides/{slug}) של ורטיקל "חשבונות הבית".
 * -----------------------------------------------------------------------------
 * נטען אחרי /css/modern-article.css של ההורה (רצועות .sm-article-callout, FAQ, .article-cta-panel, טבלאות, פריסת
 * .sm-modern-article/.topLeft). ההורה מניח את compareTables.css (h1Title, h2Title, tableOfContent, supermarkerArticle),
 * שהורטיקל לא טוען בכוונה (כופה 980px), ולכן החלקים האלה מוגדרים כאן מחדש על טוקני --kg-*. mobile-first, gutter 16px, tap ≥44px.
 * -----------------------------------------------------------------------------
 */

/* ---------- 1. כותרות הדף ---------- */
/* רוחב הדף (בקשת רונן 2026-09-20: "הרוחב כמו המאמרים הישנים"): modern-article.css של ההורה נועל
   ‎#main.centerDesign ל-1320px ונטען אחרי bills.css, ולכן ניצח את ‎--bl-max (1400) של הורטיקל. הסלקטור
   כאן דו-מחלקתי ולכן גובר, והמדריך מתיישר לרוחב דפי ההשוואה. מתחת ל-1400 הרוחב נשאר רספונסיבי (100%). */
#main.centerDesign.bl-main--guide { width: 100%; max-width: var(--bl-max); }
/* עמודת הצד גדלה עם הדף (הדפוס של docs/compare-pages-wide-layout.md: 27% עם רצפה 300px), כדי שעמודת המאמר
   תישאר סביב 950px, רוחב ה-hero, ושכרטיסי המדריכים והאשף לא יהיו צרים מדי ברוחב 1400. */
@media (min-width: 992px) {
    #main.bl-main--guide .sm-modern-article > .topLeft { flex: 0 0 clamp(300px, 27%, 380px); width: auto; }
}

.bl-guide { padding-top: 8px; }
.bl-guide .h1Title {
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 10px;
    color: var(--kg-ink);
}
.bl-guide .h2Title {
    font-family: 'Noto Sans Hebrew', sans-serif;
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.65;
    color: #333;
    margin: 0 0 18px;
    text-align: right;
}
@media (min-width: 768px) {
    .bl-guide .h1Title { font-size: 2rem; }
    .bl-guide .h2Title { font-size: 1.1rem; }
}
.bl-guide__draft, .bl-guide__problems { margin: 0 0 12px; }
.bl-guide__problems { padding-right: 20px; }
/* מספר עם ₪ משמאל לספרות בתוך טקסט עברי (אותו כלל כמו bills-compare.css, שהמדריכים לא טוענים) */
.bl-guide .bl-num, .bl-guides-index .bl-num { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.bl-guides-index .bl-value { margin: 6px 0 0; font-size: 15px; }

/* ---------- 2. גוף המאמר (מה ש-.supermarkerArticle של compareTables.css נתן) ---------- */
.bl-guide .supermarkerArticle {
    font-family: 'Noto Sans Hebrew', sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: right;
}
.bl-guide .supermarkerArticle h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.4; color: #000; margin: 0 0 12px; }
.bl-guide .supermarkerArticle h4 { font-size: 1.1rem; font-weight: 600; line-height: 1.4; color: #000; margin: 0 0 10px; }
.bl-guide .supermarkerArticle p,
.bl-guide .supermarkerArticle ul,
.bl-guide .supermarkerArticle ol { font-size: 16px; line-height: 1.6; margin: 0 0 15px; color: #333; }
.bl-guide .supermarkerArticle ul,
.bl-guide .supermarkerArticle ol { padding-right: 20px; }
.bl-guide .supermarkerArticle a { color: var(--kg-brand); text-decoration: underline; text-underline-offset: 2px; }
.bl-guide .supermarkerArticle a:hover { color: var(--kg-brand-dark); }
.bl-guide .supermarkerArticle img { max-width: 100%; height: auto; }
/* תמונת ה-hero (Pages/Guides/GuideHero.cs): הדפדפן בוחר מידה מה-srcset לפי sizes, ואסור למתוח אותה מעבר ל-950px
   של ‎_XL. לכן max-width ולא width:100% (עמודת המאמר רחבה מ-950 במסכים גדולים ו-width:100% היה מגדיל בהגדלה).
   ⚠️ הסלקטור דו-מחלקתי בכוונה: ‎.bl-guide .supermarkerArticle img בשורה שמעליו מנצח סלקטור של מחלקה אחת + אלמנט.
   aspect-ratio רק על הווריאנט עם srcset (שם כל חמש המידות 3:2, ולכן אין עיוות): שומר מקום ומונע CLS לפני הטעינה. */
.bl-guide .bl-guide__hero img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 0 0 14px; }
.bl-guide .bl-guide__hero img[srcset] { aspect-ratio: 3 / 2; }
.bl-guide__dates { margin: 0 0 14px; font-size: 14px; color: var(--kg-muted); }

/* תוכן העניינים (compareTables.css .tableOfContent / #tableOfContent, על הטוקנים) */
.bl-guide .tableOfContent { margin: 1.25em 0 1.75em; text-align: right; }
.bl-guide .table-of-content-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; }
.bl-guide #tableOfContent { list-style: none; border-right: 2px solid var(--kg-line); margin: 0 0 0 0; padding: 0 14px 0 0; }
.bl-guide #tableOfContent li { margin: 0 0 8px; font-size: 15px; }
.bl-guide #tableOfContent a { color: var(--kg-brand); text-decoration: none; }
.bl-guide #tableOfContent a:hover { text-decoration: underline; color: var(--kg-brand-dark); }

/* ---------- 3. טבלאות חיות (_LiveCellularTable, _NetworkTable) ---------- */
.bl-guide .chart-card { margin: 1.25rem 0 1.75rem; padding: 14px 16px; border: 1px solid var(--kg-line); border-radius: 12px; background: #fff; }
.bl-guide .chart-title { font-weight: 800; font-size: 1.05rem; margin: 0 0 6px; color: var(--kg-ink); }
.bl-guide .chart-title small { font-weight: 500; color: var(--kg-muted); font-size: 0.85em; }
.bl-guide .bl-live__stats { font-size: 14px; color: var(--kg-muted); margin: 0 0 10px; }
.bl-guide .chart-source { font-size: 13px; color: var(--kg-muted); margin: 10px 0 0; }
.bl-guide .bl-live-note { font-size: 14.5px; color: var(--kg-muted); background: var(--kg-soft); border-radius: 10px; padding: 12px 14px; }
.bl-guide .sm-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* ⚠️ modern-article.css כופה table-layout:fixed מתחת ל-992px (.article table), וזה דוחס 7 עמודות ל-375px עד שהכותרות נערמות.
   הטבלה החיה גוללת אופקית בתוך .sm-table-scroll במקום להידחס: auto + רוחב מינימלי. */
.bl-guide .article table.bl-live-table { width: 100%; min-width: 600px; table-layout: auto; border-collapse: collapse; font-size: 14px; margin: 0; }
.bl-guide .article .bl-live[data-bl-live="networks"] table.bl-live-table { min-width: 480px; }
.bl-guide table.bl-live-table th,
.bl-guide table.bl-live-table td { padding: 8px 10px; border-bottom: 1px solid var(--kg-line); text-align: right; vertical-align: top; }
.bl-guide table.bl-live-table thead th { background: var(--kg-soft); font-weight: 700; white-space: nowrap; }
.bl-guide table.bl-live-table tbody th { font-weight: 700; white-space: nowrap; }
.bl-guide table.bl-live-table .bl-live__num { white-space: nowrap; }
.bl-guide table.bl-live-table small { display: block; font-size: 12px; color: var(--kg-muted); white-space: normal; }
.bl-guide .bl-live__muted { color: var(--kg-muted); }

/* ---------- 4. CTA (skill §7: כפתור אחד, צבע המותג של הורטיקל) ---------- */
.bl-guide .article-cta-panel { border-color: var(--kg-soft); border-radius: 12px; }
.sm-modern-article a.article-cta-button--bills,
.sm-modern-article a.article-cta-button--bills:link,
.sm-modern-article a.article-cta-button--bills:visited { background-color: var(--kg-brand); color: #fff; }
.sm-modern-article a.article-cta-button--bills:hover,
.sm-modern-article a.article-cta-button--bills:active { background-color: var(--kg-brand-dark); color: #fff; }

/* ---------- 5. FAQ: מקלדת (ה-div הוא role=button; המראה מ-modern-article.css) ---------- */
.bl-guide .faq-question:focus-visible { outline: 3px solid var(--kg-brand); outline-offset: -3px; }
.bl-guide .faq-answer p:last-child { margin-bottom: 0; }
/* ⚠️ הריווח בין ה-"+" לשאלה (ממצא רונן): modern-article.css נותן ל-.faq-icon ‏margin-right פיזי (1em בדסקטופ,
   0.8em מתחת ל-768px). ב-RTL ה-icon הוא הראשון בשורה, ולכן margin-right מרחיק אותו מקצה הכרטיס ולא מהטקסט,
   והשאלה נצמדת לאייקון. כאן logical properties: end = שמאל ב-RTL, כלומר הרווח נופל בין ה-+ לשאלה.
   הסלקטור בן שלוש מחלקות כדי לנצח גם את הכלל שבתוך ה-media query (media אינו מוסיף ספציפיות, אבל הוא בקובץ אחר). */
.bl-guide .faq-container .faq-question .faq-icon {
    flex-shrink: 0;
    margin-inline-end: 14px;
    margin-inline-start: 0;
}

/* ---------- 6. מדריכים קשורים, עמודת צד ---------- */
.bl-guide .bl-guide-related { margin: 1.5rem 0 0; }
.bl-guide .bl-guide-related > h3 { margin-bottom: 10px; }
/* ⚠️ ‎.bl-guide .supermarkerArticle a (ירוק עם קו תחתון, לקישור בתוך פסקה) מנצח את ‎.bl-guides li a בספירת
   המחלקות (2 מול 1), ולכן בלוק "מדריכים קשורים" קיבל כרטיסים מקו-תחתון. בכרטיס הקישור הוא כל השטח ולא טקסט
   בתוך משפט, ולכן מחזירים כאן את הצבע והקו של הכרטיס (bills.css). */
.bl-guide .supermarkerArticle .bl-guides li a,
.bl-guide .supermarkerArticle .bl-guides li a:hover,
.bl-guide .supermarkerArticle .bl-guides li a:focus-visible { color: var(--kg-ink); text-decoration: none; }
.bl-guide .topLeft .bl-guides { grid-template-columns: 1fr; }
.bl-guide .topLeft .h3Heading { font-size: 1.05rem; font-weight: 800; margin: 0 0 8px; color: var(--kg-ink); }
.bl-guide .topLeft p { font-size: 14.5px; color: #333; margin: 0 0 10px; }
.bl-guide .bl-guide-side { background: var(--kg-soft); border-radius: 12px; padding: 16px; }
.bl-guide .bl-guide-side__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #fff; border: 1.5px solid var(--kg-line-strong); color: var(--kg-brand-dark); font-weight: 700; text-decoration: none; }
.bl-guide .bl-guide-side__link:hover { border-color: var(--kg-brand); background: #fff; }
.bl-guide .topLeft > div > a:only-child { color: var(--kg-brand); font-weight: 600; }

/* ---------- 7. אינדקס המדריכים ---------- */
.bl-guides-index .bl-guides-group { margin: 8px 0 22px; }
.bl-guides-index .bl-guides-group h2 { font-size: 1.35rem; font-weight: 800; margin: 22px 0 10px; color: var(--kg-ink); }
.bl-guides-index .bl-guides-group h2 small { font-size: 0.75em; font-weight: 500; color: var(--kg-muted); }

/* ---- guide visuals (agent A) ----
 * הגרפים החיים (_PriceByGbChart, _ProviderPriceRangeChart) ותמונה בגוף המאמר.
 * שורת גרף = רשת CSS: תווית (HTML) · רצועה (SVG inline, preserveAspectRatio="none") · ערך (HTML).
 * הטקסט נשאר HTML בכוונה: טקסט בתוך viewBox מתכווץ יחד עם הגרף ובלתי קריא ב-375px.
 * ה-SVG מצויר בקואורדינטות 0..100 והרצועה גדלה מימין לשמאל (RTL), ולכן x = 100 פחות הערך באחוזים.
 */
.bl-guide .article figure.bl-chart { margin: 1.25rem 0 1.75rem; }
.bl-guide .bl-chart { --bl-chart-label: minmax(96px, 27%); --bl-chart-value: minmax(56px, auto); }
/* הרשת יושבת על ה-ul וכל שורה היא display:contents, כדי שגם שורת הציר תשב בדיוק על עמודת הרצועה */
.bl-guide .bl-chart__rows {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: var(--bl-chart-label) 1fr var(--bl-chart-value);
    align-items: center;
    gap: 13px 12px;
}
.bl-guide .bl-chart__row { display: contents; }
.bl-guide .bl-chart__label { font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--kg-ink); }
.bl-guide .bl-chart__label small { display: block; font-size: 12.5px; font-weight: 400; color: var(--kg-muted); }
.bl-guide .bl-chart__plot { display: block; height: 22px; border-radius: 999px; background: #eff4f2; overflow: hidden; }
.bl-guide .bl-chart__plot svg { display: block; width: 100%; height: 100%; }
.bl-guide .bl-chart__bar { fill: var(--kg-brand); }
.bl-guide .bl-chart__band { fill: #6faa93; }
.bl-guide .bl-chart__median { fill: var(--kg-brand-dark); }
.bl-guide .bl-chart__value { font-size: 14.5px; font-weight: 700; color: var(--kg-ink); white-space: nowrap; text-align: left; }
.bl-guide .bl-chart__axis-in {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    margin-top: -6px;
    font-size: 12.5px;
    color: var(--kg-muted);
}
.bl-guide .bl-chart figcaption.chart-source { font-size: 13px; color: var(--kg-muted); margin: 10px 0 0; }

/* מובייל: התווית עולה לשורה משלה, כדי שהרצועה לא תתכווץ לכמה פיקסלים */
@media (max-width: 560px) {
    .bl-guide .bl-chart__rows { grid-template-columns: 1fr var(--bl-chart-value); gap: 6px 10px; }
    .bl-guide .bl-chart__label { grid-column: 1 / -1; margin-top: 8px; }
    .bl-guide .bl-chart__axis-in { grid-column: 1; margin-top: 0; }
}

/* תמונה בגוף המאמר (סולם 4 גדלים מ-.agents/tools/home-bills/build-guide-images.py) */
.bl-guide .article .bl-guide-figure { margin: 1.25rem 0 1.75rem; }
.bl-guide .article .bl-guide-figure img { display: block; width: 100%; height: auto; border-radius: 12px; }
.bl-guide .article .bl-guide-figure figcaption { margin: 8px 0 0; font-size: 13px; color: var(--kg-muted); }