/*
 Theme Name: Prografix
 Theme URI: https://www.ingen.pl
 Description: Prografix - Divi Child Theme
 Author: Elegant Themes & INGEN
 Author URI: https://www.ingen.pl
 Template: Divi
 Version: 1.0.0
*/

/* =Theme customization starts here
------------------------------------------------------- */

/* ── Globalne ──────────────────────────────────────────── */

::selection {
	background: #ffa400;
	color: #231f20;
}

h1, h2, h3, h4, h5, h6, p, a {
	font-family: muller;
}

.muller {
	font-family: muller;
	font-weight: unset;
}

/* ── Style wizualne ────────────────────────────────────── */

.accent-plus {
	color: #ffa400;
	font-weight: 700;
}

/* ── Utilities — szerokości treści ─────────────────────── */

.content-width-1080 {
	width: 80%;
	max-width: 1080px;
}

.content-width-1920 {
	width: 80%;
	max-width: 1920px;
}

/* ── Utilities — flex layout ───────────────────────────── */

.wiersz-flex {
	display: flex;
	flex-flow: row wrap;
}

.kolumna-flex-center {
	align-content: center;
}

.kolumna-flex-end {
	align-content: flex-end;
}

.kolumna-proces-box {
	min-height: 66vh;
	padding: 3rem;
}

.wiersz-akapit-proces-box {
	margin: 4rem auto;
}

/* ── Utilities — elementy z przyciskiem/animacją ───────── */

.moving-element {
	transition: transform 0.1s ease-out;
	will-change: transform;
}

.right-arrow-progress::after {
	content: url("/wp-content/uploads/2026/03/pgx-arrow-wh.svg");
	display: inline-block;
	position: absolute;
	width: 40px;
	height: auto;
	top: 0px;
	margin: 31% 75%;
}


/* ── Menu poziome (stopka) ─────────────────────────────── */

.horizontal_menu {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}

ul.horizontal_menu {
	list-style-type: none;
}

.horizontal_menu_element {
	border-bottom: solid 1px #231f20;
	padding-bottom: 1em;
	font-family: muller;
	font-weight: 700;
	color: #231f20;
}

.horizontal_menu_dynamic_element {
	flex-grow: 1;
}

.horizontal_menu_last_element {
	flex-grow: 0;
}

.horizontal_menu_element::before {
	content: "";
	position: absolute;
	bottom: 1em;
	width: 1em;
	height: 1em;
	background-color: #231f20;
	border-radius: 50%;
	transition: all 0.3s ease-in-out;
}

/* ── Horizontal Scroll (pgx-hscroll / pgx-hsnap) ──────── */

/*
 * pgx-hscroll  — swobodny scroll poziomy, zmienne szerokosci wierszy
 * pgx-hsnap    — scroll z zatrzaskiwaniem (slideshow), wiersze ~100vw
 *
 * Szerokosci wierszy ustawia sie klasami pomocniczymi:
 *   .pgx-w-60, .pgx-w-30  itd. (dodac w Divi: wiersz > Zaawansowane > Klasa CSS)
 *   lub przez Divi: wiersz > Projekt > Rozmiar > Szerokosc niestandardowa
 *
 * Gap miedzy wierszami: margin-right wiersza w ustawieniach Divi
 */

@media (min-width: 981px) {

	/* Sekcja — pelna wysokosc, overflow ukryty.
	   Padding-top 80px = miejsce na fixed nav (zmienic jesli wysokosc
	   paska nawigacji jest inna). Padding mozna tez nadpisac z Divi. */
	.pgx-hscroll,
	.pgx-hsnap {
		height: 100vh !important;
		box-sizing: border-box !important;
		overflow: hidden !important;
		padding-top: 80px !important;
		padding-bottom: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Track — kontener flex (tworzony przez JS).
	   height: 100% wypelnia sekcje po odjecia padding-top.
	   align-items: center — wiersze sa wycentrowane w pionie. */
	.pgx-hscroll__track,
	.pgx-hsnap__track {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 100%;
		width: max-content;
		will-change: transform;
	}

	/* Wiersze Divi — reset domyslnych ograniczen.
	   height: auto — wiersz przyjmuje swoja naturalna wysokosc (tresc
	   + ewentualne min-height ustawione w Divi). Nie jest juz wymuszany
	   na pelna wysokosc sekcji. Marginesy pionowe dzialaja normalnie. */
	.pgx-hscroll__track > .et_pb_row,
	.pgx-hsnap__track > .et_pb_row {
		flex-shrink: 0 !important;
		height: auto !important;
		max-width: none !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* pgx-hsnap: domyslna szerokosc wiersza = 100vw (pokaz slajdow) */
	.pgx-hsnap__track > .et_pb_row {
		width: 100vw;
	}

	/* Klasy pomocnicze szerokosci (tylko desktop, stale wartosci px) */
	.pgx-w-300  { width: 300px  !important; max-width: 300px  !important; }
	.pgx-w-400  { width: 400px  !important; max-width: 400px  !important; }
	.pgx-w-500  { width: 500px  !important; max-width: 500px  !important; }
	.pgx-w-600  { width: 600px  !important; max-width: 600px  !important; }
	.pgx-w-700  { width: 700px  !important; max-width: 700px  !important; }
	.pgx-w-800  { width: 800px  !important; max-width: 800px  !important; }
	.pgx-w-900  { width: 900px  !important; max-width: 900px  !important; }
	.pgx-w-1000 { width: 1000px !important; max-width: 1000px !important; }
	.pgx-w-1200 { width: 1200px !important; max-width: 1200px !important; }
	.pgx-w-1400 { width: 1400px !important; max-width: 1400px !important; }


	/* Klasy pomocnicze szerokosci (tylko desktop) */
	.pgx-w-100 { width: 100vw !important; max-width: 100vw !important; }
	.pgx-w-90  { width: 90vw  !important; max-width: 90vw  !important; }
	.pgx-w-80  { width: 80vw  !important; max-width: 80vw  !important; }
	.pgx-w-70  { width: 70vw  !important; max-width: 70vw  !important; }
	.pgx-w-60  { width: 60vw  !important; max-width: 60vw  !important; }
	.pgx-w-50  { width: 50vw  !important; max-width: 50vw  !important; }
	.pgx-w-40  { width: 40vw  !important; max-width: 40vw  !important; }
	.pgx-w-30  { width: 30vw  !important; max-width: 30vw  !important; }
	.pgx-w-25  { width: 25vw  !important; max-width: 25vw  !important; }
	.pgx-w-20  { width: 20vw  !important; max-width: 20vw  !important; }
}

/* Mobile i tablet — normalne przewijanie pionowe */
@media (max-width: 980px) {
	.pgx-hscroll,
	.pgx-hsnap {
		height: auto !important;
		overflow: visible !important;
	}

	/* Wiersze ukladaja sie pionowo: reset marginesu prawego (gap z Divi),
	   centrowanie i dolny odstep zamiast bocznego */
	.pgx-hscroll > .et_pb_row,
	.pgx-hsnap > .et_pb_row {
		margin-right: auto !important;
		margin-left: auto !important;
		margin-bottom: 2rem !important;
		width: 90% !important;
		max-width: 600px !important;
	}
}

/* ── GSAP Scroll Sections (pin + lista + obrazy) ───────── */

.pgx-scroll-section {
	box-sizing: border-box !important;
	padding-top: 80px !important;
	/*padding-bottom: 60px !important;*/
}

@media (max-width: 980px) {
	.pgx-scroll-section {
		min-height: 100vh !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		padding-top: 36px !important;
		padding-bottom: 0 !important;
	}
}

.pgx-scroll-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.pgx-scroll-item {
	font-size: 1.4rem;
	color: rgba(0, 0, 0, 0.25);
	transition: color 0.4s ease, font-size 0.4s ease;
	margin-top: 1em;
}

.pgx-scroll-item.is-active {
	color: #000000;
	font-size: 1.6em;
}

.pgx-scroll-images {
	display: grid;
	width: 100%;
}

.pgx-scroll-image {
	grid-row: 1;
	grid-column: 1;
	width: 100%;
	display: block;
	opacity: 0;
	border-radius: 10px;
}

/* ── GSAP Icons Block (trzy ikony scrubowane, moduł Kod) ─── */

/* tylko na mobile */
@media (min-width: 981px) {
	.pgx-icons-block {
		display: none;
	}
}

@media (max-width: 980px) {
	.pgx-icons-block {
		position: relative;
		width: 100%;
		max-width: 512px;
		height: 160px;
		margin: 0 auto;
		overflow: hidden;
	}

	.pgx-icon-item {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.pgx-icon-circle {
		width: 100px;
		height: 100px;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.pgx-icon-circle svg,
	.pgx-icon-circle img {
		width: 100%;
		height: 100%;
	}

	.pgx-icon-label {
		font-size: 0.85rem;
		text-align: center;
		margin: 0;
		padding: 0;
		color: #ffffff;
	}
}

/* Responsywność: tekst zawsze nad obrazami */
@media (max-width: 980px) {
	.pgx-scroll-section .et_pb_row {
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
	}

	.pgx-content-col {
		order: 1 !important;
		width: 100% !important;
		min-height: 50vh !important;
		padding-left: 10vw;
		padding-right: 10vw;
	}

	.pgx-images-col {
		order: 2 !important;
		width: 100% !important;
		min-height: 50vh !important;
	}
}