/* ==========================================================================
   Blok 6 · Postup prací — maket 98:676 (1440 × 518)
   Pět sloupců oddělených svislou linkou, nad nimi vodorovná linka.
   ========================================================================== */

.bx-steps { background: var(--bx-cream); }

.bx-steps__inner {
	max-width: var(--bx-page);
	margin-inline: auto;
	padding: 90px var(--bx-gutter);
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* Hlavička má v maketu 50 px: štítek 17 + mezera 10 + podnadpis 23. */
.bx-steps .bx-sechead__text { gap: 10px; }
.bx-steps .bx-sechead__title { line-height: 23px; }

@media (min-width: 901px) {
	.bx-steps .bx-sechead__lead { width: 380px; }
}

.bx-steps__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border-top: 1px solid var(--bx-border);
}

.bx-step {
	/* Rám „Krok“ z maketu: 264 × 252, číslo 26 od horní linky. */
	min-height: 252px;
	padding: 26px 24px 0 24px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border-left: 1px solid var(--bx-border);
}

.bx-step:first-child { border-left: 0; padding-left: 0; }

.bx-step__number { color: var(--bx-text-3); }
.bx-step:first-child .bx-step__number { color: var(--bx-yellow-dark); }

.bx-step__title { margin-top: 35px; }
.bx-step__text { margin-top: 35px; color: var(--bx-default); }

.bx-step__result {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: auto;
	padding-top: 13px;
	/* Rám „Výstup“ v maketu je 18 px vysoký. */
	line-height: 18px;
	color: var(--bx-ink);
}

.bx-step__marker {
	width: 11px;
	height: 11px;
	flex: 0 0 11px;
	margin-top: 5px;
	color: var(--bx-yellow-dark);
}

/* --- Adaptiv --------------------------------------------------------------- */
@media (max-width: 1200px) {
	.bx-steps__grid { grid-template-columns: repeat(3, 1fr); }
	/* Pevná výška kroku platí jen pro pětisloupcovou řadu z maketu. */
	.bx-step { min-height: 0; padding-bottom: 30px; }
	.bx-step__result { padding-top: 20px; }
	.bx-step:nth-child(3n + 1) { border-left: 0; padding-left: 0; }
	.bx-step:nth-child(n + 4) { border-top: 1px solid var(--bx-border); }
}

@media (max-width: 780px) {
	.bx-steps__inner { padding-block: var(--bx-section-y); gap: 30px; }
	.bx-steps__grid { grid-template-columns: repeat(2, 1fr); }
	.bx-step:nth-child(3n + 1) { border-left: 1px solid var(--bx-border); padding-left: 30px; }
	.bx-step:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
	.bx-step:nth-child(n + 3) { border-top: 1px solid var(--bx-border); }
}

@media (max-width: 520px) {
	.bx-steps__grid { grid-template-columns: 1fr; }
	.bx-step { border-left: 0 !important; padding-left: 0 !important; padding-right: 0; }
	.bx-step:nth-child(n + 2) { border-top: 1px solid var(--bx-border); }
}