/* Responsive fixes (audit 2026-09-18). Loaded last, after artwork-open / illustrations-live. */

/* 1. Home hero on phones: the illustration keeps its natural height. Earlier
   rules capped .j3-hero-art at max(220px, 100svh - 470px) while the <img>
   inside kept its aspect-ratio height, so on 568-740px tall phones the
   picture spilled over "Start with one module..." and the fact tiles. */
@media(max-width:900px){
 body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art{max-height:none;display:block}
 body.j3-page[data-j3-page="home-page"] #hero.j3-hero .j3-hero-art :is(picture,img,svg){max-height:none;width:100%;height:auto}
}

/* 2. Home "Telephony" story on phones: illustration goes to row 2 under the
   heading (composition-finish.css forced grid-row:1, which is the heading row
   in the .j3-feature-story grid, so the phone artwork covered the title). */
@media(max-width:760px){
 .j3-page[data-j3-page="home-page"] #telephony .j3-section-frame > .prd-img{grid-row:2}
}

/* 3. Home hero fact tiles (3 columns) on narrow phones: smaller value type so
   "AI Active" / "AI активний" wraps inside its 88px cell instead of overflowing. */
@media(max-width:400px){
 body.j3-page[data-j3-page="home-page"] #hero .j3-product-note{padding:4px 6px}
 body.j3-page[data-j3-page="home-page"] #hero .j3-product-note :is(strong,div>span:first-child),
 body.j3-page[data-j3-page="home-page"] #hero .j3-product-note > span:not(.pb-meta-muted){font-size:16px}
 body.j3-page[data-j3-page="home-page"] #hero .j3-product-note :is(span,strong,div){overflow-wrap:anywhere;min-width:0}
}

/* 4. Final CTA stats: columns may shrink below their min-content width, long
   single words ("Безкоштовно") wrap instead of pushing the page wider. */
@media(max-width:760px){
 .j3-page .j3-section-cta .cta-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .j3-page .cta-stat{min-width:0}
 .j3-page .cta-stat :is(.cta-stat-n,.cta-stat-l,.cta-stat-d){overflow-wrap:break-word}
}
@media(max-width:480px){
 .j3-page .cta-stat .cta-stat-n{font-size:clamp(18px,5.5vw,30px)}
}

/* 7. Inline brand mark in the header: ring = page accent, wordmark = header ink. */
body.j3-page #nav .j3-brand svg[data-j3-logo="accent"]{display:block;width:150px;height:36px;color:var(--j3-ink);filter:none!important}
@media(max-width:760px){body.j3-page #nav .j3-brand svg[data-j3-logo="accent"]{width:135px;height:36px}}
@media(max-width:360px){body.j3-page #nav .j3-brand svg[data-j3-logo="accent"]{width:99px;height:28.8px}}

/* 8. AI landing hero console: chat bubbles sit inside #hs-tr, a plain block that
   swallowed the column's grid gap, so consecutive messages touched. Margin-based
   rhythm works even if the wrapper is re-rendered by hero-scenes.js. */
body.j3-page #hero.hs .hs-c #hs-tr{display:grid;gap:0;min-width:0}
body.j3-page #hero.hs .hs-c #hs-tr .hs-tr{max-width:86%;margin:0}
body.j3-page #hero.hs .hs-c #hs-tr .hs-tr + .hs-tr{margin-top:14px}
body.j3-page #hero.hs .hs-c #hs-tr .hs-tr.c{justify-self:start}
body.j3-page #hero.hs .hs-c #hs-tr .hs-tr.a{justify-self:end}

/* 9. Legacy scroll-progress line (#scroll-progress / #sp) from the old page builds.
   It is position:fixed at a hard-coded offset, so with the WP admin bar or any
   header height change it cuts through the logo. Removed everywhere. */
body.j3-page #scroll-progress,body.j3-page #sp,#scroll-progress,#sp{display:none!important}