/* Pomelo - Blog (ostatnie wpisy) — style wspólne.
   Figma STRONA: desktop 3238-16028, mobile 3238-17746.
   Desktop: lista wpisów (900) + kolumna boczna (302), gap 68.
   Mobile (<=991 px): karuzela scroll-snap ze strzałkami i kropkami, pod nią lista i blok o Pomelo.
   Breakpoint 991 px jest stały — ta sama wartość siedzi w renderze widgetu (inline CSS per instancja). */

/* Elementor e-con potrafi zwinąć widżet do 0 szerokości */
.elementor-widget:has(.pmbl) { width: 100%; }

.pmbl {
  /* kolory z Figmy (tokeny systemu "new") */
  --pmbl-ink: #1f1f1f;         /* neutral/900 — tytuły */
  --pmbl-ink2: #333333;        /* neutral/800 */
  --pmbl-ink3: #121212;        /* nagłówek bloku o Pomelo + logo */
  --pmbl-body: #595959;        /* neutral/700 — lead, obrys buttona */
  --pmbl-badge-bg: #efefef;    /* neutral/300 */
  --pmbl-line: #c9c9c9;        /* separator listy (desktop) */
  --pmbl-line-mob: #b3b3b3;    /* neutral/500 — separator listy (mobile) */
  --pmbl-dot: #d9d9d9;
  --pmbl-dot-on: #595959;
  --pmbl-green: #c9c645;       /* primary — standardowy hover buttona */
  --pmbl-green-line: #a7a300;

  --pmbl-bg: #f8f8f8;          /* nadpisywane inline per instancja */
  --pmbl-card-bg: #ffffff;
  --pmbl-max: 1270px;
  --pmbl-bleed-max: 1920px;    /* limit szerokości TŁA sekcji; none = od krawędzi do krawędzi */
  --pmbl-side: 302px;
  --pmbl-gap: 68px;
  --pmbl-media-w: 264px;
  --pmbl-card-h: 242px;
  --pmbl-radius: 20px;

  position: relative;
  z-index: 0;                  /* motyw: sekcje przykrywają menu bez własnego kontekstu */
  isolation: isolate;
  display: block;
  box-sizing: border-box;

  /* Tło wypełnia szerokość kontenera (na laptopie = cały ekran), ale przestaje
     rosnąć po --pmbl-bleed-max — na szerszych monitorach sekcja zostaje
     wyśrodkowana, więc pas tła nie ciągnie się w nieskończoność względem
     wyśrodkowanej treści strony. Sterowane z panelu: Styl → Układ. */
  width: 100%;
  max-width: var(--pmbl-bleed-max);
  margin-left: auto;
  margin-right: auto;

  padding: 60px 20px;
  background: var(--pmbl-bg);
  color: var(--pmbl-ink);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.pmbl *, .pmbl *::before, .pmbl *::after { box-sizing: border-box; }
/* :where() — zerowa specyficzność, nie zjada paddingów klas komponentu */
:where(.pmbl) :where(h1, h2, h3, h4, p, ul, li, article, section, aside, figure, button) { margin: 0; padding: 0; }
:where(.pmbl) :where(ul) { list-style: none; }

/* left/top: 0 względem .pmbl (position: relative) — bez tego span zostaje na
   pozycji statycznej WEWNĄTRZ karuzeli (.pmbl__track, overflow-x: auto), która
   go nie przycina (blok zawierający = .pmbl), więc rozpycha szerokość strony */
.pmbl .screen-reader-text {
  position: absolute; left: 0; top: 0;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* motyw Elementora dorzuca czerwone tło / biały tekst na hover linków i buttonów */
.pmbl a, .pmbl button { transition: color .2s ease, border-color .2s ease, opacity .2s ease; }
.pmbl a:hover, .pmbl a:focus, .pmbl button:hover, .pmbl button:focus {
  background-color: transparent !important;
  text-decoration: none;
}

.pmbl__inner { max-width: var(--pmbl-max); margin: 0 auto; }

/* ---------- nagłówek ---------- */
.pmbl__head {
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  text-align: center; margin-bottom: 40px;
}
.pmbl .pmbl__title {
  font-family: 'Rubik', system-ui, Arial, sans-serif !important;
  font-weight: 700; font-size: 40px; line-height: 1.2 !important;
  text-transform: uppercase; color: var(--pmbl-ink);
}
.pmbl .pmbl__intro {
  font-family: 'Montserrat', system-ui, Arial, sans-serif;
  font-weight: 400; font-size: 20px; line-height: 1.5 !important; color: var(--pmbl-body);
  max-width: 900px;
}

/* ---------- siatka ---------- */
.pmbl__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pmbl-side);
  gap: var(--pmbl-gap);
  align-items: start;
}
.pmbl__main { display: flex; flex-direction: column; gap: 68px; min-width: 0; }
.pmbl__track { display: flex; flex-direction: column; gap: 40px; }

/* ---------- karta wpisu ---------- */
.pmbl-post {
  display: flex; align-items: center; gap: 32px;
  min-height: var(--pmbl-card-h);
  background: var(--pmbl-card-bg);
  border-radius: var(--pmbl-radius);
  /* celowo BEZ overflow:hidden — karta ma rosnąć przy dłuższym tytule,
     a nie obcinać tekst w połowie wiersza; zdjęcie klipuje się samo */
  overflow: visible;
}
.pmbl-post__media {
  display: block; flex: 0 0 var(--pmbl-media-w);
  width: var(--pmbl-media-w); align-self: stretch;
  overflow: hidden; border-radius: var(--pmbl-radius) 0 0 var(--pmbl-radius);
  background: #ececec;
}
/* motyw: `.elementor img{height:auto}` bije samą klasę — oba wymiary + !important */
.pmbl img.pmbl-post__img {
  display: block; width: 100% !important; height: 100% !important;
  min-height: var(--pmbl-card-h);
  max-width: none; object-fit: cover; object-position: center;
  border-radius: inherit;
}
.pmbl .pmbl-post__img--empty {
  display: block; width: 100%; height: 100%; min-height: var(--pmbl-card-h);
  background: linear-gradient(135deg, #efefef 0%, #e2e2e2 100%);
}
.pmbl-post__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  /* 16 px (nie 24 jak w Figmie): przy 2-liniowym tytule i leadzie karta wychodzi
     wtedy dokładnie 242 px z makiety, a przy dłuższym tekście rośnie zamiast obcinać */
  padding: 16px 0;
}
.pmbl-post__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.pmbl-post__badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; border-radius: 20px; background: var(--pmbl-badge-bg);
  font-family: 'Rubik', system-ui, Arial, sans-serif;
  font-weight: 400; font-size: 12px; line-height: 1.2; color: var(--pmbl-body);
}
/* Dwie rzeczy naraz w elementach z -webkit-line-clamp:
   1) podwójny selektor + !important na interlinii - motyw ustawia line-height na h3/p
      regułą o wyższej specyficzności (.elementor h3);
   2) ZERO dolnego paddingu - clamp obcina na krawędzi padding-boxa, więc każdy
      padding-bottom odsłania górę następnego wiersza (ścięty w połowie tekst).
      Odstęp pod tekstem robi padding-top następnego elementu. */
.pmbl .pmbl-post__title {
  padding: 10px 10px 0;
  font-family: 'Montserrat', system-ui, Arial, sans-serif !important;
  font-weight: 700; font-size: 20px !important; line-height: 24px !important; color: var(--pmbl-ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pmbl-post__title a { color: inherit; text-decoration: none; }
.pmbl-post__title a:hover, .pmbl-post__title a:focus { color: var(--pmbl-ink) !important; opacity: .75; }
.pmbl .pmbl-post__lead {
  padding: 20px 10px 0;
  font-family: 'Rubik', system-ui, Arial, sans-serif;
  font-weight: 400; font-size: 16px !important; line-height: 24px !important; color: var(--pmbl-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pmbl-post__more { padding: 14px 60px 14px 10px; text-align: right; }
.pmbl-post__more-link,
.pmbl-pop__more-link {
  font-family: 'Montserrat', system-ui, Arial, sans-serif;
  font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--pmbl-body);
  text-decoration: none; white-space: nowrap;
}
.pmbl-post__more-link:hover, .pmbl-post__more-link:focus { color: var(--pmbl-ink) !important; }

/* ---------- przycisk ---------- */
.pmbl__cta { display: flex; justify-content: center; }
.pmbl__btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 32px; border: 1px solid var(--pmbl-body); border-radius: 20px;
  background: #ffffff; color: var(--pmbl-ink2);
  font-family: 'Rubik', system-ui, Arial, sans-serif;
  font-weight: 700; font-size: 14px; line-height: 1;
  text-transform: uppercase; text-decoration: none; letter-spacing: .02em;
}
/* standardowy hover Pomelo: zielone tło primary + ciemniejszy obrys */
.pmbl .pmbl__btn:hover, .pmbl .pmbl__btn:focus, .pmbl .pmbl__btn:active {
  background: var(--pmbl-green) !important;
  border-color: var(--pmbl-green-line) !important;
  color: var(--pmbl-ink3) !important;
  box-shadow: none !important;
}

/* ---------- kolumna boczna ---------- */
.pmbl__side { display: flex; flex-direction: column; gap: 45px; min-width: 0; }
.pmbl__pop { padding: 0 16px; }
.pmbl__pop-title {
  font-family: 'Rubik', system-ui, Arial, sans-serif !important;
  font-weight: 700; font-size: 22px; line-height: 1.2;
  text-transform: uppercase; color: var(--pmbl-ink); margin-bottom: 24px;
}
.pmbl__pop-list { display: flex; flex-direction: column; gap: 12px; }
.pmbl-pop { border-bottom: 1px solid var(--pmbl-line); }
.pmbl .pmbl-pop__title {
  padding: 10px 10px 0;
  font-family: 'Rubik', system-ui, Arial, sans-serif !important;
  font-weight: 700; font-size: 16px !important; line-height: 1.4 !important; color: var(--pmbl-ink2);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.pmbl-pop__title a { color: inherit; text-decoration: none; }
.pmbl-pop__title a:hover, .pmbl-pop__title a:focus { color: var(--pmbl-ink2) !important; opacity: .75; }
.pmbl-pop__more { padding: 14px; text-align: center; }
.pmbl-pop__more-link { color: var(--pmbl-ink2); }
.pmbl-pop__more-link:hover, .pmbl-pop__more-link:focus { color: var(--pmbl-ink) !important; }

/* ---------- wiedza ekspertów ---------- */
.pmbl__about {
  display: flex; flex-direction: column; gap: 24px;
  padding: 12px 16px; border-radius: 30px;
}
.pmbl--sticky-about .pmbl__about { position: sticky; top: 24px; }
.pmbl__about-title {
  font-family: 'Rubik', system-ui, Arial, sans-serif !important;
  font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--pmbl-ink3);
}
.pmbl__logo { color: var(--pmbl-ink3); }
.pmbl__logo svg { display: block; width: 100%; max-width: 273px; height: auto; }
.pmbl__logo svg path { fill: currentColor; }
.pmbl img.pmbl__logo-img {
  display: block; width: 100% !important; max-width: 273px; height: auto !important;
}
.pmbl__about-text {
  font-family: 'Montserrat', system-ui, Arial, sans-serif;
  font-weight: 400; font-size: 16px; line-height: 1.4; color: var(--pmbl-ink2);
}

/* ---------- nawigacja karuzeli (tylko mobile) ---------- */
.pmbl__nav { display: none; align-items: center; justify-content: center; gap: 24px; height: 44px; }
.pmbl__arrow {
  flex: 0 0 44px; width: 44px; height: 44px; padding: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 12px; background: none; color: var(--pmbl-ink);
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pmbl__arrow svg { display: block; width: 24px; height: 24px; }
.pmbl__arrow--prev svg { transform: rotate(180deg); }
.pmbl__arrow[disabled] { opacity: .3; cursor: default; }
.pmbl__dots { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px; }
.pmbl__dot {
  width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%;
  background: var(--pmbl-dot); cursor: pointer; -webkit-appearance: none; appearance: none;
}
.pmbl__dot.is-on { background: var(--pmbl-dot-on); }
.pmbl__dot:hover, .pmbl__dot:focus { background: var(--pmbl-dot-on) !important; }

/* ---------- pośrednie szerokości (dwie kolumny, ciaśniej) ---------- */
@media (max-width: 1199px) {
  .pmbl { --pmbl-gap: 40px; --pmbl-side: 280px; --pmbl-media-w: 220px; }
  .pmbl__main { gap: 48px; }
  .pmbl__track { gap: 24px; }
  .pmbl-post__more { padding-right: 20px; }
}

/* ---------- mobile ---------- */
@media (max-width: 991px) {
  .pmbl {
    --pmbl-media-w: 100%;
    --pmbl-card-h: 0px;
    padding: 40px 0;
  }
  .pmbl__inner { max-width: none; }
  .pmbl__head { gap: 8px; margin-bottom: 24px; padding: 0 16px; }
  .pmbl .pmbl__title { font-size: 28px; }
  .pmbl .pmbl__intro { font-size: 18px; }

  .pmbl__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pmbl__main { gap: 24px; }
  .pmbl__track { gap: 16px; padding: 0 12px; }

  /* karuzela: jedna karta na ekran, snap do środka */
  .pmbl--carousel .pmbl__track {
    flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    /* proximity, nie mandatory — mandatory przechwytuje programowe przewijanie strzałką */
    scroll-snap-type: x proximity; scroll-padding: 0 12px;
    gap: 12px; scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  @media (hover: none) and (pointer: coarse) {
    .pmbl--carousel .pmbl__track { scroll-snap-type: x mandatory; }
  }
  .pmbl--carousel .pmbl__track::-webkit-scrollbar { display: none; }
  .pmbl--carousel .pmbl-post { flex: 0 0 100%; scroll-snap-align: center; }

  .pmbl-post {
    flex-direction: column; align-items: stretch; gap: 12px;
    min-height: 0; border-radius: 20px;
  }
  .pmbl-post__media {
    flex: 0 0 auto; width: 100%; height: 105px; align-self: auto;
    border-radius: 20px 20px 0 0;
  }
  .pmbl img.pmbl-post__img, .pmbl .pmbl-post__img--empty { min-height: 0; height: 105px !important; }
  .pmbl-post__body { padding: 0 12px 12px; }
  /* podwójny selektor - inaczej przegrywa z `.pmbl .pmbl-post__title` z desktopu */
  .pmbl .pmbl-post__title {
    font-family: 'Rubik', system-ui, Arial, sans-serif !important;
    font-size: 16px !important; line-height: 1.4 !important; -webkit-line-clamp: 3;
    padding: 10px 10px 0;
  }
  .pmbl .pmbl-post__lead {
    font-family: 'Montserrat', system-ui, Arial, sans-serif;
    font-size: 14px !important; line-height: 1.4 !important; -webkit-line-clamp: 3;
    padding: 12px 10px 0;
  }
  .pmbl-post__more { padding: 14px 24px 14px 10px; }

  .pmbl__nav { display: flex; }
  .pmbl__cta--desktop { display: none; }

  .pmbl__side { gap: 24px; }
  .pmbl__pop { padding: 0 32px; }
  .pmbl__pop-title { font-size: 18px; margin-bottom: 24px; }
  .pmbl-pop { border-color: var(--pmbl-line-mob); }
  .pmbl--sticky-about .pmbl__about { position: static; }
  .pmbl__about {
    align-items: center; text-align: center; gap: 16px;
    padding: 24px 12px; max-width: 380px; margin: 0 auto;
  }
  .pmbl__about-text { font-size: 18px; }
  .pmbl__logo svg, .pmbl img.pmbl__logo-img { max-width: 258px; margin: 0 auto; }
}

@media (max-width: 480px) {
  .pmbl__pop { padding: 0 20px; }
}