/* =========================================================
   MODUŁ: Promo Video
   ========================================================= */

.sp-vid {
	--spvid-font:        'Inter', sans-serif;
	--spvid-size-label:  15px;
	--spvid-size-tytul:  48px;
	--spvid-weight-tytul: 800;
	--spvid-lh-tytul:    1.15;
	--spvid-size-opis:   17px;
	--spvid-lh-opis:     1.6;
	--spvid-size-cta:    15px;
	--spvid-max-width:   1180px;
	--spvid-pad-y:       90px;
	--spvid-pad-x:       32px;
	--spvid-gap:         64px;
	--spvid-radius-sec:  0px;
	--spvid-margin-y:    0px;
	--spvid-karta-radius: 24px;
	--spvid-karta-pad:   24px;
	--spvid-vid-radius:  16px;
	--spvid-tlo:         #FFFFFF;
	--spvid-label:       #1A2540;
	--spvid-label-ikona: #D4A017;
	--spvid-tytul:       #1A2540;
	--spvid-mark:        #D4A017;
	--spvid-opis:        #5A5A5A;
	--spvid-karta-tlo:   #F8F3E0;
	--spvid-karta-border: #E8DFCB;

	font-family: var(--spvid-font);
	background: var(--spvid-tlo);
	padding: var(--spvid-pad-y) var(--spvid-pad-x);
	border-radius: var(--spvid-radius-sec);
	margin-top: var(--spvid-margin-y);
	margin-bottom: var(--spvid-margin-y);
	color: var(--spvid-opis);
	position: relative;
	overflow: hidden;
}
.sp-vid * { box-sizing: border-box; }

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

.sp-vid__inner {
	max-width: var(--spvid-max-width);
	margin: 0 auto;
	display: grid;
	gap: var(--spvid-gap);
	align-items: center;
}

/* Proporcje kolumn */
.sp-vid--prop-equal       .sp-vid__inner { grid-template-columns: 1fr 1fr; }
.sp-vid--prop-text-wide   .sp-vid__inner { grid-template-columns: 1.2fr 1fr; }
.sp-vid--prop-video-wide  .sp-vid__inner { grid-template-columns: 1fr 1.5fr; }
.sp-vid--prop-video-major .sp-vid__inner { grid-template-columns: 1fr 1.85fr; }

/* Układ: text-left (default) = video-right */
.sp-vid--ukl-video-right .sp-vid__col--text  { grid-column: 1; }
.sp-vid--ukl-video-right .sp-vid__col--video { grid-column: 2; }
.sp-vid--ukl-video-left  .sp-vid__col--text  { grid-column: 2; }
.sp-vid--ukl-video-left  .sp-vid__col--video { grid-column: 1; }

/* video-only — pełna szerokość */
.sp-vid--ukl-video-only .sp-vid__inner {
	grid-template-columns: 1fr;
	max-width: 980px;
}
.sp-vid--ukl-video-only .sp-vid__col--video {
	grid-column: 1;
}

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

.sp-vid__label {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: var(--spvid-size-label);
	font-weight: 700;
	color: var(--spvid-label);
	align-self: flex-start;
}
.sp-vid__label-ikona {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--spvid-label-ikona);
	flex-shrink: 0;
	animation: sp-vid-ikona-pulse 2.6s ease-in-out infinite;
}
.sp-vid__label-ikona svg { width: 100%; height: 100%; }
@keyframes sp-vid-ikona-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.15); opacity: .85; }
}
.sp-vid__label-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--spvid-label-ikona);
	box-shadow: 0 0 0 4px rgba(212,160,23,.22);
	animation: sp-vid-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes sp-vid-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-vid__tytul {
	font-size: clamp(28px, 4.5vw, var(--spvid-size-tytul));
	font-weight: var(--spvid-weight-tytul);
	color: var(--spvid-tytul);
	line-height: var(--spvid-lh-tytul);
	letter-spacing: -.015em;
	margin: 0;
}
.sp-vid--serif .sp-vid__tytul {
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
	letter-spacing: -.005em;
}
.sp-vid__tytul mark {
	background: transparent;
	color: var(--spvid-mark);
	font-weight: inherit;
}
.sp-vid__tytul em {
	font-style: italic;
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
}

.sp-vid__opis {
	font-size: var(--spvid-size-opis);
	line-height: var(--spvid-lh-opis);
	color: var(--spvid-opis);
	margin: 0;
	max-width: 540px;
}
.sp-vid__opis strong { color: var(--spvid-tytul); }

/* =========================================================
   PRZYCISKI CTA (dowolna liczba)
   ========================================================= */
.sp-vid__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1rem;
}

.sp-vid__btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .95em 1.55em;
	border-radius: 999px;
	font-weight: 700;
	font-size: var(--spvid-size-cta);
	letter-spacing: .01em;
	text-decoration: none;
	white-space: nowrap;
	border: 2px solid transparent;
	transition: transform .25s cubic-bezier(.4,0,.2,1),
	            box-shadow .25s cubic-bezier(.4,0,.2,1),
	            background .2s ease,
	            color .2s ease,
	            border-color .2s ease,
	            filter .2s ease;
	cursor: pointer;
	font-family: inherit;
	line-height: 1;
	position: relative;
	overflow: hidden;
	border-bottom: none !important;
}
.sp-vid__btn svg {
	width: 14px;
	height: 14px;
	transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.sp-vid__btn:hover svg { transform: translateX(3px); }

/* Wariant dark */
.sp-vid__btn--dark {
	background: var(--spvid-tytul);
	color: #FFFFFF;
	border-color: var(--spvid-tytul);
	box-shadow: 0 10px 26px rgba(26,37,64,.25), inset 0 1px 0 rgba(255,255,255,.10);
}
.sp-vid__btn--dark:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 16px 36px rgba(26,37,64,.36);
	filter: brightness(1.1);
	color: #FFFFFF;
}

/* Wariant outline */
.sp-vid__btn--outline {
	background: transparent;
	color: var(--spvid-tytul);
	border-color: var(--spvid-tytul);
	box-shadow: 0 2px 6px rgba(26,37,64,.04);
}
.sp-vid__btn--outline:hover {
	transform: translateY(-3px);
	background: var(--spvid-tytul);
	color: var(--spvid-tlo);
	box-shadow: 0 12px 28px rgba(26,37,64,.18);
}

/* Wariant ghost */
.sp-vid__btn--ghost {
	background: transparent;
	color: var(--spvid-tytul);
	padding: .95em .5em;
	border: none;
	box-shadow: none;
}
.sp-vid__btn--ghost:hover { color: var(--spvid-mark); }

/* Wariant gold (z shimmer) */
.sp-vid__btn--gold {
	background: linear-gradient(135deg, var(--spvid-mark), color-mix(in srgb, var(--spvid-mark) 78%, #FFF));
	color: var(--spvid-tytul);
	border-color: transparent;
	box-shadow: 0 12px 30px rgba(212,160,23,.40), inset 0 1px 0 rgba(255,255,255,.25);
}
.sp-vid__btn--gold::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-vid__btn--gold:hover {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 18px 40px rgba(212,160,23,.55);
	filter: brightness(1.05);
}
.sp-vid__btn--gold:hover::before { transform: translateX(100%); }
.sp-vid__btn--gold > * { position: relative; z-index: 1; }

/* =========================================================
   KOLUMNA VIDEO + KARTA
   ========================================================= */
.sp-vid__col--video {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-vid__karta {
	width: 100%;
	background: var(--spvid-karta-tlo);
	border: 1px solid var(--spvid-karta-border);
	border-radius: var(--spvid-karta-radius);
	padding: var(--spvid-karta-pad);
	box-shadow:
		0 18px 50px rgba(26,37,64,.10),
		inset 0 1px 0 rgba(255,255,255,.5);
	transition: transform .4s cubic-bezier(.4,0,.2,1),
	            box-shadow .4s cubic-bezier(.4,0,.2,1);
	position: relative;
}
.sp-vid__karta::before {
	content: "";
	position: absolute;
	top: -25%;
	right: -10%;
	width: 220px;
	height: 220px;
	background: radial-gradient(circle, var(--spvid-label-ikona) 0%, transparent 65%);
	opacity: .06;
	border-radius: 50%;
	pointer-events: none;
}

.sp-vid__player-wrap {
	position: relative;
	width: 100%;
	border-radius: var(--spvid-vid-radius);
	overflow: hidden;
	background: #000;
	z-index: 1;
}
.sp-vid__player-wrap--standalone {
	margin: 0 auto;
	max-width: 720px;
}

/* Proporcje video — aspect-ratio na wrapie */
.sp-vid--video-16-9 .sp-vid__player-wrap { aspect-ratio: 16/9; }
.sp-vid--video-4-3  .sp-vid__player-wrap { aspect-ratio: 4/3; }
.sp-vid--video-1-1  .sp-vid__player-wrap { aspect-ratio: 1/1; }
.sp-vid--video-9-16 .sp-vid__player-wrap { aspect-ratio: 9/16; max-width: 380px; margin: 0 auto; }
.sp-vid--video-4-5  .sp-vid__player-wrap { aspect-ratio: 4/5; max-width: 480px; margin: 0 auto; }

.sp-vid__iframe,
.sp-vid__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.sp-vid__error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1A2540;
	color: #FFFFFF;
	text-align: center;
	padding: 1.5rem;
	font-size: 14px;
}

/* =========================================================
   EFEKTY NA KARCIE/VIDEO
   ========================================================= */
.sp-vid--efekt-shadow .sp-vid__karta {
	box-shadow:
		0 24px 60px rgba(26,37,64,.18),
		0 6px 16px rgba(26,37,64,.06),
		inset 0 1px 0 rgba(255,255,255,.5);
}
.sp-vid--efekt-glow .sp-vid__karta {
	box-shadow:
		0 0 0 1px rgba(212,160,23,.20),
		0 22px 60px rgba(212,160,23,.25),
		0 6px 16px rgba(0,0,0,.10);
}
.sp-vid--efekt-glow .sp-vid__karta::before { opacity: .14; }

.sp-vid--efekt-lift .sp-vid__karta {
	transition: transform .4s cubic-bezier(.4,0,.2,1),
	            box-shadow .4s cubic-bezier(.4,0,.2,1);
}
.sp-vid--efekt-lift .sp-vid__karta:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 70px rgba(26,37,64,.18);
}

.sp-vid--efekt-none .sp-vid__karta {
	box-shadow: none;
}

/* Bez karty — video bezpośrednio na sekcji */
.sp-vid--bez-karty .sp-vid__player-wrap {
	box-shadow: 0 22px 60px rgba(26,37,64,.20);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
	.sp-vid {
		--spvid-pad-y: 60px;
		--spvid-pad-x: 22px;
		--spvid-gap: 40px;
		--spvid-karta-pad: 18px;
	}
	.sp-vid__inner { grid-template-columns: 1fr !important; }
	.sp-vid__col--text, .sp-vid__col--video { grid-column: 1 !important; }
	/* Na mobile zawsze video nad tekstem */
	.sp-vid--ukl-video-right .sp-vid__col--video,
	.sp-vid--ukl-video-left  .sp-vid__col--video {
		order: -1;
	}
	.sp-vid__col--text { text-align: center; }
	.sp-vid__label { align-self: center; }
	.sp-vid__opis { margin-left: auto; margin-right: auto; }
	.sp-vid__cta-row { justify-content: center; }
}
@media (max-width: 480px) {
	.sp-vid__btn { font-size: 14px; padding: .85em 1.3em; }
	.sp-vid__btn { flex: 1 1 auto; justify-content: center; }
}