/**
 * Leaware — Our Core Values
 *
 * Odwzorowuje ramkę `founder` (1:864, desktop 1440 × 1050, padding 120/180,
 * gap 60) i mobilną (1:2471, 360 × 2008, padding 60/16, gap 40).
 *
 * Desktop: lewa kolumna 389 px (nagłówek, opis, założyciel, sklepy), po prawej
 *          siatka kart 2 × 2 po 318 px z odstępem 16.
 * Mobile:  wszystko w jednej kolumnie, karty w pionie — ikona nad tekstem.
 */

.leaware-cv {
	--lw-cv-padding-y: 120px;
	--lw-cv-padding-x: 180px;
	--lw-cv-content-width: 1080px;

	--lw-cv-gap: 60px;
	--lw-cv-columns-gap: 40px;
	--lw-cv-aside-width: 389px;
	--lw-cv-aside-gap: 40px;
	--lw-cv-text-gap: 24px;

	--lw-cv-columns: 2;
	--lw-cv-cards-gap: 16px;
	--lw-cv-card-radius: 16px;
	--lw-cv-card-padding: 24px;
	--lw-cv-card-gap: 16px;
	--lw-cv-card-text-gap: 12px;
	--lw-cv-icon-size: 40px;

	--lw-cv-hint-color: #78909c;
	--lw-cv-heading-color: #000000;
	--lw-cv-lead-color: #000000;
	--lw-cv-card-bg: #ffffff;
	--lw-cv-card-title-color: #000000;
	--lw-cv-card-text-color: #78909c;

	--lw-cv-avatar-size: 62px;
	--lw-cv-founder-gap: 16px;
	--lw-cv-stores-gap: 14px;

	position: relative;
	overflow-x: clip;
	padding: var(--lw-cv-padding-y) var(--lw-cv-padding-x);
}

/*
 * Pełna szerokość okna niezależnie od kontenera. `100vw` liczy się razem
 * z paskiem przewijania — przy pasku zajmującym miejsce sekcja wyjdzie o jego
 * szerokość poza okno; wtedy wyłącz przełącznik i ustaw kontener na pełną
 * szerokość w Elementorze.
 */
.leaware-cv--full {
	width: 100vw;
	max-width: 100vw;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

.leaware-cv__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--lw-cv-gap);
	max-width: var(--lw-cv-content-width);
	margin: 0 auto;
}

/* --- Poświata ------------------------------------------------------------ */

/*
 * Cztery plamy: dwie niebiesko-turkusowe po prawej u góry i dwie żółte po lewej,
 * na wysokości kart. Wymiary w pikselach wprost z projektu — w obu widokach są
 * takie same, zmienia się tylko położenie (patrz sekcja mobile).
 */
.leaware-cv__glow {
	position: absolute;
	z-index: 0;
	border-radius: 500px;
	/* Figma podaje layer blur 150; CSS blur() operuje na sigmie — stąd połowa. */
	filter: blur(75px);
	pointer-events: none;
}

.leaware-cv__glow--a,
.leaware-cv__glow--b {
	width: 348px;
	height: 305px;
	background: linear-gradient(225deg, rgba(3, 169, 244, 0.6) 5%, rgba(100, 255, 218, 0.4) 100%);
	opacity: 0.35;
}

.leaware-cv__glow--a {
	top: 59px;
	left: var(--lw-cv-glow-a-x, 1044px);
}

.leaware-cv__glow--b {
	top: 293px;
	left: var(--lw-cv-glow-b-x, 1273px);
}

.leaware-cv__glow--c,
.leaware-cv__glow--d {
	width: 368px;
	height: 293px;
	background-color: #fec200;
	opacity: 0.5;
}

.leaware-cv__glow--c {
	top: 656px;
	left: var(--lw-cv-glow-c-x, -225px);
}

.leaware-cv__glow--d {
	top: 398px;
	left: var(--lw-cv-glow-d-x, -347px);
}

/* --- Nadtytuł ------------------------------------------------------------ */

/* Zakres (0,2,0) — bije globalną typografię z Global Settings Elementora. */
.leaware-cv .leaware-cv__hint {
	margin: 0;
	color: var(--lw-cv-hint-color);
	font-size: 22px;
	font-weight: 500;
	line-height: 26px;
	text-align: center;
}

/* --- Układ dwukolumnowy -------------------------------------------------- */

.leaware-cv__body {
	display: flex;
	align-items: flex-start;
	gap: var(--lw-cv-columns-gap);
}

.leaware-cv__aside {
	display: flex;
	flex: 0 0 var(--lw-cv-aside-width);
	flex-direction: column;
	gap: var(--lw-cv-aside-gap);
	min-width: 0;
}

.leaware-cv__text {
	display: flex;
	flex-direction: column;
	gap: var(--lw-cv-text-gap);
}

.leaware-cv .leaware-cv__heading {
	margin: 0;
	color: var(--lw-cv-heading-color);
	font-size: 40px;
	font-weight: 600;
	line-height: 60px;
}

.leaware-cv .leaware-cv__lead {
	margin: 0;
	color: var(--lw-cv-lead-color);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

/* --- Założyciel ---------------------------------------------------------- */

.leaware-cv__founder {
	display: flex;
	align-items: center;
	gap: var(--lw-cv-founder-gap);
}

.leaware-cv__avatar {
	display: inline-flex;
	flex: 0 0 auto;
	width: var(--lw-cv-avatar-size);
	height: var(--lw-cv-avatar-size);
	overflow: hidden;
	border-radius: 50%;
}

.leaware-cv__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.leaware-cv__founder-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.leaware-cv .leaware-cv__founder-name {
	color: var(--lw-cv-heading-color);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.leaware-cv .leaware-cv__founder-role {
	color: var(--lw-cv-heading-color);
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
}

/* --- Przyciski sklepów --------------------------------------------------- */

.leaware-cv__stores {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lw-cv-stores-gap);
}

.leaware-cv__store {
	display: inline-flex;
	flex: 0 0 auto;
}

.leaware-cv__store img {
	display: block;
	width: auto;
	height: 40px;
}

/* --- Karty wartości ------------------------------------------------------ */

.leaware-cv__cards {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat(var(--lw-cv-columns), minmax(0, 1fr));
	gap: var(--lw-cv-cards-gap);
	min-width: 0;
}

/*
 * Karty w rzędzie mają w projekcie równą wysokość, mimo różnej długości opisu —
 * siatka robi to sama, bo elementy rozciągają się na wysokość wiersza.
 */
.leaware-cv__card {
	display: flex;
	align-items: flex-start;
	gap: var(--lw-cv-card-gap);
	padding: var(--lw-cv-card-padding);
	border-radius: var(--lw-cv-card-radius);
	background-color: var(--lw-cv-card-bg);
	box-shadow:
		0 2px 16px 0 rgba(34, 39, 58, 0.16),
		4px 4px 0 3px rgba(34, 39, 58, 0.16);
}

.leaware-cv__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--lw-cv-icon-size);
	height: var(--lw-cv-icon-size);
}

.leaware-cv__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.leaware-cv__card-body {
	display: flex;
	flex-direction: column;
	gap: var(--lw-cv-card-text-gap);
	min-width: 0;
}

.leaware-cv .leaware-cv__card-title {
	margin: 0;
	color: var(--lw-cv-card-title-color);
	font-size: 20px;
	font-weight: 700;
	line-height: 30px;
}

.leaware-cv .leaware-cv__card-text {
	margin: 0;
	color: var(--lw-cv-card-text-color);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/* --- Tablet -------------------------------------------------------------- */

@media (max-width: 1024px) {

	.leaware-cv {
		--lw-cv-padding-x: 40px;
		--lw-cv-columns-gap: 32px;
	}

	/* Kolumna z tekstem bierze cały wiersz, karty układają się pod nią. */
	.leaware-cv__body {
		flex-wrap: wrap;
	}

	.leaware-cv__aside {
		flex-basis: 100%;
	}

	.leaware-cv__cards {
		flex-basis: 100%;
	}
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {

	.leaware-cv {
		--lw-cv-padding-y: 60px;
		--lw-cv-padding-x: 16px;
		--lw-cv-gap: 40px;
		--lw-cv-columns-gap: 40px;
		--lw-cv-columns: 1;
		/* Kadr mobilny: żółte plamy wędrują w lewo, niebieskie pod karty. */
		--lw-cv-glow-a-x: 16px;
		--lw-cv-glow-b-x: 245px;
		--lw-cv-glow-c-x: -218px;
		--lw-cv-glow-d-x: -340px;
	}

	/*
	 * W projekcie mobilnym karta jest pionowa — ikona nad tekstem — i ma węższy
	 * padding poziomy: 16 zamiast 24.
	 */
	.leaware-cv__card {
		flex-direction: column;
		padding: var(--lw-cv-card-padding) 16px;
	}

	.leaware-cv .leaware-cv__heading {
		font-size: 40px;
		line-height: 60px;
	}
}