/* Mobile polish of product screenshots (preview only; design docs/mobile-polish-2026-11-03, Astra).
   Linked last, after every other stylesheet, on Home, /platforma/, /rozwiazania/ and /fresh/ in six languages.
   Phones get the full existing originals instead of burnt-in 4:5 crops, a single thin frame, and a 44 px
   "enlarge" link per screen (mobile-polish.js upgrades it to a native dialog; without JS it opens the file).
   Home #platforma shows the configurator and a small static schema instead of the cropped price-list form.
   Fresh: only 44 px tap areas for its existing image links. Inter and palette v1.1; no v2.0 tokens. */

/* Enlarge link: a quiet teal text link with a magnifier, 44 px touch height, never an orange button. */
body.jp-preview .mp-zoom{position:relative;z-index:1;display:flex;align-items:center;gap:8px;inline-size:fit-content;max-inline-size:100%;min-block-size:44px;margin:-4px 0 0;padding:0 2px;color:#0f6e72;font-size:14px;font-weight:500;line-height:1.3;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;justify-self:start;-webkit-tap-highlight-color:transparent}
body.jp-preview .mp-zoom:hover{color:#012d32}
body.jp-preview .mp-zoom:focus-visible{outline:2px solid #0f6e72;outline-offset:2px;border-radius:4px}
body.jp-preview .mp-zoom__icon{flex:none;inline-size:18px;block-size:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
body.jp-preview img.mp-zoomable{cursor:zoom-in}

/* Home #platforma: one full configurator screen, its enlarge link, the schema and the unchanged caption. */
body.jp-preview .mp-home-platform .home-platform__media{row-gap:12px;justify-items:stretch}
body.jp-preview .mp-home-platform .home-platform__stack{padding:0}
body.jp-preview .mp-home-platform .home-platform__main{inline-size:100%}
body.jp-preview .mp-home-platform .home-platform__media .jp-device__caption{justify-self:start;max-inline-size:72ch;margin-block-start:4px;text-align:start}

/* Schema: Model + Equipment + Price list -> Pricing. Three input rows, thin lines joined by one bracket,
   a single line to the result and a small orange connection point. Plain HTML text, no tiles or capsules. */
body.jp-preview .mp-schema{--mp-line:#a3cfca;--mp-row:32px;box-sizing:border-box;display:grid;grid-template-columns:minmax(min-content,1fr) minmax(min-content,max-content);align-items:center;justify-self:start;inline-size:100%;max-inline-size:440px;margin:0;padding:16px 20px;border:1px solid #d9e4e3;border-radius:10px;background:#fff;color:#012d32;font-size:14px;line-height:1.3}
body.jp-preview .mp-schema__in{position:relative;display:grid;grid-template-columns:max-content 1fr;grid-auto-rows:var(--mp-row);align-items:center;column-gap:12px;row-gap:8px;margin:0;padding:0;list-style:none}
body.jp-preview .mp-schema__in li{display:contents;font-weight:500}
body.jp-preview .mp-schema__in li::after{content:"";min-inline-size:20px;border-block-start:1px solid var(--mp-line)}
body.jp-preview .mp-schema__in::after{content:"";position:absolute;inset-block:calc(var(--mp-row) / 2);inset-inline-end:0;border-inline-end:1px solid var(--mp-line)}
body.jp-preview .mp-schema__out{display:flex;align-items:center;margin:0;font-size:15px;font-weight:600;letter-spacing:-.005em}
body.jp-preview .mp-schema__out::before{content:"";flex:none;inline-size:34px;border-block-start:1px solid #20aaab}
body.jp-preview .mp-schema__out span{display:flex;align-items:center;gap:10px;min-inline-size:0}
body.jp-preview .mp-schema__out span::before{content:"";flex:none;inline-size:9px;block-size:9px;border-radius:50%;background:#fc7505}

/* CPQ duo on desktop: both enlarge links in one row under the composition, before the two captions. */
@media (min-width:721px){
  body.jp-preview.jp-products--cpq .cpq-duo .mp-duo-zoom{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:0 28px}
}

@media (max-width:720px){
  /* Home: one thin frame without the inner mat; the full original keeps its natural proportions. */
  body.jp-preview .mp-home-platform .jp-device__screen{max-inline-size:none;padding:0;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px rgb(1 45 50 / 6%)}
  body.jp-preview .mp-home-platform .jp-device__screen > picture{border-radius:0}
  body.jp-preview .mp-schema{max-inline-size:none}

  /* CPQ and Solutions: the same single thin frame; images use the full width of their column. */
  body.jp-preview.jp-products:is(.jp-products--cpq,.jp-products--solutions) main .jp-device__screen{padding:0;border-radius:8px;overflow:hidden}
  body.jp-preview.jp-products:is(.jp-products--cpq,.jp-products--solutions) main .jp-device__screen > :is(picture,img){border-radius:0}

  /* Duo: each screen is followed by its own enlarge link and then by its own caption. */
  body.jp-preview.jp-products--cpq .cpq-duo .mp-duo-zoom{display:contents}
  body.jp-preview.jp-products--cpq .cpq-duo .cpq-duo__main{order:1}
  body.jp-preview.jp-products--cpq .cpq-duo .mp-duo-zoom > .mp-zoom:first-child{order:2}
  body.jp-preview.jp-products--cpq .cpq-duo .cpq-duo__cap1{order:3}
  body.jp-preview.jp-products--cpq .cpq-duo .cpq-duo__over{order:4}
  body.jp-preview.jp-products--cpq .cpq-duo .mp-duo-zoom > .mp-zoom:last-child{order:5}
  body.jp-preview.jp-products--cpq .cpq-duo .cpq-duo__cap2{order:6}

  /* Fresh: 44 px tap areas for the existing links that open an image. Negative margins equal to the extra
     padding/height keep every line box, image, label and position of the accepted layout unchanged; the focus
     ring is drawn inside the larger box, around the link text. */
  body.jp-preview.jp-products--fresh .jp-fresh-shot .jp-fresh-shot__full.jp-fresh-shot__full--phone,
  body.jp-preview.jp-products--fresh .jp-fresh-flow .jp-fresh-flow__full{display:inline-flex;align-items:center;min-block-size:44px;margin-block:-14px;margin-inline:-12px;padding-inline:12px;vertical-align:baseline}
  body.jp-preview.jp-products--fresh .jp-fresh-shot .jp-fresh-shot__full.jp-fresh-shot__full--phone:focus-visible,
  body.jp-preview.jp-products--fresh .jp-fresh-flow .jp-fresh-flow__full:focus-visible{outline:2px solid #0f6e72;outline-offset:-11px;border-radius:4px}
}
@media (max-width:380px){
  body.jp-preview .mp-schema{--mp-row:30px;padding:12px 14px;font-size:13.5px}
  body.jp-preview .mp-schema__in{column-gap:8px}
  body.jp-preview .mp-schema__in li::after{min-inline-size:12px}
  body.jp-preview .mp-schema__out{font-size:14px}
  body.jp-preview .mp-schema__out::before{inline-size:22px}
  body.jp-preview .mp-schema__out span{gap:8px}
}

/* Enlargement: a native modal dialog with a copy of the existing original; the page image never changes.
   Sticky bar with the original-file link and Close; the image scrolls inside the dialog, never the page. */
body.jp-preview .mp-dialog{box-sizing:border-box;inline-size:min(1440px,96vw);max-inline-size:96vw;max-block-size:92vh;max-block-size:92dvh;margin:auto;padding:0;border:1px solid #cbded9;border-radius:8px;background:#f7fafa;color:#012d32;overflow:auto;overscroll-behavior:contain}
body.jp-preview .mp-dialog::backdrop{background:rgb(1 45 50 / 60%)}
body.jp-preview .mp-dialog__head{position:sticky;inset-block-start:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 20px;padding:8px 16px;background:#fff;border-block-end:1px solid #cbded9}
body.jp-preview .mp-dialog__full{display:inline-flex;align-items:center;min-block-size:44px;color:#0f6e72;font-size:14px;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
body.jp-preview .mp-dialog__full:hover{color:#012d32}
body.jp-preview .mp-dialog__close{display:inline-flex;align-items:center;justify-content:center;min-block-size:44px;min-inline-size:44px;margin:0;padding:0 18px;border:1px solid #99b7b2;border-radius:999px;background:#fff;color:#0f6e72;font:inherit;font-size:14px;font-weight:500;line-height:1.2;cursor:pointer;touch-action:manipulation}
body.jp-preview .mp-dialog__close:hover{background:#eef8f7;border-color:#1b9092;color:#012d32}
body.jp-preview .mp-dialog :is(.mp-dialog__full,.mp-dialog__close):focus-visible{outline:2px solid #0f6e72;outline-offset:3px}
body.jp-preview .mp-dialog__media{padding:16px 16px 8px;overflow-x:auto;overscroll-behavior-x:contain;text-align:center}
body.jp-preview .mp-dialog__media:focus-visible{outline:2px solid #0f6e72;outline-offset:-4px}
body.jp-preview .mp-dialog__media img{display:inline-block;inline-size:100%;max-inline-size:1440px;block-size:auto;vertical-align:top;border-radius:6px;background:#fff;box-shadow:0 0 0 1px #d9e4e3}
body.jp-preview .mp-dialog__media.is-portrait img{inline-size:auto;max-inline-size:100%}
body.jp-preview .mp-dialog__hint{display:none;margin:0;padding:0 16px 4px;font-size:12px;line-height:1.5;color:#516c6f}
body.jp-preview .mp-dialog__caption{max-inline-size:96ch;margin:0;padding:6px 16px 16px;font-size:13px;line-height:1.55;color:#36575b}
@media (max-width:1080px){
  /* The app screens were captured at desktop width: shown about 1080 px wide they stay legible, with
     horizontal scrolling inside the dialog instead of a tiny full-width thumbnail. */
  body.jp-preview .mp-dialog__media{padding:8px 8px 6px;text-align:start}
  body.jp-preview .mp-dialog__media:not(.is-portrait) img{inline-size:1080px;max-inline-size:none}
  body.jp-preview .mp-dialog__hint:not([hidden]){display:block}
}
@media (max-width:720px){
  body.jp-preview .mp-dialog__head{padding:4px 10px}
  body.jp-preview .mp-dialog__hint{padding-inline:10px}
  body.jp-preview .mp-dialog__caption{padding:4px 10px 14px}
}
@media (forced-colors:active){
  body.jp-preview .mp-schema__out span::before{forced-color-adjust:none;background:Highlight}
}