/* Poprawki widoku na telefonie — audyt 19.10.2026
   (raport: strony-www/method-group-v3/_audyt-mobile-2026-10-19/RAPORT.md).
   Jeden plik dla wszystkich stron PL i EN; reguły są zawężone do konkretnych bloków,
   więc na komputerze zmienia się tylko to, co opisano przy regule. */

/* 1. Ozdobne „podkreślenia” po Squarespace (TextShape) mają sztywną szerokość z komputera
      (ok. 700 px). Na telefonie rozpychały stronę w bok i zostawiały pustą dziurę pod akapitem.
      Na żadnym ekranie nie były widoczne (brak koloru), więc chowamy je wszędzie. */
.TextShape-node{display:none!important}

/* 2. Tagi pod artykułem: czcionka 10 px i interlinia mniejsza niż litery. */
.blog-meta-item--tags{font-size:13px!important;line-height:1.75!important}
.blog-meta-item--tags *{font-size:inherit!important;line-height:inherit!important}

/* 3. Przyciski „Spotify / YouTube” w podcastach: kolor linku z treści artykułu wygrywał
      z kolorem przycisku i napis był czarny na czarnym. */
.mg-art .sqs-html-content a.sq-platforma,.mg-art a.sq-platforma{color:#F1EFE9!important;text-decoration:none!important}
.mg-art .sqs-html-content a.sq-platforma:hover,.mg-art a.sq-platforma:hover{background:#021859!important;color:#F1EFE9!important}

/* 3b. Ikony w tabeli porównania (artykuł o CaaS): plik czcionki Font Awesome nie istnieje
       na serwerze (404), więc zamiast ✓ ! ✕ były puste kwadraty. Zwykłe znaki zamiast czcionki. */
i.fa-solid.fa-circle-check,i.fa-solid.fa-circle-exclamation,i.fa-solid.fa-circle-xmark{font-family:inherit!important;font-style:normal!important;font-weight:700!important}
i.fa-solid.fa-circle-check::before{content:"✓"!important}
i.fa-solid.fa-circle-exclamation::before{content:"!"!important}
i.fa-solid.fa-circle-xmark::before{content:"✕"!important}

/* 3c. Powiększanie zdjęć w artykułach, podcastach i case study Local Investments (własny skrypt
       stron, okno .mg-lightbox). Style okna były zawężone do treści artykułu (.mg-art), a skrypt
       dokleja okno na koniec strony, poza treść — więc okno nie miało stylów: po stuknięciu w zdjęcie
       obraz pojawiał się rozjechany w środku strony albo pod stopką, bez przyciemnienia i zamknięcia.
       Te same reguły co w assets/css/tresc.css, bez zawężenia. */
.mg-lightbox{position:fixed;inset:0;background:rgba(8,8,10,.94);z-index:2147483000;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,64px);cursor:zoom-out}
.mg-lightbox.mg-lightbox--open{display:flex;opacity:1}
.mg-lightbox img{max-width:94vw;max-height:92vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.mg-lightbox__close{position:absolute;top:14px;right:18px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:40px;line-height:1;cursor:pointer;opacity:.85;font-family:system-ui,sans-serif}

@media (max-width:767px){
  /* 4. Zdjęcie z nakładką tekstu i przyciskiem (case studies po Squarespace: ArchiDAY, Art Deco
        Mokotów, Grzybowska, Northline, Soho). Zdjęcie miało ok. 140 px wysokości, a tekst 270 px:
        tekst wylewał się na cytat nad nim, a przycisk był ucięty. Teraz zdjęcie rośnie do treści. */
  figure.design-layout-poster{display:grid!important}
  figure.design-layout-poster>*{grid-area:1/1}
  figure.design-layout-poster>.intrinsic{position:relative!important;height:auto!important;min-height:240px}
  figure.design-layout-poster .image-inset{position:absolute!important;inset:0!important;height:auto!important}
  figure.design-layout-poster .sqs-image-shape-container-element{position:absolute!important;inset:0!important;height:100%!important;padding-bottom:0!important}
  figure.design-layout-poster .sqs-image-shape-container-element img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  figure.design-layout-poster .image-card-wrapper{position:relative!important;inset:auto!important;height:auto!important;padding:40px 22px!important;box-sizing:border-box}
  figure.design-layout-poster .image-card{width:100%!important;max-width:none!important}
  figure.design-layout-poster .image-button-wrapper{overflow:visible!important}
  figure.design-layout-poster .image-button-inner a{max-width:100%;padding:0 24px!important;white-space:normal!important;text-align:center;box-sizing:border-box}

  /* 5. Katalog „Nowy Pasym” (Local Investments): na wąskim ekranie ma być zwykłą listą stron.
        Skrypt przełączał to klasą, którą silnik strony czasem kasował przy przerysowaniu —
        zostawała wtedy „przewijana książka” bez skryptu (pięć ekranów tej samej okładki 1/7).
        Teraz lista wynika z samej szerokości ekranu, niezależnie od skryptu. */
  .libook .libook__scroll{height:auto!important;width:auto!important;margin-left:0!important}
  .libook .libook__stage{position:static!important;height:auto!important;padding:0!important;display:block!important;perspective:none!important}
  .libook .libook__frame{position:static!important;width:100%!important;aspect-ratio:auto!important;max-height:none!important;display:grid!important;grid-template-columns:1fr!important;gap:16px!important}
  .libook .libook__page{position:static!important;transform:none!important;opacity:1!important;box-shadow:0 10px 30px rgba(16,16,18,.10)!important}
  .libook .libook__page>img{height:auto!important;aspect-ratio:1800/1273}
  /* strona z kartą mieszkania (tekst + rzut): na telefonie rzut nad tekstem, nie w wąskiej kolumnie */
  .libook .libook__page--spread{grid-template-columns:1fr!important}
  .libook .libook__spread-img{order:-1}
  .libook .libook__spread-img img{height:auto!important;aspect-ratio:auto!important}
  .libook .libook__shade,.libook .libook__hud{display:none!important}

  /* 6. Tabele w treści (np. „Czym jest Method”): tabela miała 600 px i druga kolumna była ucięta
        bez śladu, że da się ją przewinąć. Na telefonie mieści się w szerokości ekranu. */
  .mg-art .art__table table{width:100%!important;min-width:0!important;table-layout:auto}
  .mg-art .art__table th,.mg-art .art__table td{white-space:normal!important;word-break:normal!important;overflow-wrap:normal!important}

  /* 7. Porównania 4–5 modeli (Method Creative Hub, artykuł o CaaS) muszą zostać szersze niż ekran.
        Dało się je przewinąć w bok, ale nic tego nie sygnalizowało i wyglądało, jakby porównanie
        miało tylko jedną kolumnę. Nad tabelą pojawia się podpowiedź. */
  .mc-table-wrapper::before,div:has(> [style*="--cmpMin"])::before{content:"Przesuń tabelę w bok →";display:block;margin:0 0 10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;opacity:.55;text-align:right}
  html[lang="en"] .mc-table-wrapper::before,html[lang="en"] div:has(> [style*="--cmpMin"])::before{content:"Swipe the table sideways →"}

  /* 8. Sekcja „Efekt” (Stargres): zdjęcie jest tłem sekcji i na telefonie leżało pod przyciskami.
        Zdjęcie schodzi na dół, a sekcja robi miejsce na tekst nad nim. */
  section#cytat[data-screen-label="Efekt"]>div{aspect-ratio:auto!important;min-height:760px!important}
  section#cytat[data-screen-label="Efekt"]>div>img{top:auto!important;height:52%!important;transform:none!important}

  /* 9. Tagi i autor pod artykułem stykały się z krawędzią ekranu. */
  .mg-art .blog-meta-item--tags,.mg-art .blog-item-author-profile-wrapper{padding-left:20px!important;padding-right:20px!important;box-sizing:border-box}

  /* 10. Okienka z interaktywnymi rzeczami w case study Local Investments: panel Hub miał na telefonie
         273 px wysokości (widać było tylko nagłówek i zakładki), makieta 3D i spacer 360° po 197 px
         (przyciski zasłaniały obraz). Na telefonie okienka są wyższe. */
  .li-cs .frame--panel{padding-bottom:0!important;height:min(620px,82vh)!important}
  .li-cs .frame:has(> iframe[src*="vtour.cloud"]){padding-bottom:115%!important}

  /* 11. Pola formularzy miały 12 px. Przy czcionce mniejszej niż 16 px iPhone po stuknięciu w pole
         powiększa całą stronę i trzeba ją ręcznie oddalać. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px!important}

  /* 12. Ilustracja skrzynki mailowej na /deweloperzy: na telefonach 320–360 px długi adres nadawcy
         wchodził na datę. Adres przechodzi do nowej linii pod imieniem i może się złamać. */
  [data-pane] span > span{display:block;overflow-wrap:anywhere}
}