/* =========================================================
   MODUŁ: Sekcja z blokami (wzór: danielsiwiec.pl)
   ========================================================= */

.sp-bl {
	/* Default fallbacks — nadpisywane inline z PHP */
	--spbl-font:         'Inter', sans-serif;
	--spbl-size-label:   14px;
	--spbl-ls-label:     0.15em;
	--spbl-size-tytul:   48px;
	--spbl-weight-tytul: 700;
	--spbl-size-opis:    17px;
	--spbl-size-kt:      20px;
	--spbl-size-ko:      15px;
	--spbl-max-width:    1280px;
	--spbl-pad-y:        100px;
	--spbl-pad-x:        32px;
	--spbl-gap:          32px;
	--spbl-radius-sec:   0px;
	--spbl-margin-y:     0px;
	--spbl-karta-radius: 16px;
	--spbl-karta-pad:    40px;
	--spbl-ik-size:      64px;
	--spbl-ik-radius:    12px;
	--spbl-ik-svg:       32px;
	--spbl-bg:           #FFFFFF;
	--spbl-label:        #D4A017;
	--spbl-tytul:        #1A2540;
	--spbl-opis:         #5A5A5A;
	--spbl-karta-bg:     #FFFFFF;
	--spbl-karta-border: #E8DFCB;
	--spbl-ik-bg:        #1A2540;
	--spbl-ik-color:     #D4A017;
	--spbl-kt-color:     #1A2540;
	--spbl-ko-color:     #5A5A5A;
	--spbl-glow:         #D4A017;

	font-family: var(--spbl-font);
	background: var(--spbl-bg);
	padding: var(--spbl-pad-y) var(--spbl-pad-x);
	border-radius: var(--spbl-radius-sec);
	margin-top: var(--spbl-margin-y);
	margin-bottom: var(--spbl-margin-y);
	position: relative;
}
.sp-bl * { box-sizing: border-box; }

/* Wariant: pełna szerokość */
.sp-bl--w-full {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Wariant: w kontenerze (z marginesami strony) */
.sp-bl--w-container {
	width: 100%;
	max-width: var(--spbl-max-width);
	margin-left: auto;
	margin-right: auto;
}

.sp-bl__inner {
	max-width: var(--spbl-max-width);
	margin: 0 auto;
	width: 100%;
}

/* ===== NAGŁÓWEK ===== */
.sp-bl__head {
	text-align: center;
	max-width: 880px;
	margin: 0 auto 4rem;
}

.sp-bl__label {
	font-size: var(--spbl-size-label);
	font-weight: 700;
	letter-spacing: var(--spbl-ls-label);
	text-transform: uppercase;
	color: var(--spbl-label);
	margin: 0 0 1.5rem;
}

.sp-bl__tytul {
	font-size: var(--spbl-size-tytul);
	font-weight: var(--spbl-weight-tytul);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--spbl-tytul);
	margin: 0 0 1.25rem;
}
/* Italic portion w tytule — serif-style emphasis (jak na screenie) */
.sp-bl__tytul em {
	font-style: italic;
	font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
	font-weight: 600;
}

.sp-bl__opis {
	font-size: var(--spbl-size-opis);
	line-height: 1.65;
	color: var(--spbl-opis);
	margin: 0;
}

/* ===== SIATKA KART ===== */
.sp-bl__grid {
	display: grid;
	gap: var(--spbl-gap);
}
.sp-bl--kol-2 .sp-bl__grid { grid-template-columns: repeat(2, 1fr); }
.sp-bl--kol-3 .sp-bl__grid { grid-template-columns: repeat(3, 1fr); }
.sp-bl--kol-4 .sp-bl__grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.sp-bl--kol-3 .sp-bl__grid,
	.sp-bl--kol-4 .sp-bl__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.sp-bl--kol-2 .sp-bl__grid,
	.sp-bl--kol-3 .sp-bl__grid,
	.sp-bl--kol-4 .sp-bl__grid { grid-template-columns: 1fr; }
}

/* ===== KARTA ===== */
.sp-bl__karta {
	background: var(--spbl-karta-bg);
	border-radius: var(--spbl-karta-radius);
	padding: var(--spbl-karta-pad);
	transition: transform .25s cubic-bezier(.2,.6,.2,1), box-shadow .25s ease, border-color .2s ease;
}

/* Obwódka */
.sp-bl--border-on .sp-bl__karta {
	border: 1px solid var(--spbl-karta-border);
}
.sp-bl--border-off .sp-bl__karta { border: 1px solid transparent; }

/* Cienie */
.sp-bl--shadow-none .sp-bl__karta { box-shadow: none; }
.sp-bl--shadow-soft .sp-bl__karta { box-shadow: 0 10px 30px rgba(26,37,64,.06); }
.sp-bl--shadow-medium .sp-bl__karta { box-shadow: 0 16px 40px rgba(26,37,64,.10); }
.sp-bl--shadow-strong .sp-bl__karta { box-shadow: 0 24px 60px rgba(26,37,64,.15); }

/* Hover */
.sp-bl--hover-lift .sp-bl__karta:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 50px rgba(26,37,64,.12);
}
.sp-bl--hover-grow .sp-bl__karta:hover {
	transform: scale(1.03);
}
.sp-bl--hover-glow .sp-bl__karta:hover {
	box-shadow: 0 0 0 2px var(--spbl-glow), 0 16px 40px rgba(212,160,23,.20);
	border-color: var(--spbl-glow);
}

/* ===== IKONA (kwadrat z SVG, jak na screenie) ===== */
.sp-bl__ikona-wrap {
	margin-bottom: 1.75rem;
}
.sp-bl__ikona {
	width: var(--spbl-ik-size);
	height: var(--spbl-ik-size);
	background: var(--spbl-ik-bg);
	color: var(--spbl-ik-color);
	border-radius: var(--spbl-ik-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(26,37,64,.20);
}
.sp-bl__ikona svg {
	width: var(--spbl-ik-svg);
	height: var(--spbl-ik-svg);
	display: block;
}

/* ===== TYTUŁ + OPIS KARTY ===== */
.sp-bl__karta-tytul {
	font-size: var(--spbl-size-kt);
	font-weight: 700;
	color: var(--spbl-kt-color);
	margin: 0 0 1rem;
	line-height: 1.3;
}
.sp-bl__karta-opis {
	font-size: var(--spbl-size-ko);
	line-height: 1.7;
	color: var(--spbl-ko-color);
	margin: 0;
}

/* =========================================================
   CTA — przycisk pod każdym blokiem (opcjonalny)
   ========================================================= */
.sp-bl__karta-cta-wrap {
	margin-top: 1.75rem;
}
.sp-bl--cta-align-left   .sp-bl__karta-cta-wrap { text-align: left; }
.sp-bl--cta-align-center .sp-bl__karta-cta-wrap { text-align: center; }
.sp-bl--cta-align-right  .sp-bl__karta-cta-wrap { text-align: right; }

.sp-bl__cta {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	font-family: inherit;
	font-weight: 700;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
	border: 2px solid transparent;
	white-space: nowrap;
	line-height: 1;
	cursor: pointer;
}

/* Rozmiary CTA */
.sp-bl--cta-size-small  .sp-bl__cta { font-size: 13px; padding: .65em 1.25em; }
.sp-bl--cta-size-medium .sp-bl__cta { font-size: 15px; padding: .85em 1.6em; }
.sp-bl--cta-size-large  .sp-bl__cta { font-size: 17px; padding: 1em 1.9em; }

/* Style CTA */
.sp-bl--cta-styl-filled .sp-bl__cta {
	background: var(--spbl-cta-bg);
	color: var(--spbl-cta-text);
	border-radius: var(--spbl-cta-radius);
	border-color: var(--spbl-cta-bg);
	box-shadow: 0 6px 16px rgba(212,160,23,.25);
}
.sp-bl--cta-styl-filled .sp-bl__cta:hover {
	background: var(--spbl-cta-hover);
	border-color: var(--spbl-cta-hover);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(212,160,23,.35);
}

.sp-bl--cta-styl-outline .sp-bl__cta {
	background: transparent;
	color: var(--spbl-cta-border);
	border-radius: var(--spbl-cta-radius);
	border-color: var(--spbl-cta-border);
}
.sp-bl--cta-styl-outline .sp-bl__cta:hover {
	background: var(--spbl-cta-border);
	color: #fff;
	transform: translateY(-2px);
}

.sp-bl--cta-styl-ghost .sp-bl__cta {
	background: transparent;
	color: var(--spbl-cta-bg);
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
}
.sp-bl--cta-styl-ghost .sp-bl__cta:hover {
	color: var(--spbl-cta-hover);
	transform: translateX(4px);
}

.sp-bl--cta-styl-arrow .sp-bl__cta {
	background: transparent;
	color: var(--spbl-cta-bg);
	border-color: transparent;
	padding-left: 0;
	padding-right: 0;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.sp-bl--cta-styl-arrow .sp-bl__cta::after {
	content: '';
	display: inline-block;
	width: 12px;
	height: 2px;
	background: currentColor;
	margin-left: .5em;
	position: relative;
	transition: width .2s ease;
}
.sp-bl--cta-styl-arrow .sp-bl__cta:hover {
	color: var(--spbl-cta-hover);
}
.sp-bl--cta-styl-arrow .sp-bl__cta:hover::after {
	width: 20px;
}

/* =========================================================
   KARTA KLIKALNA (cała karta jako link)
   ========================================================= */
.sp-bl__karta--klikalna {
	display: flex;
	flex-direction: column;
	position: relative;
	color: inherit;
	text-decoration: none;
	border-bottom: none;
}
.sp-bl__karta-arrow {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--spbl-cta-bg);
	color: var(--spbl-cta-text);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(212,160,23,.30);
	transition: transform .2s cubic-bezier(.2,.6,.2,1), background .15s ease;
}
.sp-bl__karta--klikalna:hover .sp-bl__karta-arrow {
	transform: translateX(4px);
	background: var(--spbl-cta-hover);
}

/* ===== Responsive — mniejsze rozmiary na mobile ===== */
@media (max-width: 768px) {
	.sp-bl {
		--spbl-pad-y: 60px;
		--spbl-pad-x: 20px;
		--spbl-size-tytul: 32px;
		--spbl-karta-pad: 28px;
	}
	.sp-bl__head { margin-bottom: 2.5rem; }
}