/* ============================================================
   Blok DL Timeline (editorial linia czasu)
   Translacja CSS sekcji .timeline z mockupu o-nas.html
============================================================ */
.dl-timeline {
	background: var(--cream-50);
	padding: var(--section-y) 0;
	overflow: hidden;
}

.dl-timeline-head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: flex-start;
	gap: clamp(24px, 4vw, 64px);
	margin-bottom: clamp(56px, 8vw, 120px);
}

.dl-timeline-head h2,
.dl-timeline-title {
	font-family: var(--display);
	font-weight: 350;
	font-variation-settings: "opsz" 144;
	font-size: clamp(36px, 5vw, 72px);
	line-height: 1.02;
	letter-spacing: -0.02em;
	margin: 14px 0 0;
	max-width: 22ch;
	text-wrap: pretty;
}

.dl-timeline-title em {
	font-style: italic;
	font-weight: 300;
	color: var(--karmel);
}

.dl-timeline-lead {
	font-family: var(--display);
	font-style: italic;
	font-weight: 350;
	font-variation-settings: "opsz" 24;
	font-size: clamp(17px, 1.5vw, 21px);
	color: var(--espresso);
	line-height: 1.45;
	margin: 0;
	max-width: 46ch;
}

.dl-timeline-item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	align-items: start;
	padding: clamp(40px, 5vw, 72px) 0;
	border-top: 1px solid color-mix(in srgb, var(--karmel) 20%, transparent);
	position: relative;
}

.dl-timeline-item:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--karmel) 20%, transparent);
}

/* Right alignment — rok po prawej, treść po lewej */
.dl-timeline-item--right .dl-timeline-year {
	grid-column: 2;
	grid-row: 1;
}

.dl-timeline-item--right .dl-timeline-body {
	grid-column: 1;
	grid-row: 1;
	text-align: right;
}

.dl-timeline-item--right .dl-timeline-tag {
	justify-content: flex-end;
}

/* Center — jeden szpalter */
.dl-timeline-item--center {
	grid-template-columns: 1fr;
	text-align: center;
}

.dl-timeline-item--center .dl-timeline-tag {
	justify-content: center;
}

.dl-timeline-year {
	font-family: var(--display);
	font-weight: 300;
	font-style: italic;
	font-variation-settings: "opsz" 144;
	line-height: 0.85;
	letter-spacing: -0.04em;
	color: var(--ink);
	user-select: none;
}

.dl-timeline-year-label {
	display: block;
	font-size: clamp(11px, 0.9vw, 13px);
	font-family: var(--body);
	font-style: normal;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--karmel);
	font-weight: 500;
	margin-bottom: 12px;
	font-variation-settings: initial;
}

.dl-timeline-year-num {
	display: block;
	font-size: clamp(80px, 12vw, 200px);
	line-height: 0.85;
}

.dl-timeline-body {
	padding-top: clamp(16px, 3vw, 40px);
}

.dl-timeline-heading {
	font-family: var(--display);
	font-weight: 400;
	font-variation-settings: "opsz" 60;
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: var(--ink);
}

.dl-timeline-heading em {
	font-style: italic;
	color: var(--karmel);
	font-weight: 300;
}

.dl-timeline-desc {
	font-size: 17px;
	line-height: 1.65;
	color: var(--espresso);
	margin: 0 0 24px;
	max-width: 44ch;
}

.dl-timeline-item--right .dl-timeline-desc {
	margin-left: auto;
}

.dl-timeline-item--center .dl-timeline-desc {
	margin: 0 auto 24px;
}

.dl-timeline-desc p {
	margin: 0 0 12px;
}

.dl-timeline-desc p:last-child {
	margin-bottom: 0;
}

.dl-timeline-tag {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--body);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--karmel);
	font-weight: 500;
}

.dl-timeline-tag .line {
	width: 28px;
	height: 1px;
	background: var(--karmel);
}

@media (max-width: 900px) {
	.dl-timeline-head {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

@media (max-width: 720px) {
	.dl-timeline-item,
	.dl-timeline-item--right {
		grid-template-columns: 1fr;
	}
	.dl-timeline-item--right .dl-timeline-year,
	.dl-timeline-item--right .dl-timeline-body {
		grid-column: 1;
		grid-row: auto;
		text-align: left;
	}
	.dl-timeline-item--right .dl-timeline-tag {
		justify-content: flex-start;
	}
	.dl-timeline-item--right .dl-timeline-desc {
		margin-left: 0;
	}
}