/* ==========================================================================
   OFERTA

   Cała sekcja siedzi w Gutenbergu wewnątrz jednej Grupy z klasą
   "section--offer" (dodaj ją w edytorze, patrz Plan Poprawek) — to na niej
   wisi tło i odstęp od sąsiednich sekcji, żeby nie dublować paddingu na
   kilku elementach naraz.
   ========================================================================== */
.section--offer{
  background: var(--cream);
  padding-block: var(--section-pad);
}

/* offer__intro NIE dostaje żadnych własnych width/max-width/margin-left/
   margin-right — zachowuje się dokładnie tak jak about__grid/offer__body/
   contact__grid (naturalne wymuszone przez Blocksy/WP theme-block-width +
   centrowanie, które jest niewidoczne, bo pokrywa się z szerokością
   kontenera całej strony). Jedyne, co nadpisujemy, to margin-bottom —
   z !important, żeby wygrać z regułą Blocksy czytającą jej własną zmienną
   odstępu (margin-block-end). Próba jawnego zerowania width/margin-left/
   right (poprzednia wersja) była błędem — to właśnie wypychało tekst do
   samej krawędzi przeglądarki zamiast do krawędzi kontenera. */
.offer__intro.offer__intro{
  margin-bottom: calc(3.5rem + 20px) !important;
}

.offer__body{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.offer__list-heading{
  font-size: 1.35rem;
  margin-bottom: 1.8rem;
  max-width: 32ch;
}

.offer-item{
  display: flex;
  gap: 1.6rem;
  padding-block: 1.7rem;
  border-top: 1px solid var(--ink-faint);
}
.offer-item:last-child{ border-bottom: none; }
/* offer-item jest też is-layout-constrained — to samo wymuszone centrowanie
   co wyżej dopisuje drugiemu dziecku (offer-item__content) margin:auto
   !important, co w kontenerze flex-row odpycha treść od numeru. Zerujemy
   oba mechanizmy (margin-block-start I margin-left/right), żeby jedynym
   odstępem między numerem a treścią był nasz gap:1.6rem powyżej. */
.offer-item.offer-item > *{
  margin-block-start: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* Nowo znalezione: Blocksy (osobno od reguł WP core) dokłada własne
   width: var(--theme-block-width) na is-layout-constrained — to ono
   psuło szerokość treści obok numeru, nie tylko marginesy. */
.offer-item__content.offer-item__content{
  width: auto !important;
}

.offer-item__num.offer-item__num{
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--camel-text);
  line-height: 1;
  min-width: 2.4ch;
  width: auto !important;
  flex-shrink: 0;
}

.offer-item__content h4{
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.offer-item__content p{
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

.offer__media{ margin-inline: auto; max-width: 460px; width: 100%; }

/* Zamiast align-self:flex-end + ujemny margines (nie renderowało się
   poprawnie mimo poprawnej kaskady — sprawdzone w DevTools) używamy
   position:absolute na drugim zdjęciu. To niezależne od zachowania
   flex/align-self, więc nie ma czego "przebijać" żadnym !important.

   Geometria: drugie zdjęcie ma zachodzić na PIERWSZE od góry (top, nie
   bottom!) o 3.5rem. Wysokość zdjęcia = 82% szerokości × 3/4 (aspect-ratio
   4/3) = 61.5% szerokości .offer__compare — stąd margin-bottom niżej
   (nie padding: dzięki temu nie liczy się do "100%" wysokości, którą
   .offer__compare-item--po używa do position:absolute, więc nie ma
   błędnego koła zależności). margin-bottom (nie padding) rezerwuje miejsce
   pod protruding drugie zdjęcie, żeby offer__closing/lista nie wjeżdżały
   pod spód. */
.offer__compare{
  position: relative;
  margin-bottom: calc(40% - 3.5rem);
}

.offer__compare-item.offer__compare-item{
  position: relative;
  width: 82% !important;
}
.offer__compare-item.offer__compare-item--przed,
.offer__compare-item.offer__compare-item--po{
  margin: 0 !important;
}

.offer__compare-item--przed{
  z-index: 1;
}

.offer__compare-item.offer__compare-item--po{
  position: absolute !important;
  top: calc(43% - 3.5rem);
  right: -7%;
  bottom: auto;
  left: auto;
  z-index: 2;
}

.offer__closing{
  /* offer__compare-item--po jest position:absolute + z-index:2 — bez
     własnej pozycji/z-index offer__closing renderuje się "pod" nim mimo
     że jest dalej w kodzie. position:relative + wyższy z-index stawia go
     nad zdjęciami, jeśli marginesy kiedykolwiek się zejdą na styk. */
  position: relative;
  z-index: 3;
  margin-top: 0;
  padding-top: 17.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--graphite);
  max-width: 46ch;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .offer__body{ grid-template-columns: 1fr; }
  .offer__media{ max-width: 560px; order: 2; }
}

@media (max-width: 640px){
  .offer-item{ gap: 1.1rem; }

  /* Na wąskich ekranach zachodzenie po przekątnej robi się ciasne i
     nieprzewidywalne — zdjęcia po prostu stackują się jedno pod drugim,
     z normalnym odstępem, bez position:absolute. */
  .offer__compare{
    margin-bottom: 0;
  }
  .offer__compare-item.offer__compare-item--po{
    position: relative !important;
    top: auto;
    right: auto;
    margin-top: 1rem !important;
  }

  /* Na mobile zdjęcia się nie nachodzą (patrz wyżej), więc nie trzeba
     rezerwować dużego odstępu na position:absolute — 17.5rem z desktopu
     byłoby tu ogromną, pustą dziurą nad tekstem zamykającym. */
  .offer__closing{
    padding-top: 4.5rem;
  }

  /* Padding zmniejszał realny rozmiar zdjęć (82% liczy się od węższego
     kontenera) — zamiast tego wyśrodkowujemy same zdjęcia przez
     margin-inline:auto (nie tracą szerokości), a tekst zamykający
     dostaje tylko mały margines z lewej, żeby nie dotykał krawędzi. */
  .offer__compare-item.offer__compare-item{
    margin-inline: auto !important;
  }
  .offer__closing{
    margin-left: 24px;
  }
}