/*
 * KrokoDent — strefa-pacjenta.css
 * Style dla szablonu "Strefa Pacjenta" (page-strefa-pacjenta.php).
 * Sekcje: intro+kroki, Q&A, dodatkowe kwestie.
 */


/* ════════════════════════════════════════════════════════════════
   INTRO
═══════════════════════════════════════════════════════════════════ */

.sp-intro { padding: var(--space-8, 96px) 0; }

.sp-intro-header { margin-bottom: var(--space-7, 64px); }


/* ════════════════════════════════════════════════════════════════
   KROKI PRZYGOTOWANIA (5 kart)
═══════════════════════════════════════════════════════════════════ */

.sp-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4, 24px);
}

/* Ostatnie 2 karty wyśrodkowane — CSS trick: ostatni rząd 2 kart z offsetem */
.sp-step-card:nth-child(4) { grid-column: 1; }
.sp-step-card:nth-child(5) { grid-column: 2; }

.sp-step-card {
	background: #fff;
	border: 1px solid rgba(45,122,58,.15);
	border-radius: var(--radius-lg, 24px);
	padding: var(--space-5, 32px);
	box-shadow: 0 2px 14px rgba(26,46,28,.07);
	transition: all .3s ease;
	position: relative;
}

.sp-step-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 28px rgba(26,46,28,.12);
	border-color: rgba(45,122,58,.28);
}

.sp-step-num {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: linear-gradient(135deg, #184a22, #256531);
	color: #fff; font-size: 16px; font-weight: 700;
	display: grid; place-items: center;
	margin-bottom: var(--space-3, 16px);
}

.sp-step-card h3 {
	font-size: 16px; font-weight: 700;
	color: var(--text-primary, #1a2e1c);
	margin: 0 0 var(--space-2, 12px);
}

.sp-step-card p {
	font-size: 14px; line-height: 1.7;
	color: var(--text-secondary, rgba(26,46,28,.70));
	margin: 0;
}

@media (max-width: 900px) {
	.sp-steps-grid { grid-template-columns: repeat(2, 1fr); }
	.sp-step-card:nth-child(4),
	.sp-step-card:nth-child(5) { grid-column: auto; margin-left: 0; }
}

@media (max-width: 540px) {
	.sp-steps-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   Q&A
═══════════════════════════════════════════════════════════════════ */

.sp-qa {
	padding: var(--space-8, 96px) 0;
	background: #fff;
}

.sp-qa-inner {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: var(--space-8, 96px);
	align-items: start;
}

/* Lewa kolumna */
.sp-qa-left { position: sticky; top: var(--space-5, 32px); }

.sp-qa-left h2 {
	font-family: var(--font-serif, 'Playfair Display', serif);
	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700; line-height: 1.2; letter-spacing: -.015em;
	color: var(--text-primary, #1a2e1c);
	margin: 0 0 var(--space-5, 32px);
}

.sp-qa-sub {
	padding: var(--space-4, 24px);
	background: linear-gradient(135deg, #eaf5ec, #deeee1);
	border: 1px solid rgba(45,122,58,.20);
	border-radius: var(--radius-md, 16px);
	margin-top: var(--space-4, 24px);
}

.sp-qa-sub strong {
	display: block;
	font-size: 14px; font-weight: 700;
	color: var(--text-primary, #1a2e1c);
	margin-bottom: var(--space-2, 12px);
}

.sp-qa-sub p {
	font-size: 14px; line-height: 1.65;
	color: var(--text-secondary, rgba(26,46,28,.70));
	margin: 0;
}

/* Lista Q&A */
.sp-qa-list { display: flex; flex-direction: column; gap: var(--space-4, 24px); }

.sp-qa-item {
	display: flex;
	gap: var(--space-4, 24px);
	padding: var(--space-4, 24px);
	background: rgba(234,242,236,.40);
	border: 1px solid rgba(45,122,58,.12);
	border-radius: var(--radius-md, 16px);
	transition: all .2s ease;
}

.sp-qa-item:hover {
	background: rgba(234,242,236,.80);
	border-color: rgba(45,122,58,.25);
}

.sp-qa-icon {
	width: 48px; height: 48px; flex-shrink: 0;
	background: linear-gradient(135deg, #184a22, #256531);
	border-radius: var(--radius-sm, 8px);
	display: grid; place-items: center;
}

.sp-qa-icon svg {
	width: 22px; height: 22px;
	stroke: rgba(255,255,255,.90); fill: none;
	stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.sp-qa-content h4 {
	font-size: 15px; font-weight: 700;
	color: var(--text-primary, #1a2e1c);
	margin: 0 0 var(--space-2, 12px);
}

.sp-qa-content p {
	font-size: 14px; line-height: 1.65;
	color: var(--text-secondary, rgba(26,46,28,.70));
	margin: 0;
}

@media (max-width: 900px) {
	.sp-qa-inner  { grid-template-columns: 1fr; gap: var(--space-6, 48px); }
	.sp-qa-left   { position: static; }
}


/* ════════════════════════════════════════════════════════════════
   DODATKOWE KWESTIE
═══════════════════════════════════════════════════════════════════ */

.sp-tips { padding: var(--space-8, 96px) 0; }

.sp-tips-quote {
	background: linear-gradient(135deg, #0d3317, #184a22);
	border-radius: var(--radius-lg, 24px);
	padding: var(--space-5, 32px) var(--space-6, 48px);
	margin-bottom: var(--space-6, 48px);
	text-align: center;
}

.sp-tips-quote p {
	font-size: 17px; line-height: 1.7;
	color: rgba(255,255,255,.88);
	margin: 0; font-style: italic;
}

.sp-tips-header { margin-bottom: var(--space-6, 48px); }

.sp-tips-header .h2 { font-size: clamp(22px, 2.5vw, 32px); }

.sp-tips-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5, 32px);
}

.sp-tip-card {
	background: #fff;
	border: 1px solid rgba(45,122,58,.14);
	border-radius: var(--radius-lg, 24px);
	padding: var(--space-5, 32px);
	box-shadow: 0 2px 12px rgba(26,46,28,.07);
	transition: all .3s ease;
	display: flex;
	flex-direction: column;
	gap: var(--space-3, 16px);
}

.sp-tip-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(26,46,28,.12);
	border-color: rgba(45,122,58,.26);
}

.sp-tip-icon {
	width: 48px; height: 48px;
	background: linear-gradient(135deg, #eaf5ec, #d4ecda);
	border: 1px solid rgba(45,122,58,.22);
	border-radius: 50%;
	display: grid; place-items: center;
}

.sp-tip-icon svg {
	width: 22px; height: 22px;
	stroke: #1f5e2a; fill: none;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.sp-tip-card h3 {
	font-size: 17px; font-weight: 700;
	color: var(--text-primary, #1a2e1c); margin: 0;
}

.sp-tip-card p {
	font-size: 14px; line-height: 1.70;
	color: var(--text-secondary, rgba(26,46,28,.70));
	margin: 0;
}

@media (max-width: 640px) {
	.sp-tips-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════════
   LINKI DO ZALECEŃ
═══════════════════════════════════════════════════════════════════ */

.sp-links-section {
	padding: var(--space-7, 64px) 0;
	background: #fff;
	border-top: 1px solid rgba(45,122,58,.10);
	border-bottom: 1px solid rgba(45,122,58,.10);
	text-align: center;
}

.sp-links-title {
	font-family: var(--font-serif, 'Playfair Display', serif);
	font-size: clamp(20px, 2.5vw, 30px);
	font-weight: 600;
	color: var(--text-primary, #1a2e1c);
	margin: 0 0 var(--space-5, 32px);
	line-height: 1.35;
}

.sp-links-btns {
	display: flex;
	gap: var(--space-3, 16px);
	justify-content: center;
	flex-wrap: wrap;
}

/* Outline dark — zielony z ciemną obwódką na białym tle */
.btn-outline-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 12px);
	padding: 16px 32px;
	border-radius: var(--radius-full, 9999px);
	font-family: var(--font-sans, 'Inter', sans-serif);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	color: #1f5e2a;
	border: 2px solid #2d7a3a;
	transition: all .25s ease;
}

.btn-outline-dark:hover {
	background: linear-gradient(135deg, #184a22, #2f7440);
	color: #fff;
	border-color: #3d8f4a;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(45,122,58,.22);
}

@media (max-width: 540px) {
	.sp-links-btns { flex-direction: column; align-items: stretch; }
}


/* ════════════════════════════════════════════════════════════════
   GALLERY
═══════════════════════════════════════════════════════════════════ */

.kd-sp-gallery {
	padding: var(--space-8, 96px) 0;
	background: #f0f2ef;
	border-top: 1px solid rgba(45,122,58,.12);
	border-bottom: 1px solid rgba(45,122,58,.12);
}
.sp-gallery-header { margin-bottom: var(--space-6, 48px); }

/* Siatka masonry — 3 kolumny CSS columns, jak na stronie Galeria */
.sp-results-grid {
	column-count: 3;
	column-gap: 12px;
	margin-top: 0;
}

/* gallery-item styles przychodzą z galeria.css,
   tutaj tylko override marginu dolnego */
.sp-results-grid .gallery-item {
	margin-bottom: 12px;
}

.sp-gallery-cta { margin-top: var(--space-6, 48px); }

@media (max-width: 900px) { .sp-results-grid { column-count: 2; } }
@media (max-width: 500px) { .sp-results-grid { column-count: 1; } }