/* Poprawki wyglądu przy pośrednich szerokościach ekranu (nasze, nie z Webflow).
   Ładowane na KAŻDEJ stronie po stylach Webflow, więc wygrywają z nimi.
   Zasada: przy 390 px (telefon) i 1440 px (komputer) wygląd ma zostać 1:1 jak w Webflow —
   poprawiamy tylko zakresy, których projekt nie przewidział. Sprawdzanie: node tools/szerokosci.js
   Progi Webflow: ≤479 telefon pionowo, 480–767 telefon poziomo, 768–991 tablet, ≥992 komputer. */

/* Sekcja „Naprawa wysyłkowa”: sztywne 1280 px → przy 992–1279 px strona przewijała się w bok. */
.div-block-637 { width: auto; max-width: 80rem; }

/* „Łącz naprawy” (strony usług): kafelki min. 210 px w jednym rzędzie → przy 992–1160 px wychodziły poza ekran. */
.div-block-635 { flex-wrap: wrap; }

/* Strona główna, „Masz pytanie?”: tekst + formularz obok siebie aż do 480 px → formularz ucięty. */
@media screen and (max-width: 767px) {
  .div-block-652 { flex-flow: column; }
  .div-block-653 { margin-top: 40px; }
}

/* Cenniki modeli (siatka 2 kolumn od 991 px): przy 480–600 px kafelki się nie mieszczą → 1 kolumna jak na telefonie. */
@media screen and (max-width: 599px) {
  .quick-stack.wf-layout-layout { grid-template-columns: 1fr !important; }
}

/* Okienko „Nie jestem robotem” ma sztywne 304 px → na najmniejszych telefonach (≤ 360 px) lekko zmniejszone. */
@media screen and (max-width: 360px) {
  .g-recaptcha { max-width: 100%; transform: scale(0.88); transform-origin: 0 0; }
  .uui-contact01_form { grid-template-columns: minmax(0, 1fr); }
}

/* Długie adresy WWW w regulaminach łamią się zamiast wychodzić poza ekran. */
.link---niebieski-zwyk-y { overflow-wrap: anywhere; }

/* 992–1339 px (iPad poziomo, mniejsze laptopy): kontenery mają 1280 px bez bocznych marginesów,
   więc treść dotykała krawędzi ekranu. Od 1340 px wygląd bez zmian (kontener mieści się z marginesem). */
@media screen and (min-width: 992px) and (max-width: 1339px) {
  .adres-serwisu-maclab, .o-us-udze, .oferta, .section-101, .section-69, .section-89, .section-90,
  .section-91, .section-92, .section-95, .section-97, .section-98, .wysy-ka {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* „Opłacalność naprawy” (wymiana wyświetlacza iPhone): brak bocznych marginesów przy 480–991 px — jak w sąsiedniej sekcji.
   (Na telefonie pionowo margines daje już .o-naprawie.) */
@media screen and (min-width: 480px) and (max-width: 991px) {
  .section-92 { padding-left: 20px; padding-right: 20px; }
}

/* Cenniki: nagłówek „Wybierz usterkę…” dotykał krawędzi na telefonie (sekcja nie ma tam marginesów). */
@media screen and (max-width: 479px) {
  .text-block-421 { padding-left: 10px; padding-right: 10px; }
}

/* „Łącz naprawy”: nazwy usług bez łamania wychodziły poza kafelki na najmniejszych telefonach. */
@media screen and (max-width: 360px) {
  .heading-150 { white-space: normal; }
}

/* „Dlaczego MacLab” (strona główna): zdjęcie laptopa miało margines 40 px z wersji komputerowej
   także w układzie jednokolumnowym (tablet) → przesunięte w prawo. */
@media screen and (max-width: 991px) {
  .image-252 { margin-left: 0; }
}

/* Pasek zdjęć z naprawy (strony usług): przy niektórych szerokościach zdjęcia dochodziły do krawędzi / były ucięte. */
@media screen and (max-width: 1339px) {
  .zdj-cia { padding-left: 10px; padding-right: 10px; }
}

/* „Dodatkowa ochrona aparatu”: nagłówek bez marginesu dotykał krawędzi na telefonie. */
@media screen and (max-width: 767px) {
  .oferta .text-block-357 { padding-left: 10px; padding-right: 10px; }
}

/* ZDJĘCIA BEZ ZNIEKSZTAŁCEŃ. Webflow dawał części zdjęć sztywną wysokość (np. 500 px), a szerokość zmieniała się
   z oknem → zdjęcie się rozciągało/ściskało. object-fit zachowuje proporcje w tej samej ramce (układ bez zmian).
   Sprawdzanie: node tools/proporcje.js
   - contain: całe zdjęcie widoczne (zdjęcia urządzeń na przezroczystym/białym tle)
   - cover:   ramka wypełniona, brzegi lekko przycięte (kwadratowe miniatury) */
.zdj-cie-g-wne,   /* główne zdjęcie na stronach usług i cenników */
.image-217,       /* zdjęcia w kafelkach cenników */
.image-256,       /* paczka w sekcji „Naprawa wysyłkowa” */
.image-270 {      /* szkło na aparat w „Dodatkowa ochrona” */
  object-fit: contain;
}
.image-229 { object-fit: cover; } /* miniatury w pasku zdjęć z naprawy */

/* reCAPTCHA wczytuje się dopiero po kliknięciu w formularz (formularze.js) —
   miejsce na okienko (304×78 px) zarezerwowane, żeby formularz nie „skakał”, gdy się pojawi. */
.g-recaptcha { min-height: 78px; }

/* /kontakt: napis „Kontakt” na górze zamieniony z div na H1 (SEO, 2026-10-02) — H1 w Webflow ma domyślne
   marginesy 20/10 px; zerujemy je, żeby wyglądał 1:1 jak wcześniej. */
h1.text-block-417 { margin-top: 0; margin-bottom: 0; }