/* ==========================================================================
   Blok 2 · Karty služeb a cen — maket 95:687
   Rám: padding 90 / 60, mezera 44; karty 449 vysoké, padding 32, bez mezer
   ========================================================================== */

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

.bx-services__inner {
	max-width: var(--bx-page);
	margin-inline: auto;
	padding: var(--bx-section-y) var(--bx-gutter);
	display: flex;
	flex-direction: column;
	gap: 44px;
	align-items: flex-start;
}

.bx-services__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}

/* --- Karta ---------------------------------------------------------------- */
.bx-service {
	/* Čtyři karty v řadě jako v maketu; pátá a další začínají nový řádek
	   a drží stejnou šířku, aby mřížka nikde neuhnula. */
	flex: 0 0 25%;
	max-width: 25%;
	min-width: 0;
	height: 449px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	background: var(--bx-white);
	border: 1px solid var(--bx-border);
	color: var(--bx-ink);
	/* Sousední karty sdílejí rámeček — v maketu na sebe navazují. */
	margin-left: -1px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.bx-service:first-child,
.bx-service:nth-child(4n + 1) { margin-left: 0; }
.bx-service:nth-child(n + 5) { margin-top: -1px; }

a.bx-service:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(20, 20, 20, .1);
	z-index: 1;
	position: relative;
}

.bx-service--dark {
	background: var(--bx-ink);
	border-color: var(--bx-ink);
	color: var(--bx-text-inv);
}

/* --- Hlavička karty ------------------------------------------------------- */
.bx-service__head {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
}

.bx-service__number { color: var(--bx-border-strong); }
.bx-service--dark .bx-service__number { color: var(--bx-yellow); }

.bx-service__rule { flex: 1 0 0; min-width: 0; height: 1px; }

.bx-service__icon {
	width: 54px;
	height: 54px;
	flex: 0 0 54px;
	align-items: center;
	justify-content: center;
	background: var(--bx-yellow-soft);
	color: var(--bx-yellow-dark);
}

.bx-service__icon svg { width: 24px; height: 24px; }

.bx-service--dark .bx-service__icon {
	background: var(--bx-yellow);
	color: var(--bx-ink);
}

/* --- Text ----------------------------------------------------------------- */
.bx-service__title { width: 100%; }
.bx-service--dark .bx-service__title { color: var(--bx-text-inv); }

.bx-service__text { width: 100%; color: var(--bx-text-2); }
.bx-service--dark .bx-service__text { color: var(--bx-text-inv-2); }

.bx-service__line {
	display: block;
	width: 100%;
	height: 1px;
	background: var(--bx-border);
}
.bx-service--dark .bx-service__line { background: var(--bx-border-dark); }

/* --- Pata karty ----------------------------------------------------------- */
.bx-service__foot {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.bx-service__price {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	white-space: nowrap;
}

.bx-service__price-label { color: var(--bx-text-3); }
.bx-service--dark .bx-service__price-label { color: var(--bx-text-inv-2); }

.bx-service__price-value { color: var(--bx-ink); }
.bx-service--dark .bx-service__price-value { color: var(--bx-text-inv); }

.bx-service__arrow {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	align-items: center;
	justify-content: center;
	background: var(--bx-ink);
	color: var(--bx-white);
}

.bx-service__arrow svg {
	width: 20px;
	height: 20px;
	/* V maketu je stejná šipka otočená o 45° doleva (ic/arrowR, -45°). */
	transform: rotate(-45deg);
}

.bx-service--dark .bx-service__arrow {
	background: var(--bx-yellow);
	color: var(--bx-ink);
}

/* --- Adaptiv -------------------------------------------------------------- */
@media (max-width: 1100px) {
	.bx-service { flex: 1 1 calc(50% + 1px); max-width: none; height: auto; min-height: 380px; }
	.bx-service:nth-child(odd) { margin-left: 0; }
	.bx-service:nth-child(even) { margin-left: -1px; }
	.bx-service:nth-child(n + 3) { margin-top: -1px; }
}

@media (max-width: 700px) {
	.bx-service {
		flex: 1 1 100%;
		max-width: none;
		margin-left: 0 !important;
		min-height: 0;
		gap: 22px;
	}
	.bx-service + .bx-service { margin-top: -1px; }
	.bx-services__inner { gap: 32px; }
}