/* Belka informacyjna — task01.38 (styl per komponent — docs/podejscie-css.md).
   Wg FeuerDS (stan 2026-09-13): odmiana 1 = „Baner 1" 7:6745 (desktop 1440×524) / „Baner 3"
   7:5452 (mobile 393×703); odmiana 2 = „Baner 2" 7:6765 (1440×576) / „Baner 2 mobile" 7:5470
   (393×665). Nazwa bez słowa reklamowego (architektura-blokow.md). Obie odmiany na białym tle.
   Nagłówek: kanon H2 Bold 32/44.8 (mobile 28/39.2) z akcentem ExtraBold (atom A65,
   typografia.css; w odmianie 1 akcent w kolorze marki) — ramki mają dwa stopnie 32 + 36
   (mobile 24 + 32), odrzucone (rejestr spojnosc-designu.md). Przycisk = atom A41 bez zmian.
   Bez woalu na zdjęciu (widoki stron mają woal jak w hero — obowiązuje ramka komponentu).
   Tablet (640–1023) bez projektu — układ mobile. Wartości px z Figmy zapisane w rem (baza 16). */

.belka-info {
  position: relative;
  max-width: 90rem;                        /* stop skali z task01.06 — jak inne sekcje */
  margin-inline: auto;
  background: var(--kolor-tla);
}

.belka-info-zdjecie { overflow: hidden; }

.belka-info-zdjecie :is(img, video) {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.belka-info-tytul {
  margin: 0;
  font-size: var(--tekst-32);              /* H2 Bold 32/44.8 (A25); akcent ExtraBold w spanie (A65) */
  line-height: var(--interlinia-32);
  font-weight: var(--waga-gruba);
}

/* ---- Odmiana 1 (7:6745): tekst 546 od lewej krawędzi kontenera, zdjęcie 704×460 od kolumny 7
   (x 736) do prawej krawędzi; sekcja biała 450 (padding 64 / 64) + pas 74 tła wyróżnionego
   jako część komponentu — zdjęcie sięga dołu pasa, czyli „wystaje" w następną sekcję
   (wzorzec top visualu produktowego, task01.25). ---- */

.belka-info-1 .kontener { padding-block: var(--odstep-8); }        /* 64 / 64 */

.belka-info-tresc {
  width: 34.125rem;                        /* 546 */
  min-height: 19.5rem;                     /* 312 — wysokość treści z ramki: sekcja 450 + pas 74 = zdjęcie 460 */
}

.belka-info-tekst {
  margin: var(--odstep-3) 0 0;             /* 24 pod nagłówkiem */
  font-size: var(--tekst-20);              /* 20/28 Regular, fragment Bold */
  line-height: var(--interlinia-20);
}

.belka-info-tekst strong { font-weight: var(--waga-gruba); }

.belka-info-1 .przycisk { margin-top: var(--odstep-3); }           /* 24 pod akapitem */

.belka-info-1 .belka-info-zdjecie {
  position: absolute;
  top: var(--odstep-8);                    /* 64 — górna krawędź na linii nagłówka */
  right: 0;
  bottom: 0;                               /* dół pasa */
  width: 44rem;                            /* 704 */
}

.belka-info-pas {
  height: 4.625rem;                        /* 74 */
  background: var(--kolor-tla-wyroznionego);
}

/* ---- Odmiana 2 (7:6765): zdjęcie od lewej krawędzi do x 701 na całą wysokość 576 (bez
   paddingów sekcji); karta 663×352 przy prawej krawędzi kontenera, 112 od góry i dołu,
   nachodzi 44 na zdjęcie; karta = sam obrys 2 px marki bez tła (zdjęcie prześwituje);
   padding karty 64 / 44 / 64 / 76 → nagłówek 543; przycisk 28 pod nagłówkiem. ---- */

.belka-info-2 { padding-block: 7rem; }                             /* 112 / 112 */

.belka-info-2 .belka-info-zdjecie {
  position: absolute;
  inset: 0 auto 0 0;
  width: 43.8125rem;                       /* 701 */
}

.belka-info-2 .kontener { position: relative; }                    /* nad zdjęciem */

.belka-info-karta {
  box-sizing: border-box;
  width: 41.4375rem;                       /* 663 */
  min-height: 22rem;                       /* 352 */
  margin-left: auto;
  padding: 3.875rem 2.625rem 3.875rem 4.625rem;                    /* 64 / 44 / 64 / 76 od zewnętrznej krawędzi obrysu 2 px */
  border: 2px solid var(--kolor-marki);
}

.belka-info-karta .przycisk { margin-top: 1.75rem; }               /* 28 */

/* ---- Mobile (7:5452 / 7:5470; także tablet): zdjęcie w przepływie od górnej krawędzi na
   całą szerokość (258 / 287), bez pasa. Odmiana 1: 24 → treść w kontenerze, przycisk na
   szerokość tekstu (jak w ramce; widoki mają 361 — decyzja 2026-09-15), dół 64.
   Odmiana 2: karta 361 nachodzi 38 na zdjęcie, padding 64 / 16 (ramka 61 / 16 / 61 / 26),
   przycisk na całą szerokość karty, 24 pod nagłówkiem; 64 pod kartą. ---- */

@media (max-width: 1023px) {
  .belka-info-tytul {
    font-size: var(--tekst-28);            /* 28/39.2 */
    line-height: var(--interlinia-28);
  }

  .belka-info-1 .belka-info-zdjecie,
  .belka-info-2 .belka-info-zdjecie {
    position: static;
    width: auto;
  }

  .belka-info-1 .belka-info-zdjecie { height: 16.125rem; }         /* 258 */
  .belka-info-2 .belka-info-zdjecie { height: 17.9375rem; }        /* 287 */

  .belka-info-1 .kontener { padding-block: var(--odstep-3) var(--odstep-8); }   /* 24 / 64 */

  .belka-info-tresc {
    width: auto;
    min-height: 0;
  }

  .belka-info-pas { display: none; }

  .belka-info-2 { padding-block: 0 var(--odstep-8); }              /* 0 / 64 */

  .belka-info-karta {
    width: auto;
    min-height: 0;
    margin: -2.375rem 0 0;                 /* nachodzi 38 na zdjęcie */
    padding: 3.875rem 0.875rem;            /* 64 / 16 od zewnętrznej krawędzi obrysu */
  }

  .belka-info-karta .przycisk {
    display: flex;
    width: 100%;
    margin-top: var(--odstep-3);           /* 24 */
  }
}