/*
 * calmround.com — long-language layout safety net. Loaded last on every page.
 *
 * Found by scripts/i18n/site-layout-audit.cjs (8 languages × 12 pages × 360/390/820/1280 px):
 * German, French, Russian, Spanish, Italian and Japanese labels run up to about twice the English
 * width, and a few rules either forbid wrapping (white-space: nowrap) or split words letter by
 * letter (overflow-wrap: anywhere). Rules scoped with html:not([lang|="en"]) leave English as is.
 */

/* 1. A word that does not fit wraps inside its own box instead of pushing the page sideways. */
h1, h2, h3, h4, h5, p, li, dt, dd, th, td, summary, figcaption, label, blockquote,
.btn, .btn-primary, .btn-secondary, .card, .note { overflow-wrap: break-word; }
/* Long compounds (Datenschutzerklärung, Конфиденциальность) get a hyphen where the browser has a dictionary. */
html:not([lang|="en"]) :is(h1, h2, h3, h4, th, dt, summary) { -webkit-hyphens: auto; hyphens: auto; }

/* 2. Header download button: phones get the short label; the long one does not fit next to the logo. */
.cta-short { display: none; }
@media (max-width: 480px) {
  html:not([lang|="en"]) .cta-long { display: none; }
  html:not([lang|="en"]) .cta-short { display: inline; }
}

/* 3. Home hero: the "Works with the apps…" caption wraps instead of running out of the hero. */
.home-v2 .v2-hp-label { white-space: normal !important; flex: 0 1 auto !important; min-width: 0; max-width: 100%; text-wrap: balance; }
@media (min-width: 1025px) and (min-height: 501px) {
  .home-v2 .v2-hero-platforms .v2-hp-label { max-width: 44%; }
}

/* 4. Home: the two buttons under the second-camera section stack on phones instead of overflowing. */
@media (max-width: 640px) {
  .home-v2 #dual-camera .v2-section-cta { flex-wrap: wrap !important; }
  .home-v2 #dual-camera .v2-section-cta > a { flex: 1 1 100% !important; white-space: normal; text-align: center; }
}

/* 5. Tables. Header cells keep short words whole (overflow-wrap:anywhere let the table squeeze
 *    "Gerät" into one letter per line); body cells may still break anywhere so long provider names
 *    and German compounds never push the table off a phone screen. Japanese and Korean headers
 *    are kept as one unit, otherwise they wrap one character per line. */
.legal th, .plan-compare th { overflow-wrap: break-word; word-break: normal; }
.legal td, .plan-compare td { overflow-wrap: anywhere; }
html:not([lang|="en"]) :is(.legal, .plan-compare) :is(th, td) { -webkit-hyphens: auto; hyphens: auto; }
/* Korean separates words with spaces, so keep each word whole. Japanese has no spaces (keep-all would
 * make 「CalmRoundの利用時間パック」 one unbreakable block), so give its headers a minimum width instead. */
html[lang="ko"] :is(.legal, .plan-compare, .guide-table) th { word-break: keep-all; }
html[lang="ja"] :is(.legal, .plan-compare, .guide-table) th { min-width: 4.5em; }
/* On phones these tables are cards instead (section 13); the old "smaller font, tighter cells"
 * squeeze for ≤400px / ≤480px is gone with it. */

/* 6. Legal page titles on phones: one notch smaller so a single long word fits the line. */
@media (max-width: 480px) {
  html:not([lang|="en"]) .legal h1 { font-size: clamp(26px, 8vw, 36px); }
}

/* 7. Home "why" list, single column (≤900px): a plain 1fr column cannot shrink below its longest
 *    unbreakable piece, and the "See …" link inside each answer is nowrap, so Italian and French
 *    pushed the whole page sideways. Let the column shrink and the link wrap. */
@media (max-width: 900px) {
  .home-v2 #why .v2-why-item, .home-v2 #why .v2-why-item:first-child, .home-v2 #why .v2-why-item:last-child { grid-template-columns: minmax(0, 1fr) !important; }
  .home-v2 #why .v2-why-item dd a { white-space: normal; }
}

/* 8. Download page, phone landing: "Copy download link" / "Email it to myself" stay on one line
 *    in French, Spanish and Russian with a little less side padding. */
@media (max-width: 420px) {
  html:not([lang|="en"]) .m-land-actions .btn { padding-left: 12px; padding-right: 12px; }
}

/* 9. Home hero headline: when a long language needs two lines, split them evenly. */
html:not([lang|="en"]) .home-v2 .hero h1 .hero-line-1 { text-wrap: balance; }

/* 10. Home hero on phones. The page's own <style> sizes the headline for English (font size =
 *     (100vw - 47px) / 12.4, white-space: nowrap). Spanish, French, Italian and Russian headlines are
 *     15–22 ems long, so on a 360px phone they ran off both edges; they now wrap into two balanced
 *     lines. German, Japanese and Korean still fit on one line and are left alone.
 *     The line above the headline wraps instead of running off both edges. */
@media (max-width: 640px) {
  html:is([lang="es"], [lang="fr"], [lang="it"], [lang="ru"]) .home-v2 .hero h1 .hero-line-1 { white-space: normal !important; }
  html:is([lang="de"], [lang="es"], [lang="fr"], [lang="it"], [lang="ru"]) .home-v2 .hero .v2-hero-kicker { flex-wrap: wrap; row-gap: 4px; }
  html:is([lang="de"], [lang="es"], [lang="fr"], [lang="it"], [lang="ru"]) .home-v2 .hero .v2-kicker-divider { display: none; }
  html:is([lang="de"], [lang="es"], [lang="fr"], [lang="it"], [lang="ru"]) .home-v2 .hero :is(.v2-kicker-tag, .v2-kicker-offer) { white-space: normal; text-align: center; }
}

/* 11. Home mock-interview picture on tablets: the "Mock interview · 12:34" pill no longer fits next to
 *     the interviewer name in longer languages, so it is left out there (it is decoration only). */
@media (max-width: 1024px) {
  html:not([lang|="en"]) .home-v2 #mock-interview .v2-mock-status { display: none; }
}

/* 12. Home online-test demo tabs on phones (two per row): Russian names such as
 *     "Множественный выбор" were cut by the tab edge; let a long name take two lines. */
@media (max-width: 699px) {
  html:not([lang|="en"]) .home-v2 .exam-proof .exam-proof-tab .exam-tab-name { white-space: normal; text-align: center; line-height: 1.2; overflow-wrap: break-word; min-width: 0; }
}

/* 13. Phones: the privacy-provider table, the eye-contact device table and the pricing comparison turn
 *     each row into a card, the same way guide tables do. Three or four narrow columns chopped words
 *     into pieces in every language, English included ("Sup/port", "Abrechnungszei/traums",
 *     "Распо/зна/вани/е"). The first cell is the card title; every other cell shows its column name
 *     above the value (data-label, translated with the page). All languages, English too. */
@media (max-width: 640px) {
  .legal table.legal-cards, .legal table.legal-cards tbody, .legal table.legal-cards tr, .legal table.legal-cards td,
  .plan-compare, .plan-compare tbody, .plan-compare tbody tr, .plan-compare tbody th, .plan-compare tbody td { display: block; width: auto; }
  .legal table.legal-cards, .plan-compare { margin-left: 0; margin-right: 0; border: 0; font-size: 15px; }
  :is(.legal table.legal-cards, .plan-compare) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .legal table.legal-cards tr, .plan-compare tbody tr { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
  .legal table.legal-cards tr:last-child, .plan-compare tbody tr:last-child { margin-bottom: 0; }
  .legal table.legal-cards td, .plan-compare tbody :is(th, td) { padding: 9px 14px; border: 0; overflow-wrap: break-word; word-break: normal; }
  .legal table.legal-cards td + td, .plan-compare tbody :is(th, td) + td { border-top: 1px solid var(--line); }
  .legal table.legal-cards td:first-child, .plan-compare tbody th { color: var(--ink); font-weight: 600; }
  :is(.legal table.legal-cards, .plan-compare) td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--ink-3); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
  /* Our column's label in brand blue, like its column header (tbody raises it above the rule just above). */
  .plan-compare tbody td.us[data-label]::before { color: var(--brand-2); }
}