/* ============================================================
   Revonexis v3.1.2 — Mobile Polish, Text Tone Harmonisation &
   Commercial Hub Mobile Fix.
   Additive/override styles only. Loaded last so it wins the
   cascade without needing !important. No new visual language —
   reuses existing tokens (--bg, --bg2, --white, --text, --muted,
   --cyan, --border) and existing type scale.
   ============================================================ */

/* ------------------------------------------------------------
   TASK 1 — Detail-page hero: guaranteed no horizontal overflow
   at 390 / 375 / 360 / 320px, on any language, regardless of
   font-metric or word-length variance. Applies to the shared
   .hero.svc-hero pattern used by ai-search-readiness-scan.html,
   revenue-leak-scan.html, diagnostics.html, services.html and
   lead-intelligence-engine.html.
   ------------------------------------------------------------ */
@media (max-width: 960px) {
  /* Root-cause fix: grid-template-columns: 1fr still sizes the track to
     its content's min-content width (a single unbroken long FI/ET word
     in the headline, or the price-block string, can force the whole
     grid item wider than the viewport). body{overflow-x:hidden} then
     silently CLIPS the excess instead of showing a scrollbar — text
     gets cut off with no visible sign anything is wrong. minmax(0,1fr)
     plus min-width:0 lets the item shrink to the real container width
     so text wraps normally instead of blowing out the grid track. */
  .hero.svc-hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero.svc-hero .hero-content {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .hero.svc-hero h1,
  .hero.svc-hero .hero-sub,
  .hero.svc-hero .price-block,
  .hero.svc-hero .hero-actions {
    max-width: 100%;
  }
  .hero.svc-hero h1 {
    font-size: clamp(2.4rem, 11.5vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .hero.svc-hero .hero-sub {
    font-size: clamp(0.98rem, 4.2vw, 1.1rem);
    line-height: 1.6;
    overflow-wrap: break-word;
  }
  .hero.svc-hero .price-block {
    flex-wrap: wrap;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .hero.svc-hero .price-block .pb-vat {
    overflow-wrap: break-word;
  }
  .hero.svc-hero .hero-actions a {
    max-width: 100%;
    overflow-wrap: break-word;
    white-space: normal;
  }
}

/* Extra safety margin for Finnish and Estonian, whose compound
   words run longer than the English source copy — tighter clamp
   ceiling so long headlines can never push past the viewport. */
@media (max-width: 640px) {
  html[lang="fi"] .hero.svc-hero h1,
  html[lang="et"] .hero.svc-hero h1 {
    font-size: clamp(2.2rem, 10vw, 3.2rem);
    line-height: 1.04;
  }
}

/* ------------------------------------------------------------
   TASK 6 — Quick Check teaser section (homepage): replaces the
   old inline style="padding:2.5rem 5rem 0" which had no mobile
   override and squeezed the teaser into ~230px on a 390px phone.
   ------------------------------------------------------------ */
.qc-teaser-section { padding: 2.5rem 5rem 0; }
@media (max-width: 960px) {
  .qc-teaser-section { padding: 2rem 1.25rem 0; }
}

/* ------------------------------------------------------------
   TASK 6 — Commercial Hub mobile card stack: with all 12 areas
   now visible (Task 5), tighten the card-to-card gap slightly
   and ensure comfortable breathing room above/below the stack
   without the large one-off gaps seen before.
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  .ci-hub-visual { gap: 0.6rem; padding-top: 0.75rem; }
  .ci-satellite { padding: 0.9rem 1rem; }
}

/* ------------------------------------------------------------
   TASK 7 — Consistent mobile typography: reduce wide uppercase
   letter-spacing on small labels at narrow widths, where long
   Finnish/Estonian label words are more likely to feel cramped
   or (in extreme cases) overflow their container.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .section-label { letter-spacing: 0.14em; }
  .hero-tag { letter-spacing: 0.13em; }
}

/* ------------------------------------------------------------
   TASK 1/6 — Same grid-blowout root cause as above, but the
   inline style="grid-template-columns:1fr;..." on ~90 .section-inner
   elements across all 21 pages bypassed the .eop-grid/.svc-*-grid
   fixes entirely (inline styles win the cascade). Those inline
   values were corrected in the HTML itself to minmax(0,1fr) so
   .section-inner can no longer be forced wider than its container
   by a long FI/ET heading or list item. This rule is a defensive
   backstop in case any inline instance is missed in a future edit.
   ------------------------------------------------------------ */
.section-inner { min-width: 0; }

/* ------------------------------------------------------------
   TASK 1/7 — Final CTA block ("Ota yhteyttä" / "Get in touch" /
   Estonian equivalent), present on every page. Its section-inner
   uses flex-direction:column + align-items:center to center the
   heading/CTA stack. That combination sizes each child by its own
   fit-content width instead of the container's available width —
   on any page whose CTA h2 has a forced <br> line break (e.g.
   fi/lead-intelligence-engine.html: "Tunnistetaan oikeat<br>
   kaupalliset mahdollisuudet sinulle."), the un-broken second line
   can render wider than the viewport and get silently clipped,
   symmetrically overflowing both edges since it's centered.
   Switching to align-items:stretch keeps the identical centered
   visual (text-align:center still centers the text) while forcing
   children to respect the real container width so long lines wrap
   normally instead of blowing out.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .cta .section-inner {
    align-items: stretch;
  }
  .cta h2,
  .cta-sub,
  .cta-buttons {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------
   TASK 6 — Diagnostics pricing rows: on the "Räätälöity" / custom-
   scope card, the price word ("Räätälöity" / "Kohandatud") and the
   "+VAT" / scope note sit in a flex row with white-space:nowrap
   text. Each has a min-content floor (its own unbroken text width);
   when both floors together exceed the card's mobile content width,
   the row overflows past the viewport edge instead of wrapping.
   Allowing the row to wrap keeps the price fully legible on its own
   line, with the VAT/scope note dropping to a second line beneath —
   consistent with the two-line price/VAT pattern already used
   elsewhere on the pricing cards.
   ------------------------------------------------------------ */
@media (max-width: 480px) {
  .diag-price-row {
    flex-wrap: wrap;
    row-gap: 0.2rem;
  }
}

/* ------------------------------------------------------------
   TASK 9 QA — Cookie consent banner (pre-existing component, not
   part of the v3.1/v3.1.1 conversion layer, but caught by the
   "no horizontal overflow on any page" check). At narrow widths
   .rv-btn-decline and .rv-btn-accept use flex:1 with a nowrap
   label; when the two labels' natural widths together exceed the
   available row width, the min-content floor on each button pushes
   the row past the left edge (observed: Decline rendering at
   left:-15px). Stacking the two buttons at very narrow widths gives
   each its full natural width with no forced squeeze.
   ------------------------------------------------------------ */
@media (max-width: 380px) {
  .rv-cookie-actions {
    flex-direction: column;
    width: 100%;
  }
  .rv-btn-decline,
  .rv-btn-accept {
    width: 100%;
  }
}

/* ------------------------------------------------------------
   TASK 1/7 — Sitewide safety net: a small number of h2 headings
   use a hardcoded <br> before a single word/short phrase (a
   deliberate two-line layout). Default overflow-wrap:normal can't
   break within that unbroken run if it's wider than the viewport
   (most likely with FI/ET compound words in the bold display
   font). This does not change wrapping behaviour for any heading
   that already fits — it only engages as a last-resort safety net
   for the rare case a single run would otherwise overflow.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  h1, h2, h3 {
    overflow-wrap: break-word;
  }
}