/* ============================================================================= BPM — mobile-site-wide.css Wspólny polish dla szerokości ≤880px (telefony 360–430px + wąski tablet). Desktop ≥881px: brak wpływu (wszystkie reguły w @media (max-width: 880px)). Ładowany jako ostatni arkusz w , żeby domykał kaskadę nad podstronami z dużym inline CSS (court / scoreboard itd.) — donation bar używa !important. ============================================================================= */ @media (max-width: 880px) { /* --- Tokeny: jaśniejszy rytm sekcji bez dotykania desktopu --- */ :root { --site-content-pad-x: clamp(14px, 4.2vw, 20px); --section-pad-y-compact: clamp(22px, 3.6vh, 40px); --section-pad-y: clamp(26px, 4vh, 46px); --section-pad-y-large: clamp(30px, 4.5vh, 52px); --section-pad-y-hero: clamp(18px, 3.4vh, 38px); --section-pad-y-cta: clamp(32px, 5vh, 56px); --section-gap: clamp(18px, 3vh, 36px); --section-gap-tight: clamp(14px, 2.2vh, 26px); --section-gap-wide: clamp(22px, 3.4vh, 42px); --section-header-gap: clamp(8px, 1.2vh, 16px); --section-block-gap: clamp(18px, 2.6vh, 36px); --section-scroll-margin: 64px; --bpm-subpage-hero-chrome: calc(var(--nav-mobile-header-height, 64px) + min(128px, 24vh)); --hero-h1-font-size: clamp(28px, 7.8vw, 40px); --type-h2-font-size: clamp(22px, 5.8vw, 32px); --type-h3-font-size: clamp(18px, 4.6vw, 24px); --type-h4-font-size: clamp(15px, 3.8vw, 20px); } /* Nagłówki: mniej „losowych” pojedynczych słów w nowej linii (gdzie przeglądarka wspiera) */ main.page-shell :where(h1, h2) { text-wrap: balance; } main.page-shell :where(p, li, blockquote) { overflow-wrap: anywhere; } /* Wrapper nagłówka „split” → jedna kolumna na mobile */ .section-header--split { grid-template-columns: minmax(0, 1fr); align-items: stretch; justify-items: stretch; column-gap: 0; row-gap: var(--section-gap-tight); } .page-h2-rule { margin-top: clamp(6px, 1vh, 12px); margin-bottom: clamp(8px, 1.2vh, 14px); } .page-h1-rule { margin-top: clamp(8px, 1.2vh, 14px); margin-bottom: clamp(10px, 1.4vh, 16px); } /* Media w treści — bez poziomego scrolla; logo nawigacji pomijamy */ main.page-shell img:not(.logo__img), main.page-shell video, main.page-shell picture img:not(.logo__img), :is(main, section, header)#main-content img:not(.logo__img), :is(main, section, header)#main-content video, #enter-the-court img, #enter-the-court video { max-width: 100%; height: auto; } /* Pierwszy hero w article: nie zajmować dwóch wysokości ekranu przy stacku */ main.page-shell > article > section.page-section.page-section--hero:first-of-type { min-height: min(78svh, 620px); box-sizing: border-box; } /* Galeria: ten sam hero + ciaśniejszy padding boczny slidera w stosie */ .gallery-page .gal-s1.page-section.page-section--hero { min-height: min(78svh, 620px); } .gal-s1.page-section { --page-section-pad-top: clamp(16px, 3.2vh, 28px); } .gal-hero__feature > .gal-fig-slider { padding-left: clamp(0px, 1.5vw, 10px); padding-right: clamp(0px, 1.5vw, 10px); } /* Advertising: karty 1 kolumna wcześniej niż 640px */ .adv-m2__cards { grid-template-columns: minmax(0, 1fr); } /* Stopka: lżejszy blok, pełna szerokość newslettera */ .site-footer { padding-top: clamp(18px, 2.4vh, 28px); padding-bottom: clamp(12px, 1.6vh, 20px); } .site-footer-news, .site-footer-form { max-width: 100%; } .site-footer-form { align-items: flex-start; } .site-footer-submit { align-self: flex-start; margin-left: 0; margin-right: auto; } .site-footer-contact-group p, .site-footer-contact a { line-height: 1.55; } /* Global Reach (index): copy na pełną szerokość w wąskim oknie */ .global-reach-copy { max-width: min(100%, 52ch); } .global-reach-inner { gap: clamp(14px, 2.5vw, 22px); } /* Pasek donacji: 768–880 często zostawał układ „rząd” z min-width CTA → overflow. !important przebija inline