/* ==========================================================================
   YJOYJOY — multilingual-only layout & script guards  (assets/i18n.css)
   --------------------------------------------------------------------------
   Referenced ONLY by the newly added locale pages (ru / vi / th / id / ms /
   uz / kk). Not loaded by the English site nor by de / fr / es / ar, so it
   cannot alter any existing page.

   Every rule below corresponds to a defect that was measured on a real
   locale page, not to a stylistic preference.

   1) Long-word breaking in headings
      Measured: h2.h-section "Почему YJOYJOY выбирают производственным
      партнёром в детейлинге?" rendered 751px of scroll width inside a 562px
      column (document scrollWidth 1488 at a 1440 viewport; 506 at 390).
      overflow-wrap:break-word brought both back to the viewport width.

   2) .about-intro flex children default to min-width:auto, so the text column
      could not shrink below its min-content width (751px) inside a 1240px
      container. min-width:0 lets the column shrink and wrap.

   3) .section-head on <=640px keeps the heading and its trailing button on one
      row. Russian "Смотреть все" is wider than "View All", pushing the button
      to right:466 inside a 358px parent. Allowing the row to wrap fixes it.

   4) Sub-pixel residue: after the wrap fix no element extends past the
      viewport, yet scrollWidth still rounded up by 1px at 390px because of a
      fractional line box. Clipping the section's horizontal axis removes the
      1px scroll region without changing any layout (no child overflows).

   5) Cyrillic serif fallback (ru / kk). The site's --serif stack is a
      CJK-first stack (Songti SC / STSong / Source Han Serif SC / SimSun).
      On a system where only SimSun resolves, Cyrillic is laid out with
      full-width glyph advance: the H1 "Продукция для детейлинга автомобилей"
      rendered as "П р о д у к ц и я  д л я" — one word per line, letters
      spread across the whole line, pushing the hero to a single narrow
      column. Latin and Thai are unaffected by this, so the override is
      scoped to ru / kk only.

   6) NOTE — a gold band with truncated text at 390px is NOT a defect: that is
      the .marquee / .marquee-track ticker, which scrolls horizontally by
      design and is clipped by its own overflow. No rule was added for it.
   No colours, font sizes, component structure, spacing scale or global
   selectors are changed. Nothing here loads on an English page.
   ========================================================================== */

/* ── 1 & 2: shrink + wrap ─────────────────────────────────────────────────── */
.container.about-intro > * { min-width: 0; }
h1, h2, h3, .h-display, .h-section, .lead { overflow-wrap: break-word; }
.btn { max-width: 100%; }

/* ── 4: sub-pixel containment ─────────────────────────────────────────────── */
.section-paper { overflow-x: clip; }

/* ── 5: Cyrillic serif fallback ───────────────────────────────────────────── */
/* Georgia and Times New Roman both carry Cyrillic; listing them first stops the
   CJK font from claiming the H1. Kazakh-specific letters (ә ғ қ ң ө ұ ү һ і)
   fall through to Times New Roman, which covers Cyrillic Extended-A.
   --sans is left untouched: the sans stack already renders Cyrillic
   proportionally (verified on the rendered body copy). */
html[lang="ru"],
html[lang="kk"] {
  --serif: Georgia, "Times New Roman", "PT Serif", "Noto Serif", serif;
}

/* ── 3: narrow-viewport behaviour ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .section-head { flex-wrap: wrap; row-gap: 12px; }
}

/* ── 7: long compound words (ru / kk / vi) ─────────────────────────────────── */
/* Measured on PART C pages at 390px (viewport 390, before this rule):
     h3  "Интересуют пеногенераторы и аппараты высокого давления?"
         ink right-edge 445 -> 55px past the viewport
     h2.h-section "Все пеногенераторы и аппараты высокого давления…"  54px
     kk h3 / h2.h-section                                            24-25px
     kk h2.h-section "Біз біріктірілген жүкпен әлемге экспорттаймыз" 35px
     ru 1024px card "Упаковка и дизайн"                               37px
   overflow-wrap:break-word (rule 1) does NOT help when a single word is wider
   than its container — it only breaks between words. `anywhere` (a) breaks
   inside the word and (b) lowers min-content width, which is also what lets
   the grid/flex tracks below shrink. Latin/Thai text is unaffected unless a
   word genuinely cannot fit, so no visual change on the English site (this
   file is not loaded there at all). */
h1, h2, h3, h4, h5, .h-display, .h-section, .lead,
p, li, td, th, dd, dt, blockquote, figcaption,
.btn, .faq-q, .faq-a, .faq-item, .prod-card-body, .prod-card-specs, .contact-detail {
  overflow-wrap: anywhere;
}
html[lang="ru"], html[lang="kk"], html[lang="vi"] { hyphens: auto; }

/* ── 8: grid / flex children must be allowed to shrink ─────────────────────── */
/* 1fr == minmax(auto,1fr): the track floor is the child's min-content width, so
   a long Russian/Kazakh word or a nowrap button pins the track and the whole
   grid grows past the viewport. Measured: .contact-info 424px wide inside a
   390px viewport (products-pressure, 390px); div.fade-in-up 161px wide starting
   at x=916 in a 1024px viewport (private-label, 1024px).
   min-width:0 lets the existing column counts keep their proportions instead of
   being forced to a single column, so desktop multi-column layout is preserved. */
.contact-band, .contact-info, .contact-quick, .contact-detail,
.adv-grid, .why-list, .prod-grid, .news-grid, .cat-row, .pl-grid,
.hero-stats, .fade-in-up, .fade-in-left, .fade-in-right {
  min-width: 0;
}
[style*="grid-template-columns"] > * { min-width: 0; max-width: 100%; }
[style*="display:flex"] > * { min-width: 0; }