/* =========================================================
   MODUŁ: O mnie / About
   ========================================================= */

.sp-om {
	--spom-font:        'Inter', sans-serif;
	--spom-size-label:  13px;
	--spom-size-tytul:  56px;
	--spom-weight-tytul: 700;
	--spom-lh-tytul:    1.15;
	--spom-size-lead:   18px;
	--spom-size-opis:   16px;
	--spom-lh-opis:     1.75;
	--spom-size-stat-num: 52px;
	--spom-size-stat-desc: 14px;
	--spom-max-width:   1280px;
	--spom-pad-y:       110px;
	--spom-pad-x:       32px;
	--spom-gap-kol:     80px;
	--spom-gap-stats:   90px;
	--spom-gap-stat-box: 20px;
	--spom-pad-stat-box: 32px;
	--spom-radius-stat: 16px;
	--spom-radius-sec:  0px;
	--spom-margin-y:    0px;
	--spom-zdj-radius:  20px;
	--spom-tlo:         #0D1424;
	--spom-label:       #D4A017;
	--spom-tytul:       #FFFFFF;
	--spom-em:          #D4A017;
	--spom-lead:        #FFFFFF;
	--spom-opis:        #B8C5D6;
	--spom-opis-strong: #FFFFFF;
	--spom-zdj-border:  #264360;
	--spom-zdj-shadow:  #000000;
	--spom-stat-tlo:    #162033;
	--spom-stat-border: #264360;
	--spom-stat-highlight: #D4A017;
	--spom-stat-num:    #D4A017;
	--spom-stat-desc:   #B8C5D6;
	--spom-cta-tlo:     #D4A017;
	--spom-cta-tekst:   #0D1424;

	font-family: var(--spom-font);
	background:
		radial-gradient(ellipse at top right, rgba(212,160,23,.06), transparent 55%),
		radial-gradient(ellipse at bottom left, rgba(212,160,23,.04), transparent 50%),
		var(--spom-tlo);
	padding: var(--spom-pad-y) var(--spom-pad-x);
	border-radius: var(--spom-radius-sec);
	margin-top: var(--spom-margin-y);
	margin-bottom: var(--spom-margin-y);
	color: var(--spom-opis);
	position: relative;
	overflow: hidden;
}
.sp-om * { box-sizing: border-box; }

.sp-om--w-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.sp-om--w-container {
	width: 100%;
	max-width: var(--spom-max-width);
	margin-left: auto;
	margin-right: auto;
}

.sp-om__inner {
	max-width: var(--spom-max-width);
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* =========================================================
   TOP — 2 kolumny: zdjęcia + tekst
   ========================================================= */
.sp-om__top {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--spom-gap-kol);
	align-items: center;
}
.sp-om--zdj-right .sp-om__top {
	grid-template-columns: 1.1fr 1fr;
}
.sp-om--zdj-right .sp-om__col--zdjecia { order: 2; }
.sp-om--zdj-right .sp-om__col--text    { order: 1; }
.sp-om--bez-zdjec .sp-om__top {
	grid-template-columns: 1fr;
	max-width: 820px;
	margin: 0 auto;
	text-align: center;
}

/* =========================================================
   KOLUMNA TEKSTU
   ========================================================= */
.sp-om__col--text {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.sp-om__label {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	font-size: var(--spom-size-label);
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--spom-label);
	align-self: flex-start;
}
.sp-om--bez-zdjec .sp-om__label { align-self: center; }
.sp-om__label-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--spom-label);
	box-shadow: 0 0 0 4px rgba(212,160,23,.22);
	animation: sp-om-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes sp-om-dot-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(212,160,23,.22); transform: scale(1); }
	50%      { box-shadow: 0 0 0 9px rgba(212,160,23,.04); transform: scale(1.15); }
}

.sp-om__tytul {
	font-size: clamp(32px, 5vw, var(--spom-size-tytul));
	font-weight: var(--spom-weight-tytul);
	color: var(--spom-tytul);
	line-height: var(--spom-lh-tytul);
	letter-spacing: -.015em;
	margin: 0;
}
.sp-om--serif .sp-om__tytul {
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
	letter-spacing: -.005em;
}
.sp-om__tytul em {
	font-style: italic;
	color: var(--spom-em);
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
}
.sp-om__tytul mark {
	background: transparent;
	color: var(--spom-em);
	font-weight: inherit;
}

.sp-om__lead {
	font-size: var(--spom-size-lead);
	line-height: 1.55;
	color: var(--spom-lead);
	font-weight: 600;
	margin: 0;
	max-width: 600px;
}
.sp-om--bez-zdjec .sp-om__lead { margin-left: auto; margin-right: auto; }

.sp-om__opis {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}
.sp-om__opis p {
	font-size: var(--spom-size-opis);
	line-height: var(--spom-lh-opis);
	color: var(--spom-opis);
	margin: 0;
	max-width: 600px;
}
.sp-om__opis strong { color: var(--spom-opis-strong); font-weight: 700; }
.sp-om__opis em { font-style: italic; }
.sp-om--bez-zdjec .sp-om__opis p { margin-left: auto; margin-right: auto; }

/* =========================================================
   KOLAŻ ZDJĘĆ
   ========================================================= */
.sp-om__col--zdjecia {
	position: relative;
}
.sp-om__kolaz {
	position: relative;
	width: 100%;
}
.sp-om__zdj {
	margin: 0;
	border-radius: var(--spom-zdj-radius);
	overflow: hidden;
	box-shadow:
		0 30px 60px rgba(0,0,0,.40),
		0 8px 20px rgba(0,0,0,.25),
		inset 0 0 0 1px var(--spom-zdj-border);
	transition: transform .55s cubic-bezier(.4,0,.2,1),
	            box-shadow .55s cubic-bezier(.4,0,.2,1);
}
.sp-om__zdj img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sp-om__zdj:hover {
	transform: translateY(-6px);
	box-shadow:
		0 40px 80px rgba(0,0,0,.55),
		0 12px 26px rgba(0,0,0,.35);
}

/* --- SCATTERED (jak na screenie) --- */
.sp-om--uklad-scattered .sp-om__kolaz {
	aspect-ratio: 1 / 1.05;
	max-width: 540px;
}
.sp-om--uklad-scattered .sp-om__zdj {
	position: absolute;
}
.sp-om--uklad-scattered .sp-om__zdj--1 {
	width: 64%;
	height: 60%;
	top: 0;
	right: 0;
	transform: rotate(2deg);
	z-index: 3;
}
.sp-om--uklad-scattered .sp-om__zdj--2 {
	width: 56%;
	height: 44%;
	bottom: 0;
	left: 0;
	transform: rotate(-3deg);
	z-index: 2;
}
.sp-om--uklad-scattered .sp-om__zdj--3 {
	width: 45%;
	height: 40%;
	bottom: 5%;
	right: 8%;
	transform: rotate(1.5deg);
	z-index: 4;
}
.sp-om--uklad-scattered .sp-om__kolaz:hover .sp-om__zdj { transform: rotate(0); }

/* --- STACKED (jedno na drugim z offsetem) --- */
.sp-om--uklad-stacked .sp-om__kolaz {
	position: relative;
	aspect-ratio: 4 / 5;
}
.sp-om--uklad-stacked .sp-om__zdj {
	position: absolute;
	width: 80%;
	height: 70%;
}
.sp-om--uklad-stacked .sp-om__zdj--1 { top: 0; left: 0; transform: rotate(-4deg); z-index: 1; }
.sp-om--uklad-stacked .sp-om__zdj--2 { top: 10%; right: 0; transform: rotate(3deg); z-index: 2; }
.sp-om--uklad-stacked .sp-om__zdj--3 { bottom: 0; left: 10%; transform: rotate(-1deg); z-index: 3; }

/* --- GRID (równy 2×2 lub kolumna) --- */
.sp-om--uklad-grid .sp-om__kolaz {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
.sp-om--uklad-grid .sp-om__zdj { aspect-ratio: 4 / 5; }
.sp-om--uklad-grid .sp-om__zdj--1 { grid-row: span 2; aspect-ratio: 4 / 5.5; }
.sp-om--uklad-grid .sp-om__zdj--2,
.sp-om--uklad-grid .sp-om__zdj--3 { aspect-ratio: 1 / 1; }

/* --- SINGLE (1 duże zdjęcie) --- */
.sp-om--uklad-single .sp-om__kolaz {
	max-width: 540px;
	aspect-ratio: 4 / 5;
}
.sp-om--uklad-single .sp-om__zdj { width: 100%; height: 100%; }
.sp-om--uklad-single .sp-om__zdj--2,
.sp-om--uklad-single .sp-om__zdj--3 { display: none; }

/* =========================================================
   STAT-BOXY (4 kolumny)
   ========================================================= */
.sp-om__stats {
	margin-top: var(--spom-gap-stats);
	display: grid;
	gap: var(--spom-gap-stat-box);
}
.sp-om--stats-kol-2 .sp-om__stats { grid-template-columns: repeat(2, 1fr); }
.sp-om--stats-kol-3 .sp-om__stats { grid-template-columns: repeat(3, 1fr); }
.sp-om--stats-kol-4 .sp-om__stats { grid-template-columns: repeat(4, 1fr); }

.sp-om__stat {
	background: var(--spom-stat-tlo);
	border: 1.5px solid var(--spom-stat-border);
	border-radius: var(--spom-radius-stat);
	padding: var(--spom-pad-stat-box) calc(var(--spom-pad-stat-box) * .7);
	text-align: center;
	transition: transform .35s cubic-bezier(.4,0,.2,1),
	            box-shadow .35s cubic-bezier(.4,0,.2,1),
	            border-color .35s ease;
}
.sp-om__stat:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,.30);
	border-color: var(--spom-stat-highlight);
}

/* Wyróżniony box — gold-border (jak na screenie 2/3) */
.sp-om__stat--highlight {
	border-color: var(--spom-stat-highlight);
	box-shadow:
		0 12px 30px rgba(212,160,23,.20),
		inset 0 0 0 1px rgba(212,160,23,.10);
}
.sp-om__stat--highlight:hover {
	box-shadow:
		0 20px 50px rgba(212,160,23,.32),
		inset 0 0 0 1px rgba(212,160,23,.20);
}

.sp-om__stat-num {
	font-size: clamp(34px, 4.2vw, var(--spom-size-stat-num));
	font-weight: 800;
	color: var(--spom-stat-num);
	line-height: 1;
	letter-spacing: -.015em;
	margin-bottom: .65rem;
}
.sp-om__stat-desc {
	font-size: var(--spom-size-stat-desc);
	color: var(--spom-stat-desc);
	line-height: 1.5;
}

/* =========================================================
   CTA pod statsami (gold pill)
   ========================================================= */
.sp-om__cta-wrap {
	margin-top: 3rem;
	text-align: center;
}
.sp-om__cta {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: 1.1em 2em;
	background: linear-gradient(135deg, var(--spom-cta-tlo), color-mix(in srgb, var(--spom-cta-tlo) 78%, #FFF));
	color: var(--spom-cta-tekst);
	border-radius: 999px;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow:
		0 14px 34px rgba(212,160,23,.40),
		inset 0 1px 0 rgba(255,255,255,.25);
	transition: transform .25s cubic-bezier(.4,0,.2,1),
	            box-shadow .25s cubic-bezier(.4,0,.2,1),
	            filter .2s ease;
	position: relative;
	overflow: hidden;
	border-bottom: none !important;
}
.sp-om__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.40) 50%, transparent 100%);
	transform: translateX(-100%);
	transition: transform .7s cubic-bezier(.4,0,.2,1);
	pointer-events: none;
}
.sp-om__cta:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 20px 44px rgba(212,160,23,.55);
	filter: brightness(1.05);
}
.sp-om__cta:hover::before { transform: translateX(100%); }
.sp-om__cta svg {
	width: 16px;
	height: 16px;
	position: relative;
	z-index: 1;
	transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.sp-om__cta:hover svg { transform: translateX(4px); }
.sp-om__cta > span { position: relative; z-index: 1; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
	.sp-om {
		--spom-pad-y: 70px;
		--spom-gap-stats: 60px;
	}
	.sp-om__top,
	.sp-om--zdj-right .sp-om__top {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.sp-om--zdj-right .sp-om__col--zdjecia { order: 1; }
	.sp-om--zdj-right .sp-om__col--text    { order: 2; }
	.sp-om__kolaz {
		max-width: 520px;
		margin: 0 auto;
	}
	.sp-om__lead, .sp-om__opis p { max-width: 100%; }
	.sp-om--stats-kol-4 .sp-om__stats,
	.sp-om--stats-kol-3 .sp-om__stats {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.sp-om {
		--spom-pad-y: 50px;
		--spom-pad-x: 20px;
		--spom-pad-stat-box: 22px;
	}
	.sp-om__stats { grid-template-columns: 1fr !important; }
	.sp-om__stat-num { font-size: 38px; }
	.sp-om__cta { font-size: 13px; padding: 1em 1.5em; }
}