/* 08-urzadzenia-i-aplikacje.css: Katalog urządzeń (karty produktów), aplikacje mobilne i przyciski sklepów.
   Style globalne motywu QS GPS; zasady i spis plików w 01-tokeny.css. */

/* Urządzenia: katalog produktów */
.dev-group+.dev-group{margin-top:clamp(36px,4.5vw,56px)}
.dev-group__h{margin-bottom:18px;font-size:1.3rem}
.catalog{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.catalog>li{grid-column:span 3;display:flex}
.catalog>li.big{grid-column:span 6}
.catalog>li.tall{grid-row:span 2}
/* Karta produktu: .prod (+ --big duża, --accent niebieska, --all zdjęcie bez tła) */
.prod{position:relative;flex:1;display:flex;flex-direction:column;border-radius:var(--r);background:var(--white);border:1px solid var(--line);overflow:hidden;color:var(--ink);transition:transform .3s,border-color .3s}
.prod:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.prod__img{position:relative;flex:1 0 auto;aspect-ratio:4/3;display:grid;place-items:center;padding:18px;background:var(--pale)}
.bg-pale .prod:not(.prod--accent) .prod__img{background:var(--white)}
.prod__img img{width:82%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .45s var(--ease)}
.prod:hover .prod__img img{transform:scale(1.07) rotate(-2deg)}
/* Plakietka na zdjęciu karty produktu (dodatkowa cecha, np. montaż pod zapalniczkę): <span class="prod__img"><span class="prod__badge">[qs_ikona …]Tekst</span><img …></span> */
.prod__badge{position:absolute;z-index:1;left:12px;top:12px;display:flex;align-items:center;gap:6px;max-width:calc(100% - 24px);padding:5px 10px 5px 7px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-strong);box-shadow:var(--shadow-item);color:var(--blue);font-size:var(--fs-min);font-weight:700;line-height:1.3}
.prod__badge svg{flex:none;width:18px;height:18px}
.prod__body{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px}
.prod__body .mt{font-weight:700;line-height:1.3}
.prod__body .mt small{margin-top:4px;font-size:var(--fs-xs);font-weight:400;opacity:.85}
.prod__body>svg{flex:none;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--pale);color:var(--blue);transition:background .25s,color .25s,transform .25s}
.prod:hover .prod__body>svg{background:var(--blue);color:var(--white);transform:translateX(3px)}
.prod--big .prod__img{aspect-ratio:16/10}
.prod--big .prod__img img{width:70%}
.prod--big .prod__body{padding:22px 26px}
.prod--big .prod__body .mt{font-size:1.35rem;letter-spacing:-.01em}
.prod--big .prod__body .mt small{font-size:.9rem;letter-spacing:0}
.prod--accent{background:var(--grad-mocny) border-box;border-color:transparent;color:var(--white)}
.prod--accent .prod__img{background:transparent}
.prod--accent .prod__img img,.prod--all .prod__img img{mix-blend-mode:normal}
.prod--accent .prod__body>svg{background:var(--glass-strong);color:var(--white)}
.prod--accent:hover .prod__body>svg{background:var(--white);color:var(--blue)}
.prod--accent .mt small{color:var(--on-accent-2)}
.prod__tag{position:absolute;top:16px;left:16px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--r-pill);font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;background:var(--white);color:var(--blue)}
.prod--accent .prod__tag{background:var(--navy-2);color:var(--white)}
@media (max-width:900px){
  .catalog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog>li{grid-column:span 1}
  .catalog>li.big{grid-column:1/-1}
  .catalog>li.tall{grid-row:auto}
  .prod--big .prod__img{aspect-ratio:16/8}
  .catalog>li:not(.big) .prod__img{aspect-ratio:16/11}
}
@media (max-width:560px){
  .catalog{gap:12px}
  .prod__body{padding:14px}
  .prod__body>svg{width:30px;height:30px;padding:7px}
  .prod--big .prod__body .mt{font-size:var(--fs-h3)}
  .catalog>li:not(.big) .prod__body>svg{display:none}
  .catalog>li:not(.big) .prod__body{padding:12px 14px 14px}
  .catalog>li:not(.big) .prod__body .mt{font-size:var(--fs-sm)}
  .catalog>li:not(.big) .prod__body .mt small{font-size:var(--fs-min)}
  .catalog>li:not(.big) .prod__img{aspect-ratio:1/1}
}

/* Aplikacje mobilne i sklepy */
.applists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:28px}
.applists>:only-child{grid-column:1/-1} /* jedna karta na całą szerokość */
.applist{padding:22px;border-radius:var(--r);background:var(--white);border:1px solid var(--line-strong);overflow:hidden}
.applist h3{font-size:var(--fs-h3)}
.applist .dots{font-size:var(--fs-sm);gap:8px;margin-top:14px}
@media (max-width:600px){.applists{grid-template-columns:minmax(0,1fr)}}
/* Wyróżniki w dole karty .applist (strona główna, aplikacje): pasek z ikonami zamiast osobnych kafelków obok listy (właściciel 29.09: „scalić”)
   <ul class="applist__plus"><li>[qs_ikona]<span>tekst z <strong></span></li>…</ul> */
.applist__plus{display:grid;gap:12px 24px;margin:20px -22px -22px;padding:16px 22px;background:var(--pale);border-top:1px solid var(--line)}
.applist__plus li{display:flex;gap:12px;align-items:center;font-size:.95rem;line-height:1.45}
.applist__plus li>svg{width:40px;height:40px;padding:9px;flex:none;border-radius:var(--r-xs);background:var(--white);border:1px solid var(--line-strong);color:var(--blue)}
.applist__plus strong{color:var(--blue);font-weight:800}
/* Kolumny od szerokości karty, nie ekranu: obok zdjęcia karta ma ok. 490 px, więc lista i pasek w jednej kolumnie bez zawijania (właściciel 29.09) */
.applist:has(.applist__plus){container-type:inline-size}
@container (min-width:760px){.applist__plus,.applist:has(.applist__plus) .dots{grid-template-columns:repeat(2,minmax(0,1fr))}.applist:has(.applist__plus) .dots{column-gap:32px}}
/* Przyciski sklepów */
.stores{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} /* flex z zawijaniem: dłuższy napis po tłumaczeniu przenosi przycisk niżej zamiast wystawać */
.store{display:inline-flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:var(--r-sm);background:var(--grad-navy);color:var(--white);font-weight:700;font-size:.95rem;line-height:1.15;transition:transform .2s}
.store svg{width:22px;height:22px;flex:none;color:var(--sky-2)}
.store small{display:block;font-size:var(--fs-min);font-weight:600;color:var(--sky-2)}
.store:hover{transform:translateY(-2px)}
/* Rząd pod listami aplikacji: przycisk „Poznaj …” i sklepy na szerokość list (strona główna): <div class="btn-row btn-row--apka"><a class="btn">…</a><div class="stores">…</div></div>
   Kolumny jak w .applists: przycisk pod lewą kartą, sklepy pod prawą */
.btn-row--apka{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:var(--gap)}
.btn-row--apka .btn{width:100%}
.btn-row--apka .stores{margin:0;gap:10px;flex-wrap:nowrap}
.btn-row--apka .store{flex:1 1 0;justify-content:center;padding:8px 10px;min-width:0}
@media (max-width:600px),(min-width:901px) and (max-width:1200px){.btn-row--apka{grid-template-columns:minmax(0,1fr)}}
/* Przyciski sklepów w wąskiej kolumnie: szerokość z napisu (po angielsku „Download from Google Play” jest dłuższe), gdy się nie mieszczą, jeden pod drugim */
.fact-stack .stores{display:flex;flex-wrap:wrap;margin-top:4px;gap:8px}
.fact-stack .stores .store{flex:1 1 auto}
.fact-stack .store{padding:10px 12px;justify-content:flex-start;white-space:nowrap;font-size:.9rem}

/* Wyróżnienie produktu (QSensor FuelCap na stronach o paliwie, [qs_fuelcap], parts/fuelcap.php): niebieska plansza, tekst, przyciski, zdjęcie.
   Na stronach we własnej sekcji pod nagłówkiem (section--wyroznik), w artykule przed pierwszym śródtytułem */
.wyroznik{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:center;gap:clamp(20px,3vw,36px);margin-top:clamp(28px,3vw,40px);padding:clamp(20px,2.6vw,30px) clamp(20px,3vw,36px);border-radius:var(--r-lg);background:var(--grad-mocny);color:var(--white);box-shadow:var(--shadow-lift);overflow:hidden}
.wyroznik::before{content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;background:var(--glass-soft);pointer-events:none}
.wyroznik__tekst{position:relative}
.wyroznik .wyroznik__znak{display:inline-flex;align-items:center;gap:8px;margin:0;padding:4px 12px;border-radius:var(--r-pill);background:var(--glass);color:var(--white);font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.wyroznik__znak svg{width:15px;height:15px}
.wyroznik .wyroznik__h{margin:10px 0 0;padding:0;border:0;color:var(--white);font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.2}
.wyroznik .wyroznik__tekst>p:not(.wyroznik__znak){max-width:62ch;margin-top:8px;color:var(--white);font-size:var(--fs-sm);line-height:1.55}
.wyroznik .wyroznik__tekst strong{color:var(--white);font-weight:800} /* na niebieskim tle zawsze biały, także w artykułach (.prose strong ma kolor nagłówków) */
.wyroznik .btn-row{margin-top:16px;gap:10px;align-items:center}
.wyroznik .btn{padding:11px 18px;font-size:var(--fs-sm)}
.wyroznik .wyroznik__img{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-item)}
.wyroznik .wyroznik__img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0;border-radius:0;transition:transform .5s var(--ease)}
.wyroznik:hover .wyroznik__img img{transform:scale(1.03)}
/* W artykule (wąska kolumna): wersja kompaktowa, małe zdjęcie z boku, mniejsze przyciski */
.prose .wyroznik{margin:2em 0;grid-template-columns:150px minmax(0,1fr);align-items:start;gap:22px;padding:24px;border-radius:var(--r-lg)}
.prose .wyroznik::before{display:none}
.prose .wyroznik .wyroznik__img{order:-1;border-radius:var(--r)}
.prose .wyroznik .wyroznik__img img{aspect-ratio:1/1}
.prose .wyroznik .wyroznik__znak{padding:4px 10px;font-size:var(--fs-min)}
.prose .wyroznik .wyroznik__h{margin-top:10px;font-size:1.35rem}
.prose .wyroznik .wyroznik__tekst>p:not(.wyroznik__znak){margin-top:8px;font-size:var(--fs-sm);line-height:1.55}
.prose .wyroznik .btn-row{margin-top:16px;gap:10px}
@media (max-width:600px){.prose .wyroznik{grid-template-columns:minmax(0,1fr);padding:20px}.prose .wyroznik .wyroznik__img img{aspect-ratio:21/9}}
/* Nagłówek wyróżnienia zawsze biały (bez koloru z .grad, np. w podglądzie artykułu) */
.wyroznik .wyroznik__h .grad{background:none;-webkit-text-fill-color:currentColor;color:inherit}
@media (max-width:900px){.wyroznik{grid-template-columns:minmax(0,1fr)}.wyroznik .wyroznik__img{order:-1}}
@media (prefers-reduced-motion:reduce){.wyroznik:hover .wyroznik__img img{transform:none}}

/* Wyróżnienie we własnej sekcji pod nagłówkiem strony (strona główna, strony o paliwie; właściciel 28.09: reklama QSensor FuelCap, nie w hero):
   <section class="section section--wyroznik bg-pale" aria-labelledby="wyroznik-fuelcap"><div class="container">[qs_fuelcap]</div></section> */
.section--wyroznik{padding-block:clamp(28px,4vw,48px)}
.section--wyroznik .wyroznik{grid-template-columns:minmax(0,1fr) minmax(0,300px);margin-top:0;padding:clamp(18px,2.2vw,26px) clamp(20px,3vw,32px)}
.section--wyroznik .wyroznik .wyroznik__img img{aspect-ratio:3/2}
@media (max-width:900px){.section--wyroznik .wyroznik{grid-template-columns:minmax(0,1fr)}.section--wyroznik .wyroznik .wyroznik__img img{aspect-ratio:21/9}}