/*
 * Sekce „Případy — carousel" (vyřešené případy).
 *
 * Layout:
 *   Header: eyebrow + H2 + podnadpis, vše centrované
 *   Track: 4 karty na desktopu (grid), scroll-snap carousel na tabletu/mobilu
 *
 * Karta:
 *   - Background obrázek (full-bleed)
 *   - Linear gradient overlay (#111827 nahoře a dole, transparentní uprostřed)
 *   - Zelený tag absolutně vlevo nahoře
 *   - Podnadpis + text dole, 16 px od krajů a od spodu
 *   - Žádný border-radius
 *
 * Šipka „další": position absolute MIMO container (-64 px), zobrazena jen ≥ 1280 px viewport.
 */

/* ── Header sekce ───────────────────────────────────────── */
.cases-carousel__head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--rp-space-7);             /* 48 px nad kartami */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;                                    /* mezi eyebrow/h2/podnadpis */
}

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

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

.cases-carousel__subtitle {
	color: var(--rp-color-text);
	font-size: var(--rp-fs-sm);                   /* 16 px */
	font-weight: var(--rp-fw-regular);
	line-height: var(--rp-lh-normal);
	letter-spacing: -0.02em;
}
.cases-carousel__subtitle p { margin: 0; color: inherit; }

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

.cases-carousel__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * 24px) / 4); /* přesně 4 sloupce */
	gap: 24px;                                    /* 24 px mezi kartami */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.cases-carousel__track::-webkit-scrollbar { display: none; }

/* Tablet (640–1023 px) — 2 sloupce */
@media (max-width: 1023px) {
	.cases-carousel__track {
		grid-auto-columns: calc((100% - 24px) / 2);
	}
}

/* Mobil (< 640 px) — 1 karta + peek dalšího */
@media (max-width: 639px) {
	.cases-carousel__track {
		grid-auto-columns: 75%;
		gap: 16px;
		margin-inline: calc(var(--rp-space-5) * -1);
		padding-inline: var(--rp-space-5);
		scroll-padding-inline: var(--rp-space-5);
	}
}

/* ── Karta případu ──────────────────────────────────────── */
.cases-carousel__card {
	scroll-snap-align: start;
	position: relative;
	overflow: hidden;
	aspect-ratio: 282 / 399;                      /* portrétní 282×399 px dle Figmy */
	background: var(--rp-color-surface);
	border-radius: 0;                             /* bez zaoblení dle Figmy */
	color: var(--rp-color-text);
	isolation: isolate;                           /* lokální stacking context */
	cursor: pointer;                              /* karta je klikatelná → lightbox */
}

/* Karta dostane jemný outline při focusu (klávesnice). */
.cases-carousel__card:focus-visible {
	outline: 2px solid var(--rp-color-accent);
	outline-offset: 2px;
}

.cases-carousel__card-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	transition: transform 400ms ease-out;
}

/* Zoom na focus (klávesnice) — vždy */
.cases-carousel__card:focus-visible .cases-carousel__card-image {
	transform: scale(1.08);
}
/* Hover/focus zoom — jen na zařízeních s myší */
@media (hover: hover) and (pointer: fine) {
	.cases-carousel__card:hover .cases-carousel__card-image {
		transform: scale(1.08);
	}
}

/* Ikonka lupy — střed obrázku, skrytá; objeví se na hover/focus karty. */
.cases-carousel__card-magnifier {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;                                   /* nad image + overlay */
	transform: translate(-50%, -50%) scale(0.9);
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--rp-color-text);                  /* pro SVG s currentColor */
	opacity: 0;
	pointer-events: none;                         /* klik propadne do karty */
	transition: opacity 250ms ease-out, transform 250ms ease-out;
}
.cases-carousel__card-magnifier svg,
.cases-carousel__card-magnifier img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
}

.cases-carousel__card:focus-visible .cases-carousel__card-magnifier {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}
@media (hover: hover) and (pointer: fine) {
	.cases-carousel__card:hover .cases-carousel__card-magnifier {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cases-carousel__card-image,
	.cases-carousel__card:hover .cases-carousel__card-image,
	.cases-carousel__card:focus-visible .cases-carousel__card-image,
	.cases-carousel__card-magnifier {
		transition: none;
		transform: none;
	}
}

/*
 * Gradient overlay — dle Figmy:
 *  Pásek 324 px od spodu (poměrově 324/399 ≈ 81 % výšky karty).
 *  Nahoře #111827 0 % opacity (transparent), dole #111827 100 % opacity.
 */
.cases-carousel__card-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 81.2%;                                /* 324 / 399 dle Figmy */
	background: linear-gradient(180deg,
		rgba(17, 24, 39, 0) 0%,
		rgba(17, 24, 39, 1) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Zelený tag — vlevo nahoře absolute, pill (plně zaoblené rohy) */
.cases-carousel__card-tag {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	background: var(--rp-color-accent);            /* #22C55E */
	color: var(--rp-color-bg);                     /* tmavý text */
	padding: 8px 12px;
	border-radius: var(--rp-radius-pill);          /* 999 px — pill */
	font-size: 11px;
	font-weight: var(--rp-fw-semibold);             /* 600 */
	letter-spacing: -0.02em;
	line-height: 1;                                 /* 100 % */
	white-space: nowrap;
}

/* Obsah dole — podnadpis + text */
.cases-carousel__card-content {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 12px;                                     /* mezi podnadpisem a textem */
}

.cases-carousel__card-subtitle {
	margin: 0;
	color: var(--rp-color-text);
	font-size: 14px;
	font-weight: var(--rp-fw-semibold);             /* 600 */
	letter-spacing: -0.02em;                        /* -2 % */
	line-height: 1.1;                               /* 110 % */
}

.cases-carousel__card-text {
	color: var(--rp-color-text);
	font-size: 12px;
	font-weight: var(--rp-fw-regular);              /* 400 */
	letter-spacing: -0.02em;                        /* -2 % */
	line-height: var(--rp-lh-normal);               /* 150 % */
}
.cases-carousel__card-text p { margin: 0; color: inherit; }
.cases-carousel__card-text p + p { margin-top: 8px; }

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

@media (min-width: 1280px) {
	.cases-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) {
	.cases-carousel__nav:hover {
		opacity: 1;
		transform: translateY(-50%) translateX(2px);
	}
}

.cases-carousel__nav-arrow {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
}

/* ── Mobile head ────────────────────────────────────────── */
@media (max-width: 767px) {
	.cases-carousel__head {
		margin-bottom: var(--rp-space-5);
		gap: 12px;
	}
}

/* ════════════════════════════════════════════════════════════════════════
   LIGHTBOX — full-viewport zoom karet po kliknutí
   ════════════════════════════════════════════════════════════════════════ */

.cases-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;                                  /* nad header (100) i mobile drawer (200) */

	opacity: 0;
	transition: opacity 180ms ease-out;
}
.cases-lightbox[hidden] {
	display: none;
}
.cases-lightbox.is-open {
	opacity: 1;
}

/* Backdrop — celá plocha pod stage, klikem zavírá */
.cases-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 24, 39, 0.92);
	cursor: pointer;
	z-index: 0;
}

/* Stage zabírá celý viewport, drží image + overlay + caption. Scale animace. */
.cases-lightbox__stage {
	position: absolute;
	inset: 40px 56px;
	z-index: 1;
	border-radius: 12px;
	overflow: hidden;
	transform: scale(0.96);
	transition: transform 180ms ease-out;
}
.cases-lightbox.is-open .cases-lightbox__stage {
	transform: scale(1);
}

/* Media = figure přes celý viewport. Bez pozadí, bez radiu — kolem obrázku
   je vidět backdrop. Image fitne s object-fit: contain a maximalizuje velikost
   v rámci viewportu při zachování aspect ratia. Overlay/tag/caption se
   pozicují absolutně relativně k media (= celému viewportu).
   Transition: 220ms slide+fade při přepínání mezi případy. */
.cases-lightbox__media {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: hidden;
	isolation: isolate;
	transition: opacity 220ms ease-out, transform 220ms ease-out;
}

/* Leaving — stávající obsah odjede ven (opacity 0). */
.cases-lightbox__media.is-leaving-left {
	opacity: 0;
	transform: translateX(-60px);
}
.cases-lightbox__media.is-leaving-right {
	opacity: 0;
	transform: translateX(60px);
}

/* Entering — nový obsah „naskočí" mimo viewport bez transition, pak se
   v dalším frame přesune do default = slide-in + fade-in. */
.cases-lightbox__media.is-entering-left {
	opacity: 0;
	transform: translateX(-60px);
	transition: none;
}
.cases-lightbox__media.is-entering-right {
	opacity: 0;
	transform: translateX(60px);
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.cases-lightbox__media,
	.cases-lightbox__media.is-leaving-left,
	.cases-lightbox__media.is-leaving-right,
	.cases-lightbox__media.is-entering-left,
	.cases-lightbox__media.is-entering-right {
		transition: none;
		transform: none;
		opacity: 1;
	}
}

/* Obrázek — fill media, contain zachová aspect ratio a centruje. */
.cases-lightbox__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.cases-lightbox__image[hidden] {
	display: none;
}

/* Bottom-strip overlay — stejný gradient pattern jako karta (81 % výšky). */
.cases-lightbox__overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 81.2%;
	background: linear-gradient(180deg,
		rgba(17, 24, 39, 0) 0%,
		rgba(17, 24, 39, 1) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Zelený tag, pill */
.cases-lightbox__tag {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	background: var(--rp-color-accent);
	color: var(--rp-color-bg);
	padding: 8px 14px;
	border-radius: var(--rp-radius-pill);
	font-size: 12px;
	font-weight: var(--rp-fw-semibold);
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
}
.cases-lightbox__tag[hidden] { display: none; }

/* Caption — nadpis + text, absolutně dole nad gradientem */
.cases-lightbox__caption {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cases-lightbox__title {
	margin: 0;
	color: var(--rp-color-text);
	font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem);   /* 20→26 px */
	font-weight: var(--rp-fw-semibold);
	letter-spacing: var(--rp-tracking-tight);
	line-height: var(--rp-lh-tight);
}

.cases-lightbox__text {
	color: var(--rp-color-text);
	font-size: 14px;
	font-weight: var(--rp-fw-regular);
	letter-spacing: -0.02em;
	line-height: var(--rp-lh-normal);
}
.cases-lightbox__text p { margin: 0; color: inherit; }
.cases-lightbox__text p + p { margin-top: 8px; }

/* ── Šipky po stranách viewportu ──────────────────────── */
.cases-lightbox__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(243, 244, 246, 0.08);
	color: var(--rp-color-text);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rp-transition-fast), transform var(--rp-transition-fast);
}
@media (hover: hover) and (pointer: fine) {
	.cases-lightbox__nav:hover {
		background: rgba(243, 244, 246, 0.16);
	}
}
.cases-lightbox__nav:focus-visible {
	outline: 2px solid var(--rp-color-accent);
	outline-offset: 2px;
}
.cases-lightbox__nav:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.cases-lightbox__nav--prev {
	left: max(24px, calc(50vw - 600px));
}
.cases-lightbox__nav--next {
	right: max(24px, calc(50vw - 600px));
}

.cases-lightbox__nav-arrow {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-top: 2px solid currentColor;
	border-left: 2px solid currentColor;
}
.cases-lightbox__nav-arrow--left {
	transform: rotate(-45deg);
	margin-left: 4px;
}
.cases-lightbox__nav-arrow--right {
	transform: rotate(135deg);
	margin-right: 4px;
}

/* ── Close X — pravý horní roh ──────────────────────── */
.cases-lightbox__close {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(243, 244, 246, 0.08);
	color: var(--rp-color-text);
	cursor: pointer;
	font-size: 28px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rp-transition-fast);
}
@media (hover: hover) and (pointer: fine) {
	.cases-lightbox__close:hover {
		background: rgba(243, 244, 246, 0.16);
	}
}
.cases-lightbox__close:focus-visible {
	outline: 2px solid var(--rp-color-accent);
	outline-offset: 2px;
}

/* ── Counter — diskrétní „3 / 9" v dolním pruhu ─────────── */
.cases-lightbox__counter {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	color: var(--rp-color-text);
	font-size: 12px;
	font-weight: var(--rp-fw-medium);
	letter-spacing: 0.05em;
	background: rgba(17, 24, 39, 0.6);
	padding: 6px 12px;
	border-radius: var(--rp-radius-pill);
}

/* ── Body scroll lock když je lightbox otevřen ─────────── */
body.rp-lightbox-open {
	overflow: hidden;
}

/* ── Mobile / tablet — šipky blíž k okraji, menší ────────── */
@media (max-width: 767px) {
	.cases-lightbox {
		padding: 12px;
	}
	.cases-lightbox__nav {
		width: 40px;
		height: 40px;
	}
	.cases-lightbox__nav--prev { left: 12px; }
	.cases-lightbox__nav--next { right: 12px; }
	.cases-lightbox__close {
		top: 12px;
		right: 12px;
		width: 40px;
		height: 40px;
		font-size: 24px;
	}
	.cases-lightbox__caption {
		left: 16px;
		right: 16px;
		bottom: 16px;
	}
	.cases-lightbox__tag {
		top: 14px;
		left: 14px;
	}
	.cases-lightbox__stage {
		inset: 16px;
		border-radius: 8px;
	}
}

/* ── Reduced motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.cases-lightbox,
	.cases-lightbox__stage {
		transition: none;
	}
	.cases-lightbox__stage {
		transform: none !important;
	}
}