/*
 * Sekce „Služby — grid" — 3-sloupcový grid karet služeb.
 *
 * Header je left-aligned (jiný styl než centrované carousely),
 * karty mají identický vzhled jako services-carousel + tlačítko dole.
 *
 * Layout:
 *  Desktop ≥ 1024 px: 3 sloupce
 *  Tablet 768–1023:    2 sloupce
 *  Mobil < 768 px:     1 sloupec
 *
 * Gap mezi kartami: 24 px.
 */

/* ── Header (LEFT-aligned, ne centered) ─────────────────── */
.services-grid__head {
	margin: 0 0 var(--rp-space-7);                /* 48 px nad gridem */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 760px;
}

.services-grid__eyebrow {
	margin: 0;
	color: var(--rp-color-text);
	font-size: var(--rp-fs-sm);                   /* 16 px */
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: 1;
}

.services-grid__title {
	margin: 0;
	color: var(--rp-color-text);
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
	font-weight: var(--rp-fw-medium);
	line-height: var(--rp-lh-tight);
	letter-spacing: var(--rp-tracking-tight);
}

.services-grid__subtitle,
.services-grid__text {
	color: var(--rp-color-text);
	font-size: var(--rp-fs-sm);
	font-weight: var(--rp-fw-regular);
	line-height: var(--rp-lh-normal);
	letter-spacing: -0.02em;
}
.services-grid__subtitle p,
.services-grid__text p { margin: 0; color: inherit; }

/* ── Grid karet ─────────────────────────────────────────── */
.services-grid__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

@media (max-width: 1023px) {
	.services-grid__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 639px) {
	.services-grid__cards {
		grid-template-columns: 1fr;
	}
}

/* ── Karta ──────────────────────────────────────────────── */
.services-grid__card {
	display: flex;
	background: var(--rp-color-text);
	color: var(--rp-color-bg);
	border-radius: var(--rp-radius-md);
	min-height: 220px;
	overflow: hidden;
	transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow  280ms ease;
}

/* Karta s odkazem — hover lift (jen na zařízeních s myší) */
@media (hover: hover) and (pointer: fine) {
	.services-grid__card--linked:hover {
		transform: translateY(-4px);
		box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.18);
	}
	.services-grid__card--linked:hover .services-grid__card-title {
		color: var(--rp-color-accent-dark);
	}
}

/* Inner wrapper (div nebo a) — nese obsah a padding */
.services-grid__card-inner {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px var(--rp-space-5) 40px;
	color: var(--rp-color-bg);
	text-decoration: none;
}

.services-grid__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	height: 40px;
	width: auto;
	flex: 0 0 auto;
	color: var(--rp-color-bg);
}
.services-grid__card-icon svg,
.services-grid__card-icon img {
	height: 100%;
	width: auto;
	display: block;
	object-fit: contain;
}

.services-grid__card-title {
	margin: 0;
	padding-bottom: 4px;
	font-size: 16px;
	font-weight: var(--rp-fw-semibold);
	line-height: var(--rp-lh-tight);
	letter-spacing: var(--rp-tracking-tight);
	color: var(--rp-color-bg);
	transition: color 280ms ease;
}

.services-grid__card-text {
	color: var(--rp-color-bg);
	font-size: 13px;
	font-weight: var(--rp-fw-regular);
	line-height: var(--rp-lh-normal);
	letter-spacing: var(--rp-tracking-normal);
	flex: 1 1 auto;
}
.services-grid__card-text p { margin: 0; color: inherit; }
.services-grid__card-text p + p { margin-top: 8px; }

/* Vizuální button-span uvnitř card-inner (ne <a> — card je už <a>) */
.services-grid__card-btn {
	margin-top: auto;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
	background: linear-gradient(180deg, var(--rp-color-accent-light) 0%, var(--rp-color-accent) 100%);
	color: var(--rp-color-bg);
	font-size: 13px;
	font-weight: var(--rp-fw-semibold);
	letter-spacing: -0.02em;
	line-height: 1;
	border-radius: var(--rp-radius-pill);
	box-shadow: 0 4px 12px -4px rgba(34, 197, 94, 0.3);
	transition: box-shadow 280ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none; /* klik jde na <a> wrapper */
}
@media (hover: hover) and (pointer: fine) {
	.services-grid__card--linked:hover .services-grid__card-btn {
		box-shadow: 0 14px 28px -8px rgba(34, 197, 94, 0.55),
		            0 4px 12px -4px rgba(34, 197, 94, 0.3);
		transform: translateY(-2px);
	}
}