/* Zajawki skionline.pl na forum IPS: plik statyczny portalu, nginx dokleja go do <head> forum za stylami IPS.
   Wzór 1:1: <style> makiety mockups/forum-zajawki.html (M6 to karta M2, M7 to M5 albo M3 przyklejony w kolumnie bocznej). Zmiana wyglądu = nowy plik z kolejną wersją w nazwie (cache).
   Zmienne tylko --sk-* z custom.css forum: IPS ma własne --sp-* o innych wartościach. */

/* treść forum nie ma resetu z base.css makiety ani jej klas .i, .btn, .f-box, .f-rows; :where daje zerową wagę, więc reguły niżej wygrywają jak w makiecie */
:where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1) { font-family: var(--sk-font-sans); font-size: var(--sk-fs-md); line-height: var(--sk-lh-md); color: var(--sk-text); text-align: left; -webkit-font-smoothing: antialiased; }
:where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1), :where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1) *, :where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1) ::before, :where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1) ::after { box-sizing: border-box; }
:where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1) * { margin: 0; }
:where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1) :where(img, svg) { display: block; max-width: 100%; }
:where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1) img { height: auto; }
:where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1) a { color: inherit; text-decoration: none; }
:where(.zj5__hotels, .zj5__facts, .zj-quiz__opts, .zj-more .f-rows) { list-style: none; padding: 0; }
:where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1) p { text-wrap: pretty; }
:where(.zj, .zj5, .zj-more, .zj-m4, .zj-m1) .i { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.zj-sig { display: inline-block; width: 16px; height: 16px; flex: none; background: url(/icon.svg) center / contain no-repeat; }
.zj-sig--ico { background: none; }
.zj-sig--ico { display: inline-grid; place-items: center; color: var(--sk-brand-mid); }
.zj-sig--ico .i { width: 16px; height: 16px; }

/* granatowy pasek „Na skionline.pl”: jeden wzór dla M2, M3 i M5 (32 px, 14/700); sygnet ma granatowe tło, więc na pasku widać białe S */
.zj-bar { display: flex; align-items: center; gap: var(--sk-sp-2); min-height: 32px; margin: 0; padding: var(--sk-sp-1) var(--sk-sp-5); background: var(--sk-brand); color: var(--sk-on-brand);
  font-size: var(--sk-fs-sm); font-weight: var(--sk-fw-bold); line-height: 1.3; }
.zj-sig { width: 16px; height: 16px; }
.zj-bar .zj-sig--ico { color: var(--sk-on-brand); }
.zj-badge { display: inline-flex; align-items: center; gap: var(--sk-sp-1); height: 24px; padding: 0 var(--sk-sp-2) 0 var(--sk-sp-1); border-radius: var(--sk-r-xs); background: var(--sk-brand); color: var(--sk-on-brand); font-size: var(--sk-fs-xs); font-weight: var(--sk-fw-bold); white-space: nowrap; }
.zj-opt__s { display: none; }

/* M1: linia linków z plakietką; M4: niski pasek granatowy w jednej linii */
.zj-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-sp-1) var(--sk-sp-3); font-size: var(--sk-fs-sm); color: var(--sk-text-muted); }
.zj-line__lbl { display: inline-flex; align-items: center; gap: var(--sk-sp-2); font-weight: var(--sk-fw-bold); }
.zj-line__links { display: flex; flex-wrap: nowrap; align-items: center; white-space: nowrap; }
.zj-line a { color: var(--sk-brand-mid); font-weight: var(--sk-fw-bold); }
.zj-line a:hover, .zj-line a:focus-visible { color: var(--sk-brand); text-decoration: underline; text-underline-offset: 2px; }
.zj-line__links a + a::before { content: "·"; display: inline-block; margin: 0 var(--sk-sp-2); color: var(--sk-text-muted); font-weight: var(--sk-fw-regular); text-decoration: none; }
.zj-line--bar { flex-wrap: nowrap; gap: var(--sk-sp-3); white-space: nowrap; min-height: 32px; padding: var(--sk-sp-1) var(--sk-sp-4); border-radius: var(--sk-r-sm); background: var(--sk-brand); color: var(--sk-on-brand); }
.zj-line--bar a, .zj-line--bar a:hover, .zj-line--bar a:focus-visible { color: var(--sk-on-brand); }
.zj-line--bar .zj-line__links a + a::before { color: var(--sk-navy-300); }
.zj-line a:focus-visible, .zj-card:focus-visible, .zj-row:focus-visible, .zj-card__tlink:focus-visible, .zj-quiz__opts a:focus-visible, .zj-row__opts a:focus-visible, .zj-row__tlink:focus-visible, .zj5 a:focus-visible, .zj5 input:focus-visible, .zj5 button:focus-visible { outline: 3px solid var(--sk-focus) !important; outline-offset: 2px; border-radius: var(--sk-r-xs); }
/* na granatowym pasku M4 obrys biały; po regule ogólnej, bo waga jest ta sama */
.zj-line--bar a:focus-visible { outline: 2px solid var(--sk-on-brand) !important; outline-offset: 2px; border-radius: var(--sk-r-xs); }
@media (max-width: 600px) {
  .zj-line .zj-sig { display: inline-block; }
  .zj-line__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .zj-line:not(.zj-line--bar) .zj-line__links a + a::before { content: none; }
}

/* M2: pasek i karta to jedna całość z promieniem skrzynek IPS */
.zj { container: zj / inline-size; margin-block: var(--sk-sp-6) var(--sk-sp-1); border-radius: var(--sk-r-lg); overflow: hidden; }
.zj-card { display: block; padding: var(--sk-sp-3) var(--sk-sp-5); background: var(--sk-brand-tint); color: var(--sk-text); transition: background var(--sk-dur-1) var(--sk-ease); }
a.zj-card:hover { background: var(--sk-brand-soft); color: var(--sk-text); }
a.zj-card:hover .zj-card__title { text-decoration: underline; text-underline-offset: 2px; }
.zj-card__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sk-sp-4); }
.zj-card__row:not(:has(.zj-card__img, .zj-card__ico)) { grid-template-columns: minmax(0, 1fr) auto; }
.zj-card__img { display: block; width: 72px; height: 54px; border-radius: var(--sk-r-xs); overflow: hidden; background: var(--sk-surface); }
.zj-card__img img { width: 100%; height: 100%; object-fit: cover; }
.zj-card__img--logo { padding: var(--sk-sp-3) var(--sk-sp-2); }
.zj-card__img--logo img { object-fit: contain; }
.zj-card__ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sk-surface); color: var(--sk-brand-mid); }
.zj-card__ico .i { width: 20px; height: 20px; }
.zj-card__txt { display: grid; gap: 2px; min-width: 0; }
.zj-card__title { font-weight: var(--sk-fw-black); color: var(--sk-heading); line-height: 1.3; }
.zj-card__sub { font-size: var(--sk-fs-sm); line-height: var(--sk-lh-sm); color: var(--sk-text-muted); }
.zj-card__text, .zj-card__facts { font-size: var(--sk-fs-sm); line-height: var(--sk-lh-sm); color: var(--sk-text); }
.zj-card__facts b { color: var(--sk-heading); font-variant-numeric: tabular-nums; }
.zj-card__fresh { margin-top: 2px; font-weight: var(--sk-fw-regular); }
.zj-card__short { display: none; font-size: var(--sk-fs-sm); line-height: var(--sk-lh-sm); color: var(--sk-text); }
.zj-card__go { display: inline-flex; align-items: center; gap: var(--sk-sp-2); font-size: var(--sk-fs-sm); font-weight: var(--sk-fw-bold); color: var(--sk-text-link); white-space: nowrap; }
.zj-card__go .i { width: 16px; height: 16px; }
/* loga marek kategorii: wysokość dobrana do proporcji logo (12 do 18 px), żeby optycznie były równe */
.zj-logos { display: flex; flex-wrap: wrap; gap: var(--sk-sp-2); margin-top: var(--sk-sp-2); }
.zj-logo { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 var(--sk-sp-3); border-radius: var(--sk-r-xs); background: var(--sk-surface); }
.zj-logo img { display: block; width: auto; max-width: 72px; }
/* quiz: zdjęcie na desktopie, ikona przy tytule na telefonie */
.zj-card--quiz { padding-bottom: var(--sk-sp-4); }
.zj-card--quiz .zj-card__row { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.zj-card__qico { display: none; }
.zj-card__tlink { display: inline-flex; align-items: center; gap: var(--sk-sp-2); min-height: 44px; margin-block: calc(var(--sk-sp-2) * -1) calc(var(--sk-sp-1) * -1); }
.zj-card__tlink .i { width: 16px; height: 16px; color: var(--sk-text-link); flex: none; }
.zj-card__tlink:hover { color: inherit; }
.zj-card__tlink:hover .zj-card__title { text-decoration: underline; text-underline-offset: 2px; }
.zj-quiz { margin-top: var(--sk-sp-3); }
.zj-quiz__q { margin-bottom: var(--sk-sp-2); font-size: var(--sk-fs-sm); font-weight: var(--sk-fw-bold); color: var(--sk-heading); }
.zj-quiz__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-sp-2); list-style: none; padding: 0; margin: 0; }
.zj-quiz__opts a, .zj-row__opts a { display: flex; align-items: center; height: 100%; min-height: 44px; padding: var(--sk-sp-2) var(--sk-sp-3); border: 1px solid var(--sk-border-strong); border-radius: var(--sk-r-sm); background: var(--sk-surface);
  font-size: var(--sk-fs-sm); font-weight: var(--sk-fw-bold); line-height: 1.25; color: var(--sk-heading); text-wrap: balance; transition: border-color var(--sk-dur-1) var(--sk-ease), color var(--sk-dur-1) var(--sk-ease); }
.zj-quiz__opts a:hover, .zj-row__opts a:hover { border-color: var(--sk-brand); color: var(--sk-brand); }

/* telefon: karta w dwóch liniach (tytuł i jeden fakt), cała karta to link, bez obrazka i bez osobnego wiersza z czasownikiem */
@container zj (max-width: 520px) {
  .zj-bar { padding-inline: var(--sk-sp-4); }
  .zj-card { padding: var(--sk-sp-3) var(--sk-sp-4); }
  .zj-card__row, .zj-card__row:not(:has(.zj-card__img, .zj-card__ico)) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zj-card__img, .zj-card__ico, .zj-card__sub, .zj-card__row .zj-card__text, .zj-card__facts, .zj-card__fresh, .zj-logos, .zj-card__go { display: none; }
  .zj-card__short { display: block; }
  .zj-card--quiz .zj-card__row { grid-template-columns: minmax(0, 1fr); }
  .zj-card__qico { display: inline-grid; place-items: center; color: var(--sk-brand-mid); }
  .zj-card__qico .i { width: 18px; height: 18px; color: var(--sk-brand-mid); }
  .zj-card--quiz .zj-card__text--quiz { display: block; }
  .zj-quiz__opts .zj-opt__l { display: none; }
  .zj-quiz__opts .zj-opt__s { display: inline; }
}

/* M5: blok sprzedażowy w miejscu slotu GAM; ramka i promień jak skrzynki IPS, przycisk primary */
.zj5 { container: zj5 / inline-size; margin-block: var(--sk-sp-6); border: 1px solid var(--sk-border); border-radius: var(--sk-r-lg); overflow: hidden; background: var(--sk-surface); }
.zj5__body { padding: var(--sk-sp-4) var(--sk-sp-5) var(--sk-sp-5); }
.zj5__head { display: flex; gap: var(--sk-sp-3); align-items: flex-start; margin-bottom: var(--sk-sp-4); }
.zj5__ico { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sk-brand-tint); color: var(--sk-brand-mid); }
.zj5__ico .i { width: 20px; height: 20px; }
.zj5__title { font-size: var(--sk-fs-lg); line-height: 1.3; font-weight: var(--sk-fw-black); color: var(--sk-heading); }
.zj5__title:hover { color: var(--sk-heading); text-decoration: underline; text-underline-offset: 2px; }
.zj5__meta { margin-top: 2px; font-size: var(--sk-fs-sm); color: var(--sk-text-muted); }
.zj5__facts { display: grid; gap: var(--sk-sp-1); margin: var(--sk-sp-2) 0 0; padding: 0; list-style: none; font-size: var(--sk-fs-sm); line-height: var(--sk-lh-sm); }
.zj5__facts li { display: flex; gap: var(--sk-sp-2); align-items: flex-start; }
.zj5__facts .i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--sk-success); }
/* przycisk primary z makiety (.btn.btn--primary) */
.zj5__btn { --zj-btn-h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sk-sp-2); min-height: var(--zj-btn-h); padding: 0 var(--sk-sp-6); border: 2px solid var(--sk-brand); border-radius: var(--sk-r-sm); background: var(--sk-surface); color: var(--sk-brand);
  font-size: var(--sk-fs-md); font-weight: var(--sk-fw-bold); line-height: 1.2; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background var(--sk-dur-1) var(--sk-ease), border-color var(--sk-dur-1) var(--sk-ease), color var(--sk-dur-1) var(--sk-ease), transform var(--sk-dur-1) var(--sk-ease); }
.zj5__btn:hover { background: var(--sk-brand-tint); color: var(--sk-brand); }
.zj5__btn:active { transform: translateY(1px); }
.zj5__btn .i { width: 20px; height: 20px; }
.zj5__hotels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sk-sp-4); margin: 0 0 var(--sk-sp-4); padding: 0; list-style: none; }
.zj5__hotel { display: grid; gap: var(--sk-sp-2); color: inherit; }
.zj5__hotel:hover { color: inherit; }
.zj5__hotel:hover .zj5__hname { text-decoration: underline; text-underline-offset: 2px; }
.zj5__img { display: block; aspect-ratio: 16 / 10; border-radius: var(--sk-r-md); overflow: hidden; background: var(--sk-surface-sunken); }
.zj5__img img { width: 100%; height: 100%; object-fit: cover; }
.zj5__htxt { display: grid; gap: 2px; }
.zj5__hname { font-weight: var(--sk-fw-black); color: var(--sk-heading); line-height: 1.3; }
.zj5__term { font-size: var(--sk-fs-xs); color: var(--sk-text-muted); }
.zj5__price { font-size: var(--sk-fs-sm); color: var(--sk-text-muted); }
.zj5__price b { font-size: var(--sk-fs-md); color: var(--sk-heading); font-variant-numeric: tabular-nums; }
@container zj5 (max-width: 620px) {
  .zj5 .zj-bar { padding-inline: var(--sk-sp-4); }
  .zj5__body { padding: var(--sk-sp-4); }
  .zj5__title { display: inline-flex; align-items: center; min-height: 44px; margin-block: calc(var(--sk-sp-2) * -1) 0; }
  .zj5__btn { grid-column: 1 / -1; width: 100%; justify-content: center; }
  .zj5__hotels { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: var(--sk-sp-3); }
  .zj5__hotels li + li { border-top: 1px solid var(--sk-border); }
  .zj5__hotel { grid-template-columns: 88px minmax(0, 1fr); gap: var(--sk-sp-3); align-items: center; padding-block: var(--sk-sp-2); min-height: 44px; }
  .zj5__img { aspect-ratio: 4 / 3; border-radius: var(--sk-r-sm); }
}

/* M3: wiersze jak „Podobna zawartość”, ten sam pasek co M5, mała ikona typu bez tła */
.zj-row { display: grid; grid-template-columns: 20px minmax(0, 1fr) 150px 170px; gap: var(--sk-sp-4); align-items: center; padding: var(--sk-sp-4) var(--sk-sp-5); color: inherit; transition: background var(--sk-dur-1) var(--sk-ease); }
.zj-row__ico { display: inline-grid; place-items: center; align-self: start; padding-top: 2px; color: var(--sk-brand-mid); }
.zj-row__ico .i { width: 20px; height: 20px; }
a.zj-row:hover { background: var(--sk-surface-alt); color: inherit; }
.zj-row__tlink:hover { color: var(--sk-heading); }
a.zj-row:hover .zj-row__title, .zj-row__tlink:hover { text-decoration: underline; text-underline-offset: 2px; }
.zj-row__main { display: grid; gap: 2px; min-width: 0; }
.zj-row__title { font-weight: var(--sk-fw-black); color: var(--sk-heading); }
.zj-row__meta { font-size: var(--sk-fs-sm); color: var(--sk-text-muted); }
.zj-row__meta--one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zj-row__stat { display: grid; justify-items: end; font-size: var(--sk-fs-xs); color: var(--sk-text-muted); text-align: right; }
.zj-row__stat b { font-size: var(--sk-fs-sm); color: var(--sk-heading); white-space: nowrap; }
.zj-row__sec { display: grid; font-size: var(--sk-fs-xs); font-weight: var(--sk-fw-bold); color: var(--sk-heading); }
.zj-row__sec span { font-weight: var(--sk-fw-regular); color: var(--sk-text-muted); }
.zj-row--quiz { grid-template-columns: 20px minmax(0, 1fr); }
/* odpowiedzi quizu w M3 jako chipy (36 px desktop, 44 px telefon), ten sam wygląd co w M2 */
.zj-row__opts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-sp-2); margin-top: var(--sk-sp-2); }
.zj-row__q { margin-right: var(--sk-sp-1); font-size: var(--sk-fs-sm); color: var(--sk-text-muted); font-weight: var(--sk-fw-bold); }
.zj-row__opts a { height: auto; min-height: 36px; padding: 0 var(--sk-sp-3); white-space: nowrap; }
@container zj-more (max-width: 600px) {
  .zj-bar { padding-inline: var(--sk-sp-4); }
  .zj-row { grid-template-columns: 20px minmax(0, 1fr); gap: 2px var(--sk-sp-3); padding: var(--sk-sp-3) var(--sk-sp-4); min-height: 44px; }
  .zj-row__stat { grid-column: 2; display: flex; justify-content: flex-start; gap: var(--sk-sp-1); align-items: baseline; }
  .zj-row__stat:empty, .zj-row__sec { display: none; }
  .zj-row__tlink { display: flex; align-items: center; min-height: 44px; margin-block: calc(var(--sk-sp-3) * -1) calc(var(--sk-sp-1) * -1); }
  .zj-row__opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sk-sp-2); }
  .zj-row__q { grid-column: 1 / -1; }
  .zj-row__opts a { min-height: 44px; white-space: normal; }
  .zj-row__opts .zj-opt__l { display: none; }
  .zj-row__opts .zj-opt__s { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .zj-card, .zj-row, .zj-quiz__opts a, .zj-row__opts a, .zj5__btn { transition: none; } }

/* M5 wyjazdy, wersja zwarta: nagłówek, opis i przycisk w jednej linii, 3 poziome kafle hoteli (telefon: 2 wiersze) */
.zj5__body--trips { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head btn" "hotels hotels"; gap: var(--sk-sp-3) var(--sk-sp-4); align-items: center; padding: var(--sk-sp-3) var(--sk-sp-5) var(--sk-sp-4); }
.zj5__body--trips .zj5__head { grid-area: head; align-items: center; margin: 0; }
.zj5__body--trips .zj5__ico { width: 32px; height: 32px; }
.zj5__body--trips .zj5__ico .i { width: 18px; height: 18px; }
.zj5__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sk-sp-3); margin: 0; min-width: 0; }
.zj5__body--trips .zj5__meta { margin: 0; }
.zj5__body--trips .zj5__btn { grid-area: btn; --zj-btn-h: 40px; }
.zj5__body--trips .zj5__hotels { grid-area: hotels; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sk-sp-3); margin: 0; }
.zj5__body--trips .zj5__hotel { grid-template-columns: 96px minmax(0, 1fr); gap: var(--sk-sp-3); align-items: center; }
.zj5__body--trips .zj5__img { width: 96px; height: 72px; aspect-ratio: auto; border-radius: var(--sk-r-sm); }
.zj5__body--trips .zj5__htxt { gap: 0; min-width: 0; }
.zj5__body--trips .zj5__hname { font-size: var(--sk-fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zj5__body--trips .zj5__term { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: var(--sk-lh-xs); }
.zj5__body--trips .zj5__price { font-size: var(--sk-fs-xs); }
.zj5__body--trips .zj5__price b { font-size: var(--sk-fs-sm); }
@container zj5 (max-width: 620px) {
  .zj5__body--trips { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "hotels" "btn"; gap: var(--sk-sp-2); padding: var(--sk-sp-3) var(--sk-sp-4) var(--sk-sp-4); }
  .zj5__body--trips .zj5__head { align-items: flex-start; }
  .zj5__line { display: grid; gap: 0; }
  .zj5__body--trips .zj5__title { min-height: 44px; margin: calc(var(--sk-sp-2) * -1) 0 calc(var(--sk-sp-3) * -1); }
  .zj5__body--trips .zj5__btn { --zj-btn-h: 44px; width: 100%; justify-content: center; margin-top: var(--sk-sp-1); }
  .zj5__body--trips .zj5__hotels { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zj5__body--trips .zj5__hotels li:nth-child(n+3) { display: none; }
  .zj5__body--trips .zj5__hotels li + li { border-top: 1px solid var(--sk-border); }
  .zj5__body--trips .zj5__hotel { grid-template-columns: 56px minmax(0, 1fr); padding-block: var(--sk-sp-2); min-height: 44px; }
  .zj5__body--trips .zj5__img { width: 56px; height: 42px; }
  .zj5__body--trips .zj5__hname { white-space: normal; }
  .zj5__body--trips .zj5__term { -webkit-line-clamp: 1; }
}
/* M5 ubezpieczenie: ten sam zwarty układ co wyjazdy, fakty w jednej linii pod nagłówkiem */
.zj5--ins .zj5__facts { grid-area: hotels; display: flex; flex-wrap: wrap; gap: var(--sk-sp-1) var(--sk-sp-6); margin: 0; padding-left: calc(32px + var(--sk-sp-3)); }
@container zj5 (max-width: 620px) {
  .zj5--ins .zj5__facts { display: grid; padding-left: 0; }
  .zj5--ins .zj5__title { margin-bottom: calc(var(--sk-sp-2) * -1); }
}

/* M1 i M4: linki z ikoną typu (16 px, kolor linku), bez kropek między nimi */
.zj-line__links { gap: var(--sk-sp-4); }
.zj-line__links a { display: inline-flex; align-items: center; gap: var(--sk-sp-1); }
.zj-line__links a .i { width: 16px; height: 16px; flex: none; }
.zj-line__links a + a::before, .zj-line--bar .zj-line__links a + a::before { content: none; }
.zj-line--bar .zj-line__links a .i { color: var(--sk-on-brand); }
.zj-line--bar { gap: var(--sk-sp-3); }
.zj-line--bar .zj-line__links { gap: var(--sk-sp-3); }
.zj-line--bar { padding-inline: var(--sk-sp-3); }
.zj-line--bar .zj-line__lbl { gap: var(--sk-sp-1); }

/* M4 i M1 w kontenerach: układ zależy od szerokości paska, nie okna */
.zj-m4 { container: m4 / inline-size; min-width: 0; }
.zj-m1 { container: m1 / inline-size; min-width: 0; }
.zj-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@container m4 (max-width: 640px) {
  .zj-line--bar .zj-line__lt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .zj-line--bar .zj-opt__l { display: none; }
  .zj-line--bar .zj-opt__s { display: inline; }
}
@container m4 (max-width: 460px) {
  .zj-line--bar { min-height: 44px; }
  .zj-line--bar .zj-line__links a { min-height: 44px; }
  .zj-line--bar .zj-line__links a:nth-child(n+4) { display: none; }
}
@container m4 (max-width: 340px) {
  .zj-line--bar { gap: var(--sk-sp-2); padding-inline: var(--sk-sp-2); }
  .zj-line--bar .zj-line__links { gap: var(--sk-sp-2); }
}
@container m4 (max-width: 296px) { .zj-line--bar .zj-line__links a .i { display: none; } }
@container m1 (max-width: 600px) {
  .zj-line { flex-wrap: nowrap; gap: var(--sk-sp-2); }
  .zj-line__links { gap: var(--sk-sp-2); }
  .zj-line__links a { min-height: 44px; }
  .zj-line__links a:nth-child(n+4) { display: none; }
  .zj-badge { padding: 0 var(--sk-sp-1); }
  .zj-badge__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@container m1 (max-width: 300px) { .zj-line__links a:nth-child(n+3) { display: none; } }

/* M5 hotele: kafle wyrównane do góry, termin i wyżywienie w osobnych wierszach */
.zj5__body--trips .zj5__hotel { align-items: start; }
.zj5__body--trips .zj5__hname { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.zj5__body--trips .zj5__term { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: unset; }
@container zj5 (min-width: 621px) and (max-width: 880px) {
  .zj5__body--trips .zj5__hotel { grid-template-columns: 80px minmax(0, 1fr); }
  .zj5__body--trips .zj5__img { width: 80px; height: 60px; }
}
@container zj5 (max-width: 620px) {
  .zj5__body--trips .zj5__hotel { align-items: center; }
  .zj5__body--trips .zj5__hname { -webkit-line-clamp: 1; }
}

/* M5 hotele: mały przycisk „Zobacz hotele” (32 px), pole dotyku 44 px przez ::after */
.zj5 .zj5__body--trips .zj5__btn { --zj-btn-h: 32px; position: relative; padding: 0 var(--sk-sp-3); font-size: var(--sk-fs-sm); }
.zj5 .zj5__body--trips .zj5__btn::after { content: ""; position: absolute; inset: calc(var(--sk-sp-2) * -1) 0; }
@container zj5 (max-width: 620px) {
  .zj5 .zj5__body--trips .zj5__btn { --zj-btn-h: 32px; width: auto; justify-self: start; margin-top: var(--sk-sp-2); }
}

/* M3 nad „Podobną zawartością”: skrzynka jak widget IPS (w makiecie .f-box i .f-rows), odstępy jak ramka M3 w makiecie */
.zj-more { container: zj-more / inline-size; margin-block: var(--sk-sp-6) var(--sk-sp-5); border: 1px solid var(--sk-border); border-radius: var(--sk-r-lg); background: var(--sk-surface); overflow: hidden; }
.zj-more .f-rows { list-style: none; margin: 0; padding: 0; }
.zj-more .f-rows > li + li { border-top: 1px solid var(--sk-border); }
/* M4 w wierszu „Obserwujący” jak w makiecie: najwyżej 640 px, więc zawsze sygnet i krótkie etykiety */
.zj-m4 { flex: 1 1 480px; max-width: 640px; }
/* wiersz IPS z „Obserwujący” dostaje klasę od skryptu, gdy stoi w nim M4; clearfix IPS (::before/::after) byłby tu pustymi elementami flex */
.zj-m4-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-sp-2) var(--sk-sp-4); }
.zj-m4-row::before, .zj-m4-row::after { content: none; display: none; }
.zj-m4-row > .ipsPos_right { float: none; flex: none; margin-left: auto; }
/* telefon: IPS ukrywa wiersz „Obserwujący”, więc M4 stoi pod tytułem */
.zj-m4--top { margin-top: var(--sk-sp-3); }

/* M4: granatowy pasek tylko na szerokość linków (kontener zostaje do 640 px dla zapytań @container), bez pustego granatu do „Obserwujący” */
.zj-m4 .zj-line--bar { width: fit-content; max-width: 100%; }

/* telefon (próg .ipsResponsive_pull IPS): posty idą od krawędzi do krawędzi, M5 i M6 między nimi tak samo; M3 zostaje równo z „Podobną zawartością” */
@media (max-width: 767px) {
  #zj-m5-slot > .zj5, .zj--m6 { margin-inline: -10px; }
}

/* M6 za 10. postem: karta M2 (pasek i karta jako całość), odstęp jak między postami */
.zj--m6 { margin-block: 0 var(--sk-sp-5); }

/* M7 na końcu kolumny bocznej (ok. 300 px): blok M5 w układzie wąskim z kontenera zj5 albo wiersze M3 w układzie wąskim z kontenera zj-more */
.zj5--side, .zj-more--side { margin-block: var(--sk-sp-4) 0; }
/* M7 przyklejony do ekranu pod nagłówkiem serwisu (--zj-top mierzy skrypt) aż do końca wątku: kolumna to komórka tabeli IPS na wysokość postów.
   IPS daje kolumnie overflow: hidden (przycina szerokie reklamy), które robi z niej kontener przewijania i wyłącza sticky; clip przycina tak samo
   bez tego skutku (przeglądarka bez clip zostaje przy hidden, M7 wtedy po prostu stoi na końcu kolumny) */
#ipsLayout_sidebar.zj-side { overflow: hidden; overflow: clip; }
.zj5--side, .zj-more--side { position: sticky; top: calc(var(--zj-top, 0px) + var(--sk-sp-4)); transition: opacity var(--sk-dur-1) var(--sk-ease), visibility var(--sk-dur-1) var(--sk-ease); }
/* M7 gaśnie, gdy w oknie jest M5, M6 albo M3 (skrypt, IntersectionObserver): bez dwóch granatowych bloków na jednym ekranie, układ bez zmian */
.zj5--side.zj-off, .zj-more--side.zj-off { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .zj5--side, .zj-more--side { transition: none; } }
.zj5--offer .zj5__offer { grid-area: hotels; display: block; margin: 0; padding-left: calc(32px + var(--sk-sp-3)); }
/* M7 tylko na desktopie (mysz): bez pola dotyku 44 px z ujemnymi marginesami z układu wąskiego, inaczej zawinięty tytuł nachodzi na opis */
.zj5--side .zj5__body--trips .zj5__title { min-height: 0; margin: 0; }

/* stary baner graficzny „Ubezpieczenia” 300×250 w kolumnie bocznej zastępuje M5 (przejęty slot GAM sam nie ma wysokości: w środku jest tylko skrypt) */
[data-role="sidebarAd"] a[href="/ubezpieczenia/"]{display:none}