/* Typography and line-break polish (Yair 11.11.2026 08:11, site-design msg mmwbq0ftq0ou3js5).
   Layout only: no word, number, quote or review changes. Loaded last on every page.
   Rule of thumb: headings, questions, labels and buttons get balanced lines (no long line + short line,
   no lone word on the last line); body text keeps "pretty" (lines fill from the start, no lone last word). */

/* 1. Headings, FAQ questions, legends, card titles, buttons, chips, tags: balanced lines on every template */
h1, h2, h3, h4, h5, h6, summary, legend, th,
.btn, .btn-go, .btn--red, button, a[class*="btn"], .chip span, label.chip, .tag, .eyebrow, .kick,
.rel b, .steps b, .p-field li b, figcaption b { text-wrap: balance; }

/* 2. Short standalone blocks (section leads, hero subtitles, notes, form fine print, stat labels, captions):
      balanced, so a 2-3 line block never ends with a stub line */
.lead, .sub, .sub2, .start, .accent, .honest, .note, .fine, .contact__lede, .p-field .start, .p-field li span,
.ledger div > span, .ticks li, .us p, .them p, .go-row, .subj-line, .p2-note, .pc-copy p, .side > p,
figcaption, .small-q blockquote, .ck p, .lform .link-wa, .sol-final, .note-box { text-wrap: balance; }

/* 3. Body text (articles, legal pages, card text in rows): pretty, never a lone last word */
p, li, dd, td, blockquote, .prose p, .post p, .post li { text-wrap: pretty; }
/* keep 1 and 2 above winning over the generic body rule */
:is(.lead, .sub, .sub2, .start, .accent, .honest, .note, .fine, .contact__lede, .ticks li, .us p, .them p,
    .go-row, .subj-line, .p2-note, .pc-copy p, .side > p, .small-q blockquote, .ck p, .sol-final, .note-box) { text-wrap: balance; }
.p-field li span, .ledger div > span { text-wrap: balance; }

/* 4. Article lists (articles hub, categories, related posts): card titles balanced, equal-height cards,
      the excerpt clamp keeps its 3 lines */
.post-card .pc-body h3, .pc-body h3 { text-wrap: balance; }

/* 5. Cookies page table: on a phone it was wider than the screen (the "how long" column needed a sideways scroll).
      A slightly smaller type and padding let all four columns fit; cookie names are never broken inside a name. */
@media (max-width: 480px) {
  .ck-table { font-size: 14px; }
  .ck-table th, .ck-table td { padding: 6px 4px; }
  .ck-table td[dir="ltr"] { font-size: 13.5px; overflow-wrap: normal; }
}

/* 6. Titles inside cards, side boxes and rows: the older "pretty" rule for them (demo5-skin) gave a long line + a short
      line; titles are balanced like every other heading. Body text in those cards stays "pretty" (Yair 9.11.2026). */
html main :is(.card, .grid2 > *, .grid3 > *, .grid4 > *, .posts > *, .tracks > *, .compare > *, .resp > *, .rel li, .steps li, .side, .p-field, .v, .person) :is(h2, h3, h4, figcaption) { text-wrap: balance; }

/* 7. A heading split by a forced break: each part is its own balanced line block (build adds span.tw-l) */
.tw-l { display: block; text-wrap: balance; }

/* 8. Form chips on phones (institutional forms, two per row): a little less side padding, so a 3-word option fits on one line */
@media (max-width: 480px) {
  .lform fieldset.chips .chip span { padding-inline: 10px; }
}

/* 9. A whole English sentence or block inside a Hebrew page (build adds bdi.tw-ltr): it wraps like any sentence.
      The older nowrap rule for bdi (qa1110) is for short terms and formulas; a full sentence under it ran off the screen. */
.post-body bdi.tw-ltr, bdi.tw-ltr { white-space: normal; }

/* 10. Rows of steps and cards (Yair 11.11.2026 12:51, site-design chat: "אחד 2 שורות אחד 4 ... אין אחידות").
      Layout only, no word changes. In a row of steps or cards every description starts on the same line, also when one
      title has one line and its neighbours two (a title of one or two words is never re-wrapped to match, Yair 11.11.2026 11:17):
      each item takes its rows from the list (subgrid), so the title row is as tall as the tallest title in that row.
      Items keep equal heights; stacked items (phones) are left as they are. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 761px) {
    .steps > li { grid-row: span 2; grid-template-rows: subgrid; row-gap: 8px; }
  }
  @media (min-width: 1024px) {
    .how__steps > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  }
  @media (min-width: 621px) {
    .who .grid4 > a.card.linkcard { display: grid; grid-row: span 4; grid-template-rows: subgrid; justify-items: start; align-items: start; }   /* the card's own gap is kept */
  }
}