/*
 * Sekce SLUŽBY — carousel s kartami.
 *
 * Layout:
 *  Desktop:  header (eyebrow + h2 + podnadpis vlevo, button vpravo nahoře)
 *            track 4 karty vedle sebe, šipka „další" vpravo
 *  Mobil:    header (jen texty, button skryt)
 *            track horizontálně scrollovatelný (snap, prst)
 *            button pod kartami, plná šířka
 *
 * Karty mají bílé pozadí, padding, h3 titulek, body text, ikona nahoře.
 */

/* ── Hlavička sekce ─────────────────────────────────────── */
.services-carousel__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--rp-space-5);
	margin-bottom: var(--rp-space-7);            /* 48 px mezera nad kartami */
}

.services-carousel__intro {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rp-space-3);
}

.services-carousel__eyebrow {
	margin: 0;
	color: var(--rp-color-text);
	font-size: var(--rp-fs-sm);
	font-weight: var(--rp-fw-regular);
	letter-spacing: var(--rp-tracking-normal);
	line-height: 1;
}

.services-carousel__title {
	margin: 0;
	color: var(--rp-color-text);
	font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);  /* 28 px mobil → 40 px desktop */
	font-weight: var(--rp-fw-medium);             /* 500 dle Figmy */
	line-height: var(--rp-lh-tight);              /* 110 % */
	letter-spacing: var(--rp-tracking-tight);     /* -3 % */
}

.services-carousel__subtitle {
	color: var(--rp-color-text);
	font-size: var(--rp-fs-md);
	font-weight: var(--rp-fw-regular);
	letter-spacing: var(--rp-tracking-normal);
	line-height: var(--rp-lh-normal);
	max-width: 60ch;
}

.services-carousel__subtitle p { margin: 0; color: inherit; }

/* Tlačítko vpravo nahoře — jen desktop, na mobilu skryt */
.services-carousel__btn--desktop { display: none; }
@media (min-width: 768px) {
	.services-carousel__btn--desktop { display: inline-flex; flex: 0 0 auto; }
}

/* Tlačítko pod kartami — jen mobil, shrink na obsah (ne fullwidth). */
.services-carousel__btn--mobile {
	display: inline-flex;
	align-self: flex-start;
	margin-top: var(--rp-space-6);
}
@media (min-width: 768px) {
	.services-carousel__btn--mobile { display: none; }
}

/* ── Track wrapper + šipka ──────────────────────────────── */
.services-carousel__track-wrap {
	position: relative;
}

.services-carousel__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	/* Default = velký desktop: 4 sloupce. Menší viewporty mají vlastní pravidla níž. */
	grid-auto-columns: calc((100% - 3 * 24px) / 4);
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;                        /* Firefox */
	-ms-overflow-style: none;                     /* IE */
	padding-bottom: 4px;                          /* prostor pro stín karet */
}
.services-carousel__track::-webkit-scrollbar { display: none; }

/* Tablet (768–1023 px) — 3 karty, aby nebyly příliš úzké
   (na 900 px viewportu vychází karta ≈ 268 px místo původních ~195 px se 4 sloupci). */
@media (max-width: 1023px) {
	.services-carousel__track {
		grid-auto-columns: calc((100% - 2 * 24px) / 3);
	}
}

/* Mobile (< 768 px) — karty užší, ~1.4 visible (peek next card) */
@media (max-width: 767px) {
	.services-carousel__track {
		grid-auto-columns: 75%;                   /* 1 karta + náhled další */
		gap: var(--rp-space-3);
		/* Roztáhnout přes container padding pro full-bleed swipe */
		margin-inline: calc(var(--rp-space-5) * -1);
		padding-inline: var(--rp-space-5);
		scroll-padding-inline: var(--rp-space-5);
	}
}

/* ── Karta ──────────────────────────────────────────────── */
.services-carousel__card {
	scroll-snap-align: start;
	display: flex;                                 /* flex aby inner zabral celou výšku */
	background: var(--rp-color-text);              /* bílé pozadí */
	border-radius: var(--rp-radius-md);            /* 12 px */
	overflow: hidden;                              /* hover transform čistě v rámci karty */
}

/*
 * Inner — drží obsah karty.
 * Když má karta odkaz, je to <a>, jinak <div>. Stejné styly.
 */
.services-carousel__card-inner,
.services-carousel__card-inner:visited {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;                                     /* 20 px mezi ikonou, titulkem a textem */
	padding: 32px var(--rp-space-5) 40px;          /* 32 top / 24 sides / 40 bottom */
	color: var(--rp-color-bg);
	text-decoration: none;
	min-height: 220px;
	transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/*
 * Hover efekt — JEN pro karty s odkazem (.services-carousel__card--linked).
 * Jednoduchý lift + nadpis zezelená. Žádné stíny, žádné scale, jen smooth motion.
 */
.services-carousel__card--linked { cursor: pointer; }

@media (hover: hover) and (pointer: fine) {
	.services-carousel__card--linked:hover .services-carousel__card-inner {
		transform: translateY(-4px);
	}
	.services-carousel__card--linked:hover .services-carousel__card-title {
		color: var(--rp-color-accent-dark);
	}
}

.services-carousel__card-title {
	transition: color 280ms ease;
}

/* Ikona — fixní výška 40 px, šířka libovolná (může být čtverec i obdélník) */
.services-carousel__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);                    /* pro SVG s currentColor */
}
.services-carousel__card-icon svg,
.services-carousel__card-icon img {
	height: 100%;
	width: auto;
	display: block;
	object-fit: contain;
}

.services-carousel__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);
}

.services-carousel__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);
}
.services-carousel__card-text p { margin: 0; color: inherit; }

/* ── Šipka „další" — MIMO container, jen na širokých viewportech (≥ 1280 px) ──── */
.services-carousel__nav { display: none; }

@media (min-width: 1280px) {
	.services-carousel__nav {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		right: -64px;                              /* mimo container vpravo */
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		background: transparent;
		border: 0;
		color: var(--rp-color-text);
		cursor: pointer;
		opacity: 0.6;
		transition: opacity var(--rp-transition-fast), transform var(--rp-transition-fast);
	}
}
@media (min-width: 1280px) and (hover: hover) and (pointer: fine) {
	.services-carousel__nav:hover {
		opacity: 1;
		transform: translateY(-50%) translateX(2px);
	}
}
.services-carousel__nav-arrow {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);                    /* > pointing right */
}

/* ── Responsive head ────────────────────────────────────── */
@media (max-width: 767px) {
	.services-carousel__head {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--rp-space-4);
		margin-bottom: var(--rp-space-5);
	}
}