/*
 * Detail projektu jako case study (Web:Project, šablona app/Presentation/Web/Project/default.latte).
 * Navazuje na tokeny (shared/tokens.css) a základ z web.css (.wrap, .btn, .mono, .dot, .tile…), ale vlastní
 * komponenty mají předponu case-/frame/shot/chip, aby je změny jinde nerozbily.
 * Bez JS: všechno vidět, galerie je obyčejný seznam. Pohyb a výchozí stavy animací nastavuje project.js
 * (jen transform, opacity, clip-path); tady nic předem neschovává.
 */

.case {
	--case-gap: clamp(96px, 12vw, 168px);
	--shot-h: min(60vh, 600px);
}


/* ---------- úvod ---------- */

.case-hero { padding-top: 32px; }
.case-hero__back { margin-bottom: clamp(28px, 5vw, 56px); }

.case-hero__kicker {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	color: var(--ink-muted);
	font-size: 12px;
	letter-spacing: 0.12em;
}
.case-hero__position { font-variant-numeric: tabular-nums; }

.case-hero__title {
	margin-top: clamp(20px, 3vw, 36px);
	font: 700 clamp(56px, 11.5vw, 184px)/0.88 var(--font-display);
	letter-spacing: -0.055em;
	font-kerning: normal;
	overflow-wrap: break-word;
}
.case-hero__title .dot { margin-left: 0.02em; }

.case-hero__tagline {
	max-width: 34ch;
	margin-top: clamp(20px, 2.6vw, 32px);
	font: 400 clamp(20px, 2.4vw, 30px)/1.32 var(--font-body);
	color: var(--ink-muted);
}

.case-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: clamp(28px, 3.5vw, 40px);
}

/* Ověřený stav webu: měří server (App\Model\Status\SiteMonitor). */
.live {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-left: 12px;
	color: var(--ink-muted);
	font-size: 12px;
	letter-spacing: 0.08em;
}
.live__dot {
	position: relative;
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
}
.live time { white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
	.live__dot::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: var(--accent);
		animation: case-live 2.4s var(--ease-out) infinite;
	}
}
@keyframes case-live {
	0% { transform: scale(1); opacity: 0.55; }
	70%, 100% { transform: scale(3.2); opacity: 0; }
}

/* Masky SplitText u názvu: místo navíc pro háčky a dotahy. */
.case-word-mask { padding: 0.14em 0.04em 0.1em; margin: -0.14em -0.04em -0.1em; }


/* ---------- rámy: okno prohlížeče a telefon (jen CSS) ---------- */

.frame {
	position: relative;
	display: block;
	border: var(--rule) solid var(--line-strong);
	background: var(--paper-raised);
}
.frame__img { display: block; width: 100%; height: auto; }

.frame__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 34px;
	padding: 0 12px;
	border-bottom: var(--rule) solid var(--line-strong);
	background: var(--paper);
}
.frame__dots { display: flex; flex: none; gap: 6px; }
.frame__dots span {
	width: 9px;
	height: 9px;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
}
.frame__dots span:first-child { background: var(--ink); }
.frame__url {
	flex: 0 1 340px;
	min-width: 0;
	margin-inline: auto;
	padding: 2px 12px;
	overflow: hidden;
	border: 1px solid var(--line);
	color: var(--ink-muted);
	font: 500 11px/1.4 var(--font-mono);
	letter-spacing: 0.04em;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Prostor vpravo, ať je adresa opticky uprostřed (vlevo jsou tečky). */
.frame__bar::after { content: ""; flex: none; width: 39px; }

.frame--phone {
	padding: 9px;
	border-radius: 34px;
	background: var(--paper);
}
.frame--phone .frame__img { border-radius: 25px; }
.frame__notch {
	position: absolute;
	top: 17px;
	left: 50%;
	z-index: 1;
	width: 26%;
	height: 13px;
	border-radius: 999px;
	background: var(--ink);
	transform: translateX(-50%);
}

.frame--tile { aspect-ratio: 21 / 9; overflow: hidden; }


/* ---------- titulní obrázek (náklon a srovnání řídí project.js) ---------- */

.case-stage { margin-top: clamp(40px, 6vw, 72px); }
.case-stage__frame { transform-origin: 50% 0%; }
.case-stage.is-tilted .case-stage__frame { will-change: transform; }


/* ---------- pruh faktů ---------- */

.case-facts { position: relative; margin-top: clamp(64px, 8vw, 112px); padding-top: 28px; }

.case-rule {
	position: absolute;
	top: 0;
	left: var(--gutter);
	right: var(--gutter);
	height: var(--rule);
	background: var(--line-strong);
	transform-origin: 0 50%;
}

.case-facts__list { display: flex; flex-wrap: wrap; row-gap: 32px; }
.fact {
	flex: 1 1 170px;
	min-width: 0;
	padding: 0 24px;
	border-left: 1px solid var(--line);
}
.fact:first-child { padding-left: 0; border-left: 0; }
.fact--role { flex: 1.7 1 260px; }
.fact__label { color: var(--ink-muted); font-size: 12px; }
/* Hodnota vyjíždí zpod masky (project.js). */
.fact__value {
	margin-top: 10px;
	overflow: clip;
	padding-bottom: 0.08em;
	font: 700 clamp(22px, 2.2vw, 34px)/1.1 var(--font-display);
	letter-spacing: -0.03em;
}
.fact__in { display: block; }
.fact--short .fact__in { white-space: nowrap; }
/* Na širších displejích sloupce podle obsahu: krátké hodnoty se nezalomí, zalomí se nejdřív role. */
@media (min-width: 861px) {
	.case-facts__list { display: grid; grid-auto-flow: column; grid-auto-columns: auto; justify-content: space-between; }
}
.fact__num { font-variant-numeric: tabular-nums; }
.fact__unit { font-size: 0.6em; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-muted); }
.status-mark { display: inline-flex; align-items: center; gap: 0.32em; }
.status-mark::before {
	content: "";
	flex: none;
	width: 0.36em;
	height: 0.36em;
	border-radius: 50%;
	background: var(--ink-muted);
}
.status-mark--live::before { background: var(--accent); }


/* ---------- příběh: perex a kapitoly ---------- */

.case-story {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 24px;
	margin-top: var(--case-gap);
}
.case-story__main { grid-column: 3 / span 8; }
.case-story--toc .case-story__main { grid-column: 4 / span 8; }

.case-text { font-size: 19px; line-height: 1.65; }
.case-text p, .case-text ul { max-width: 64ch; margin-bottom: 1.1em; }
.case-text > :last-child { margin-bottom: 0; }
.case-text ul { padding-left: 1.2em; list-style: square; }
.case-text li + li { margin-top: 0.55em; }
.case-text li::marker { color: var(--accent); }
.case-text strong { font-weight: 600; }
.case-text a { color: var(--accent); }

.case-lead {
	font-size: clamp(21px, 2vw, 26px);
	line-height: 1.45;
	letter-spacing: -0.005em;
}
.case-lead p { max-width: 38ch; }
.case-lead + .case-intro { margin-top: 1.4em; }

.chapter { margin-top: clamp(72px, 9vw, 128px); scroll-margin-top: 24px; }
.chapter:first-child { margin-top: 0; }
.chapter__head {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: clamp(16px, 2.4vw, 32px);
	margin-bottom: 28px;
	padding-top: 24px;
}
.chapter__rule {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--rule);
	background: var(--line-strong);
	transform-origin: 0 50%;
}
/* Číslo kapitoly je jen ozdoba (aria-hidden), pořadí čte čtečka z osnovy nadpisů. */
.chapter__no {
	flex: none;
	min-width: 1.25em;
	font: 700 clamp(40px, 4.6vw, 68px)/0.84 var(--font-display);
	letter-spacing: -0.05em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}
.chapter__title {
	font: 700 clamp(28px, 3.2vw, 44px)/1.02 var(--font-display);
	letter-spacing: -0.035em;
}

/* Navigace kapitol: na desktopu lepí u horního okraje a ukazuje, kolik je přečteno. */
.case-toc { grid-column: 1 / span 3; }
.case-toc__title { margin-bottom: 14px; color: var(--ink-muted); font-size: 12px; }
.case-toc__list { list-style: none; border-top: 1px solid var(--line); }
.case-toc__list li { border-bottom: 1px solid var(--line); }
.case-toc__link {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	align-items: baseline;
	min-height: 44px;
	padding: 11px 0;
	color: var(--ink-muted);
	font-size: 15px;
	line-height: 1.35;
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}
.case-toc__no { font-size: 12px; letter-spacing: 0.04em; }
.case-toc__link:hover { color: var(--ink); }
.case-toc__link[aria-current] { color: var(--ink); font-weight: 600; }
.case-toc__link[aria-current] .case-toc__no { color: var(--accent); }
.case-toc__progress { display: none; }

@media (min-width: 1024px) {
	.case-toc__inner { position: sticky; top: 32px; }
	html.js .case-toc__progress {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-top: 18px;
		color: var(--ink-muted);
		font-size: 12px;
	}
}
.case-toc__track { position: relative; flex: 1; height: 2px; background: var(--line); }
.case-toc__bar {
	position: absolute;
	inset: 0;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: 0 50%;
}
.case-toc__pct { min-width: 4.5ch; text-align: right; font-variant-numeric: tabular-nums; }


/* ---------- galerie ---------- */

.case-gallery { margin-top: var(--case-gap); }
.case-gallery__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px 24px;
	padding-top: 22px;
}
.case-section-title {
	font: 700 clamp(36px, 5vw, 72px)/1 var(--font-display);
	letter-spacing: -0.04em;
}
.case-gallery__count { color: var(--ink-muted); font-size: 12px; }
.case-gallery__controls { display: flex; align-items: center; gap: 8px; margin-left: auto; align-self: center; }
.case-gallery__controls[hidden] { display: none; }
.case-gallery__counter { margin-right: 10px; color: var(--ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.case-gallery__counter span { color: var(--ink); }
.case-gallery__progress { display: none; }

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	padding: 0;
	border: var(--rule) solid var(--line-strong);
	border-radius: 0;
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--ink); color: var(--paper); }
.icon-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; background: var(--paper); color: var(--ink); }

.case-gallery__viewport { position: relative; margin-top: 40px; }

/* Bez JS: obyčejný seznam pod sebou. */
.shots {
	list-style: none;
	display: grid;
	justify-items: start;
	gap: 56px;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.shot__figure { width: min-content; max-width: 100%; }
/* position: relative drží skryté popisky (.visually-hidden je absolutní) uvnitř posuvného pásu; jinak by
   se počítaly do šířky stránky a telefon by ji oddálil. */
.shot__link { position: relative; display: block; color: inherit; text-decoration: none; }
.shot__link:focus-visible { outline-offset: 6px; }
.shot--browser .frame, .shot--wide .frame { width: min(960px, calc(100vw - 2 * var(--gutter))); }
.shot--phone .frame { width: min(300px, 72vw); }
.shot__caption {
	display: flex;
	gap: 12px;
	margin-top: 14px;
	color: var(--ink-muted);
	font-size: 15px;
	line-height: 1.45;
}
.shot__no { flex: none; padding-top: 0.18em; color: var(--ink); font-size: 12px; letter-spacing: 0.04em; }
.shot__link .frame { transition: border-color var(--dur) var(--ease-out); }
.shot__link:hover .frame { border-color: var(--accent); }

/* S JS: vodorovný pás. Telefon a omezený pohyb = posuvný pás se zarážkami, desktop = připnutý (.is-pinned). */
html.js .case-gallery__progress {
	display: block;
	flex-basis: 100%;
	height: 2px;
	margin-top: 6px;
	background: var(--line);
}
.case-gallery__bar {
	display: block;
	height: 100%;
	background: var(--ink);
	transform: scaleX(0);
	transform-origin: 0 50%;
}
html.js .shots {
	display: flex;
	align-items: center;
	gap: clamp(24px, 4vw, 64px);
	width: max-content;
	max-width: none;
	margin: 0;
	padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
html.js .shot { flex: none; }
html.js .case-gallery:not(.is-pinned) .case-gallery__viewport {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
	padding-bottom: 8px;
}
html.js .case-gallery:not(.is-pinned) .case-gallery__viewport::-webkit-scrollbar { display: none; }
html.js .case-gallery:not(.is-pinned) .shot { scroll-snap-align: center; }

@media (max-width: 1023px) {
	/* Snímky různé výšky (telefon vedle okna): zarovnat nahoru, ať popisky nejsou ve vzduchu. */
	html.js .shots { align-items: flex-start; }
	html.js .shot--browser .frame, html.js .shot--wide .frame { width: min(84vw, 680px); }
	html.js .shot--phone .frame { width: min(58vw, 260px); }
}
@media (min-width: 1024px) {
	/* Výška pásu je daná výškou okna, šířka snímku poměrem stran z width/height. */
	html.js .shot--browser .frame, html.js .shot--phone .frame { width: auto; }
	html.js .shot--browser .frame__img { width: auto; max-width: none; height: calc(var(--shot-h) - 38px); }
	html.js .shot--phone .frame__img { width: auto; max-width: none; height: calc(var(--shot-h) - 22px); }
	html.js .shot--wide .frame { width: min(64vw, 960px); }
}

.case-gallery.is-pinned {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100svh;
	padding-block: 32px;
}
.case-gallery.is-pinned .shots { will-change: transform; }


/* ---------- zvětšený snímek (dialog, otevírá project.js) ---------- */

.lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: transparent;
	color: var(--ink);
}
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: var(--paper);
	opacity: 0.96;
}
.lightbox__figure {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 72px var(--gutter) 24px;
}
.lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(calc(100vw - 2 * var(--gutter) - 128px), 1440px);
	max-height: calc(100vh - 170px);
	max-height: calc(100svh - 170px);
	border: var(--rule) solid var(--line-strong);
	background: var(--paper-raised);
}
.lightbox__caption {
	display: flex;
	gap: 12px;
	max-width: 70ch;
	color: var(--ink-muted);
	font-size: 15px;
	line-height: 1.45;
	text-align: center;
}
.lightbox__count { flex: none; padding-top: 0.18em; color: var(--ink); font-size: 12px; text-transform: none; }
.lightbox__close { position: absolute; top: 16px; right: 16px; }
.lightbox__prev, .lightbox__next { position: absolute; top: calc(50% - 24px); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
@media (max-width: 700px) {
	.lightbox__img { max-width: calc(100vw - 2 * var(--gutter)); max-height: calc(100svh - 200px); }
	.lightbox__prev, .lightbox__next { top: auto; bottom: 16px; }
}


/* ---------- technologie a odkazy ---------- */

.case-stack {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 32px 24px;
	margin-top: var(--case-gap);
	padding-top: 22px;
}
.case-stack .case-section-title { grid-column: 1 / span 4; font-size: clamp(32px, 3.6vw, 52px); }
.chips {
	grid-column: 5 / -1;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 10px;
}
.chip {
	padding: 10px 16px 11px;
	border: var(--rule) solid var(--line-strong);
	font: 600 clamp(17px, 1.7vw, 22px)/1.1 var(--font-display);
	letter-spacing: -0.01em;
}
.case-links { grid-column: 5 / -1; }
.case-links__title { margin-bottom: 8px; color: var(--ink-muted); font-size: 12px; }
.case-links__list { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 32px; }
.case-links__list a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-weight: 600;
}
.case-links__list .icon { width: 16px; height: 16px; color: var(--ink-muted); }


/* ---------- další projekt přes celou šířku ---------- */

.case-next { margin-top: var(--case-gap); border-top: var(--rule) solid var(--line-strong); }
.case-next__link {
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;
	padding-block: clamp(40px, 6vw, 88px);
	color: var(--ink);
	text-decoration: none;
}
.case-next__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--paper-raised);
	opacity: 0;
	transition: opacity var(--dur) var(--ease-out);
}
.case-next__link:hover, .case-next__link:focus-visible { color: var(--ink); }
.case-next__link:hover::before, .case-next__link:focus-visible::before { opacity: 1; }
.case-next__link:focus-visible { outline-offset: -4px; }
.case-next__inner { display: grid; justify-items: start; gap: 16px; }
.case-next__label { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: 12px; }
.case-next__title {
	max-width: 12ch;
	font: 700 clamp(52px, 10.5vw, 168px)/0.88 var(--font-display);
	letter-spacing: -0.055em;
	overflow-wrap: break-word;
}
.case-next__meta { color: var(--ink-muted); font-size: 12px; }
.case-next__media { display: block; margin-top: 28px; padding-inline: var(--gutter); }
.case-next__media img { width: 100%; height: auto; border: var(--rule) solid var(--line-strong); }

/* Myš na širokém displeji: obrázek je schovaný vpravo a odkryje se při najetí (nebo fokusu). */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
	.case-next__media {
		position: absolute;
		top: 50%;
		right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
		z-index: -1;
		width: min(40vw, 560px);
		margin: 0;
		padding: 0;
		transform: translateY(-50%);
		clip-path: inset(50% 0 50% 0);
		transition: clip-path 0.7s var(--ease-out);
	}
	.case-next__media img { transform: scale(1.14); transition: transform 1s var(--ease-out); }
	.case-next__link:hover .case-next__media, .case-next__link:focus-visible .case-next__media { clip-path: inset(0 0 0 0); }
	.case-next__link:hover .case-next__media img, .case-next__link:focus-visible .case-next__media img { transform: scale(1); }
	/* Název přes obrázek: rozdílové prolnutí drží kontrast na papíře i na screenshotu (světlý i tmavý režim). */
	.case-next__title { color: #fff; mix-blend-mode: difference; }
	.case-next__title, .case-next__label { transition: transform 0.6s var(--ease-out); }
	.case-next__link:hover .case-next__title { transform: translateX(14px); }
}
@media (forced-colors: active) {
	.case-next__title { color: LinkText; mix-blend-mode: normal; }
}

.case-next__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 8px 0;
	border-top: 1px solid var(--line);
}
.case-next__prev {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	text-decoration: none;
}
.case-next__prev .mono { color: var(--ink-muted); font-size: 12px; }
.case-next__prev-title { font: 700 20px/1.1 var(--font-display); letter-spacing: -0.02em; }
.case-next__prev:hover .case-next__prev-title { color: var(--accent); }
.case-next__keys { color: var(--ink-muted); font-size: 12px; }
.case-next__keys kbd {
	display: inline-block;
	min-width: 24px;
	padding: 2px 5px;
	border: 1px solid var(--line);
	font: inherit;
	text-align: center;
}
html:not(.js) .case-next__keys { display: none; }
@media (hover: none), (pointer: coarse) {
	.case-next__keys { display: none; }
}


/* ---------- menší obrazovky ---------- */

@media (max-width: 1023px) {
	.case-story__main, .case-story--toc .case-story__main { grid-column: 1 / -1; }
	.case-toc { grid-column: 1 / -1; margin-bottom: 56px; }
	.case-stack .case-section-title, .chips, .case-links { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
	.fact { flex-basis: calc(50% - 24px); }
	.fact:nth-child(odd) { padding-left: 0; border-left: 0; }
	.fact--role { flex-basis: 100%; padding-left: 0; border-left: 0; }
	.fact--role ~ .fact:nth-child(odd) { padding-left: 24px; border-left: 1px solid var(--line); }
	.fact--role ~ .fact:nth-child(even) { padding-left: 0; border-left: 0; }
	.case-text { font-size: 18px; }
}
@media (max-width: 700px) {
	.live { margin-left: 0; flex-basis: 100%; }
	.case-gallery__controls { margin-left: 0; width: 100%; }
	.case-gallery__counter { margin-right: auto; }
	.chapter__head { flex-direction: column; gap: 14px; }
	.frame__bar { height: 26px; gap: 8px; padding: 0 8px; }
	.frame__dots { gap: 4px; }
	.frame__dots span { width: 7px; height: 7px; }
	.frame__url { font-size: 10px; padding: 1px 8px; }
	.frame__bar::after { width: 25px; }
}
@media (max-width: 420px) {
	.fact { padding-inline: 0 12px; }
	.fact--role ~ .fact:nth-child(odd) { padding-left: 14px; }
}