/* 05-media.css: Zrzuty i media: podpis, modyfikatory figure.media (tall, film, wide), plansza pod obrazem, ramka „do dostarczenia”, powiększenie obrazu (lightbox).
   Style globalne motywu QS GPS; zasady i spis plików w 01-tokeny.css. */

/* Zrzuty i media */
/* Zrzuty aplikacji: gotowe pliki media/practiqs-*.png (ramka przeglądarki jest w obrazie, źródło narzedzia/grafiki/okno.html).
   Obrazów nie składamy kodem (ramki, nałożone telefony, kolaże); brak obrazu → figure.placeholder. */
/* Podpis pod zrzutem */
.caption{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:18px;font-size:.9rem;font-weight:600;color:var(--muted)}
.caption::before{content:"";width:28px;height:2px;border-radius:2px;background:var(--grad)}
/* Modyfikatory figure.media: wysoki rysunek, film, szeroki pas. Podstawa (.media img) i modyfikatory ramki i tła (photo, contain, jasne) są w 14-sekcje-tresci.css, bo muszą stać po .media img */
/* Wysoki rysunek (np. montaż warstwa po warstwie): ograniczona wysokość, wyśrodkowany */
.media--tall{display:flex;justify-content:center;padding:clamp(16px,3vw,32px);border-radius:var(--r);background:var(--white);border:1px solid var(--line)}
.media.media--tall img{width:auto;height:auto;max-width:100%;max-height:min(520px,70vh);object-fit:contain;border:0;border-radius:0}
/* Film produktu (np. QSensor FuelCap w akcji): wyśrodkowany, 16:9, z okładką (poster), zaokrąglony, z cieniem */
.media--film{max-width:1040px;margin-inline:auto;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lift);background:var(--navy)}
.media.media--film video{aspect-ratio:16/9;object-fit:cover;border:0;border-radius:0;background:var(--navy)}
/* Szeroki pas 21:9 (np. nagłówek podstrony: page-hero__shot), na telefonie 4:3 */
.media--wide img{aspect-ratio:21/9;object-fit:cover}
@media (max-width:600px){.media--wide img{aspect-ratio:4/3}}
.media--wide.media--contain img{aspect-ratio:3/1} /* z media--contain (14-sekcje-tresci.css): produkt w nagłówku, niższy pas, żeby małe zdjęcie nie pływało w dużym polu przy szerokim kontenerze */
@media (max-width:600px){.media--wide.media--contain img{aspect-ratio:4/3}}
.media--wide.media--dol img{object-position:50% 88%} /* kadr przesunięty w dół: główny obiekt nisko na zdjęciu (np. kabina wywrotki), żeby pas 21:9 go nie ucinał */

/* Niebieska plansza pod obrazem bez tła (np. telefony z media/telefony-*.png). Tło daje CSS, obraz to jeden przezroczysty PNG:
   <figure class="plansza"><img src="/wp-content/uploads/…png" …></figure>; plansza--telefony: mocno zaokrąglona, na telefonie węższa */
.plansza{margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--grad-solid)}
.plansza img{width:100%;height:auto}
.plansza--telefony{border-radius:36px}
@media (min-width:901px){.split>.plansza--telefony{width:100%;max-width:480px;justify-self:center}} /* obok tekstu: plansza nie wyższa niż potrzeba przy szerokim kontenerze */
@media (max-width:900px){.plansza--telefony{max-width:520px;width:100%;margin-inline:auto}}
/* Ramka „do dostarczenia”: puste miejsce na zdjęcie, zrzut albo mockup, którego jeszcze nie ma. Nigdy stare mockupy.
   <figure class="placeholder">[qs_ikona nazwa="ui-warstwy"]<p class="placeholder__h">Do dostarczenia: co ma być na obrazie</p><p>Szczegóły zawartości</p><p class="placeholder__size">PNG albo JPG, 1600 × 1067 px</p></figure>
   Proporcje: domyślnie 3:2; placeholder--wide 16:9, placeholder--square 1:1, placeholder--app 3:2 (zrzut aplikacji 1800 × 1200, najwyżej 1080 px szerokości). */
.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;aspect-ratio:3/2;margin:0;padding:clamp(20px,4vw,40px);border:2px dashed var(--line-strong);border-radius:var(--r);background:var(--pale-2);color:var(--muted);text-align:center;font-size:var(--fs-sm);line-height:1.5}
.placeholder>svg{width:40px;height:40px;margin-bottom:6px;color:var(--blue)}
.placeholder p{max-width:44ch}
.placeholder__h{color:var(--ink);font-weight:800;font-size:var(--fs-text)}
.placeholder__size{margin-top:4px;padding:4px 12px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--line-strong);color:var(--blue);font-weight:700;font-size:var(--fs-xs)}
.placeholder--wide{aspect-ratio:16/9}
.placeholder--square{aspect-ratio:1}
.placeholder--app{aspect-ratio:3/2;width:100%;max-width:1080px;margin-inline:auto}
.page-hero .placeholder--app{margin-inline:0} /* podstrony: ramka do lewej, w linii z tekstem nagłówka (strona główna zostaje na środku) */
/* Gotowy obraz aplikacji (mockup 1800 × 1200, PNG bez tła, ramka urządzenia w pliku): figure.media.media--app; na środku, najwyżej 1080 px; na podstronach do lewej jak ramka */
.media--app{width:100%;max-width:1080px;margin-inline:auto}
.page-hero .media--app{margin-inline:0}
.media.media--app img{border:0;border-radius:0;background:none}
.media--app .zoom:hover img{box-shadow:none} /* powiększenie po kliknięciu (a.zoom); obraz bez tła, więc bez cienia prostokąta */
@media (max-width:600px){.placeholder{aspect-ratio:auto;min-height:260px}}

/* Powiększenie obrazu po kliknięciu (infografiki): <figure class="media"><a class="zoom" href="duzy.png" aria-label="Powiększ: …"><img …></a></figure>.
   qs.js otwiera obraz w oknie (dialog.lightbox); bez JS link otwiera sam plik. */
.zoom{position:relative;display:block;border-radius:var(--r);cursor:zoom-in}
.zoom img{transition:box-shadow .2s}
.zoom:hover img{box-shadow:var(--shadow-pop)}
.zoom::after{content:"";position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E") center/22px no-repeat;border:1px solid var(--line-strong);box-shadow:var(--shadow-item);transition:transform .2s}
.zoom:hover::after{transform:scale(1.08)}
.lightbox{padding:0;margin:auto;border:0;border-radius:var(--r);background:var(--white);max-width:96vw;max-height:94vh;overflow:auto;overscroll-behavior:contain}
.lightbox::backdrop{background:var(--backdrop)}
.lightbox img{display:block;width:auto;height:auto;max-width:96vw;max-height:94vh;object-fit:contain;border-radius:var(--r);cursor:zoom-in}
.lightbox.is-zoom img{max-width:none;max-height:none;border-radius:0;cursor:zoom-out} /* pełna rozdzielczość, przesuwanie przewijaniem */
.lightbox.is-zoom .lightbox__close{position:fixed;right:max(12px,3vw);top:max(12px,3vh)}
.lightbox__hint{display:none;position:fixed;left:50%;bottom:max(12px,3vh);transform:translateX(-50%);margin:0;padding:6px 14px;border-radius:var(--r-pill);background:var(--navy);color:var(--white);font-size:var(--fs-sm);pointer-events:none}
.lightbox.da-sie .lightbox__hint{display:block}
.lightbox.is-zoom .lightbox__hint{display:none}
.lightbox__close{position:absolute;right:10px;top:10px;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);background:var(--white);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-item)}
.lightbox__close svg{width:22px;height:22px}
.lightbox__close:hover{color:var(--blue)}