/* QA layer · mobile & tablet (≤1024px) fixes from the 2026-10 QA round — owned by the QA-mobile pass
   Loads after every global layer and before page CSS; everything lives inside max-width:1024px blocks.
   Sections: A shared (≤1024) · B phone (≤700 / ≤640) · C tablet (769–1024) */

/* ═══════════════════════ A · shared, every width ≤1024 ═══════════════════════ */
@media (max-width: 1024px) {

  /* A1 · buttons that wrap: balanced lines, never a lone "←" on line two
          (seen on /method/ "הגיע הרגע שלי לבחור בעצמי ←", home "לצפייה בלוח השנה…", /sessions/, /process/) */
  .btn, .pj-next, .lead-form .submit { text-wrap: balance; }

  /* A2 · checkboxes never squash inside flex labels
          (/contact/ #c1 rendered 5×66, /training/ #c1 9×13, newsletter 13×13) */
  input[type="checkbox"], input[type="radio"] {
    width: 18px !important; height: 18px !important; min-width: 18px !important;
    flex: 0 0 18px !important; align-self: flex-start; margin: 2px 0 0 !important;
  }

  /* A3 · type floors — Hebrew under 12.5px is unreadable on glass */
  .breadcrumb, .pp-hero-copy .breadcrumb { font-size: 12.5px !important; }
  .eyebrow, .pp-hero-copy .eyebrow, .label, .cover-kicker { font-size: 12.5px !important; }
  .topstrip-in { font-size: 12px !important; }
  .attrib, .cat-tag, .ep-meta, .vp-meta, .footer-nye-col h5, .lang-toggle { font-size: 12.5px !important; }
  label[style*="font-size:12px"], label[style*="font-size: 12px"] { font-size: 13px !important; }
  .product .foot .add, .product .add, button.add { font-size: 13px !important; }
  .tier-pick { font-size: 11.5px !important; }

  /* A4 · tap targets: small inline links grow a hit box without moving the layout */
  .breadcrumb a, .footer-nye-bottom a, .pubmed, .course-cal-link, .acad-login {
    display: inline-block; padding-block: 8px; margin-block: -8px;
  }
  .btn-ghost { min-height: 40px; align-items: center; }
  .footer-nye-col a { display: inline-block; padding: 5px 0; line-height: 1.4; }
  .footer-nye-bottom { line-height: 1.9; }
  .filter, .pod-pill { min-height: 36px; }
}

/* ═══════════════════════ B · phone ═══════════════════════ */
@media (max-width: 700px) {

  /* B1 · /workshops/ "סנדוויץ' תמיכה": the inline 3-column grid never collapsed (3 columns of 39px, one letter per line) */
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 14px !important; }
  [style*="grid-template-columns:1fr 1fr 1fr"] > div[style*="height:1px"] { display: none !important; }

  /* B2 · /workshops/ tier comparison: was a 720px-wide table scrolled sideways with 2 of 3 tiers hidden.
          Now each row stacks: label band, then the three tiers each prefixed with its name (same pattern
          nye-v5.css uses for /method/ .compare-table). */
  .compare { overflow: visible !important; }
  .compare .compare-head { display: none !important; }
  .compare .compare-row { grid-template-columns: 1fr !important; min-width: 0 !important; }
  .compare .compare-row > div { padding: 10px 18px !important; border-bottom: 0 !important; }
  .compare .compare-row > div:first-child {
    padding: 14px 18px 8px !important; font-size: 14px !important; letter-spacing: 0 !important;
    background: var(--he-surface-2) !important; border-bottom: 1px solid var(--he-border) !important;
  }
  .compare .compare-row > div:last-child { padding-bottom: 16px !important; }
  .compare .compare-row:not(:last-child) > div:last-child { border-bottom: 1px solid var(--he-border) !important; }
  .compare .compare-row > div:nth-child(n+2)::before {
    display: block; font-family: var(--he-font-sans); font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
    margin-bottom: 3px; color: var(--he-fg-3);
  }
  .compare .compare-row > div:nth-child(2)::before { content: "דיגיטלי · DIY"; }
  .compare .compare-row > div:nth-child(3)::before { content: "זום (לייב) · מומלץ"; color: var(--b-magenta, #872B64); }
  .compare .compare-row > div:nth-child(4)::before { content: "פרונטלי"; }
  html[dir="ltr"] .compare .compare-row > div:nth-child(2)::before { content: "Digital · DIY"; }
  html[dir="ltr"] .compare .compare-row > div:nth-child(3)::before { content: "Zoom (live) · recommended"; }
  html[dir="ltr"] .compare .compare-row > div:nth-child(4)::before { content: "In person"; }
  .compare .compare-row.price > div:not(:first-child) { font-size: 22px !important; padding-block: 6px !important; }
  .compare .compare-row.tiers > div:first-child { display: none !important; }
  .compare .compare-row.tiers > div::before { display: none !important; }
  .compare .compare-row.tiers { padding: 8px 0 !important; gap: 0 !important; }
  .compare .compare-row.tiers > div { padding: 5px 18px !important; }
  .compare .tiers .btn { min-height: 44px; }

  /* B3 · /articles/ toolbar: search and chips shared one row, so 6 of 7 topic chips were off-screen.
          Search takes the row, chips wrap beneath it — every topic visible, no hidden swipe. */
  .toolbar-in { flex-wrap: wrap !important; }
  .search-wrap { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; }
  .filters {
    flex: 1 1 100% !important; width: 100% !important; flex-wrap: wrap !important; overflow: visible !important;
    -webkit-mask-image: none !important; mask-image: none !important; padding: 0 !important; gap: 8px !important;
  }
  .filter { flex: 0 0 auto !important; }
}

@media (max-width: 640px) {

  /* B4 · /process/: the hero photo and the voices carousel bleed 2px past the viewport
          (margin-inline:-20px against an 18px gutter) */
  .pp-hero-profile, .pj-carousel-wrap { margin-inline: -18px !important; }

  /* B5 · /process/ "דגשים לתהליך": a 2×2 grid of 170px cards (h3 on three lines) → one column */
  .empha-grid { grid-template-columns: 1fr !important; }

  /* B6 · home hero: the H1 sat at 23px — barely larger than body copy */
  .hero-money-card .h1 { font-size: clamp(25px, 6.8vw, 30px) !important; line-height: 1.2 !important; }
}

/* ═══════════════════════ C · tablet (701–1024) ═══════════════════════ */
@media (min-width: 701px) and (max-width: 1024px) {
  /* C1 · home "6 ways": one card per row with a 660px photo made each card a full screen → two-up, balanced */
  .ways-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  .ways-grid .way-card img, .ways-grid .way-img { aspect-ratio: 4 / 3; height: auto !important; object-fit: cover; }
  /* C2 · about "what the center offers": 8 thin full-width rows → two columns of four */
  .offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}