/* ============================================================================
 *  nahash.co.il  |  public/css/triage.css
 *  ────────────────────────────────────────────────────────────────────────────
 *  🔴 TRIAGE ENGINE — דף הבית הוא כלי החלטה, לא ברושור.
 *
 *  שאלה אחת («איפה הנחש עכשיו?») → תשובה מותאמת אישית עם הצעדים הנכונים,
 *  והלוכדים הזמינים באזור (Tier 1).
 *
 *  ⚠️ כל המחלקות בתחילית `qa-` — כדי לא להתנגש ב-styles.css או
 *     ב-design-2026.css. אין כאן דריסה של שום רכיב קיים.
 *  ⚠️ שכבת התוכן שמתחת (SEO) משתמשת במחלקות **קיימות**
 *     (.section / .card / .accordion / .grid) ולכן לא נוספה כאן.
 * ========================================================================== */

.qa { display: flex; flex-direction: column; }

/* ------------------------ ♿ מסלול עיוור / קורא מסך ------------------------ */
/*  מסלול "פעולה אחת" למי שלא רואה את המסך: הקישור מוסתר עד שמגיעים אליו
 *  במקלדת או בקורא מסך, ואז הוא מחליק פנימה ומופיע בראש המסך — ומחייג.
 *
 *  ‼️ position:fixed בכוונה (ולא absolute כמו .skip-link ב-styles.css):
 *     כך הוא לא "נלכד" באף מיכל ממוקם בצד האתר — הוא תמיד בראש חלון הצפייה.
 *  ‼️ המחלקה בתחילית qa- ואינה דורסת את .skip-link הקיים. */
.qa-skip {
  position: fixed; inset-block-start: 0; inset-inline-start: -9999px;
  z-index: 999;
  background: linear-gradient(135deg, #c4261c, #a91f16);
  color: #fff; padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--r-full) 0;
  font-weight: 800; text-decoration: none;
  box-shadow: 0 12px 28px -20px rgba(196, 38, 28, 0.9);
}
.qa-skip:focus { inset-inline-start: 0; }

/* ------------------------------ רצועת הכשה ------------------------------ */
/*  הרצועה עצמה היא קישור `tel:101` — לחיצה אחת מחייגת למד״א,
 *  בלי מסך ביניים. המדריך ("מה עושים") יושב בקופסה נפרדת בצד שמאל
 *  של הרצועה, באותו גובה — כך הוא לא תופס שורה משלו. */

.qa-bite { display: flex; align-items: stretch; gap: 0.5rem; }

.qa-bite__call {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0.9rem; border-radius: var(--r);
  background: linear-gradient(135deg, #c4261c, #a91f16);
  color: #fff; text-align: start; text-decoration: none;
  box-shadow: 0 12px 28px -20px rgba(196, 38, 28, 0.9);
  transition: transform 0.16s var(--ease), box-shadow 0.2s var(--ease);
}
.qa-bite__call:hover { color: #fff; box-shadow: 0 16px 34px -18px rgba(196, 38, 28, 0.95); }
.qa-bite__call:active { transform: scale(0.985); }
.qa-bite__ico { display: inline-flex; flex: 0 0 auto; }
.qa-bite__t { display: grid; line-height: 1.25; min-width: 0; }
.qa-bite__t b { font-size: 0.84rem; font-weight: 800; letter-spacing: -0.02em; }
.qa-bite__t small { font-size: 0.65rem; opacity: 0.9; }
.qa-bite__go {
  margin-inline-start: auto; flex: 0 0 auto;
  padding: 0.25rem 0.6rem; border-radius: var(--r-full);
  background: #fff; color: #a91f16;
  font-size: 0.72rem; font-weight: 800; white-space: nowrap;
}

/* קופסת המדריך — יושבת בצד שמאל של הרצועה, באותו גובה בדיוק
 *  (align-items: stretch), כך שהיא לא תופסת שורה נפרדת ודוחקת את
 *  «איפה הנחש עכשיו?» למטה. הטקסט עוטף אם צריך. */
.qa-bite__more {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  max-width: 9.5rem;
  padding: 0.4rem 0.7rem; border-radius: var(--r);
  text-align: center; line-height: 1.25;
  border: 1px solid color-mix(in srgb, var(--danger) 32%, transparent);
  background: var(--card-bg); color: var(--danger);
  font-size: 0.72rem; font-weight: 800; cursor: pointer;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.qa-bite__more:hover { background: color-mix(in srgb, var(--danger) 8%, transparent); }

/* ✍️ הערוץ הכתוב של מד״א — מתחת לרצועה, לא בתוכה: הרצועה עצמה היא חיוג,
   ומי שלא יכול לדבר צריך קו נפרד וברור משלו (עם קישור שאפשר להקריא). */
.qa-bite__alt {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
  margin-top: 0.55rem;
  font-size: 0.82rem; color: var(--text-dim);
}
.qa-bite__alt a { font-weight: 800; color: var(--wa); text-decoration: underline; }
.qa-bite__alt a:hover { color: var(--wa-2); }

/* ------------------------------ פס סטטוס ------------------------------ */

.qa-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem;
  padding: 0.7rem 0; border-block: 1px solid var(--line);
  font-size: 0.78rem; font-weight: 600; color: var(--text-mute);
}
.qa-status > span { display: inline-flex; align-items: center; gap: 0.4rem; }
.qa-status b { color: var(--text); font-weight: 700; }
.qa-status .ico { color: var(--brand); }

/* ------------------------------ מסך השאלה ------------------------------ */

/* בלי ה-eyebrow («צעד אחד · 20 שניות») — הכותרת עולה ישר למעלה */
.qa-ask { padding: 1.15rem 0 1.4rem; }
.qa-ask h1 {
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 900; letter-spacing: -0.042em; line-height: 1.06;
  text-wrap: balance;
}
.qa-ask p {
  margin-top: 0.6rem; max-width: 46ch;
  font-size: clamp(0.94rem, 2.2vw, 1.05rem);
  color: var(--text-dim);
}

/* ------------------------------ אריחי המצבים ------------------------------ */

.qa-tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem; margin-top: 1.2rem; }
@media (min-width: 760px) { .qa-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.qa-tile {
  position: relative; display: grid; grid-template-rows: auto 1fr; gap: 0.6rem;
  padding: 0.85rem; text-align: start;
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-2);
  cursor: pointer; overflow: hidden;
  transition: transform 0.22s var(--ease), border-color 0.2s var(--ease),
              box-shadow 0.28s var(--ease);
}
.qa-tile:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--sh-3); }
.qa-tile:active { transform: translateY(-1px) scale(0.985); }
.qa-tile.is-active { border-color: var(--brand); box-shadow: var(--ring); }

.qa-tile__art {
  display: grid; place-items: center;
  height: clamp(74px, 16vw, 100px);
  border-radius: var(--r); background: var(--surface-2); overflow: hidden;
}
.qa-tile__art svg { width: 82%; height: 82%; }
.qa-tile--hot .qa-tile__art { background: color-mix(in srgb, var(--danger) 10%, transparent); }

.qa-tile__label { display: grid; gap: 0.2rem; align-content: start; }
.qa-tile__label b { font-size: 0.94rem; font-weight: 800; letter-spacing: -0.028em; line-height: 1.2; }
.qa-tile__label small { font-size: 0.68rem; color: var(--text-mute); line-height: 1.4; }

.qa-tile__flag {
  position: absolute; top: 0.5rem; inset-inline-end: 0.5rem;
  padding: 0.1rem 0.45rem; border-radius: var(--r-full);
  background: var(--danger); color: #fff;
  font-size: 0.58rem; font-weight: 800;
}

/* ------------------------------ בטיחות + חירום ------------------------------ */

.qa-safety { display: grid; gap: 0.6rem; padding: 1.2rem 0 0.4rem; }
.qa-safety__row {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card-bg); font-size: 0.8rem; color: var(--text-dim);
}
.qa-safety__row .ico { color: var(--warn); flex: 0 0 auto; }
.qa-safety__row strong { color: var(--text); font-weight: 800; }

.qa-call {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  padding: 0.85rem 1rem; border-radius: var(--r);
  background: var(--danger); color: #fff;
  font-size: 0.92rem; font-weight: 800; letter-spacing: -0.02em;
  box-shadow: 0 16px 34px -22px rgba(196, 38, 28, 0.9);
  transition: transform 0.18s var(--ease);
}
.qa-call:active { transform: scale(0.985); }
.qa-call__t { display: grid; line-height: 1.25; }
.qa-call__t small { font-size: 0.68rem; font-weight: 500; opacity: 0.88; }

/* ✍️ החלופה הכתובה ל"להתקשר עכשיו" — אותו משקל ויזואלי, צבע וואטסאפ */
.qa-write {
  display: flex; align-items: center; gap: 0.7rem; width: 100%;
  margin-top: 0.5rem;
  padding: 0.85rem 1rem; border-radius: var(--r);
  background: var(--wa); color: #fff;
  font-size: 0.92rem; font-weight: 800; letter-spacing: -0.02em;
  box-shadow: 0 16px 34px -22px rgba(37, 211, 102, 0.95);
  transition: transform 0.18s var(--ease);
}
.qa-write:active { transform: scale(0.985); }
.qa-write__t { display: grid; line-height: 1.25; }
.qa-write__t small { font-size: 0.68rem; font-weight: 500; opacity: 0.9; }

/* ------------------------------ קישורים שקטים ------------------------------ */

.qa-quiet {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; justify-content: center;
  margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--line);
}
.qa-quiet a { font-size: 0.74rem; font-weight: 600; color: var(--text-mute); transition: color 0.18s var(--ease); }
.qa-quiet a:hover { color: var(--brand); }

/* ------------------------------ מסך התשובה ------------------------------ */

.qa-answer { display: none; flex-direction: column; padding: 1.1rem 0 0; }
.qa-answer.is-on { display: flex; }

/* כפתור החזרה — בולט בכוונה: מי שבחר מצב שגוי חייב למצוא אותו מהר */
.qa-back {
  display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start;
  max-width: 100%; text-align: start;
  padding: 0.6rem 1.05rem; margin-bottom: 0.9rem;
  border: 1px solid transparent; border-radius: var(--r-full);
  background: var(--brand); color: #fff;
  font-size: 0.75rem; font-weight: 800; letter-spacing: -0.01em;
  box-shadow: 0 10px 24px -14px rgba(11, 93, 59, 0.9);
  cursor: pointer;
  transition: background 0.18s var(--ease), transform 0.16s var(--ease);
}
.qa-back:hover { background: var(--brand-2); color: #fff; }
.qa-back:active { transform: scale(0.97); }
.qa-back .ico { flex: 0 0 auto; }

/* החזרה בתחתית התשובה — צללית, כדי לא להתחרות בכפתורי החיוג */
.qa-back--bottom {
  margin: 1.1rem 0 0;
  background: var(--card-bg); color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
  box-shadow: none;
}
.qa-back--bottom:hover { background: var(--brand-soft); color: var(--brand); }

.qa-tag {
  display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start;
  padding: 0.28rem 0.7rem; margin-bottom: 0.7rem; border-radius: var(--r-full);
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
}
.qa-tag--calm { background: var(--brand-soft); color: var(--brand); }
.qa-tag--hot, .qa-tag--danger { background: var(--danger); color: #fff; }

.qa-answer h2 {
  font-size: clamp(1.4rem, 4.6vw, 2.1rem);
  font-weight: 900; letter-spacing: -0.04em; line-height: 1.1;
  text-wrap: balance;
}
.qa-sub { margin-top: 0.5rem; max-width: 52ch; font-size: 0.94rem; color: var(--text-dim); line-height: 1.65; }

/* צעדים ממוספרים */
.qa-steps { list-style: none; counter-reset: qa; display: grid; gap: 0.55rem; margin-top: 1.1rem; padding: 0; }
.qa-steps li {
  counter-increment: qa; position: relative;
  padding: 0.9rem; padding-inline-start: 3.3rem;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r);
  font-size: 0.88rem; line-height: 1.6; color: var(--text-dim); margin: 0;
}
.qa-steps li strong { color: var(--text); font-weight: 700; }
.qa-steps li::before {
  content: counter(qa); position: absolute; top: 0.85rem; inset-inline-start: 0.85rem;
  display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-display); font-size: 0.78rem; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.qa-steps--hot li::before { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.qa-steps--danger li::before { background: var(--danger); color: #fff; }

/* "אסור בשום מצב" — הכשה */
.qa-dont {
  margin-top: 0.8rem; padding: 0.9rem; border-radius: var(--r);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
}
.qa-dont h3 {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0.6rem; font-size: 0.8rem; font-weight: 800; color: var(--danger);
}
.qa-dont ul { list-style: none; display: grid; gap: 0.4rem; padding: 0; }
.qa-dont li {
  display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.5rem; align-items: start;
  font-size: 0.79rem; line-height: 1.5; color: var(--text-dim); margin: 0;
}
.qa-dont strong { color: var(--danger); font-weight: 800; }

/* ------------------------------ הערות, ETA וכפתורים ------------------------------ */

.qa-note {
  margin-top: 0.75rem; padding: 0.75rem 0.9rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card-bg); font-size: 0.79rem; line-height: 1.6; color: var(--text-dim);
}
.qa-eta {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 0.8rem; padding: 0.75rem 0.9rem;
  border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--surface-2); font-size: 0.78rem; color: var(--text-dim);
}
.qa-eta .ico { color: var(--brand); flex: 0 0 auto; }
.qa-eta b { color: var(--text); font-weight: 800; }

.qa-cta { display: grid; gap: 0.55rem; margin-top: 1.1rem; }
@media (min-width: 620px) { .qa-cta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.qa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.1rem; border: 1px solid transparent; border-radius: var(--r);
  font-size: 0.9rem; font-weight: 800; letter-spacing: -0.02em; text-align: center;
  transition: transform 0.17s var(--ease), background-color 0.17s var(--ease);
}
.qa-btn:active { transform: scale(0.985); }
.qa-btn__t { display: grid; line-height: 1.2; text-align: start; }
.qa-btn__t small { font-size: 0.65rem; font-weight: 500; opacity: 0.86; }
.qa-btn--danger { background: var(--danger); color: #fff; }
.qa-btn--brand { background: var(--brand); color: var(--on-primary); }
.qa-btn--ghost { background: var(--card-bg); border-color: var(--line-2); color: var(--text); }
.qa-btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
/* ✍️ כפתור וואטסאפ בתוך התשובה (למשל "וואטסאפ למד״א") */
.qa-btn--wa { background: var(--wa); color: #fff; }
.qa-btn--wa:hover { color: #fff; box-shadow: 0 16px 32px -18px rgba(37, 211, 102, 0.9); }

.qa-hint { margin-top: 0.9rem; font-size: 0.7rem; color: var(--text-mute); }

/* ============================================================================
 *  🔴 TIER 1 — "הלוכדים באזורך": הלקוח מקבל את הלוכד עצמו, לא את המוקד
 * ========================================================================== */

.qa-contacts { margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.qa-contacts__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem; margin-bottom: 0.7rem;
}
.qa-contacts__head h3 {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: -0.025em;
}
.qa-contacts__head .ico { color: var(--brand); }
.qa-contacts__area {
  padding: 0.15rem 0.55rem; border-radius: var(--r-full);
  background: var(--brand-soft); color: var(--brand);
  font-size: 0.68rem; font-weight: 800;
}

/* שורת בחירת מיקום */
.qa-loc { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; margin-bottom: 0.7rem; }
.qa-field { display: grid; gap: 0.25rem; flex: 1 1 170px; min-width: 0; }
.qa-field span, .qa-field > label { font-size: 0.7rem; font-weight: 700; color: var(--text-dim); }
.qa-field input,
.qa-field select {
  width: 100%; padding: 0.6rem 0.7rem;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--field-bg); font-size: 0.84rem; color: var(--text);
}
.qa-field input:focus, .qa-field select:focus {
  outline: none; border-color: var(--brand); box-shadow: var(--ring);
}

.qa-geo {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0.9rem; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--card-bg);
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease);
}
.qa-geo:hover { border-color: var(--brand); color: var(--brand); }
.qa-geo.is-busy { opacity: 0.6; pointer-events: none; }

/* כרטיס לוכד */
.qa-people { display: grid; gap: 0.55rem; }
.qa-person {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start;
  padding: 0.85rem;
  background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r);
}
.qa-person--primary {
  border-color: color-mix(in srgb, var(--brand) 34%, transparent);
  box-shadow: 0 10px 26px -20px color-mix(in srgb, var(--brand) 60%, transparent);
}
.qa-person__av {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  font-family: var(--font-display); font-weight: 900; font-size: 0.95rem;
}
.qa-person--owner .qa-person__av { background: var(--surface-2); color: var(--text-dim); }
.qa-person__b { display: grid; gap: 0.2rem; min-width: 0; }
.qa-person__b > b { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.025em; }
.qa-person__badge {
  justify-self: start; padding: 0.1rem 0.45rem; border-radius: var(--r-full);
  background: var(--brand-soft); color: var(--brand);
  font-size: 0.6rem; font-weight: 800;
}
.qa-person--owner .qa-person__badge { background: var(--surface-2); color: var(--text-mute); }
.qa-person__meta {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.8rem;
  font-size: 0.72rem; color: var(--text-mute);
}
.qa-person__meta b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.qa-person__act { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem; margin-top: 0.5rem; }
.qa-person__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.6rem; border-radius: var(--r-sm);
  font-size: 0.79rem; font-weight: 800; letter-spacing: -0.01em; color: #fff;
}
.qa-person__btn--call { background: var(--danger); }
.qa-person__btn--wa { background: var(--wa); }
.qa-person__btn:active { transform: scale(0.97); }

.qa-empty {
  padding: 0.9rem; text-align: center;
  border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--surface-2); font-size: 0.82rem; color: var(--text-dim);
}
.qa-note-line { margin-top: 0.5rem; font-size: 0.7rem; color: var(--text-mute); }
.qa-note-line strong { color: var(--text); font-weight: 700; }

/* ------------------------------ מעברים ורספונסיביות ------------------------------ */

.qa-swap { animation: qaIn 0.4s var(--ease) both; }
@keyframes qaIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .qa-ask { padding: 1.1rem 0 1rem; }
  .qa-tiles { gap: 0.55rem; }
  .qa-tile { padding: 0.7rem; }
  .qa-steps li { padding-inline-start: 3rem; font-size: 0.85rem; }
  .qa-person__act { grid-template-columns: minmax(0, 1fr); }
  .qa-loc { flex-direction: column; align-items: stretch; }
  .qa-geo { justify-content: center; }

  /* 🔴 סדר הצפייה במובייל — הסדר שהמשתמש צריך בעין:
     1. רצועת ההכשה («הוכשתם?»)
     2. השאלה («איפה הנחש עכשיו?») + האריחים
     3. פס הסטטוס («המוקד פעיל כעת · פריסה ארצית…»)
     בלי ה-order הזה פס הסטטוס נדחף בין הרצועה לשאלה,
     ודוחק את השאלה מתחת לקפל המסך. בדסקטופ הסדר נשאר כשהיה. */
  .qa-bite { order: 1; }
  .qa-ask { order: 2; }
  .qa-status { order: 3; }
  .qa-answer { order: 4; }
  .qa-quiet { order: 5; }
}

@media (prefers-reduced-motion: reduce) {
  .qa-swap { animation: none; }
  .qa-tile:hover { transform: none; }
}

/* מצב כהה — תיקונים נקודתיים בלבד (הטוקנים מכסים את השאר) */
:root[data-theme="dark"] .qa-tile__art { background: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .qa-dont { background: rgba(255, 77, 77, 0.12); }
:root[data-theme="dark"] .qa-person--owner .qa-person__av { background: rgba(255, 255, 255, 0.06); }

/* ------------------------------ דף הבית ------------------------------ */

/* ה-Triage בראש הדף — לא צריך את ריפוד המקטע הרגיל */
#triage.section { padding-top: 1.25rem; padding-bottom: 2rem; }

/* שכבת התוכן שמתחת — מקטעים קיימים, רק קצת יותר צמודים */
#home-content .section:first-of-type { padding-top: 2.5rem; }

/* ============================================================================
 *  הגנת מובייל — לא לתת לתוכן לפרוץ את רוחב המסך
 *  ----------------------------------------------------------------------------
 *  `1fr` הוא למעשה `minmax(auto, 1fr)`, וה-`auto` הזה אומר
 *  "לא פחות מרוחב ה-min-content של התוכן". לכן טקסט ארוך או רכיב עם
 *  רוחב מינימלי גדול יכולים להרחיב את הגריד **מעבר לרוחב המסך**.
 *
 *  מה שקורה אז במובייל: כל העמוד נמתח לרוחב גדול מהמסך, נוצר גלילה
 *  אופקית (או zoom-out), ורכיבים עם `position: fixed` — כמו סרגל החיוג
 *  התחתון — נראים "מחוץ למסך".
 *
 *  התיקון התקני: `minmax(0, 1fr)` בכל גריד, ו-`min-width: 0`
 *  בכל עמודת flex שאין לה רוחב מוגדר.
 * ========================================================================== */

.qa { min-width: 0; max-width: 100%; }
.qa-field { min-width: 0; }

/* עמודות flex שצריכות להיות מסוגלות להתכווץ (ברירת המחדל היא min-width:auto) */
.qa-bite__t,
.qa-person__b,
.qa-btn__t,
.qa-call__t,
.qa-contacts__head h3 { min-width: 0; }

.qa-status,
.qa-quiet,
.qa-loc,
.qa-person__meta,
.qa-eta,
.qa-safety__row { flex-wrap: wrap; }

/* רשתות/תוכן בתוך אזורי התוכן — גם כאן לא לפרוץ את המסך */
.qa-cta, .qa-people, .qa-steps, .qa-dont ul { max-width: 100%; }

/* ============================================================================
 *  קריאוּת — הגדלת כל הטקסטים המשניים
 *  ----------------------------------------------------------------------------
 *  הבקשה: "הפונט צריך להיות גדול יותר בכל מקום חוץ מהכותרות".
 *  הכותרות (`h1`, `h2`, `.qa-tile__label b`) **לא** נגעו — הן כבר גדולות.
 *  כל מה שהיה קטן מדי לקריאה במובייל — וכמעט כל מה שהיה מתחת ל-0.9rem —
 *  הוגדל. הבלוק יושב בסוף הקובץ בכוונה, כדי שלא יהיה תלוי בסדר אחר.
 * ========================================================================== */

/* השאלה */
.qa-status { font-size: 0.9rem; }
.qa-ask p { font-size: clamp(1rem, 2.5vw, 1.12rem); }

/* רצועת ההכשה */
.qa-bite__t b { font-size: 0.94rem; }
.qa-bite__t small { font-size: 0.76rem; }
.qa-bite__go { font-size: 0.82rem; }
.qa-bite__more { font-size: 0.82rem; }
.qa-bite__alt { font-size: 0.92rem; }

/* האריחים — רק התיאור המשני, לא הכותרת */
.qa-tile__label small { font-size: 0.8rem; }

/* בטיחות וקישורים */
.qa-safety__row { font-size: 0.92rem; }
.qa-quiet a { font-size: 0.88rem; }

/* התשובה */
.qa-tag { font-size: 0.76rem; }
.qa-back { font-size: 0.88rem; }
.qa-sub { font-size: 1rem; }
.qa-steps li { font-size: 0.98rem; }
.qa-steps li::before { font-size: 0.86rem; }
.qa-dont h3 { font-size: 0.92rem; }
.qa-dont li { font-size: 0.9rem; }
.qa-note { font-size: 0.9rem; }
.qa-eta { font-size: 0.9rem; }
.qa-btn { font-size: 1rem; }
.qa-btn__t small { font-size: 0.76rem; }
.qa-hint { font-size: 0.82rem; }

/* 🔴 Tier 1 — כרטיסי הלוכדים */
.qa-contacts__head h3 { font-size: 1.1rem; }
.qa-contacts__area { font-size: 0.8rem; }
.qa-field span { font-size: 0.84rem; }
.qa-field input,
.qa-field select { font-size: 0.98rem; }
.qa-geo { font-size: 0.92rem; }
.qa-person__b > b { font-size: 1.04rem; }
.qa-person__badge { font-size: 0.74rem; }
.qa-person__meta { font-size: 0.84rem; }
.qa-person__btn { font-size: 0.9rem; }
.qa-empty { font-size: 0.92rem; }
.qa-note-line { font-size: 0.82rem; }

/* שדות מגע — 44px הוא המינימום המומלץ למובייל */
@media (max-width: 620px) {
  .qa-geo,
  .qa-person__btn,
  .qa-back,
  .qa-write { min-height: 44px; }
  .qa-bite__more { min-height: 40px; }

  /* קופסת המדריך במובייל — צרה יותר והטקסט עוטף, כדי שרכיבי הרצועה
     יישארו שלמים ולא ייחתכו בשולי המסך */
  .qa-bite { gap: 0.4rem; }
  .qa-bite__more { max-width: 7rem; padding: 0.35rem 0.5rem; font-size: 0.74rem; }

  /* הרצועה הפכה לשורה אחת עם הקופסה — השאלה עולה עוד קצת למעלה */
  .qa-ask { padding: 0.9rem 0 1rem; }
  .qa-field input,
  .qa-field select { min-height: 46px; }
}