/* === Halloween offer overlay === */
/* Plik: themes/halloween/offer.css */

.offer .offer-item {
  position: relative;         /* potrzebne dla pseudo-elementu */
  overflow: hidden;           /* żeby grafika nie "wychodziła" poza panel */
  isolation: isolate;         /* porządek w warstwach */
}

/* Wspólny overlay – nie zasłania klikalnych elementów */
.offer .offer-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;                 /* tło pod treścią */
  pointer-events: none;       /* overlay nie łapie kliknięć */
  background-repeat: no-repeat;
  background-size: cover;   /* grafika dopasowana, bez przycięcia */
  background-position: center;
  opacity: 0.18;              /* subtelny efekt; dostosuj wg uznania */
  /* domyślnie nic; konkret ustawiamy niżej per wariant */
}

/* Upewnij się, że zawartość jest nad overlayem */
.offer .offer-item > * {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* --- Warianty --- */
/* BASIC -> halloween-left.png */
.offer .offer-item.offer-item--basic::before {
  background-image: url("/themes/halloween/halloween-left.png");
  background-position: left center;
}

/* PREMIUM -> halloween-center.png */
.offer .offer-item.offer-item--premium::before {
  background-image: url("/themes/halloween//halloween-center.png");
  background-position: center center;
}

/* ALL INCLUSIVE -> halloween-right.png */
.offer .offer-item.offer-item--allinclusive::before {
  background-image: url("/themes/halloween/halloween-right.png");
  background-position: right center;
}

/* Opcjonalnie: mocniejszy kontrast na małych ekranach */
@media (max-width: 768px) {
  .offer .offer-item::before { opacity: 0.24; }
}