/**
 * Warstwa telefonu.
 *
 * Prototyp `Bory Home Mobile.dc.html` to osobny projekt, a nie zwężony
 * desktop: siatki zamieniają się w karuzele z przyciąganiem, skala pisma
 * i odstępy są własne. Dlatego cały ten widok stoi w jednym pliku, wpiętym
 * na końcu kaskady, zamiast być rozsypany po komponentach.
 *
 * Projekt jest rysowany na 430 px (iPhone 14 Pro Max) — kolumna treści ma
 * wtedy 390 px, czyli 20 px marginesu z każdej strony.
 */

@media (max-width: 640px) {

  /* --- Rytm sekcji -------------------------------------------------------- */

  .bh-section { padding: 52px var(--bh-pad-x) 56px; }

  :root { --bh-pad-x: 20px; }

  /* --- Skala pisma -------------------------------------------------------- */

  .bh-h2 { font-size: 30px; line-height: 1.1; letter-spacing: -.03em; }
  .bh-section-bar .bh-h2 { font-size: 30px; }
  .bh-lead { font-size: 14.5px; line-height: 1.6; }
  .bh-eyebrow { font-size: 11.5px; letter-spacing: .09em; }

  /* Nagłówek i lead idą pod sobą — na telefonie nie ma miejsca na dwie
     kolumny paska sekcji. */
  .bh-section-bar {
    display: block;
    margin: 0 0 24px;
  }
  .bh-section-bar .bh-section-head { margin: 0 0 14px; }
  .bh-section-bar > .bh-lead,
  .bh-section-bar .bh-section-head .bh-h2,
  .bh-section-bar .bh-section-head .bh-lead { max-width: none; }

  .bh-section-head { margin: 0 0 24px; }
  .bh-section-head .bh-eyebrow { margin: 0 0 12px; }
  .bh-section-head .bh-h2 { margin: 0 0 14px; }

  /* --- Przyciski ---------------------------------------------------------- */

  .bh-btn--lg { font-size: 15.5px; padding: 18px 22px; }
  .bh-hero__actions .bh-btn { width: 100%; }

  /* --- Hero ----------------------------------------------------------------- */

  .bh-hero--home { padding: 36px var(--bh-pad-x) 44px; }
  .bh-hero__title { font-size: 38px; line-height: 1.05; letter-spacing: -.035em; margin: 0 0 16px; }
  .bh-hero__lead { font-size: 14.5px; line-height: 1.6; margin: 0 0 26px; }
  .bh-hero__actions { flex-direction: column; gap: 10px; margin: 0 0 22px; }

  /* Znaczniki zaufania zostają tekstem z kropkami, tak jak na desktopie —
     prototyp mobilny robi z nich plakietki, ale wygląd desktopowy jest
     spójniejszy z resztą hero. Węższy odstęp, żeby zmieściły się w wierszach. */
  .bh-hero__trust { gap: 6px 14px; font-size: 12.5px; }

  /* --- Katalog: panel wybranego modelu -------------------------------------- */

  .bh-catalog__model { font-size: 22px; margin: 0 0 6px; }
  .bh-catalog__pills { margin: 0 0 18px; }
  .bh-catalog__desc { font-size: 13px; margin: 0 0 18px; }
  .bh-catalog__footer { margin: 0; padding: 16px 0 0; }
  .bh-catalog__actions { gap: 9px; }
  .bh-catalog__actions .bh-btn { width: 100%; }
  .bh-checklist { font-size: 13.5px; gap: 10px; }

  /* --- Kontakt --------------------------------------------------------------- */

  .bh-contactcard__head { gap: 14px; margin: 0 0 18px; }
  .bh-contactcard__photo { width: 56px; height: 56px; }

  /* --- Karuzele ----------------------------------------------------------- */

  /* Wspólny wzorzec: pas przewijany palcem, pełnej szerokości, z przyciąganiem
     do początku karty. Wcięcie boczne siedzi na torze, nie na kontenerze —
     inaczej ostatnia karta nie dojeżdża do krawędzi. */
  .bh-carousel,
  .bh-team {
    margin-inline: calc(var(--bh-pad-x) * -1);
    padding: 14px 0 26px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* Bez `scroll-padding` przyciąganie zatrzymuje kartę na krawędzi okna
       i zjada wcięcie toru — pierwsza karta dotykałaby lewej krawędzi. */
    scroll-padding-inline: var(--bh-pad-x);
    -webkit-overflow-scrolling: touch;
  }
  .bh-carousel__rail,
  .bh-team {
    display: flex;
    gap: 12px;
    padding-inline: var(--bh-pad-x);
  }
  .bh-carousel__rail { transform: none; transition: none; }
  .bh-modelcard,
  .bh-person {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .bh-modelcard { width: 264px; }
  .bh-person { width: 274px; }

  /* Karta w karuzeli jest tylko wyborem — opis modelu czyta się niżej,
     w panelu wybranego modelu, więc na kafelku go nie powtarzamy. */
  .bh-modelcard__body { padding: 16px 18px 18px; }
  /* Nazwa i metryka jedna pod drugą — obok siebie nie mieszczą się na 264 px. */
  .bh-modelcard__head { display: block; }
  .bh-modelcard__name { font-size: 18px; margin: 0 0 4px; }
  .bh-modelcard__meta { font-size: 12.5px; }
  .bh-modelcard__desc { display: none; }
  .bh-modelcard__foot { padding-top: 13px; }

  /* Pasek nad karuzelą: licznik po lewej, podpowiedź po prawej. Strzałki
     chowamy — na telefonie przewija się palcem. */
  .bh-carousel__bar {
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
  }
  .bh-carousel__arrows { display: none; }
  .bh-carousel__progress-wrap { flex: 1; }
  .bh-carousel__track { display: none; }
  .bh-carousel__count { font: 600 12px/1 var(--bh-font); color: var(--bh-text-4); }
  .bh-carousel__hint {
    display: block;
    font: 500 12px/1 var(--bh-font);
    color: var(--bh-text-4);
    white-space: nowrap;
  }

  /* --- Przełącznik kolekcji ------------------------------------------------ */

  .bh-colltabs { gap: 8px; }
  .bh-colltab { flex: 1; padding: 13px 10px; text-align: center; }
  .bh-colltab__tag { display: none; }

  /* --- Karty ---------------------------------------------------------------
     Prototyp zbija wszystkie kafle do wspólnego rytmu: promień 22 px
     i wypełnienie 24/22. */

  .bh-stdcard,
  .bh-contactcard,
  .bh-catalog__panel > * {
    border-radius: 22px;
    padding: 24px 22px;
  }
  .bh-stdcards,
  .bh-contact { gap: 12px; }

  .bh-accordion { gap: 9px; }
  .bh-accordion__item { border-radius: 18px; padding: 18px 20px; }

  /* Treść wewnątrz kafli schodzi o stopień — skala desktopu rozpycha karty
     na wąskim ekranie i psuje rytm sekcji. */
  .bh-stdcard__num { margin-bottom: 10px; }
  .bh-stdcard__title { font-size: 18px; margin: 0 0 10px; }
  .bh-stdcard__desc { font-size: 13.5px; line-height: 1.55; margin: 0 0 16px; }
  .bh-checklist--tight { font-size: 13px; gap: 9px; }

  .bh-contactcard__desc { font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
  .bh-contactcard__name { font-size: 16px; }
  .bh-contactcard__cta { padding: 15px 20px; font-size: 14.5px; }

  .bh-person__head { gap: 12px; margin: 0 0 14px; }
  .bh-person__avatar img { width: 52px; height: 52px; }
  .bh-person__name { font-size: 15px; margin: 0 0 4px; }
  .bh-person__role { font-size: 12px; line-height: 1.35; }
  .bh-person__scope { font-size: 12.5px; line-height: 1.5; }

  .bh-step__title { font-size: 16px; }
  .bh-step__desc { font-size: 13px; line-height: 1.55; }

  .bh-appmod__title { font-size: 13.5px; }
  .bh-appmod__desc { font-size: 12px; line-height: 1.45; }

  /* --- Proces --------------------------------------------------------------
     Numer i treść w dwóch kolumnach, kroki jeden pod drugim. */

  .bh-process { display: block; }
  .bh-step {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 14px;
    row-gap: 0;
    padding: 0 0 22px;
  }
  /* Numer nie rozciąga się na wysokość obu wierszy — siada przy tytule. */
  .bh-step__num { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .bh-step__title,
  .bh-step__desc { grid-column: 2; }

  /* --- Aplikacja ------------------------------------------------------------ */

  /* Moduły idą w dwóch kolumnach, makieta telefonu i dymek przez całą szerokość. */
  .bh-app {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .bh-app__phone,
  .bh-app__toast { grid-column: 1 / -1; }
  .bh-app__phone { width: min(280px, 76%); margin: 0 auto 6px; }
  .bh-appmod { padding: 16px 18px; border-radius: 16px; }
  /* Przyciski sklepów rozciągają się na całą szerokość, więc ikona z napisem
     muszą jechać na środek — inaczej lądują przy lewej krawędzi. */
  .bh-app__foot { flex-direction: column; align-items: stretch; gap: 9px; }
  .bh-app__foot .bh-btn,
  .bh-store { width: 100%; justify-content: center; }

  /* --- Wideo ---------------------------------------------------------------
     Kadry 9:16 rozciągnięte na pełną szerokość zajmowałyby po pół ekranu
     każdy, więc jadą pasem jak pozostałe kolekcje kart. */

  .bh-videos {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--bh-pad-x) * -1);
    padding: 0 var(--bh-pad-x) 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bh-pad-x);
    -webkit-overflow-scrolling: touch;
  }
  .bh-videocard {
    flex: 0 0 auto;
    width: 220px;
    scroll-snap-align: start;
  }
  .bh-videos__note {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 0;
  }

  /* --- Zespół -------------------------------------------------------------- */

  .bh-person { padding: 18px 20px; }
  .bh-person__role { padding-top: 13px; }

  /* Partnerów prototyp mobilny pomija; zamiast ich ukrywać, zbijamy blok
     do jednej kolumny i węższych odstępów. */
  .bh-partners { margin: 26px 0 0; padding: 26px 0 0; }
  .bh-partners__list { grid-template-columns: 1fr; gap: 12px; }

  /* --- FAQ ------------------------------------------------------------------ */

  .bh-accordion__body { margin-top: 12px; font-size: 13.5px; line-height: 1.65; }

  /* --- Instagram ------------------------------------------------------------
     Nagłówek idzie w słupku, pas kafli zostaje pełnej szerokości. */

  .bh-instagram__head {
    display: block;
    padding-inline: var(--bh-pad-x);
    margin: 0 0 22px;
  }
  .bh-instagram__head .bh-eyebrow { display: block; margin: 0 0 12px; }
  .bh-instagram__title { font-size: 30px; line-height: 1.1; margin: 0 0 12px; }
  .bh-instagram__intro { margin: 0 0 16px; }
  .bh-marquee--lg { padding-bottom: 12px; }
  .bh-marquee--lg .bh-marquee__item { width: 180px; height: 180px; }

  /* --- Karta produktowa -----------------------------------------------------
     Ten sam język co na stronie głównej: rzędy kart jadą pasem, kafle
     schodzą o stopień, kolumny składają się w słupek. */

  /* Element przewijany w siatce albo we flexie domyślnie nie kurczy się
     poniżej swojej treści — bez `min-width: 0` pas miniatur rozpycha kolumnę
     i cała strona dostaje poziomy suwak. */
  .bh-model-gallery,
  .bh-model-gallery__thumbs,
  .bh-collection,
  .bh-videos,
  .bh-carousel,
  .bh-team { min-width: 0; }

  /* Miniatury galerii w jednym rzędzie zamiast zawijanej siatki. */
  .bh-model-gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-inline: calc(var(--bh-pad-x) * -1);
    padding: 0 var(--bh-pad-x);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bh-pad-x);
  }
  .bh-model-gallery__thumb {
    flex: 0 0 auto;
    width: 96px;
    scroll-snap-align: start;
  }

  /* Panel sprzedażowy nie przykleja się — na telefonie i tak przewija się
     razem z treścią, a `sticky` blokowałby połowę ekranu. */
  .bh-model-hero__panel { position: static; }
  /* Dopełnienie należy do karty, nie do jej opakowania. Reguła stała tu od
     czasu, gdy panel sam był kartą — po wydzieleniu `__card` dokładała drugi,
     niewidoczny margines: 20 px sekcji + 20 px panelu + 26 px karty zostawiało
     formularzowi 241 px z 375 px ekranu. */
  .bh-model-panel { padding: 0; }
  /* Karta panelu rozpada się na dwie (model.css ≤1100 px): nagłówek z ceną
     i formularz. Obie dostają telefonowe dopełnienie dawnej karty. */
  .bh-model-panel__head,
  .bh-model-panel .bh-lead { padding: 22px 18px 20px; border-radius: 22px; }
  .bh-lead--one .bh-lead__foot { margin-bottom: 0; }
  .bh-offer-cta { padding: 24px 22px; gap: 18px; }
  .bh-offer-cta__text { font-size: 15px; }
  .bh-offer-cta__btn { width: 100%; }
  .bh-model-panel__title { font-size: 28px; }
  .bh-model-panel__desc { font-size: 13.5px; line-height: 1.6; }

  .bh-lead__fields { gap: 11px; }
  .bh-lead__input { padding: 13px; }
  /* Dopełnienie z prawej musi zostać — mieści daszek listy rozwijanej. */
  .bh-lead__select { padding: 13px 40px 13px 13px; background-position: right 14px center; }
  .bh-lead__option { padding: 12px 14px; }

  /* Rzuty: zakładki zawijają się, karta bez zbędnego wypełnienia. */
  .bh-model-plans__tabs { flex-wrap: wrap; }
  .bh-model-plans__figure { padding: 16px; }
  .bh-model-plans__head,
  .bh-model-plans__foot { padding: 14px 16px; }
  .bh-model-plans__foot { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Zakładka „Technologia": na 430 px dopełnienie panelu i kafla zjadało
     46 px z każdej strony, więc opisy łamały się na trzy wiersze. */
  .bh-model-plans__panel--tech { padding: 20px; }
  .bh-techgrid { gap: 10px; }
  .bh-tech { padding: 20px 18px 18px; }
  .bh-tech__icon { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 14px; }
  .bh-tech__title { font-size: 14.5px; }
  .bh-tech__desc { font-size: 12.5px; }

  /* Dane techniczne i zakres — kafle w jednej kolumnie, ciaśniejsze. */
  .bh-specs__group { padding: 22px 20px; border-radius: 20px; }
  .bh-specs__prose { gap: 20px; }
  /* Zakres: na desktopie to siatka kafli po trzy i dwie w rzędzie. Na 430 px
     druga grupa zostawała na dwóch kolumnach po 189 px i każdy punkt łamał
     się na sześć wierszy. Kafle ustępują wzorcowi „numer + treść" z sekcji
     procesu: jedna kolumna, bez obudowy karty, kroki rozdzielone kreską. */
  .bh-scopegroup__steps,
  .bh-scopegroup--wide .bh-scopegroup__steps {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .bh-scopestep {
    padding: 20px 0;
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--bh-rule);
    background: none;
  }
  .bh-scopestep:first-child { border-top: 0; padding-top: 4px; }
  .bh-scopestep__head { gap: 10px; margin: 0 0 12px; }
  .bh-scopestep__title { font-size: 15px; }
  .bh-scopestep__lines { gap: 8px; }
  .bh-scopestep__line { font-size: 13px; line-height: 1.55; }
  .bh-scopegroup__head { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Filozofia: numer i treść w dwóch kolumnach, węższy numer. */
  .bh-philpoint { grid-template-columns: 34px 1fr; gap: 14px; padding: 18px 0; }
  .bh-philchips { gap: 16px; }

  /* Wizualizacje wnętrz: dwanaście kadrów jeden pod drugim to kilometr
     przewijania — jadą pasem jak pozostałe kolekcje. */
  .bh-interiors {
    display: flex;
    gap: 12px;
    min-width: 0;
    margin-inline: calc(var(--bh-pad-x) * -1);
    padding: 0 var(--bh-pad-x) 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bh-pad-x);
  }
  .bh-interior {
    flex: 0 0 auto;
    width: 264px;
    scroll-snap-align: start;
  }

  /* „Co dostajesz" mieści się w dwóch kolumnach. */
  .bh-promises { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bh-promise { padding: 18px 16px; }
  .bh-promise__title { font-size: 14.5px; }
  .bh-promise__desc { font-size: 12.5px; line-height: 1.45; }

  /* Seria / kolekcja: pas kart zamiast dwóch wąskich kolumn. */
  .bh-collection {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--bh-pad-x) * -1);
    padding: 0 var(--bh-pad-x) 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--bh-pad-x);
  }
  .bh-collcard {
    flex: 0 0 auto;
    width: 264px;
    scroll-snap-align: start;
  }

  .bh-areachart { padding: 22px 20px; }

  /* Pas zdjęć z budowy: kadry jeden pod drugim, niższe. */
  .bh-photoband__cell { height: 220px; }

  /* --- Katalog domów ---------------------------------------------------------
     Prototyp mobilny obejmuje tylko stronę główną, więc widok telefonu tej
     podstrony jest naszym rozwinięciem jej idiomów: rytm sekcji 52/56 px,
     skala pisma o stopień niżej, siatki w jedną kolumnę.

     Karty modeli idą w kolumnie, nie pasem jak na stronie głównej — tam pas
     jest wyborem jednego modelu z karuzeli, tu katalog się przegląda i pas
     ukrywałby połowę oferty za gestem. */

  .bh-hero--page { padding: 36px var(--bh-pad-x) 44px; }
  .bh-pagehero { gap: 24px; margin: 0 0 24px; }
  .bh-pagehero__title { font-size: 38px; line-height: 1.05; letter-spacing: -.035em; margin: 0 0 16px; }
  .bh-pagehero__lead { font-size: 14.5px; max-width: none; }
  .bh-pagehero__stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bh-statcard { padding: 18px 16px 16px; }
  .bh-statcard__value { font-size: 24px; }
  .bh-statcard__desc { font-size: 12px; }

  .bh-catfilter { gap: 8px; }
  .bh-catfilter__opt { font-size: 12.5px; padding: 12px 15px; }

  .bh-catgrid { grid-template-columns: 1fr; gap: 12px; }
  .bh-catcard__body { padding: 18px 18px 20px; }
  .bh-catcard__name { font-size: 18.5px; }
  .bh-catcard__desc { font-size: 13px; }
  .bh-catgrid__note { font-size: 12.5px; margin: 18px 0 0; }

  .bh-scopecard { padding: 20px 20px 18px; }
  .bh-scopecard__title { font-size: 19px; }
  .bh-scopecard__desc { font-size: 13px; }
  .bh-scopetable { padding: 20px 18px 18px; }

  /* Powód: numer i treść jak w sekcji procesu, znacznik pod opisem —
     przy trzech kolumnach na 390 px opis miał 150 px i łamał się na siedem
     wierszy. */
  .bh-reason { grid-template-columns: 40px 1fr; gap: 14px; padding: 18px 0; }
  .bh-reason__num { padding: 10px 0; }
  .bh-reason__title { font-size: 16px; }
  .bh-reason__desc { font-size: 13px; }
  .bh-reason__tag { grid-column: 2; justify-self: start; margin: 12px 0 0; }

  .bh-why { gap: 28px; }
  .bh-why__card { padding: 20px 20px 18px; }
  .bh-helpbar { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .bh-helpbar__phone { align-self: stretch; text-align: center; }

  .bh-wall { gap: 28px; }
  .bh-wall__tabs { width: 100%; }
  .bh-wall__tab { flex: 1; padding: 12px 10px; }
  .bh-wall__stats { gap: 10px; }
  .bh-wall__stat { padding: 18px 16px; }
  .bh-wall__value { font-size: 21px; }
  .bh-wall__layers { padding: 20px 18px 12px; }

  .bh-tube__body { padding: 18px 18px 20px; }
  .bh-tube__title { font-size: 17.5px; }
  .bh-tube__desc { font-size: 13px; }

  /* --- Standardy wykończeń ---------------------------------------------------
     Jak w katalogu: prototyp mobilny nie obejmuje tej podstrony, więc widok
     telefonu rozwija jej idiomy — siatki w jedną kolumnę, skala o stopień
     niżej, przełącznik pakietów na pełną szerokość. */

  .bh-pagehero__badges { justify-content: flex-start; gap: 6px; }
  .bh-herobadge { font-size: 12px; padding: 9px 13px; }

  .bh-stdlist { grid-template-columns: 1fr; gap: 12px; }
  .bh-stdtile { padding: 22px 20px 20px; }
  .bh-stdtile__title { font-size: 19px; }
  .bh-stdtile__desc { font-size: 13px; }

  .bh-packages { padding: 10px 10px 0; }
  .bh-packages__tabs { width: 100%; }
  .bh-packages__tab { flex: 1; padding: 12px 8px; }
  .bh-package { gap: 22px; padding: 22px 12px 26px; }
  .bh-package__title { font-size: 24px; }
  .bh-package__desc { font-size: 14px; }
  .bh-package__brand { padding: 14px 16px; font-size: 14px; }

  .bh-quality { gap: 28px; }
  .bh-quality__lead { font-size: 14.5px; }
  .bh-quality__actions .bh-btn { flex: 1; }
  .bh-qualitytile { padding: 20px 18px 18px; }

  .bh-pstep { padding: 22px 20px 20px; }
  .bh-pstep__title { font-size: 17.5px; }
  .bh-pstep__desc { font-size: 13px; }

  .bh-cta-band--tight { padding: 24px 22px; gap: 18px; }
  .bh-cta-band__title { font-size: 22px; }
  .bh-cta-band--tight .bh-cta-band__actions { align-self: stretch; }
  .bh-cta-band--tight .bh-cta-band__actions .bh-btn { flex: 1; justify-content: center; }

  /* --- Podstrony pojedynczych standardów -------------------------------------
     Hero składa się do jednej kolumny (zdjęcie pod treścią), pakiety zakresu
     idą w kolumnie, a tabela porównawcza przewija się w swoim pudełku —
     czterech kolumn nie da się sensownie zwęzić do 390 px. */

  .bh-stdhero { padding: 28px var(--bh-pad-x) 44px; }
  .bh-stdhero__title { font-size: 34px; line-height: 1.08; margin: 0 0 16px; max-width: none; }
  .bh-stdhero__lead { font-size: 14.5px; margin: 0 0 22px; max-width: none; }
  .bh-stdhero__actions { gap: 10px; margin: 0 0 20px; }
  .bh-stdhero__actions .bh-btn { flex: 1; justify-content: center; font-size: 14.5px; padding: 16px 18px; }
  .bh-stdhero__actions .bh-btn--ghost { padding: 15px 18px; }
  .bh-stdhero__pill { font-size: 12.5px; padding: 10px 14px; }

  .bh-forwho__card { padding: 20px 18px 18px; }
  .bh-forwho__title { font-size: 16.5px; }
  .bh-forwho__desc { font-size: 13px; }

  .bh-packs { grid-template-columns: 1fr; gap: 12px; }
  .bh-pack { padding: 22px 20px 20px; }
  .bh-pack__title { font-size: 18px; }
  .bh-pack__desc { font-size: 13px; }

  /* Porównanie standardów: przy szerokościach z desktopu tabela miała 660 px
     w pudełku szerokim na 350 — na ekranie zostawała sama kolumna opisów,
     a wszystkie trzy standardy były poza kadrem. W komórkach stoją ptaszki
     i myślniki, więc kolumny mogą zejść do szerokości nagłówka i całość
     mieści się bez przewijania w bok. */
  .bh-compare { padding: 18px 6px 16px; overflow-x: visible; }
  /* `min-width: 660px` z progu 860 px trzymało tabelę szerszą niż telefon —
     bez tego zdjęcia szerokość i tak liczyłaby się od niego. */
  .bh-compare table { width: 100%; min-width: 0; }
  /* Kolumny wartości muszą pomieścić najdłuższy nagłówek („Deweloperski")
     oraz słowa, które na części stron stoją w komórkach zamiast ptaszka
     („Kompletny", „malowanie"). Dlatego wszystkie trzy dostają tyle samo —
     zwężenie kolumny „SSZ" wyglądało oszczędnie, ale to właśnie w niej na
     stronach standardów pojawia się tekst. */
  .bh-compare__col,
  .bh-compare__col--featured { width: 82px; }
  .bh-compare thead th:last-child { width: 82px; }
  /* Nagłówki kolumn muszą zmieścić „Deweloperski" i „PREMIUM" w jednym
     kawałku — przy węższej kolumnie łamały się w środku wyrazu. */
  .bh-compare thead th { font-size: 10.5px; }
  .bh-compare thead th:first-child { font-size: 10.5px; padding-left: 8px; }
  .bh-compare thead th:nth-child(2),
  .bh-compare thead th:nth-child(3),
  .bh-compare tbody td:nth-child(2),
  .bh-compare tbody td:nth-child(3) { padding-right: 4px; }
  .bh-compare thead th:last-child,
  .bh-compare tbody td:last-child { padding-right: 6px; }
  .bh-compare__pill { padding: 7px 4px; font-size: 9.5px; }
  .bh-compare__cell--text { font-size: 10px; line-height: 1.3; }
  /* Reguła w `standards.css` celuje w `th[scope="row"]`, więc sama nazwa
     komponentu jej nie przebije. */
  .bh-compare tbody th[scope="row"] { font-size: 11px; line-height: 1.45; }
  .bh-compare__group th { font-size: 11px; }

  /* Koszty dodatkowe: dwie kolumny po 147 px łamały kwoty na dwie linie
     („2 000 – 6 000 / zł") i dzieliły nagłówki. Kwota jest tu treścią, a nie
     ozdobą — musi się czytać jednym rzutem oka, więc kafelki idą w jedną
     kolumnę. */
  .bh-kdtiles { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  /* Pakiety w zakresie robót: plakietka „Najczęściej wybierany" nie oddaje
     miejsca, więc na nazwę zostawało 87 px i „Standard Plus" łamał się
     w środku wyrazu. Nagłówek może się teraz zawinąć — jeśli oba elementy
     nie mieszczą się w wierszu, plakietka schodzi pod nazwę. */
  .bh-zrpack__head { flex-wrap: wrap; row-gap: 10px; }
  .bh-zrpack__name { min-width: max-content; font-size: 19px; }

  /* Zakres robót na stronie katalogu ma tę samą przypadłość co porównanie
     standardów: 620 px tabeli w pudełku szerokim na 350. W komórkach są
     ptaszki, więc zwężamy kolumny i tabela mieści się w kadrze. */
  .bh-scopetable { overflow-x: visible; contain: none; }
  .bh-scopetable table { width: 100%; min-width: 0; }
  .bh-scopetable__col { width: 44px; font-size: 10.5px; }
  .bh-scopetable__col--featured { width: 82px; }
  .bh-scopetable thead th:last-child,
  .bh-scopetable tbody td:last-child { width: 48px; }
  .bh-scopetable thead th:first-child { font-size: 10.5px; }
  .bh-scopetable__pill { padding: 7px 4px; font-size: 9.5px; }
  .bh-scopetable__name { font-size: 12.5px; }
  .bh-scopetable__desc { font-size: 10.5px; line-height: 1.45; }
  .bh-compare__links .bh-btn { flex: 1; justify-content: center; }

  .bh-ctasection { padding-bottom: 0; }
  .bh-cta-band--split { padding: 24px 22px; gap: 20px; }
  .bh-cta-band__heading { font-size: 24px; max-width: none; }
  .bh-cta-band__text { font-size: 14px; max-width: none; }
  .bh-cta-band__stack .bh-btn { font-size: 14.5px; padding: 16px 20px; }

  /* --- Podstrony „dlaczego my" ------------------------------------------------
     Siedem stron o różnych układach; na telefonie wszystkie siatki schodzą
     do jednej kolumny, a dwie tabele porównawcze przewijają się w pudełku. */

  .bh-whyhero { padding-block: 36px 44px; }
  .bh-whyhero__head { margin: 0 0 28px; }
  .bh-whyhero__title { font-size: 34px; line-height: 1.08; margin: 0 0 16px; max-width: none; }
  .bh-whyhero .bh-whyhero__title--58,
  .bh-whyhero .bh-whyhero__title--18,
  .bh-whyhero .bh-whyhero__title--22,
  .bh-whyhero .bh-whyhero__title--17 { font-size: 34px; max-width: none; }
  .bh-whyhero__lead { font-size: 14.5px; margin: 0 0 22px; max-width: none; }
  .bh-whyhero__actions { gap: 10px; }
  .bh-whyhero__actions .bh-btn { flex: 1; justify-content: center; font-size: 14.5px; padding: 16px 18px; }
  .bh-whyhero__actions .bh-btn--ghost { padding: 15px 18px; }

  .bh-isohero, .bh-techhero, .bh-whysplit, .bh-params, .bh-aesthetic, .bh-frame { gap: 28px; }
  .bh-iso, .bh-crossbox { padding: 18px; }

  .bh-warranty__card { min-height: 0; padding: 24px 22px 22px; }
  .bh-rules, .bh-rules--3, .bh-rules--wrap { grid-template-columns: 1fr; gap: 20px; }
  .bh-benefit, .bh-fact, .bh-fact2, .bh-service, .bh-option, .bh-mini__card,
  .bh-pillar, .bh-case, .bh-step3, .bh-layout__body { padding: 20px 18px 18px; }
  .bh-flow__card { padding: 22px 20px 20px; }
  .bh-scopecard, .bh-scope2__card, .bh-offer__main, .bh-offer__aside, .bh-persocard { padding: 22px 20px 20px; }
  .bh-versus__card { padding: 22px 20px 20px; }

  .bh-sla { width: 100%; }
  .bh-sla__tile { flex: 1; }
  .bh-stage { padding: 20px 18px 18px; }
  .bh-stage__value { font-size: 28px; }
  .bh-uframe__hero, .bh-uframe__tile { padding: 20px 18px; }
  .bh-ubox { padding: 22px 20px 20px; }

  .bh-quote { padding: 22px 20px; }
  .bh-helprow { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .bh-helprow__cta { align-self: stretch; text-align: center; }

  /* Pasy CTA: treść i przyciski jeden pod drugim, przyciski na pełną szerokość. */
  .bh-cta-band--row,
  .bh-cta-band--sm,
  .bh-cta-band--wide,
  .bh-cta-band--future { flex-direction: column; align-items: flex-start; padding: 26px 22px; gap: 20px; }
  .bh-cta-band__heading { font-size: 24px; }
  .bh-cta-band--row .bh-cta-band__heading,
  .bh-cta-band--sm .bh-cta-band__heading { font-size: 24px; }
  .bh-cta-band__text { font-size: 14px; max-width: none; }
  .bh-cta-band__cta { flex: 1; justify-content: center; }
  .bh-cta-band--row .bh-cta-band__cta,
  .bh-cta-band--future .bh-cta-band__stack,
  .bh-cta-band--wide .bh-cta-band__actions,
  .bh-cta-band--sm .bh-cta-band__actions { align-self: stretch; }

  /* Tabela technologii: na telefonie rozkładamy ją na kolejne bloki zamiast
     przewijać w bok. Przewijanie w pudełku chowało prawie połowę treści —
     kolumna „budowa tradycyjna" była poza ekranem w całości, a nic tego nie
     sygnalizowało. Kolejność w kodzie to kryterium → my → oni, więc jedna
     kolumna układa je bez zmian w znacznikach. */
  .bh-vs { padding: 8px 16px 18px; overflow-x: visible; contain: none; }
  .bh-vs__grid { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .bh-vs__head { display: none; }

  .bh-vs__criterion { padding: 22px 2px 12px; gap: 9px; }
  .bh-vs__label { font-size: 17px; }

  .bh-vs__ours,
  .bh-vs__ours--last { padding: 15px 16px 14px; border-radius: 16px; }
  .bh-vs__theirs { padding: 15px 16px 18px; border-bottom: 0; }

  .bh-vs__who {
    display: block;
    font: 700 10px/1 var(--bh-font);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bh-text-4);
    margin: 0 0 9px;
  }
  .bh-vs__note { margin-top: 12px; }

  /* --- Generalne wykonawstwo -------------------------------------------------
     Sekcyjne modyfikatory tej strony mają zasięg dwóch klas, więc telefon musi
     je nadpisać takim samym, a nie samą nazwą komponentu. */

  .bh-gcvhero .bh-whyhero__head { max-width: none; margin-bottom: 0; }
  .bh-gcvhero .bh-whyhero__title { font-size: 34px; }
  .bh-gcvhero .bh-whyhero__actions { margin: 0 0 18px; }

  .bh-gcvhead .bh-h2 { font-size: 30px; line-height: 1.1; }
  .bh-gcvhead--center, .bh-gcvhead--40 { margin-bottom: 24px; }
  .bh-gcvhead--36 { margin-bottom: 22px; }
  .bh-gcvhead--center .bh-lead { font-size: 14.5px; max-width: none; }
  .bh-gcvbar--44 { margin-bottom: 24px; }

  .bh-gcvmodel { gap: 14px; }
  .bh-gcvmodel__card { padding: 22px 20px 20px; }
  .bh-gcvmodel__title { font-size: 21px; }
  .bh-gcvmodel__desc { margin: 0 0 18px; }
  .bh-gcvrules { grid-template-columns: 1fr; gap: 20px; }
  .bh-gcvscope { gap: 14px; }
  .bh-gcvscope__card { padding: 22px 20px 20px; }
  .bh-gcvpath { gap: 14px; }

  /* --- Kalkulatory ----------------------------------------------------------
     Panel parametrów i karta wyniku idą jeden pod drugim; siatki kafli schodzą
     do dwóch kolumn, a pola liczbowe do jednej. */

  .bh-calc { padding-block: 28px 48px; }
  .bh-calchero, .bh-calchero--wide { margin: 0 0 24px; }
  .bh-calchero__title { font-size: 34px; line-height: 1.08; margin: 0 0 16px; max-width: none; }
  .bh-calchero__lead, .bh-calchero__lead--56 { font-size: 14.5px; max-width: none; }
  .bh-calchero__actions { margin: 22px 0 0; }
  .bh-calchero__actions .bh-btn { flex: 1; justify-content: center; }
  .bh-calcsplit { gap: 28px; margin: 0 0 28px; }
  .bh-calcsplit .bh-calchero__lead { margin: 0 0 22px; }

  .bh-panel { padding: 22px 20px 20px; border-radius: 22px; box-shadow: none; }
  .bh-panel__head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bh-tiles--standard, .bh-tiles--one { grid-template-columns: 1fr 1fr; }
  .bh-picks { grid-template-columns: 1fr; }
  .bh-choice__pair { grid-template-columns: 1fr; gap: 0; }
  .bh-rates__grid { grid-template-columns: 1fr; }
  .bh-field__value { font-size: 18px; }
  .bh-field__value--sm { font-size: 17px; }

  .bh-result { padding: 24px 22px 22px; border-radius: 22px; }
  .bh-result__herovalue { font-size: 32px; }
  .bh-result__big { font-size: 34px; }
  .bh-result--sm .bh-result__big { font-size: 32px; }
  .bh-result__hero { padding: 20px 18px; }
  .bh-compare, .bh-addressbox { padding: 22px 20px 20px; }

  .bh-legarti { padding-block: 48px; }
  .bh-legarti__grid { gap: 28px; margin: 0 0 20px; }
  .bh-legarti__title { font-size: 30px; max-width: none; }
  .bh-legarti__lead { max-width: none; }
  .bh-lawyers { grid-template-columns: 1fr; }

  .bh-offerband { padding-block: 48px 0; }
  .bh-cta-band--split2 { padding: 26px 22px; gap: 20px; }
  .bh-cta-band__heading--34 { font-size: 24px; max-width: none; }

  .bh-toolsband--dark { padding-block: 0 48px; }
  .bh-toolsband--light { padding-block: 48px; }
  .bh-toolsband--dark .bh-tools { padding: 26px 22px; border-radius: 22px; }
  .bh-section-bar .bh-tools__title { font-size: 24px; max-width: none; }
  .bh-section-bar .bh-tools__lead { max-width: none; }
  .bh-tool { padding: 20px 18px 18px; }

  /* --- Pomoc w kredycie ------------------------------------------------------ */

  .bh-finhero .bh-whyhero__head { max-width: none; }
  .bh-finhero .bh-whyhero__title { font-size: 34px; }
  .bh-finhero .bh-whyhero__lead { margin-bottom: 22px; max-width: none; }
  /* Trzeci przycisk nie zmieści się w wierszu z dwoma — układamy w kolumnę. */
  .bh-finhero .bh-whyhero__actions { flex-direction: column; align-items: stretch; }

  .bh-finbar { margin-bottom: 24px; }
  .bh-finhead { margin: 0 0 24px; }
  .bh-finhead .bh-h2 { font-size: 30px; line-height: 1.1; }
  .bh-finhead .bh-finhead__title { margin: 0 0 12px; }
  .bh-finhead__lead { font-size: 14.5px; max-width: none; }

  .bh-finservices { gap: 14px; }
  .bh-finwho { gap: 14px; }
  .bh-finwho__card { padding: 22px 20px 20px; }
  .bh-quote--band { padding: 26px 22px; }
  .bh-quote--band .bh-quote__text { font-size: 19px; max-width: none; }

  /* --- Stopka ---------------------------------------------------------------
     W jednej kolumnie stopka rosła do trzech metrów przewijania. Grupy
     linków mieszczą się po dwie w rzędzie. */

  .bh-footer__top,
  .bh-footer__mid { grid-template-columns: 1fr 1fr; gap: 26px 18px; }
  .bh-footer__group--wide { grid-column: 1 / -1; }

  /* Karta kontaktowa bierze cały rząd. W połowie szerokości zostaje na treść
     114 px — mniej, niż zajmuje `biuro@boryhome.pl` — więc adres łamał się
     w środku, a po przetłumaczeniu robiły to też etykiety. */
  .bh-footer__mid > div:first-child { grid-column: 1 / -1; }
  .bh-footer__geo { gap: 24px; }
  .bh-footer__geo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
  .bh-footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bh-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ==========================================================================
   Dotyk: pola formularza bez przybliżania ekranu

   Safari na iPhonie powiększa całą stronę w chwili wejścia w pole, którego
   pismo jest mniejsze niż 16 px — i po wyjściu z pola nie wraca do skali
   wyjściowej. Wpisujący traci wtedy z oczu resztę formularza i przesuwa
   stronę palcem, zamiast wpisywać dane. Projekt rysuje pola pismem
   13,5–14,5 px, więc na dotyku podnosimy je do 16 px, a dopełnienie
   ściągamy o tyle samo — wysokość pola zostaje z grubsza ta sama.

   Pytamy o rodzaj wskaźnika, nie o szerokość okna: iPad powiększa tak samo
   jak iPhone, a jest szerszy niż próg warstwy telefonu (640 px).
   -------------------------------------------------------------------------- */

@media (hover: none) and (pointer: coarse) {

  /* Karta modelu, kontakt, „wyślij ofertę" — te same pola pod trzema
     szablonami. Lista rozwijana ma osobny zapis, bo dopełnienie z prawej
     mieści daszek i nie może zjechać razem z resztą. */
  .bh-lead__input { font-size: 16px; padding: 12px 13px; }
  .bh-lead__select { padding: 12px 40px 12px 13px; }

  /* Konfigurator — imię i adres w kroku zapisu. */
  .bh-cfg__field input { font-size: 16px; padding: 12px; }

  /* Kalkulatory: stawki i ceny nośników. Pole kilometrów ma 16 px od
     początku, więc nie ma tu czego poprawiać. */
  .bh-input input { font-size: 16px; padding: 11px 12px; }

  /* Wyszukiwarka miejscowości. */
  .bh-locsearch__input { font-size: 16px; padding: 14px 20px; }

  /* Wyszukiwarka krajów w polu telefonu — dwie klasy, bo tak stoi zapis
     bazowy w `components.css` i inaczej nie wygralibyśmy z konfiguratorem. */
  .bh-phone .bh-phone__search input { font-size: 16px; padding: 9px 10px; }

  /* Notatki w checkliście działki. */
  .bh-cknotes__field { font-size: 16px; padding: 15px; }
}

/* --------------------------------------------------------------------------
   Wąski telefon (poniżej 400 px)

   Prototyp mobilny jest rysowany na 430 px i przy tej szerokości pary wezwań
   stoją obok siebie. Na 390 px etykiety łamią się na dwa wiersze, a na 360 px
   pękają w środku wyrazu („Konfigurator", „konsultację", „Skontaktuj").
   Poniżej 400 px wezwania idą więc jedno pod drugim — tak jak hero na stronie
   głównej, gdzie ten układ obowiązuje już od 640 px.
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {

  .bh-whyhero__actions,
  .bh-cta-band__actions,
  .bh-stdhero__actions,
  .bh-compare__links,
  .bh-quality__actions,
  .bh-section-bar__actions,
  .bh-calchero__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .bh-whyhero__actions > .bh-btn,
  .bh-cta-band__actions > .bh-btn,
  .bh-stdhero__actions > .bh-btn,
  .bh-compare__links > .bh-btn,
  .bh-quality__actions > .bh-btn,
  .bh-section-bar__actions > .bh-btn,
  .bh-calchero__actions > .bh-btn {
    width: 100%;
    justify-content: center;
  }

  /* Dostawcy: „energooszczędność" nie mieści się w kolumnie 152 px, a zejście
     z krojem poniżej 12 px oznaczałoby tekst na granicy czytelności. Karty idą
     w jedną kolumnę — jest ich szesnaście, ale każda jest niska. */
  .bh-suppliers { grid-template-columns: minmax(0, 1fr); }

  /* Zakładki pakietów to segmentowany przełącznik dopasowany do treści —
     przy trzech pozycjach „Ekonomiczny" nie miał gdzie się zmieścić. Grupa
     rozciąga się na całą szerokość i dzieli ją po równo. */
  .bh-packages__tabs { width: 100%; }
  .bh-packages__tab { flex: 1; padding-left: 6px; padding-right: 6px; font-size: 12px; }

  /* Wybór modelu w kalkulatorach i karcie katalogowej: kolumny schodziły do
     135 px i dzieliły nazwy modeli. */
  .bh-tiles--standard,
  .bh-tiles--one,
  .bh-kktiles--standard,
  .bh-kktiles--one { grid-template-columns: minmax(0, 1fr); }

  /* Wybór standardu na stronie głównej: opis stał w prawej kolumnie szerokiej
     na 69 px i łamał „konstrukcja," w środku. Etykieta i opis idą pod sobą. */
  .bh-stdopt { flex-wrap: wrap; row-gap: 2px; }
  .bh-stdopt__note { text-align: left; flex: 1 0 100%; padding-left: 22px; }

  /* Porównanie standardów mieści się w kadrze co do piksela, więc każdy
     zbędny odstęp jest tu na wagę złota: węższe dopełnienie karty i ciaśniejsza
     plakietka w wyróżnionej kolumnie oddają miejsce kolumnie z opisem zakresu.
     Poniżej 380 px tabela przechodzi na przewijanie — osobny blok niżej. */
  .bh-compare { padding-left: 8px; padding-right: 8px; }
  /* Wszystkie trzy kolumny wartości dostają tyle samo — nazwa standardu
     („Deweloperski") pojawia się raz w plakietce, raz jako zwykły nagłówek,
     zależnie od strony, więc każda musi ją pomieścić. */
  .bh-compare__col,
  .bh-compare__col--featured,
  .bh-compare thead th:last-child { width: 78px; }
  .bh-compare__cell--featured > span:first-child { padding: 8px 3px; }
  /* W plakietce nagłówka zostaje sama nazwa standardu. Dopisek „BESTSELLER"
     musiałby zejść do 8,5 px, żeby się zmieścić — a to już nie jest tekst do
     czytania. Wyróżnienie kolumny niesie samo żółte tło, więc na telefonie
     dopisek znika i nazwa może wrócić do czytelnego rozmiaru. */
  .bh-compare__pill { padding: 7px 0; }
  .bh-compare__badge { display: none; }
}

/* --------------------------------------------------------------------------
   Bardzo wąski telefon (poniżej 380 px)

   Tabela porównania standardów mieści się w kadrze do 380 px. Niżej w kolumnie
   opisu zostaje mniej niż 72 px, czyli mniej, niż potrzebuje „wewnętrzne", a
   w komórkach stoją słowa w rodzaju „Kompletny". Zejście z krojem oznaczałoby
   tekst poniżej progu czytelności, więc zamiast ściskać — przewijamy w bok.
   Żeby to przewijanie było widoczne i żeby wiersz nie tracił kontekstu:
   kolumna opisu zostaje przyklejona, a przy prawej krawędzi stoi wygaszenie.
   -------------------------------------------------------------------------- */

@media (max-width: 379px) {

  .bh-compare,
  .bh-scopetable {
    position: relative;
    overflow-x: auto;
    contain: paint;
    -webkit-overflow-scrolling: touch;
  }

  .bh-compare table { min-width: 420px; }
  .bh-scopetable table { min-width: 440px; }
  .bh-scopetable__col,
  .bh-scopetable__col--featured { width: 74px; }
  .bh-scopetable thead th:last-child,
  .bh-scopetable tbody td:last-child { width: 74px; }
  .bh-scopetable tbody th,
  .bh-scopetable thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bh-surface);
  }
  .bh-scopetable::after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    width: 32px;
    height: 100%;
    margin-left: -32px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bh-surface));
  }

  .bh-compare__col,
  .bh-compare__col--featured,
  .bh-compare thead th:last-child { width: 84px; }
  .bh-compare thead th:nth-child(2) { width: 60px; }
  .bh-compare thead th { font-size: 10px; }
  .bh-compare tbody th { font-size: 11.5px; }

  /* Przyklejona kolumna opisu — bez niej po przewinięciu widać same ptaszki
     i nie wiadomo, którego zakresu dotyczą. */
  .bh-compare tbody th,
  .bh-compare thead th:first-child,
  .bh-compare__group th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bh-surface);
  }
  .bh-compare__group th { background: var(--bh-surface-alt, #F4F6F7); }

  /* Wygaszenie mówi, że tabela idzie dalej w prawo. */
  .bh-compare::after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    width: 32px;
    height: 100%;
    margin-left: -32px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--bh-surface));
  }
}

/* --------------------------------------------------------------------------
   Cele dotykowe i czytelność (audyt mobilny, krok 2)

   Palec trafia w obszar około 9 mm, czyli mniej więcej 44 px. Poniżej tej
   wartości trafienie staje się loterią — a w stopce i w sterowaniu wideo
   elementy miały 13–28 px wysokości. Powiększamy sam obszar dotyku
   (dopełnieniem albo minimalną wysokością), nie krój ani nie kolor, więc
   rytm stopki zostaje ten sam, tylko rzadszy.

   Linki stojące w zdaniu zostawiamy w spokoju — tam powiększanie obszaru
   rozjeżdża wiersz, a wytyczne wyraźnie je z tego wymogu wyłączają.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

  /* Stopka: listy linków, telefon, przełącznik języka i drobne odnośniki. */
  .bh-footer__list { gap: 0; }
  .bh-footer__list a { padding: 13px 0; }
  .bh-footer a.bh-footer__phone { display: inline-flex; align-items: center; min-height: 44px; }
  .bh-footer__de-link,
  .bh-footer a.bh-footer__registry,
  .bh-footer__cookies,
  .bh-footer__copy a { display: inline-flex; align-items: center; min-height: 44px; }
  .bh-langswitch__item { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .bh-footer__geo-list a { padding: 11px 0; }

  /* Nagłówek: sygnet i wezwanie w pasku. */
  .bh-header__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .bh-header__actions .bh-btn--sm { min-height: 44px; }

  /* Okruszki nawigacji miały 13 px wysokości. */
  .bh-crumbs a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Sterowanie kafli wideo: 26 × 26 px to najmniejszy cel w całym serwisie. */
  .bh-reelbtn { width: 40px; height: 40px; }
  .bh-reelbar--card { gap: 6px; }

  /* Odnośniki-wezwania stojące osobno (nie w zdaniu). */
  .bh-underlink,
  .bh-model-plans__link,
  .bh-tube__cta,
  .bh-ctquick__value,
  .bh-scopetable__link,
  .bh-crew__links a,
  .bh-lawyer__links a,
  .bh-legalcard__link,
  .bh-appay__link,
  .bh-kdcard__link,
  .bh-locbar__link,
  .bh-addressbox .bh-underline,
  .bh-legarti__aside .bh-underline,
  .bh-cta-band__contacts a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Zakładki i chipy siedziały na 34–39 px. */
  .bh-specs__tab,
  .bh-model-plans__tab,
  .bh-model-price__tab,
  .bh-packages__tab,
  .bh-wall__tab,
  .bh-chip { min-height: 44px; }

  /* --- Czytelność ---------------------------------------------------------
     Próg 12 px dotyczy tekstu, który się czyta. Wersaliki z rozstrzeleniem
     (nadtytuły sekcji, etykiety) czytają się dobrze odrobinę niżej, ale nie
     przy 9,5 px — tam znika już kształt wyrazu. Podnosimy dno do 11 px dla
     etykiet i do 12 px dla podpisów pól formularza, które trzeba przeczytać
     przed wpisaniem danych. */

  .bh-videocard__tag { font-size: 11px; }
  .bh-videocard__time { font-size: 11px; }
  .bh-footer__phone-label,
  .bh-footer__contact-label { font-size: 11px; }
  .bh-footer__title { font-size: 11.5px; }
  .bh-hero__kicker-lead { font-size: 11.5px; }
  .bh-model-gallery__badge,
  .bh-collcard__here,
  .bh-model-panel__collection { font-size: 11.5px; }
  .bh-lead__label span,
  .bh-lead__question,
  .bh-lead__option-desc { font-size: 12px; }

  /* Plakietki i etykiety, które zostały na 9,5–10 px. */
  .bh-project__tag,
  .bh-doccard__badge,
  .bh-hgtile__label,
  .bh-matrix__badge,
  .bh-legalcard__label,
  .bh-flow__pill,
  .bh-lawyer__badge,
  .bh-vs__who,
  .bh-cfg__navpricelabel { font-size: 11px; }

  /* Adres e-mail w stopce był linkiem o wysokości 16 px. */
  .bh-footer__contact-value a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Tytuły kart są linkami wysokimi na 21–23 px. Zdjęcie karty prowadzi tam
     samo i ma 348 × 261 px, więc karta jest trafialna — ale tytuł jest tym,
     w co człowiek celuje. Dopełnienie powiększa obszar dotyku, a ujemny
     margines zdejmuje je z układu, żeby odstępy w karcie zostały bez zmian. */
  .bh-catcard__name a,
  .bh-reason__title a {
    display: inline-block;
    padding: 11px 0;
    margin: -11px 0;
  }

  /* Drobne etykiety, które zostały poniżej progu. */
  .bh-cfg__sidelabel,
  .bh-zrpack__badge,
  .bh-locone__tag { font-size: 11px; }
  .bh-compare__pill,
  .bh-scopetable__pill,
  .bh-compare__cell--text,
  .bh-scopetable__col { font-size: 10.5px; }
}