@charset "UTF-8";

/* =========================================================================
 * Styly pro stránku "Jak mAIdoc funguje v ordinaci"
 * Action: Home:howItWorksInPractice
 *
 * - Všechny styly jsou scopované pod .how-it-works-page
 * - CSS proměnné jsou definovány na .how-it-works-page (NE :root),
 *   takže nepřebíjejí globální proměnné z index-styles.css
 *   (hlavička/patička webu zůstávají nedotčené).
 * - Třídy mají prefix hiw- aby nekolidovaly s ničím jiným.
 * - Dark mode přes @media (prefers-color-scheme: dark) - stejně jako
 *   ostatní stránky webu.
 * ========================================================================= */

.how-it-works-page {
	/* světlý režim */
	--hiw-bg: #f6fbff;
	--hiw-bg-strong: #eaf6ff;
	--hiw-surface: #ffffff;
	--hiw-surface-soft: rgba(255, 255, 255, 0.82);
	--hiw-surface-video: rgba(255, 255, 255, 0.74);
	--hiw-text: #102033;
	--hiw-muted: #5c7187;
	--hiw-line: rgba(26, 68, 105, 0.12);
	--hiw-primary: #1d78ff;
	--hiw-primary-dark: #0b57c4;
	--hiw-aqua: #23c6c8;
	--hiw-mint: #8fe7dd;
	--hiw-green: #2fc483;
	--hiw-warning: #fff4d8;
	--hiw-shadow: 0 24px 70px rgba(31, 86, 132, 0.15);
	--hiw-shadow-soft: 0 14px 35px rgba(31, 86, 132, 0.10);
	--hiw-radius-xl: 32px;
	--hiw-radius-lg: 24px;
	--hiw-radius-md: 18px;
	--hiw-container: 1180px;

	/* gradient pozadí + barevný kontext */
	--hiw-page-bg:
		radial-gradient(circle at 8% -12%, rgba(35, 198, 200, 0.22), transparent 32rem),
		radial-gradient(circle at 88% 0%, rgba(29, 120, 255, 0.20), transparent 34rem),
		linear-gradient(180deg, #f8fcff 0%, #f6fbff 48%, #ffffff 100%);

	/* karty s lehkým glassmorphism */
	--hiw-card-bg: #ffffff;
	--hiw-content-card-blue: linear-gradient(180deg, #ffffff 0%, #f0f8ff 100%);
	--hiw-content-card-alert: linear-gradient(180deg, #ffffff 0%, #fff8e7 100%);
	--hiw-content-card-alert-border: rgba(215, 145, 0, 0.16);

	color: var(--hiw-text);
	line-height: 1.6;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: var(--hiw-page-bg);
}

.how-it-works-page * { box-sizing: border-box; }
.how-it-works-page a { color: inherit; text-decoration: none; }

.how-it-works-page .hiw-container {
	width: min(100% - 40px, var(--hiw-container));
	margin-inline: auto;
}

/* HERO ------------------------------------------------------------------ */

.how-it-works-page .hiw-hero {
	position: relative;
	overflow: hidden;
	padding: 84px 0 46px;
}

.how-it-works-page .hiw-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
	gap: 44px;
	align-items: center;
}

.how-it-works-page .hiw-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding: 8px 13px;
	border: 1px solid rgba(29, 120, 255, 0.14);
	border-radius: 999px;
	color: var(--hiw-primary-dark);
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 10px 24px rgba(31, 86, 132, 0.06);
	font-size: 0.93rem;
	font-weight: 760;
}

.how-it-works-page .hiw-pulse {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: var(--hiw-green);
	box-shadow: 0 0 0 6px rgba(47, 196, 131, 0.14);
}

.how-it-works-page h1,
.how-it-works-page h2,
.how-it-works-page h3 { line-height: 1.08; letter-spacing: -0.045em; margin: 0; }

.how-it-works-page h1 {
	font-size: clamp(2.65rem, 5.25vw, 5.2rem);
	max-width: 850px;
}

.how-it-works-page h2 {
	font-size: clamp(2.05rem, 3.65vw, 3.55rem);
	max-width: 850px;
}

.how-it-works-page h3 { font-size: 1.2rem; }

.how-it-works-page .hiw-lead {
	max-width: 760px;
	margin: 24px 0 0;
	color: var(--hiw-muted);
	font-size: clamp(1.08rem, 1.7vw, 1.28rem);
}

.how-it-works-page .hiw-hero-note {
	margin-top: 24px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	max-width: 680px;
	color: var(--hiw-muted);
	font-size: 0.98rem;
}

.how-it-works-page .hiw-hero-note strong { color: var(--hiw-text); }

/* VIDEO PANEL ----------------------------------------------------------- */

.how-it-works-page .hiw-video-panel {
	position: relative;
	padding: 18px;
	border-radius: var(--hiw-radius-xl);
	background: var(--hiw-surface-video);
	border: 1px solid rgba(255, 255, 255, 0.82);
	box-shadow: var(--hiw-shadow);
}

.how-it-works-page .hiw-video-panel::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	background: linear-gradient(135deg, rgba(29, 120, 255, 0.22), rgba(35, 198, 200, 0.18), rgba(255,255,255,0));
	z-index: -1;
}

.how-it-works-page .hiw-video-topline {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 4px 4px 14px;
}

.how-it-works-page .hiw-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 11px;
	border-radius: 999px;
	color: #0f6d4b;
	background: rgba(47, 196, 131, 0.12);
	font-weight: 800;
	font-size: 0.84rem;
}

.how-it-works-page .hiw-video-duration {
	color: var(--hiw-muted);
	font-weight: 740;
	font-size: 0.9rem;
}

.how-it-works-page .hiw-video-frame {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: 24px;
	background:
		radial-gradient(circle at 32% 20%, rgba(143, 231, 221, 0.40), transparent 18rem),
		linear-gradient(135deg, #102b4a 0%, #125caa 58%, #19aeb6 100%);
	border: 1px solid rgba(255,255,255,0.65);
	box-shadow: 0 18px 44px rgba(16, 43, 74, 0.18);
}

.how-it-works-page .hiw-video-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: center;
	padding-top: 18px;
}

/* TLAČÍTKA -------------------------------------------------------------- */

.how-it-works-page .hiw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 999px;
	font-weight: 780;
	border: 1px solid transparent;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
}

.how-it-works-page .hiw-btn:hover { transform: translateY(-1px); }

.how-it-works-page .hiw-btn-primary {
	color: #fff;
	background: linear-gradient(135deg, var(--hiw-primary) 0%, var(--hiw-aqua) 100%);
	box-shadow: 0 16px 35px rgba(29, 120, 255, 0.24);
}

.how-it-works-page .hiw-btn-secondary {
	color: var(--hiw-primary-dark);
	background: var(--hiw-surface);
	border-color: var(--hiw-line);
}

/* TRUST STRIP ----------------------------------------------------------- */

.how-it-works-page .hiw-trust-strip {
	position: relative;
	z-index: 3;
	transform: translateY(18px);
}

.how-it-works-page .hiw-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.how-it-works-page .hiw-trust-card,
.how-it-works-page .hiw-content-card,
.how-it-works-page .hiw-step-card,
.how-it-works-page .hiw-cta-box {
	border: 1px solid var(--hiw-line);
	background: var(--hiw-surface-soft);
	box-shadow: var(--hiw-shadow-soft);
}

.how-it-works-page .hiw-trust-card {
	border-radius: 22px;
	padding: 18px;
	min-height: 148px;
}

.how-it-works-page .hiw-icon {
	width: 42px;
	height: 42px;
	border-radius: 15px;
	display: grid;
	place-items: center;
	margin-bottom: 14px;
	color: var(--hiw-primary-dark);
	background: linear-gradient(145deg, #edf7ff, #e7fbf8);
	font-size: 1.13rem;
	font-weight: 900;
}

.how-it-works-page .hiw-trust-card h3 { margin-bottom: 8px; font-size: 1.05rem; }
.how-it-works-page .hiw-trust-card p { margin: 0; color: var(--hiw-muted); font-size: 0.94rem; }

/* SEKCE A KROKY --------------------------------------------------------- */

.how-it-works-page .hiw-section { padding: 82px 0; }
.how-it-works-page .hiw-section.is-compact { padding: 58px 0; }

.how-it-works-page .hiw-section-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 32px;
	margin-bottom: 34px;
}

.how-it-works-page .hiw-section-head p {
	max-width: 560px;
	color: var(--hiw-muted);
	margin: 0;
	font-size: 1.05rem;
}

.how-it-works-page .hiw-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.how-it-works-page .hiw-step-card {
	position: relative;
	overflow: hidden;
	min-height: 230px;
	padding: 26px;
	border-radius: var(--hiw-radius-lg);
	background: var(--hiw-card-bg);
}

.how-it-works-page .hiw-step-card::after {
	content: "";
	position: absolute;
	right: -48px;
	bottom: -58px;
	width: 150px;
	height: 150px;
	border-radius: 999px;
	background: rgba(35, 198, 200, 0.10);
}

.how-it-works-page .hiw-number {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin-bottom: 18px;
	border-radius: 14px;
	color: #fff;
	background: linear-gradient(135deg, var(--hiw-primary), var(--hiw-aqua));
	font-weight: 900;
}

.how-it-works-page .hiw-step-card p { color: var(--hiw-muted); margin: 12px 0 0; }

/* SPLIT / CONTENT CARDS ------------------------------------------------- */

.how-it-works-page .hiw-split {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 18px;
	align-items: stretch;
}

.how-it-works-page .hiw-content-card {
	border-radius: var(--hiw-radius-lg);
	padding: clamp(24px, 3vw, 36px);
	background: var(--hiw-card-bg);
}

.how-it-works-page .hiw-content-card.is-blue {
	background: var(--hiw-content-card-blue);
}

.how-it-works-page .hiw-content-card.is-alert {
	background: var(--hiw-content-card-alert);
	border-color: var(--hiw-content-card-alert-border);
}

.how-it-works-page .hiw-content-card p { color: var(--hiw-muted); margin: 14px 0 0; }

.how-it-works-page .hiw-check-list,
.how-it-works-page .hiw-x-list {
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
	display: grid;
	gap: 12px;
}

.how-it-works-page .hiw-check-list li,
.how-it-works-page .hiw-x-list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	color: var(--hiw-muted);
}

.how-it-works-page .hiw-check-list li::before {
	content: "\002713";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	color: #086746;
	background: rgba(47, 196, 131, 0.14);
	font-weight: 900;
	font-size: 0.82rem;
	margin-top: 1px;
}

.how-it-works-page .hiw-x-list li::before {
	content: "\0000D7";
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	color: #a45b00;
	background: rgba(245, 166, 35, 0.15);
	font-weight: 900;
	font-size: 1rem;
	margin-top: 1px;
}

/* HIGHLIGHT BAND ------------------------------------------------------- */

.how-it-works-page .hiw-highlight-band {
	border-radius: var(--hiw-radius-xl);
	padding: clamp(28px, 5vw, 52px);
	background:
		radial-gradient(circle at 86% 12%, rgba(143, 231, 221, 0.54), transparent 22rem),
		linear-gradient(135deg, #102b4a 0%, #125caa 56%, #19aeb6 100%);
	color: #fff;
	box-shadow: var(--hiw-shadow);
	overflow: hidden;
}

.how-it-works-page .hiw-highlight-band p {
	color: rgba(255,255,255,0.83);
	max-width: 780px;
	margin: 18px 0 0;
}

/* CTA ------------------------------------------------------------------- */

.how-it-works-page .hiw-cta { padding: 76px 0; }

.how-it-works-page .hiw-cta-box {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
	border-radius: var(--hiw-radius-xl);
	padding: clamp(28px, 5vw, 52px);
	background: var(--hiw-card-bg);
}

.how-it-works-page .hiw-cta-box p { color: var(--hiw-muted); max-width: 760px; margin: 16px 0 0; }

.how-it-works-page .hiw-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: flex-end;
}

/* =========================================================================
 * DARK MODE
 * ========================================================================= */

@media (prefers-color-scheme: dark) {
	.how-it-works-page {
		/* tmavá paleta - sladěná s globálním webem (index-styles.css) */
		--hiw-bg: #0c111b;
		--hiw-bg-strong: #121a27;
		--hiw-surface: #121a27;
		--hiw-surface-soft: rgba(18, 26, 39, 0.85);
		--hiw-surface-video: rgba(18, 26, 39, 0.78);
		--hiw-text: #e8eefc;
		--hiw-muted: #9bb0cf;
		--hiw-line: rgba(255, 255, 255, 0.10);
		--hiw-primary: #5b8cff;
		--hiw-primary-dark: #2a6cff;
		--hiw-aqua: #23c6c8;
		--hiw-mint: #8fe7dd;
		--hiw-green: #2fc483;
		--hiw-warning: #3a2f10;
		--hiw-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
		--hiw-shadow-soft: 0 14px 35px rgba(0, 0, 0, 0.45);

		--hiw-page-bg:
			radial-gradient(circle at 8% -12%, rgba(35, 198, 200, 0.18), transparent 32rem),
			radial-gradient(circle at 88% 0%, rgba(91, 140, 255, 0.20), transparent 34rem),
			linear-gradient(180deg, #0c111b 0%, #0f1622 48%, #121a27 100%);

		--hiw-card-bg: #121a27;
		--hiw-content-card-blue: linear-gradient(180deg, #121a27 0%, #16243e 100%);
		--hiw-content-card-alert: linear-gradient(180deg, #121a27 0%, #2a2316 100%);
		--hiw-content-card-alert-border: rgba(215, 145, 0, 0.28);
	}

	/* eyebrow má v light barvu primary-dark — v dark zesvětlit */
	.how-it-works-page .hiw-eyebrow {
		border-color: rgba(91, 140, 255, 0.28);
		color: #cfdcff;
		background: rgba(18, 26, 39, 0.7);
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
	}

	.how-it-works-page .hiw-status-badge {
		color: #7fe5b3;
		background: rgba(47, 196, 131, 0.18);
	}

	/* světlý glassmorphism border u video-panelu — v dark ho ztmavit */
	.how-it-works-page .hiw-video-panel {
		border-color: rgba(255, 255, 255, 0.06);
	}

	/* světlá gradient ikona — v dark ji zesladit s tmavým povrchem */
	.how-it-works-page .hiw-icon {
		color: #cfdcff;
		background: linear-gradient(145deg, #17243d, #15263a);
	}

	/* check / x list pozadí - tmavší odstíny */
	.how-it-works-page .hiw-check-list li::before {
		color: #7fe5b3;
		background: rgba(47, 196, 131, 0.20);
	}
	.how-it-works-page .hiw-x-list li::before {
		color: #ffc080;
		background: rgba(245, 166, 35, 0.22);
	}

	/* malé doladění tlačítka aby v dark nesvítilo příliš */
	.how-it-works-page .hiw-btn-primary {
		box-shadow: 0 16px 35px rgba(29, 120, 255, 0.32);
	}
	.how-it-works-page .hiw-btn-secondary {
		color: #cfdcff;
		background: var(--hiw-surface);
		border-color: var(--hiw-line);
	}
}

/* =========================================================================
 * RESPONSIVE
 * ========================================================================= */

@media (max-width: 980px) {
	.how-it-works-page .hiw-hero-grid,
	.how-it-works-page .hiw-split,
	.how-it-works-page .hiw-cta-box { grid-template-columns: 1fr; }
	.how-it-works-page .hiw-trust-grid { grid-template-columns: repeat(2, 1fr); }
	.how-it-works-page .hiw-steps-grid { grid-template-columns: 1fr; }
	.how-it-works-page .hiw-cta-actions { justify-content: flex-start; }
}

@media (max-width: 640px) {
	.how-it-works-page .hiw-container { width: min(100% - 28px, var(--hiw-container)); }
	.how-it-works-page .hiw-hero { padding-top: 52px; }
	.how-it-works-page .hiw-hero-grid { gap: 28px; }
	.how-it-works-page .hiw-video-panel { padding: 14px; border-radius: 26px; }
	.how-it-works-page .hiw-video-frame { border-radius: 20px; }
	.how-it-works-page .hiw-video-actions { justify-content: stretch; }
	.how-it-works-page .hiw-btn { width: 100%; }
	.how-it-works-page .hiw-trust-grid { grid-template-columns: 1fr; }
	.how-it-works-page .hiw-section { padding: 58px 0; }
	.how-it-works-page .hiw-section-head { display: block; }
	.how-it-works-page .hiw-section-head p { margin-top: 16px; }
	.how-it-works-page h1 { font-size: clamp(2.35rem, 12vw, 3.25rem); }
	.how-it-works-page h2 { font-size: clamp(1.95rem, 9vw, 2.55rem); }
}