/**
 * IOPRO — klasy pomocnicze dla treści budowanej w Elementorze (darmowa wersja).
 *
 * WAŻNE: to NIE jest "framework" klas do wszystkiego. Kolory, typografia,
 * odstępy, tła, obramowania i cienie ustawiasz przez natywny, darmowy
 * panel stylu Elementora (zakładka Styl / Zaawansowane) — patrz README.md
 * po dokładne wartości. Te klasy pokrywają WYŁĄCZNIE kilka efektów, których
 * darmowy panel Elementora nie ma wprost: warstwowe tło z gradientem i
 * kropkami (Hero/CTA), plakietki-tagi oraz gotowe "przepisy" na karty,
 * żeby nie klikać tych samych ustawień tła/obramowania/paddingu na każdej
 * z ok. 28 kart osobno.
 *
 * Jak używać: w edytorze Elementor zaznacz sekcję/kontener/widżet →
 * zakładka Zaawansowane → pole "Klasy CSS" → wpisz nazwę klasy (bez kropki).
 * Kilka klas naraz oddzielaj spacją, np.: iopro-card iopro-card--soft
 */

/* ---------------------------------------------------------------------
 * 1) Baner z niebieskim gradientem — Hero i baner CTA
 * ------------------------------------------------------------------- */
.iopro-gradient-banner {
	position: relative;
	overflow: hidden;
	border-radius: 1.5rem;
	background-image: radial-gradient(circle at 50% 100%, hsla(195, 100%, 70%, 0.18), transparent 60%),
		radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
		linear-gradient(to bottom right, #005dd6, #006eff, #1966ff);
	background-size: 100% 100%, 14px 14px, 100% 100%;
}

/* Nadtytuł nad nagłówkiem H1/H2 wewnątrz banera z gradientem (jasny tekst) */
.iopro-eyebrow--on-dark {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.85);
}

/* ---------------------------------------------------------------------
 * 2) Nadtytuł sekcji (np. "01 — Problem") — reszta strony, tło jasne
 * ------------------------------------------------------------------- */
.iopro-eyebrow {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #006eff;
}

/* ---------------------------------------------------------------------
 * 3) Plakietki-tagi (np. "zachować", "zintegrować" w sekcji "Co sprawdzamy")
 *    Wklej przez widżet HTML: <span class="iopro-tag-pill">zachować</span>
 * ------------------------------------------------------------------- */
.iopro-tag-pill {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 500;
	color: #006eff;
	background-color: rgba(0, 110, 255, 0.1);
	padding: 0.25rem 0.625rem;
	border-radius: 9999px;
	margin: 0 0.25rem 0.375rem 0;
}

/* Mały okrągły "znaczek" pod ikonę check w listach (odpowiednik bg-primary/10) */
.iopro-icon-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 9999px;
	background-color: rgba(0, 110, 255, 0.1);
	color: #006eff;
	flex-shrink: 0;
}

/* ---------------------------------------------------------------------
 * 4) System kart — łącz klasy zamiast klikać te same ustawienia 28 razy.
 *    Podstawa (zawsze): iopro-card
 *    Tło (wybierz jedno):     iopro-card--soft | iopro-card--white
 *    Rozmiar (domyślnie cozy): iopro-card--compact | iopro-card--spacious
 *    Hover (opcjonalnie):     iopro-card--hover-lift | iopro-card--hover-swap
 *    Wyróżniona karta (Ścieżka decyzyjna, prawa kolumna): iopro-card--highlighted
 * ------------------------------------------------------------------- */
.iopro-card {
	border-radius: 1rem;
	padding: 1.75rem; /* rozmiar "cozy" — domyślny w większości sekcji */
	height: 100%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.iopro-card--soft {
	background-color: #f9fafb;
	border: 1px solid #f3f4f6;
}
.iopro-card--white {
	background-color: #ffffff;
	border: 1px solid #e5e7eb;
}
.iopro-card--compact {
	padding: 1.5rem;
}
.iopro-card--spacious {
	padding: 2.5rem;
}
.iopro-card--hover-lift:hover {
	border-color: #006eff;
	box-shadow: 0 8px 32px -12px rgba(0, 110, 255, 0.25);
}
.iopro-card--hover-swap:hover {
	background-color: #ffffff;
	border-color: #006eff;
}
.iopro-card--highlighted {
	background-color: #ffffff;
	border: 2px solid #006eff;
	box-shadow: 0 8px 32px -12px rgba(0, 110, 255, 0.25);
}