/* ══════════════════════════════════════════════════════════════════════════
   Zenturi - Vlnitý oddeľovač sekcií (1440x56 z dizajnu)
   Asset: assets/img/wave-separator.png (biela vlna 2880x112, export z Figmy).
   Varianty cez pozadie sekcie pod/nad.
   ══════════════════════════════════════════════════════════════════════════ */

.zn-wavesep {
  height: 56px;
  background-image: url('../../../assets/img/wave-navy.png');   /* originálny fill */
  background-repeat: repeat-x;
  background-position: top left;
  background-size: auto 100%;
}

/* Navy vlna na bielom pozadí (default — prechod tmavá sekcia → biela) */
.zn-wavesep--white-on-dark { background-color: var(--color-bg); }

/* Navy vlna na teal pozadí */
.zn-wavesep--white-on-secondary { background-color: var(--color-secondary); }

/* Navy vlna vypuklá HORE na svetlom pozadí (prechod svetlá sekcia → tmavá sekcia pod).
   scaleY(-1) preklopí navy dole (splynie s tmavou sekciou), pozadie = bg-medium
   (splynie so svetlou sekciou nad, napr. bento-tabs). */
/* Vlnka hore cez PRE-FLIPNUTÝ asset (wave-navy-up.png) namiesto `transform: scaleY(-1)`.
   Dôvod: Safari renderoval pri flip-transforme subpixelovú čiaru na hornej hrane vlnky
   (na Chrome sa neprejaví — overené 1x aj 2x, 1440 aj 1920, presné celé pixely). Bez
   transformu tá subpixel čiara fyzicky nemôže vzniknúť. Vizuál 1:1 (ten istý obrázok, len
   preklopený v súbore). */
.zn-wavesep--navy-on-medium {
  background-color: var(--color-bg-medium);
  background-image: url('../../../assets/img/wave-navy-up.png');
}

/* Navy vlna vypuklá HORE na BIELOM pozadí (prechod biela sekcia → tmavá sekcia pod).
   Rovnaký princíp/asset ako --navy-on-medium (wave-navy-up.png, žiadny CSS transform —
   viď Safari subpixel dôvod vyššie), len iná farba jamiek: biela namiesto bg-medium.
   Chýbajúca kombinácia (Maroš 2026-07-22, Cenník: discounts (biela) → footer) — doteraz
   existoval len bg-medium variant tejto vlny, discounts sekcia je biela → viditeľný švík
   inej farby nad vlnou. */
.zn-wavesep--navy-on-light {
  background-color: var(--color-bg);
  background-image: url('../../../assets/img/wave-navy-up.png');
}

/* Otočená (vlna hore) */
.zn-wavesep--flip { transform: scaleY(-1); }

/* Navy vlna (default obrázok, nepreklopený) na bg-medium pozadí — prechod
   tmavá sekcia hore → bg-medium sekcia dole (napr. zenai-feature → nasledujúca
   svetlá sekcia). Rovnaký princíp ako --white-on-dark, len iná farba jamiek.
   Overené 2026-07-22 (Maroš, pixel-scan + md5 zhoda s Figma exportom 857:49257
   aj mobil 1200:43196 — ten istý wave-navy.png, len na inom pozadí). */
.zn-wavesep--medium-on-dark { background-color: var(--color-bg-medium); }

/* Bg-medium vlna na bielom pozadí — prechod bg-medium sekcia hore → biela
   sekcia dole, BEZ tmavej sekcie na oboch stranách (chýbajúca kombinácia,
   Compare stránka 2026-07-23: logo-strip [bg-medium] → wave → section-base
   [biela, centrovaný header]; Figma image 25 na 566:14237 - meraním: hore plná
   #ecf2f4, jamky biele). Doteraz VŠETKÝCH 6 variantov delilo navy/biela/teal -
   žiadny nemal samotnú vlnu vo farbe bg-medium, preto nový asset
   `wave-medium.png` (rovnaká geometria ako wave-navy.png - plný vrch, vlnky
   DOLE - RGB kanál prefarbený #023047 → #ecf2f4, alpha kanál 1:1 zachovaný,
   deterministický rekolor schváleného tvaru, nie nová grafika). POZOR: prvý
   pokus bol omylom rekolor wave-navy-UP.png (plný SPODOK) → vlna sa renderovala
   zrkadlovo (biela hore, tvrdá medium hrana dole) - správny zdroj je nepreklopený
   wave-navy.png, rovnako ako pri white-on-dark. */
.zn-wavesep--medium-on-light {
  background-color: var(--color-bg);
  background-image: url('../../../assets/img/wave-medium.png');
}

/* Mobil (≤767.98px): Figma mobilný hero-level3 (1200:42994, wave overlay
   I1200:42994;1200:42608) — vlna 36.8px, tile 950.4×36.96px. Pomer tile je
   totožný s desktopovým assetom (950.4/36.96 = 2880/112), takže
   `background-size: auto 100%` sa preškáluje sám — stačí zmeniť height.
   Tablet (768–1199.98px) ostáva na 56px zámerne: vlna je tam vizuálne
   kompletná (overené screenshotmi 768/1024). */
@media (max-width: 767.98px) {
  .zn-wavesep { height: 36.8px; }
}