/* ============================================================
   Culpa Widgets — Trasy z Konar
   Scoped pod .culpa-trasy żeby nie konfliktował z innymi style.
   Używa --culpa-trasy-* CSS variables (override'owalne przez Elementor color picker).
   ============================================================ */

.culpa-trasy {
	--culpa-trasy-primary: #D50000;
	--culpa-trasy-text: #181818;
	--culpa-trasy-text-soft: #4a4a4a;
	--culpa-trasy-text-mute: #6c6c6c;
	--culpa-trasy-bg: #ffffff;
	--culpa-trasy-bg-soft: #F7F7F7;
	--culpa-trasy-bg-mute: #EFEFEF;
	--culpa-trasy-border: #E2E2E2;
	--culpa-trasy-radius: 2px;

	font-family: "Jost", -apple-system, BlinkMacSystemFont, sans-serif;
	color: var(--culpa-trasy-text);
}

.culpa-trasy__container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 3rem);
}

/* Header */
.culpa-trasy__header {
	text-align: center;
	max-width: 60ch;
	margin: 0 auto 3rem;
}

.culpa-trasy__eyebrow {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--culpa-trasy-primary);
	margin-bottom: 0.8rem;
}

.culpa-trasy__title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--culpa-trasy-text);
	margin: 0;
}

.culpa-trasy__title em {
	font-style: italic;
	color: var(--culpa-trasy-primary);
	font-weight: 600;
}

.culpa-trasy__lede {
	font-size: 1.05rem;
	color: var(--culpa-trasy-text-soft);
	line-height: 1.6;
	margin: 0.8rem 0 0;
}

/* Grid */
.culpa-trasy__grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

@media (max-width: 700px) {
	.culpa-trasy__grid {
		grid-template-columns: 1fr !important;
	}
}

/* Card */
.culpa-trasa {
	background: var(--culpa-trasy-bg-soft);
	border: 1px solid var(--culpa-trasy-border);
	border-radius: var(--culpa-trasy-radius);
	padding: 1.8rem;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	position: relative;
	transition: border-color 250ms ease, background 250ms ease, transform 250ms ease, box-shadow 250ms ease;
	list-style: none;
}

.culpa-trasa:hover {
	background: #fff;
	border-color: var(--culpa-trasy-primary);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.culpa-trasa--wide {
	grid-column: 1 / -1;
}

.culpa-trasa__num {
	position: absolute;
	top: 1rem;
	right: 1.4rem;
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--culpa-trasy-bg-mute);
	letter-spacing: -0.04em;
	line-height: 1;
	transition: color 250ms ease;
	pointer-events: none;
}

.culpa-trasa:hover .culpa-trasa__num {
	color: var(--culpa-trasy-primary);
}

.culpa-trasa__title {
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--culpa-trasy-text);
	padding-right: 3rem;
	margin: 0;
}

.culpa-trasa__bikes {
	font-size: 0.85rem;
	color: var(--culpa-trasy-primary);
	font-weight: 500;
	letter-spacing: 0.02em;
	margin: 0;
}

.culpa-trasa__path {
	font-size: 0.92rem;
	color: var(--culpa-trasy-text);
	font-weight: 500;
	padding: 0.7rem 0.9rem;
	background: #fff;
	border-radius: var(--culpa-trasy-radius);
	border: 1px solid var(--culpa-trasy-border);
	line-height: 1.7;
	margin: 0;
}

.culpa-trasa:hover .culpa-trasa__path {
	background: var(--culpa-trasy-bg-soft);
}

.culpa-trasa__path .arrow {
	color: var(--culpa-trasy-primary);
	font-weight: 700;
	margin: 0 0.2em;
}

.culpa-trasa__desc,
.culpa-trasa__attr {
	font-size: 0.92rem;
	color: var(--culpa-trasy-text-soft);
	line-height: 1.55;
	margin: 0;
}

.culpa-trasa__attr strong {
	color: var(--culpa-trasy-text);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.culpa-trasa,
	.culpa-trasa__num,
	.culpa-trasa__path {
		transition: none;
	}
}