/* ============================================================
   Slush — MOBILE-ONLY styles.
   Every rule lives inside a @media query. Desktop is untouched.
   Breakpoints follow the site's existing 900px convention,
   plus a 600px / 480px phone tier.
   ============================================================ */

/* ---------- TABLET / SMALL DESKTOP (<= 900px) ---------- */
@media (max-width: 900px){
  /* index.html static sections collapse grids.
     index.html ships these as TOP-LEVEL desktop rules in an inline <style>
     that is loaded AFTER this file, so an equal-specificity media rule loses
     on source order. !important is required to win — it is still scoped to
     this media query, so desktop (>900px) is completely untouched. */
  .cards{grid-template-columns:repeat(2,1fr)!important;gap:16px;margin-top:40px}
  .stats{grid-template-columns:repeat(2,1fr)!important;gap:16px;margin-top:36px}
  .reviews{grid-template-columns:1fr!important;gap:16px;margin-top:36px}
  .s3-grid{grid-template-columns:1fr!important;gap:32px}
  .biz-card{grid-template-columns:1fr!important;gap:28px;padding:40px}

  /* index hero top nav: hide the desktop center links so the row fits.
     The center div carries an inline style="display:flex", so !important
     is required to override it. */
  div[data-stage] > nav > div:nth-child(2){display:none!important}
}

/* ---------- PHONE (<= 768px) ---------- */
@media (max-width: 768px){

  /* ---- global guards ---- */
  img,video,svg{max-width:100%}
  .wrap{padding:0 20px}

  /* ===========================================================
     CONTENT PAGES (build-pages.py shared classes)
     =========================================================== */

  /* top nav of content pages: keep brand + order button, fit on one row */
  nav{padding:14px 20px;gap:10px}
  .nav-right{gap:8px}
  .nav-right .btn-fill{padding:12px 16px;font-size:12px}
  .plus{width:44px;height:44px;font-size:20px}
  .badge{width:44px;height:44px;font-size:20px}

  /* subhero */
  .subhero{padding:32px 0 44px}
  /* The longest single Polish tokens in these headings (PODARUNKOWE,
     PRYWATNOSCI, REKLAMACJE) are one word each in heavy Archivo Black,
     uppercase. The previous clamp() used vw — but the page's full-width
     marquee inflates the layout viewport, so vw ballooned and the heading
     overflowed, forcing UGLY mid-word breaks (PODARU|NKOWE). We use a fixed
     px size (immune to the inflated-vw feedback loop), measured via CDP so
     the widest token (PODARUNKOWE) fits on one line inside the .wrap content
     box at 360px (293px < 312px). word-break:normal stops the engine from
     splitting mid-word; overflow-wrap:break-word stays only as a last-resort
     safety net so nothing is ever silently clipped. */
  /* !important: each content page ships .subhero h1 as a TOP-LEVEL (no media
     query) rule in an inline <style> loaded AFTER this file, so an equal-
     specificity media rule loses on source order. !important wins while staying
     scoped to this media query — desktop (>768px) is completely untouched. */
  .subhero h1{font-size:38px!important;overflow-wrap:break-word;word-break:normal;hyphens:none}
  .subhero .lead{font-size:18px;margin-top:14px}
  .subhero .s-star{display:none}

  /* sections / typography */
  .section{padding:44px 0}
  .section.tight{padding:30px 0}
  .h2s{font-size:26px}
  .lead2{font-size:17px}
  .prose p,.prose li{font-size:15.5px}
  .prose h2{font-size:23px;margin-top:26px}

  /* forms */
  .form .row{grid-template-columns:1fr}
  .form input,.form textarea,.form select{font-size:16px} /* avoid iOS zoom */

  /* tables that can be wider than the viewport */
  .tbl{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* info / split / steps */
  .info{padding:24px}
  .step{padding:18px 18px;gap:14px}
  .step::before{font-size:26px;min-width:42px;height:42px}

  /* cta cards */
  .cta-card{padding:36px 24px;border-radius:30px}
  .cta-card p{font-size:16px}

  /* faq + jobs */
  details.faq summary{padding:16px 18px;font-size:16px}
  details.faq .a{padding:0 18px 18px}
  .job{flex-direction:column;align-items:flex-start;gap:14px;padding:18px 20px}
  .job .btn{width:100%;justify-content:center}

  /* ===========================================================
     INDEX.HOME — KILL SCROLL-JACKED HERO ON MOBILE (variant B)
     -----------------------------------------------------------
     Desktop keeps the full scroll engine (tall scrollroot + sticky stage +
     5 animated scenes). On phones the engine is disabled in JS (the inline
     <script> bails out early when matchMedia('(max-width:768px)') matches and
     forces ONLY the outro group — out-logo/out-sub/out-cta/out-trust — visible).
     This CSS turns the hero into a short, clean, normal-flow block: logo +
     tagline + CTA + trust badges. No tall empty scroll area, no horizontal
     scroll, no overlapping scene clutter. Everything stays inside the media
     query, so desktop (>768px) is 100% untouched.
     =========================================================== */

  /* 1) collapse the tall (760vh) scroll area -> no giant empty blue void */
  [data-scrollroot]{height:auto!important;min-height:0!important}

  /* 2) stage leaves the sticky/100vh world and becomes a short relative block.
        position:relative (not static) so the absolutely-positioned outro
        wrapper we re-flow below still has this element as its containing box. */
  [data-stage]{
    position:relative!important;
    top:auto!important;
    height:auto!important;
    min-height:auto!important;
    overflow:hidden!important;            /* clip any stray transformX overflow */
    padding:84px 20px 56px!important;     /* room under the fixed-ish nav */
  }

  /* 3) hide EVERY animated scene element so nothing overlaps or sticks out:
        intro block, the 5 product scenes (panels, cups, numbers, words,
        slogans, stars, marquees), the outro cup row, scroll hint, ribbons. */
  [data-a^="intro-"],
  [data-a^="panel-"],
  [data-a^="cup-"],
  [data-a^="num-"],
  [data-a^="w1-"],[data-a^="w2-"],
  [data-a^="slo-"],
  [data-a^="st1-"],[data-a^="st2-"],
  [data-a^="mq-"],
  [data-a^="out-cup-"],
  [data-a="out-rib"],
  [data-a="scrollhint"]{display:none!important}

  /* 3b) the 5 empty scene WRAPPER divs (position:absolute;inset:0) would still
        stretch invisibly; drop them out of flow entirely. The intro and outro
        wrappers also start absolute — neutralise them, then re-flow outro. */
  [data-stage] > div[style*="position:absolute"]{display:none!important}

  /* 4) re-show ONLY the outro wrapper and put it in normal flow so it gives
        the stage its (short) height. :has() targets the wrapper that contains
        the CTA; supported by all evergreen mobile browsers (iOS/Chrome 2023+). */
  [data-stage] > div:has([data-a="out-cta"]){
    display:grid!important;
    position:static!important;
    inset:auto!important;
    place-items:center!important;
  }
  /* the inner flex column of the outro: keep it tidy and centered */
  [data-stage] > div:has([data-a="out-cta"]) > div{
    position:static!important;
    width:100%!important;
    max-width:520px!important;
  }

  /* 5) outro pieces sizing for phone */
  [data-a="out-logo"]{font-size:clamp(72px,21vw,300px)!important;line-height:.8!important}
  [data-a="out-sub"]{font-size:18px!important}
  [data-a="out-cta"]{display:inline-flex!important}     /* clickable, normal flow */
  [data-a="out-trust"]{display:flex!important}

  /* 6) the in-hero scroll-chrome nav becomes a stray floating row once the
        stage is in normal flow (it was position:absolute;top:0). The hero
        already carries a prominent "Zamów online" CTA and the page has its own
        anchors, so hide this duplicate nav on mobile rather than re-flow it.
        Also hide the hero's bottom marquee band: it is decorative scene chrome
        whose ~2271px track is a horizontal-overflow source. Both stay hidden
        only inside this media query. */
  [data-stage] > nav{display:none!important}
  [data-stage] > div[style*="bottom:0"]{display:none!important}

  /* 7) hard guard against any horizontal scroll on the hero containers */
  [data-scrollroot],[data-stage]{max-width:100%!important;overflow-x:clip!important}

  /* ===========================================================
     INDEX.HOME — static sections below the hero
     =========================================================== */
  .head h2{font-size:clamp(48px,13vw,180px)}
  .head p{font-size:18px;margin-top:16px}

  .s2{padding:56px 0 60px}
  .why{padding:56px 0 60px}
  .why .head h2{font-size:clamp(48px,12vw,160px)}
  .s3{padding:56px 0 60px}
  .rev{padding:56px 0 60px}
  .biz{padding:48px 0 56px}

  .cards{grid-template-columns:1fr!important;gap:16px;margin-top:32px}
  .card{min-height:0;padding:22px}
  .cup{height:200px}
  .stats{grid-template-columns:1fr 1fr!important;gap:14px;margin-top:32px}
  .stat{padding:22px}

  /* hide oversized decorative ribbon renders that push the page wide */
  .ribbon-img,.s2-ribbon-img,.why-ribbon-img,.s3-ribbon-img{display:none}

  /* "ZNAJDZIESZ" is a single long token in heavy display type. As with the
     subhero, a vw-based size ballooned against the marquee-inflated layout
     viewport and broke mid-word. Fixed px sized via CDP so ZNAJDZIESZ fits on
     one line inside the .wrap content box at 360px (306px < 320px).
     word-break:normal prevents mid-word splits; overflow-wrap is the net. */
  .s3-grid h2{font-size:48px!important;line-height:.82;overflow-wrap:break-word;word-break:normal}
  .s3-grid .sub{font-size:18px;margin:16px 0 20px}
  .qr-card{padding:16px}
  .qr-panel svg{width:120px;height:120px}

  .reviews{margin-top:32px}
  .review{max-width:100%}
  .review .av{display:none!important}            /* opinie BEZ awatarow na mobile */
  .review p{font-size:17px}

  .biz-card{padding:32px 24px;border-radius:30px}
  .biz-card p{font-size:17px}
  .biz-cup{display:none}

  .signoff{padding:40px 0 44px}
  .signoff .s-star,.signoff .s-coin{display:none}
  .rev .s-coin,.rev .s-star{display:none}

  /* ===========================================================
     SHARED FOOTER (index + content pages)
     =========================================================== */
  /* !important + display:flex column: index/content ships .newsletter (often a flex/grid
     ROW: text | form) and .nl-form as TOP-LEVEL rules in an inline <style> loaded AFTER
     this file. Without forcing display+direction the form stayed a narrow shrink-wrapped
     row and overflowed. We force a clean vertical stack, full-width — scoped to @media,
     so desktop (>768px) is untouched. */
  .newsletter{display:flex!important;flex-direction:column!important;align-items:stretch!important;grid-template-columns:1fr!important;padding:28px 22px;gap:18px;margin:40px 0;border-radius:24px}
  .newsletter > *{width:100%!important;max-width:100%!important}
  .newsletter h3{font-size:26px}
  .nl-form{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px;width:100%!important}
  .nl-form input{min-width:0!important;width:100%!important}
  .nl-form .btn{width:100%!important;justify-content:center}

  .foot-top{grid-template-columns:1fr 1fr;gap:24px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:18px}
  .foot-meta{align-items:flex-start}
  .foot-links{justify-content:flex-start}
  .pay{justify-content:flex-start}
}

/* ---------- SMALL PHONE (<= 480px) ---------- */
@media (max-width: 480px){
  .wrap{padding:0 16px}

  /* content-page nav: tighten further so nothing clips at the edge */
  nav{padding:12px 16px}
  .nav-right .btn-fill{padding:11px 13px;font-size:11px;letter-spacing:.02em}

  /* index hero nav: same treatment */
  div[data-stage] > nav{padding:12px 14px!important}

  /* typography down a notch */
  .subhero .lead{font-size:16.5px}
  .head p{font-size:16.5px}

  /* index cards/stats single column on the tiniest screens */
  .stats{grid-template-columns:1fr!important}

  /* footer columns stack to a single column */
  .foot-top{grid-template-columns:1fr;gap:22px}

  /* cta / biz padding trimmed */
  .cta-card{padding:30px 20px}
  .biz-card{padding:28px 20px}
}

/* ---------- NARROW PHONE (<= 400px) ---------- */
/* On the narrowest phones (360-400px) the 38px/48px headings from the 768px
   tier would push the longest single tokens past the content box and force a
   mid-word break. Step the display headings down to the largest size CDP-
   measured to keep the worst token on one line at 360px:
     subhero h1  PODARUNKOWE -> 293px  (.wrap inner ~312px)  @ 34px
     s3-grid h2  ZNAJDZIESZ  -> 306px  (.wrap inner ~320px)  @ 44px
   This block is LAST in source order, so at <=400px it wins over the 768px
   tier at equal specificity. Everything stays inside the media query — desktop
   is untouched. */
@media (max-width: 400px){
  .subhero h1{font-size:34px!important}
  .s3-grid h2{font-size:44px!important}
}

/* ============================================================
   TOUCH DEVICES — BULLETPROOF index hero-kill  (pointer:coarse)
   ------------------------------------------------------------
   WHY: a full-screen marquee inflates the layout viewport on real phones.
   Some mobile browsers (notably iOS Safari) "shrink-to-fit" and report a
   layout width ABOVE 768px, so the (max-width:768px) hero-kill higher up can
   silently MISS -> the desktop scroll-jacked hero leaks through as a tall
   empty blue void + horizontal scroll. (Chromium emulation caps the inflation
   ~678px so it never reproduces there — only on real devices.)
   FIX: key the kill on (pointer:coarse) — true on ANY touch device regardless
   of the inflated width — and force the outro opacity in CSS so the clean hero
   shows even if the JS bail-out never ran (e.g. stale cached script).
   max-width:1100px guard keeps real desktops (incl. large touch monitors,
   width>1100) on the full scroll-jacking experience -> desktop untouched.
   ============================================================ */
@media (pointer:coarse) and (max-width:1100px){
  [data-scrollroot]{height:auto!important;min-height:0!important;max-width:100%!important;overflow-x:clip!important}
  [data-stage]{position:relative!important;top:auto!important;height:auto!important;min-height:auto!important;overflow:hidden!important;padding:84px 20px 56px!important;max-width:100%!important}
  [data-a^="intro-"],[data-a^="panel-"],[data-a^="cup-"],[data-a^="num-"],[data-a^="w1-"],[data-a^="w2-"],[data-a^="slo-"],[data-a^="st1-"],[data-a^="st2-"],[data-a^="mq-"],[data-a^="out-cup-"],[data-a="out-rib"],[data-a="scrollhint"]{display:none!important}
  [data-stage] > div[style*="position:absolute"]{display:none!important}
  [data-stage] > div:has([data-a="out-cta"]){display:grid!important;position:static!important;inset:auto!important;place-items:center!important}
  [data-stage] > div:has([data-a="out-cta"]) > div{position:static!important;width:100%!important;max-width:520px!important}
  [data-a="out-logo"]{font-size:clamp(72px,21vw,300px)!important;line-height:.8!important;opacity:1!important;transform:none!important}
  [data-a="out-sub"]{font-size:18px!important;opacity:1!important;transform:none!important}
  [data-a="out-cta"]{display:inline-flex!important;opacity:1!important;transform:none!important}
  [data-a="out-trust"]{display:flex!important;opacity:1!important;transform:none!important}
  [data-stage] > nav{display:none!important}
  [data-stage] > div[style*="bottom:0"]{display:none!important}
}

/* ============================================================
   TOUCH TARGETS >= 44px  (pointer:coarse)
   ------------------------------------------------------------
   Audit: breadcrumb "Strona główna" (h16), footer column links
   (h21) and the kontakt.html info tel/mail links (h20) are below
   the 44px tap-height floor on phones. Gate on (pointer:coarse)
   — NOT max-width alone — because the full-width marquee inflates
   the mobile layout viewport past 768px on real devices (see the
   hero-kill block above). max-width:1100px keeps real desktops
   (pointer:fine) and large touch monitors untouched.
   ============================================================ */
@media (pointer:coarse) and (max-width:1100px){
  /* breadcrumb link: pad the tap zone, negative margin keeps the
     row exactly where it was (nothing interactive around it) */
  .crumb a{display:inline-block;padding:14px 6px;margin:-14px -6px}
  /* footer column links (incl. tel/mail in the Kontakt column):
     real padding — the footer simply grows a bit taller on phones,
     so neighbouring tap zones never overlap */
  .foot-col a{padding:11.5px 0;margin-bottom:0}
  /* kontakt.html info card tel/mail: pad + negative margin so the
     dt/dd rhythm doesn't shift (only non-interactive labels nearby) */
  .info dd a{display:inline-block;padding:12px 0;margin:-12px 0}
}

/* ============================================================
   MOBILE HERO — "BRUTALIST POP" (wariant A)
   ------------------------------------------------------------
   The JS bail-out (touch / <=768px) shows the outro (SLUSH + tagline + CTA +
   trust badges), injects a top intro pill (.mhero-eye) and scatters decorative
   floating brand tiles (.mhero-tile) into the outro column, tagging it
   .mhero-pop. EVERY selector is scoped to .mhero-pop / .mhero-tile / .mhero-eye —
   classes that ONLY exist once injected on mobile — so the desktop scroll-jacking
   hero is structurally untouched. Sizes in vw so they scale against the marquee-
   inflated mobile layout viewport (see marquee-viewport-inflation). The hero keeps
   its original light-blue (#dceeff) stage background.
   ============================================================ */
.mhero-pop{gap:0!important;padding:0 6vw!important}
.mhero-eye{position:relative;z-index:1;display:inline-flex!important;align-items:center;gap:2vw;background:#fff;border:.6vw solid #000;border-radius:1600px;padding:1.1vh 4vw;font:700 3vw/1 Inter,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#0b0b0b;margin-bottom:2.2vh}
.mhero-eye span{width:2.4vw;height:2.4vw;border-radius:50%;background:#fb4903;border:.4vw solid #000}
.mhero-pop [data-a="out-logo"]{position:relative;z-index:1;font-size:22vw!important;line-height:.78!important;margin:0!important;color:#0b0b0b!important}
.mhero-pop [data-a="out-sub"]{position:relative;z-index:1;font-size:4.6vw!important;max-width:80vw;margin:2.2vh auto 0!important;color:#1a2230!important;font-weight:600}
.mhero-pop [data-a="out-cta"]{position:relative;z-index:1;margin-top:3vh!important;background:#0b0b0b!important;color:#fff!important;border:.6vw solid #000!important;box-shadow:1.3vw 1.3vw 0 #000!important;border-radius:1600px!important;padding:4.4vw 7.5vw!important;font-weight:800!important}
.mhero-pop [data-a="out-trust"]{position:relative;z-index:1;display:flex!important;flex-wrap:wrap;justify-content:center;gap:2vw;margin-top:3vh!important;opacity:1!important;transform:none!important}
.mhero-tile{position:absolute;z-index:0;border:.65vw solid #000;box-shadow:1vw 1vw 0 #000;display:grid;place-items:center;font-family:'Archivo Black';animation:mheroFloat 5s ease-in-out infinite;animation-fill-mode:both;will-change:transform}
.mhero-tile.t1{top:6%;left:4%;width:18vw;height:18vw;border-radius:5vw;background:#ffd731;font-size:8vw;--r:-9deg}
.mhero-tile.t2{top:10%;right:5%;width:15vw;height:15vw;border-radius:50%;background:#5c4ade;animation-delay:.8s;--r:0deg}
.mhero-tile.t3{bottom:9%;left:5%;width:26vw;height:11vw;border-radius:1600px;background:#fff;font-size:3.4vw;letter-spacing:.02em;color:#0b0b0b;animation-delay:1.6s;--r:6deg}
.mhero-tile.t4{bottom:12%;right:5%;width:16vw;height:16vw;border-radius:4.5vw;background:#fb4903;animation-delay:.4s;font-size:7.5vw;--r:10deg}
@keyframes mheroFloat{0%,100%{transform:translateY(0) rotate(var(--r,0))}50%{transform:translateY(-2vh) rotate(var(--r,0))}}
/* fill the phone screen (hero >= one screen, content centred) + kill any inherited
   transition so the hero appears cleanly on load instead of fading/jumping. */
/* 100vh (not svh): the marquee inflates the layout viewport, so vh is what maps
   to a full visual screen here; svh resolved to the un-inflated 844 = too short. */
[data-stage]:has(.mhero-pop){min-height:100vh!important;display:flex!important;flex-direction:column;justify-content:center}
.mhero-pop [data-a],.mhero-eye,.mhero-tile{transition:none!important}
/* gentle one-time fade-in so the first paint looks intentional, not poppy.
   OPACITY ONLY — a transform here would make .mhero-pop a containing block and
   shift the absolutely-positioned tiles mid-animation. */
.mhero-pop{animation:mheroIn .5s ease both}
@keyframes mheroIn{from{opacity:0}to{opacity:1}}