/* ============================================================================
   Language fit layer — load LAST, after styles.css and lang.css.

   Why this exists: every translation runs 10-40% longer than the English source
   ("FAQ" -> "BUJ" / "Вопросы", "Clips Pack" -> longer forms, "Improve & Scale"
   -> "Улучшение и масштаб"). Left alone, the extra length wraps into additional
   lines and spills out of boxes that are sized for the English text: the header
   nav row overflows into the buttons, FAQ answers get clipped by the accordion's
   max-height, and the fixed-width Notion-mock sidebars and social tiles push
   their text outside the card.

   The goal is that the *layout* never changes: same grid columns, same card
   boxes, same row heights in every language. Only the type scale inside those
   boxes adapts, plus a few nowrap/wrap corrections.
   ========================================================================== */

/* ---------- 1. Safety net: long words never push a box wider ---------- */
html[lang]:not([lang="en"]) body {
  overflow-wrap: break-word;
}

/* ---------- 2. Header nav ----------
   .nav-links is an 11px uppercase row with 0.14em tracking inside a `1fr`
   grid track. Cyrillic/Latvian set wider, so the row overflows the track and
   runs under the Start Free button. Tighter tracking + padding + a smaller
   size for Cyrillic restores the English fit. */
html[lang]:not([lang="en"]) .nav-links {
  letter-spacing: 0.05em;
}
html[lang="ru"] .nav-links {
  font-size: 10px;
  letter-spacing: 0.02em;
}
html[lang="lt"] .nav-links,
html[lang="lv"] .nav-links {
  font-size: 10.4px;
}
html[lang]:not([lang="en"]) .nav-links > a,
html[lang]:not([lang="en"]) .nav-drop-trigger,
html[lang]:not([lang="en"]) .nav-mobile-cta {
  padding-left: 9px;
  padding-right: 9px;
  white-space: nowrap;
}
html[lang]:not([lang="en"]) .nav-drop-menu a small {
  white-space: nowrap;
}

/* ---------- 3. Hero ----------
   English sets the headline on 3 lines; the translations need 4-5 at the same
   size, which stretches the hero and the split column. Step the size down so
   the line count — and therefore the hero height — matches English. */
html[lang]:not([lang="en"]) .hero-split .hero-title {
  font-size: clamp(32px, 3.55vw, 57px);
  letter-spacing: -0.035em;
}
html[lang="ru"] .hero-split .hero-title {
  font-size: clamp(30px, 3.25vw, 52px);
}
html[lang]:not([lang="en"]) .hero-sub,
html[lang]:not([lang="en"]) .hero-split .hero-sub {
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- 4. FAQ accordion ----------
   Verified: the longest translated answer (RU "What's inside the Blueprint",
   166px) still fits under the existing 400px cap, so the original animation is
   left untouched — raising the cap would make short answers snap open. */

/* ---------- 5. Notion mock (hero visual + blueprint preview) ----------
   Sidebars are a fixed 214px track with `overflow: hidden`, so a longer label
   was simply clipped. Module/tracker names now stay English ("Improve &
   Scale", "Launch Calendar"), which are longer than the words they replaced. */
html[lang]:not([lang="en"]) .hv-side li,
html[lang]:not([lang="en"]) .ws-sidebar li {
  font-size: 10.2px;
  letter-spacing: 0;
}
html[lang]:not([lang="en"]) .hv-bar-title,
html[lang]:not([lang="en"]) .ws-page-head {
  font-size: 14px;
}
html[lang]:not([lang="en"]) .hv-main li {
  font-size: 10.4px;
}

/* ---------- 6. Social tiles ----------
   Fixed-width grid columns; "Join the server" -> "Prisijungti prie serverio"
   overflowed the tile. */
html[lang]:not([lang="en"]) .social-tile .social-handle {
  font-size: 10px;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
html[lang]:not([lang="en"]) .social-txt {
  min-width: 0;
}

/* ---------- 7. Dense mock panels (gallery slides) ---------- */
html[lang]:not([lang="en"]) .sh-l { font-size: 13px; }
html[lang]:not([lang="en"]) .sh-s { font-size: 11px; }

/* ---------- 8. Buttons / chips ----------
   Uppercase CTA labels are the other common overflow ("Unlock My Free Pack"
   -> "Atrakinti mano nemokamÄ… paketÄ…"). */
html[lang]:not([lang="en"]) .btn {
  letter-spacing: 0.06em;
}
html[lang="ru"] .btn {
  letter-spacing: 0.03em;
}
html[lang]:not([lang="en"]) .price-chip,
html[lang]:not([lang="en"]) .free-form button {
  letter-spacing: 0.04em;
}

/* ---------- 9. Rows that wrap ----------
   These strips use `flex-wrap: wrap`, so which row an item lands on depends on
   how long its text is. A longer translation silently changes the column count
   against English, which is what put these rows out of parity. Type and gaps
   come down until the rows match English at every width.

   The per-language knobs repeat `:not([lang="en"])` on purpose: without it they
   have lower specificity than the base rule below, so a language override would
   silently lose and keep the default size. */
html:is([lang]):not([lang="en"]) {
  --fit-hero-trust: 11px;
  --fit-hero-trust-gap: 8px;
  --fit-email-foot: 10px;
  --fit-legal: 12px;
  --fit-legal-gap: 6px 12px;
  --fit-trust-chip: 11px;
}
/* Russian carries the longest labels of the four languages. */
html:is([lang="ru"]):not([lang="en"]) {
  --fit-legal: 10px;
  --fit-legal-gap: 5px 4px;
  --fit-trust-chip: 10.5px;
}
html:is([lang]):not([lang="en"]) .email-card-foot {
  gap: 8px;
  font-size: var(--fit-email-foot);
}
html:is([lang]):not([lang="en"]) .email-card-foot svg {
  width: 13px;
  height: 13px;
}
/* The Blueprint cover artwork stays English in every language (it imitates the
   real product cover), so it needs no per-language font-size override - one used
   to exist here and made the footer wrap into three rows on narrow phones. */
/* The legal links and trust chips set their own font-size, so the size has to be
   set on the links and chips - setting it on the flex parent does nothing. */
html:is([lang]):not([lang="en"]) .footer-legal-links {
  gap: var(--fit-legal-gap);
}
html:is([lang]):not([lang="en"]) .footer-legal-links a,
html:is([lang]):not([lang="en"]) .footer-legal-btn {
  font-size: var(--fit-legal);
}
html:is([lang]):not([lang="en"]) .trust-chip {
  font-size: var(--fit-trust-chip);
  padding-left: 9px;
  padding-right: 9px;
}
/* Desktop keeps the three badges and two dots on one line, like English. */
@media (min-width: 769px) {
  html:is([lang]):not([lang="en"]) .hero-trust {
    flex-wrap: nowrap;
    font-size: 11.5px;
    gap: 8px 10px;
  }
}
/* On phones English wraps into two rows (two badges, then the third); the
   translations are longer, so they were dropping to one badge per row. */
@media (max-width: 768px) {
  html:is([lang]):not([lang="en"]) .hero-trust {
    font-size: var(--fit-hero-trust);
    gap: var(--fit-hero-trust-gap);
  }
}
html:is([lang]):not([lang="en"]) .hero-eyebrow {
  letter-spacing: 0.1em;
}

/* ---------- 10. Column parity for the wrap strips ----------
   `i18n_coltemplate.mjs` measured English and found each of these strips keeps a
   stable column count per width band. Leaving that to `flex-wrap` made the
   count depend on text length, so translations drifted. They are uniform label
   rows, so pinning them to a grid reproduces the English count at every width
   instead of guessing font sizes. Band edges come from the English measurement,
   not from the numbers below. */
html:is([lang]):not([lang="en"]) .email-card-foot,
html:is([lang]):not([lang="en"]) .footer-legal-links,
html:is([lang]):not([lang="en"]) .trust-row,
html:is([lang]):not([lang="en"]) .closing-cta-trust {
  display: grid;
  justify-items: center;
  align-items: center;
}
@media (min-width: 501px) {
  html:is([lang]):not([lang="en"]) .email-card-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  html:is([lang]):not([lang="en"]) .email-card-foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Below ~326px English stacks these three one per row. */
@media (max-width: 325px) {
  html:is([lang]):not([lang="en"]) .email-card-foot { grid-template-columns: minmax(0, 1fr); }
  /* Lithuanian needs a touch less text to keep two badges on the first row,
     which is where English sits at this width. */
  html:is([lang="lt"]):not([lang="en"]) .hero-trust { font-size: 9.8px; }
}
/* Under ~310px English drops to one badge per row for every language, so the
   badges take the full row instead of relying on text length to break there. */
@media (max-width: 309px) {
  html:is([lang]):not([lang="en"]) .hero-trust > span:not(.trust-dot) { flex: 0 0 100%; }
  html:is([lang="lt"]):not([lang="en"]) .hero-trust { font-size: var(--fit-hero-trust); }
}
@media (min-width: 391px) {
  html:is([lang]):not([lang="en"]) .footer-legal-links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 390px) {
  html:is([lang]):not([lang="en"]) .footer-legal-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Under ~310px English fits two links per row there. */
@media (max-width: 309px) {
  html:is([lang]):not([lang="en"]) .footer-legal-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) {
  html:is([lang]):not([lang="en"]) .trust-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 881px) and (max-width: 900px) {
  html:is([lang]):not([lang="en"]) .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 521px) and (max-width: 880px) {
  html:is([lang]):not([lang="en"]) .trust-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 401px) and (max-width: 520px) {
  html:is([lang]):not([lang="en"]) .trust-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  html:is([lang]):not([lang="en"]) .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 561px) {
  html:is([lang]):not([lang="en"]) .closing-cta-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 461px) and (max-width: 560px) {
  html:is([lang]):not([lang="en"]) .closing-cta-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  html:is([lang]):not([lang="en"]) .closing-cta-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* English drops the 404 actions to one column below ~430px. The translated
   button labels are narrower, so flex-wrap kept them on one row; pin the count. */
@media (min-width: 421px) {
  html:is([lang]):not([lang="en"]) .notfound-actions {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  html:is([lang]):not([lang="en"]) .notfound-actions {
    display: grid;
    justify-items: center;
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* The cover strip drops to two rows below 350px in English because the wider
   letter-spacing pushes it past the box; the translations are narrower at the
   small size, so they take English's size in that band to wrap the same way. */
@media (max-width: 350px) {
  html:is([lang]):not([lang="en"]) .gallery-slide.cover-slide .cover-footer {
    font-size: 9.5px;
  }
}

/* ---------- 9b. Balanced headings ----------
   Most translated headings are longer than the English original ("Questions
   people ask." -> "Вопросы, которые задают люди.") and need a second line.
   `text-wrap: balance` splits them evenly instead of leaving a short orphan
   line, which is what made the sections read as broken. */
html[lang]:not([lang="en"]) .section-title,
html[lang]:not([lang="en"]) .closing-cta h2,
html[lang]:not([lang="en"]) .op-card h3,
html[lang]:not([lang="en"]) .cta-card h2,
html[lang]:not([lang="en"]) .resell-copy h3 {
  text-wrap: balance;
}

/* ---------- 10. Offer price panel ----------
   "97,33 EUR - the full system" -> Cyrillic runs ~35% longer and was growing the
   card by ~90px. */
html[lang]:not([lang="en"]) .op-price {
  letter-spacing: 0.01em;
}
html[lang]:not([lang="en"]) .op-main {
  letter-spacing: 0;
}

/* ---------- 11. Checklist rows ----------
   Six rows of translated feature text wrapped to 7 lines and stretched the
   card by ~74px. */
html[lang]:not([lang="en"]) .check-list {
  font-size: 14.2px;
}

/* ---------- 12. Closing CTA headline ---------- */
html[lang]:not([lang="en"]) .closing-cta h2 {
  font-size: clamp(26px, 3.1vw, 44px);
  letter-spacing: -0.03em;
}

/* ---------- 13. Product gallery ----------
   Slide captions overflowed their frame in the longer languages. */
html[lang]:not([lang="en"]) .gallery-slide {
  overflow: hidden;
}
html[lang]:not([lang="en"]) .product-gallery {
  min-width: 0;
}

/* ---------- 14. Nav CTA ----------
   "Start Free" -> "Начать бесплатно" / "Pradėti nemokamai" made the right-hand
   cluster ~80px wider and pushed the whole header past the container between
   ~1000px and 1200px. */
html[lang]:not([lang="en"]) .nav-right {
  gap: 8px;
}
html[lang]:not([lang="en"]) .nav-right .btn {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
@media (max-width: 1200px) {
  html[lang]:not([lang="en"]) .nav-right .btn {
    padding: 9px 8px;
    font-size: 11px;
    letter-spacing: 0.03em;
  }
  html[lang]:not([lang="en"]) .nav-links {
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  html[lang]:not([lang="en"]) .nav-links > a,
  html[lang]:not([lang="en"]) .nav-drop-trigger {
    padding-left: 7px;
    padding-right: 7px;
  }
}

/* ---------- 15. Mobile ----------
   Tightest column on the site: a two-word CTA like "Free Pack" ->
   "Nemokamas paketas" no longer fit on one line. */
@media (max-width: 480px) {
  html[lang]:not([lang="en"]) .btn {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 12px;
    letter-spacing: 0.03em;
  }
  html[lang]:not([lang="en"]) .hero-trust {
    gap: 8px 14px;
  }
  html[lang]:not([lang="en"]) .btn.btn-sm {
    padding-left: 9px;
    padding-right: 9px;
  }
}