/* =========================================================================
   Pomelo — Karuzela nowości (widget Elementora)
   Prefiks: pmns-
   Kanwa 1920 x [wysokosc], jasny pas na [odstep pasa]. Grafika slajdu moze miec
   dowolny kadr — liczy sie tylko jej szerokosc (--bg-w) i zapas nad pasem
   (--band-top). Poza kanwa tlo jest przezroczyste, wiec sekcja lapie tlo strony.
   ========================================================================= */

.pmns,
.pmns * { box-sizing: border-box; }

/* motyw pomelobox trzyma nav na z-index:1 — sekcja musi zostac pod nim */
.pmns {
  position: relative;
  z-index: 0;
  isolation: isolate;
  width: 100%;
  --pmns-canvas-h: 900;
  --pmns-band-offset: 243;
  --pmns-band-h: 517;
  --pmns-nav-pull: 100;
  --pmns-nav-dir: -1;
}

/* Elementor e-con potrafi zwinac widget bez intrinsic width do zera */
.elementor-widget:has(> .elementor-widget-container > .pmns),
.elementor-widget:has(> .pmns) { width: 100%; }

.pmns-viewport { overflow: hidden; width: 100%; }
.pmns-track {
  display: flex;
  will-change: transform;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.pmns-track.pmns-nodrag { transition: none; }
.pmns-slide { flex: 0 0 100%; min-width: 0; }

/* --- kanwa ------------------------------------------------------------- */
.pmns-canvas {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  aspect-ratio: 1920 / var(--pmns-canvas-h);
  overflow: hidden;
  container-type: inline-size;
}

/* Uwaga: --u musi byc liczone na DZIECKU kanwy — element bedacy kontenerem
   nie widzi wlasnych jednostek cq. */
img.pmns-bg {
  --u: calc(100cqw / 1920);
  position: absolute;
  left: 0;
  display: block;
  max-width: none !important;
  width: calc(var(--bg-w, 1920) * var(--u)) !important;
  height: auto !important;
  top: calc((var(--pmns-band-offset) - var(--band-top, 243)) * var(--u));
  border-radius: 0;
}
/* W makiecie zdjecie konczy sie rowno z dolna krawedzia pasa. Wyzszy plik zostaje
   docienty (--cut-bottom w jednostkach kanwy, liczone w PHP z wymiarow pliku). */
img.pmns-bg--d {
  clip-path: inset(0 0 calc(var(--cut-bottom, 0) * var(--u)) 0);
}
img.pmns-bg--m { display: none; }

/* --- kolumna tresci (wycentrowana w jasnym pasie) ----------------------- */
.pmns-copy {
  --u: calc(100cqw / 1920);
  /* Jednostka TEKSTU. Zwykle rowna --u (makieta 1:1), ale nie schodzi ponizej
     podlogi --pmns-utmin (domyslnie 1px = pelne 16 px na opisie), zeby na wezszych
     ekranach tekst nie robil sie mikroskopijny — zamiast tego kolumna rozpycha sie
     w lewej polowie kanwy. Drugi czlon pilnuje, zeby sie w tej polowie zmiescila.
     --pmns-fit dokleja JS, gdy przy tym rozmiarze tresc nie miesci sie w wysokosci
     jasnego pasa (patrz fitCopy() — liczone z faktycznej dlugosci tekstu, bo tej
     CSS nie zna). */
  --ut: calc(var(--pmns-fit, 1) * min(
    max(var(--u), var(--pmns-utmin, 1px)),
    calc((50cqw - 24px) / 630)      /* kolumna musi zmiescic sie w lewej polowie */
  ));
  position: absolute;
  /* prawa krawedz kolumny trzyma sie srodka kanwy (jak w makiecie: 330 + 630 = 960) */
  right: 50%;
  top: calc(var(--pmns-band-offset) * var(--u));
  width: calc(630 * var(--ut));
  height: calc(var(--pmns-band-h) * var(--u));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: calc(32 * var(--ut));
  text-align: center;
}
.pmns-head { display: flex; flex-direction: column; gap: calc(12 * var(--ut)); width: 100%; }
.pmns-title-wrap {
  display: flex; flex-direction: column;
  gap: calc(8 * var(--ut));
  margin-bottom: calc(-23 * var(--ut));
}

/* kroje jawnie — motyw WP nadpisuje dziedziczony font-family na h2/p/a */
.pmns .pmns-eyebrow {
  margin: 0;
  font-family: Rubik, sans-serif !important;
  font-weight: 500 !important;
  font-size: calc(14 * var(--ut));
  line-height: 1.2;
  letter-spacing: calc(.84 * var(--ut));
  text-transform: uppercase;
  color: var(--pmns-eyebrow-color, #595959);
}
.pmns .pmns-title {
  margin: 0;
  font-family: Rubik, sans-serif !important;
  font-weight: 700 !important;
  font-size: calc(40 * var(--ut));
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--pmns-title-color, #1f1f1f);
}
.pmns .pmns-script {
  margin: 0;
  font-family: Moonbright, "Kaushan Script", cursive !important;
  font-weight: 400 !important;
  font-size: calc(64 * var(--ut));
  line-height: 1.5;
  color: var(--pmns-script-color, #b3b33f);
  white-space: nowrap;           /* podtytul zawsze w jednej linii */
}
.pmns .pmns-text {
  margin: 0;
  font-family: Montserrat, sans-serif !important;
  font-weight: 400 !important;
  font-size: calc(16 * var(--ut));
  line-height: 1.4;
  color: var(--pmns-text-color, #333);
}
/* akapity z edytora: bez marginesow, ale kolejny akapit oddzielony pusta linia
   (w makiecie bloki opisu dzieli dokladnie jedna wolna linijka) */
.pmns .pmns-text p { margin: 0; }
.pmns .pmns-text p + p { margin-top: 1.4em; }

.pmns .pmns-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--pmns-cta-bg, #fff);
  border: 1px solid var(--pmns-cta-border, #595959);
  border-radius: calc(20.118 * var(--ut));
  padding: calc(12.071 * var(--ut)) calc(32 * var(--ut));
  font-family: Rubik, sans-serif !important;
  font-weight: 700 !important;
  font-size: calc(14 * var(--ut));
  line-height: 1;
  text-transform: uppercase;
  color: var(--pmns-cta-color, #333);
  transition: background .2s, color .2s, border-color .2s;
}
/* motyw dorzuca wlasne tlo na hover/tap — neutralizujemy w obrebie sekcji */
.pmns .pmns-cta:hover,
.pmns .pmns-cta:focus-visible,
.pmns .pmns-cta:active {
  background: var(--pmns-cta-bg-hover, #1f1f1f) !important;
  border-color: var(--pmns-cta-bg-hover, #1f1f1f) !important;
  color: var(--pmns-cta-color-hover, #fff) !important;
}

/* --- nawigacja ---------------------------------------------------------
   Stoi „odstepem nad nawigacja" ponizej dolnej krawedzi pasa. Przewaznie miesci
   sie jeszcze w kanwie, wiec podciagamy ja ujemnym marginesem (--pmns-nav-dir: -1);
   przy duzym odstepie wychodzi pod kanwe i kierunek zmienia sie na dodatni.
   Wartosc skaluje sie z sekcja: procent liczy sie od szerokosci rodzica. */
.pmns-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  margin-top: calc(var(--pmns-nav-dir, -1) * min(var(--pmns-nav-pull) / 1920 * 100%, var(--pmns-nav-pull) * 1px));
}
.pmns .pmns-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 10px;
  border: 0; border-radius: 12px;
  background: transparent;
  cursor: pointer;
  color: #595959;
  transition: background .2s;
}
.pmns .pmns-arrow:hover,
.pmns .pmns-arrow:focus-visible { background: #f1f1f1 !important; color: #595959 !important; }
.pmns .pmns-arrow[disabled] { opacity: .35; cursor: default; }
.pmns-arrow svg { width: 24px; height: 24px; display: block; }
.pmns-arrow--prev svg { transform: rotate(180deg); }

.pmns-dots { display: flex; align-items: center; gap: 10px; padding: 10px; }
.pmns .pmns-dot {
  width: 12px; height: 12px; padding: 0;
  border: 0; border-radius: 50%;
  background: #d9d9d9 !important;
  cursor: pointer;
  transition: background .2s;
}
.pmns .pmns-dot[aria-current="true"] { background: #8e8e8e !important; }

/* --- mobile ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Slajd plynie: tresc, pod nia grafika. Slajdy NIE rozciagaja sie do wysokosci
     najwyzszego (align-items: flex-start) — inaczej krotszy slajd dostawal luz,
     ktory ladowal miedzy przyciskiem a zdjeciem (nawet ~100 px roznicy). */
  .pmns-track { align-items: flex-start; }
  .pmns-slide { display: flex; }
  .pmns-canvas {
    aspect-ratio: auto;
    max-width: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  img.pmns-bg--d { display: none; }
  /* --pmns-trim ustawia JS: to udzial przezroczystego pasa nad trescia pliku,
     wyrazony w szerokosciach kanwy. Bez tego slajd z luznym kadrem (koktajle mialy
     ~98 px pustego u gory) odjezdzal od przycisku. */
  img.pmns-bg--m {
    display: block;
    position: static;
    order: 2;
    margin-top: calc(-1 * var(--pmns-trim, 0) * 100cqw);
    width: 100% !important;
    height: auto !important;
    top: auto;
  }
  .pmns-copy {
    --u: calc(100cqw / 390);
    /* na mobile makieta jest 1:1 z ekranem — zadnej podlogi ani polowy kanwy */
    --ut: var(--u);
    position: static;
    order: 1;
    width: 100%;
    height: auto;
    padding: calc(40 * var(--u)) calc(16 * var(--u)) calc(51 * var(--u));
    justify-content: flex-start;
    gap: calc(24 * var(--u));
  }
  .pmns-head { gap: calc(24 * var(--u)); }
  .pmns-title-wrap { gap: calc(8 * var(--u)); margin-bottom: calc(-14 * var(--u)); }
  /* na waskim ekranie nie wymuszamy jednej linii — dluzszy podtytul uciekalby poza kadr */
  .pmns .pmns-script { font-size: calc(40 * var(--ut)); white-space: normal; }
  .pmns .pmns-text br { display: none; }
  .pmns-nav { margin-top: 24px; }
}