/* Belka zapowiedzi — task01.28 (styl per komponent — docs/podejscie-css.md; kopia z makiety,
   makieta/css/sekcje-otwierajace.css). Wg FeuerDS: „Baner - promocyjny TOP" 7:6063 (desktop
   1441×216) / „Group 216" 7:6077 (mobile 393×326). Nazwa bez słowa reklamowego
   (architektura-blokow.md). Chip (A46) i link akcji (A43) — atomy.css motywu.
   Tablet bez projektu — układ mobile. Wartości px z Figmy zapisane w rem (baza 16). */

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

.belka-uklad {
  display: flex;
  align-items: flex-end;           /* dół znaku = dół linku akcji (FeuerDS 7:6063) */
  gap: 1.5rem;
  padding: 3rem 0 3rem 6rem;       /* wcięcie znaku 96 px od krawędzi kontenera (FeuerDS) */
}

/* Znak wymienny (pole obrazu bloku; domyślnie ikony/znak-belki.svg wtyczki): stałe pole,
   obraz dopasowany bez przycinania, wyśrodkowany (wymagania pliku — task01.28). */
.belka-znak {
  flex: none;
  width: 8.0625rem;                /* 129 px */
  height: 4.5625rem;               /* 73 px */
}

.belka-znak img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.belka-tresc > .chip { margin-bottom: 1rem; }

/* Specyficzność ponad nagłówki treści wpisu (`.tresc h2`, typografia.css) — we wpisie belka
   zachowuje własną typografię. */
.belka-zapowiedzi .belka-tytul {
  margin: 0;
  font-size: var(--tekst-26);      /* 26/36.4 ExtraBold — FeuerDS, desktop i mobile */
  line-height: var(--interlinia-26);
  font-weight: var(--waga-najgrubsza);
}

.belka-tresc .link-akcji { margin-top: 0.75rem; }   /* desktop 12 px (FeuerDS), mobile 16 */

@media (max-width: 1023px) {
  .belka-uklad {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 2rem 0 2rem;
  }

  .belka-tresc .link-akcji { margin-top: 1rem; }

  .belka-znak {
    width: 6rem;                   /* 96 px */
    height: 3.375rem;              /* 54 px */
  }
}