/* Inter, self-hosted (2026-08-11, PO: "potřebujeme používat písmo Inter
   nejen pro logo... i na těchto webech" - nahrazuje Open Sans, sjednoceno
   s blueorcawebsites.eu, stejný zdroj/technika: jeden proměnný soubor
   pokrývá řezy 300-800, dva soubory jen kvůli unicode-range). */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/inter-latin-ext.woff2?v=20260825') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url('../fonts/inter-latin.woff2?v=20260825') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Use design token for all headings */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-base);
}

/*
	Future Imperfect by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

:root {
	/* Theme variables */
	--bg-color: #f4f4f4;
	--layout-color: #ffffff;
	--primary-color: #1d95c9;
	--primary2-color:  #0e739e;
	--border-color: #e6e6e6;
	--link-color: var(--primary-color);

	/* Typography */
	--font-base: 'Inter', sans-serif;

	--text-xs: 14px;
	--text-sm: 16px;
	--text-md: 18px;
	--text-lg: 24px;
	--text-xl: 32px;
	--text-xxl: 40px;

	--line-body: 1.6;
	--line-heading: 1.25;

	/* Colors */
	--text-primary: #333;
	--text-secondary: #555;
	--text-muted: #6d6d6d; /* 4.70:1 na #f4f4f4 - #717171 mělo 4.44 a padalo na WCAG AA (Lighthouse 2026-09-02) */

	/* Spacing (8px system) */
	--space-xs: 8px;
	--space-sm: 16px;
	--space-md: 24px;
	--space-lg: 32px;
	--space-xl: 48px;
	--space-xxl: 64px;

	/* Radius */
	--radius-sm: 4px;
	--radius-md: 8px;

	/* Map legacy color tokens to new design tokens */
	--text-color: var(--text-primary);
	--text2-color: var(--text-secondary);
}

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0; 
	padding: 0;
	border: 0;  
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1.5;
	letter-spacing: 0.05rem;    
}

.ihidden {display: none !important;}

#footer {
	margin: 1.5rem 0 0 0 ;
}

ol, ul {
	list-style: none;
}



blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic */

	@-ms-viewport {
		width: device-width;
	}

	body {
		-ms-overflow-style: scrollbar;
	}

	@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}

	}

	html {
		box-sizing: border-box;
		/* 2026-08-11, scroll choreografie hlavičky - viz komentář u
		   .network-bar/#header na konci souboru. */
		overflow-anchor: none;
		/* Skok na kotvu nesmí cíl schovat pod pevnou hlavičku (2026-08-23, v4).
		   Proměnnou nastavuje main.js podle skutečně viditelné části bloku. */
		scroll-padding-top: var(--topbar-viditelna, calc(5.3125em + 24px));
		/* Posuvník a výběr textu v barvách značky, stejný vzor jako
		   blueorcawebsites.eu (2026-10-25). Posuvník je vidět vždy a místo pro něj
		   je rezervované, takže krátká stránka po přechodu neposkočí do strany. */
		overflow-y: scroll;
		scrollbar-gutter: stable;
		scrollbar-color: var(--primary-color) rgba(0, 0, 0, 0.08);
	}

	::-webkit-scrollbar {
		width: 8px;
		height: 8px;
	}
	::-webkit-scrollbar-track {
		background: var(--bg-color);
	}
	::-webkit-scrollbar-thumb {
		background: var(--primary-color);
		border-radius: 99px;
		border: 1px solid var(--bg-color);
	}

	::selection {
		background: var(--primary-color);
		color: #fff;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	html,
	body {
		background: var(--bg-color);
		/*
		background: url('../../images/bg.webp') no-repeat center center / cover;
		background-attachment: fixed;*/
	}
	body {
	/*	background: rgba(250,250,250,0.9);*/
		/* background: rgba(var(--bg-color),0.9); */
		/*backdrop-filter: blur(5px);*/
	}


		body.is-preload, body.is-preload *, body.is-preload *:before, body.is-preload *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
		}

/* Type */

		body, input, select, textarea {
			color: var(--text-color);
			font-family: var(--font-base);
			font-size: var(--text-md);
			font-weight: 400;
			line-height: var(--line-body);
		}

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: var(--text-sm);
			}

		}

		@media screen and (max-width: 1280px) {

			body, input, select, textarea {
				font-size: var(--text-sm);
			}

		}

		@media screen and (max-width: 980px) {

			body, input, select, textarea {
				font-size: var(--text-sm);
			}

		}

		@media screen and (max-width: 768px) {

			body, input, select, textarea {
				font-size: var(--text-sm);
			}

		}

		@media screen and (max-width: 480px) {

			body, input, select, textarea {
				font-size: var(--text-sm);
			}

		}

	a {
		-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		-ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
		transition: color 0.2s ease, border-bottom-color 0.2s ease;
		border-bottom: dashed 1px var(--primary2-color);
		color: var(--primary2-color);
		text-decoration: none;
		font-weight: 500;
		transition: all ease 150ms;

	}

		a:before {
			-moz-transition: color 0.2s ease;
			-webkit-transition: color 0.2s ease;
			-ms-transition: color 0.2s ease;
			transition: color 0.2s ease;
		}

		a:hover {
		border-bottom: dashed 1px var(--primary-color);
			color: var(--link-color) !important;
		}

			a:hover:before {
				color: var(--link-color) !important;
			}

	strong, b {
	color: var(--text-primary);
		font-weight: 700;
	}

	em, i {
		font-style: italic;
	}

	p {
		margin: 0 0 var(--space-sm) 0;
	}

	h1, h2, h3, h4, h5, h6 {
			color: var(--text-primary);
			/* var(--font-base) = Inter (2026-08-11) - keep normal casing */
			font-family: var(--font-base);
			font-weight: 600;
			letter-spacing: normal;
			line-height: var(--line-heading);
			margin: var(--space-lg) 0 var(--space-sm) 0;
			text-transform: none;

		}

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			border-bottom: 0;
			

		}
		h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
			border-bottom: 0;
		}

	h1 {
		font-size: var(--text-xxl);
	}
	h2 {
		font-size: var(--text-xl);
	}

	h3 {
		font-size: var(--text-lg);
	}

	h4 {
		font-size: 0.9em;
	}

	h5 {
		font-size: 0.7em;
	}

	h6 {
		font-size: 0.7em;
	}

	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}

	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}

	blockquote {
		border-left: solid 4px #e9e9e9;
		font-weight: 600;
		font-size: 1.3rem;
		margin: 0 0 var(--space-lg) 0;
		padding: 0.5em 0 0.5em 2em;
	}

	code {
		background: rgba(160, 160, 160, 0.075);
		border: solid 1px #e9e9e9;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0.25em;
		padding: 0.25em 0.65em;
	}

	pre {
		-webkit-overflow-scrolling: touch;
		font-family: "Courier New", monospace;
		font-size: 0.9em;
		margin: 0 0 2em 0;
	}

		pre code {
			display: block;
			line-height: 1.75em;
			padding: 1em 1.5em;
			overflow-x: auto;
		}

	.article-content hr {
		position: relative;
		border: none;
		height: 1px;
		margin: 2.5rem 0 !important;
		background: linear-gradient(to right, transparent 0%, var(--border-color) 20%, var(--border-color) 80%, transparent 100%);
	}

	hr {
		padding: 0 !important;
		border: 0;
		border-bottom: solid 1px #e9e9e9;
		margin: 2.5rem 0 !important;
	}

		hr.major {
			margin: 3em 0;
		}

	.align-left {
		text-align: left;
	}

	.align-center {
		text-align: center;
	}

	.align-right {
		text-align: right;
	}

/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
		}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0;
			margin-left: 0em;
		}

			.row.gtr-0 > * {
				padding: 0 0 0 0em;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0em;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0em;
				}

		.row.gtr-25 {
			margin-top: 0;
			margin-left: -0.25em;
		}

			.row.gtr-25 > * {
				padding: 0 0 0 0.25em;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -0.25em;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 0.25em;
				}

		.row.gtr-50 {
			margin-top: 0;
			margin-left: -0.5em;
		}

			.row.gtr-50 > * {
				padding: 0 0 0 0.5em;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -0.5em;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 0.5em;
				}

		.row {
			margin-top: 0;
			margin-left: -1em;
		}

			.row > * {
				padding: 0 0 0 1em;
			}

			.row.gtr-uniform {
				margin-top: -1em;
			}

				.row.gtr-uniform > * {
					padding-top: 1em;
				}

		.row.gtr-150 {
			margin-top: 0;
			margin-left: -1.5em;
		}

			.row.gtr-150 > * {
				padding: 0 0 0 1.5em;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -1.5em;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 1.5em;
				}

		.row.gtr-200 {
			margin-top: 0;
			margin-left: -2em;
		}

			.row.gtr-200 > * {
				padding: 0 0 0 2em;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -2em;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 2em;
				}

		@media screen and (max-width: 1680px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xlarge {
					order: -1;
				}

				.row > .col-1-xlarge {
					width: 8.33333%;
				}

				.row > .off-1-xlarge {
					margin-left: 8.33333%;
				}

				.row > .col-2-xlarge {
					width: 16.66667%;
				}

				.row > .off-2-xlarge {
					margin-left: 16.66667%;
				}

				.row > .col-3-xlarge {
					width: 25%;
				}

				.row > .off-3-xlarge {
					margin-left: 25%;
				}

				.row > .col-4-xlarge {
					width: 33.33333%;
				}

				.row > .off-4-xlarge {
					margin-left: 33.33333%;
				}

				.row > .col-5-xlarge {
					width: 41.66667%;
				}

				.row > .off-5-xlarge {
					margin-left: 41.66667%;
				}

				.row > .col-6-xlarge {
					width: 50%;
				}

				.row > .off-6-xlarge {
					margin-left: 50%;
				}

				.row > .col-7-xlarge {
					width: 58.33333%;
				}

				.row > .off-7-xlarge {
					margin-left: 58.33333%;
				}

				.row > .col-8-xlarge {
					width: 66.66667%;
				}

				.row > .off-8-xlarge {
					margin-left: 66.66667%;
				}

				.row > .col-9-xlarge {
					width: 75%;
				}

				.row > .off-9-xlarge {
					margin-left: 75%;
				}

				.row > .col-10-xlarge {
					width: 83.33333%;
				}

				.row > .off-10-xlarge {
					margin-left: 83.33333%;
				}

				.row > .col-11-xlarge {
					width: 91.66667%;
				}

				.row > .off-11-xlarge {
					margin-left: 91.66667%;
				}

				.row > .col-12-xlarge {
					width: 100%;
				}

				.row > .off-12-xlarge {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.25em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.25em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.25em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.25em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.5em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.5em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.5em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.5em;
						}

				.row {
					margin-top: 0;
					margin-left: -1em;
				}

					.row > * {
						padding: 0 0 0 1em;
					}

					.row.gtr-uniform {
						margin-top: -1em;
					}

						.row.gtr-uniform > * {
							padding-top: 1em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -2em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 2em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2em;
						}

		}

		@media screen and (max-width: 1280px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.33333%;
				}

				.row > .off-1-large {
					margin-left: 8.33333%;
				}

				.row > .col-2-large {
					width: 16.66667%;
				}

				.row > .off-2-large {
					margin-left: 16.66667%;
				}

				.row > .col-3-large {
					width: 25%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.33333%;
				}

				.row > .off-4-large {
					margin-left: 33.33333%;
				}

				.row > .col-5-large {
					width: 41.66667%;
				}

				.row > .off-5-large {
					margin-left: 41.66667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.33333%;
				}

				.row > .off-7-large {
					margin-left: 58.33333%;
				}

				.row > .col-8-large {
					width: 66.66667%;
				}

				.row > .off-8-large {
					margin-left: 66.66667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.33333%;
				}

				.row > .off-10-large {
					margin-left: 83.33333%;
				}

				.row > .col-11-large {
					width: 91.66667%;
				}

				.row > .off-11-large {
					margin-left: 91.66667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.25em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.25em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.25em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.25em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.5em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.5em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.5em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.5em;
						}

				.row {
					margin-top: 0;
					margin-left: -1em;
				}

					.row > * {
						padding: 0 0 0 1em;
					}

					.row.gtr-uniform {
						margin-top: -1em;
					}

						.row.gtr-uniform > * {
							padding-top: 1em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -2em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 2em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2em;
						}

		}

		@media screen and (max-width: 980px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.33333%;
				}

				.row > .off-1-medium {
					margin-left: 8.33333%;
				}

				.row > .col-2-medium {
					width: 16.66667%;
				}

				.row > .off-2-medium {
					margin-left: 16.66667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.33333%;
				}

				.row > .off-4-medium {
					margin-left: 33.33333%;
				}

				.row > .col-5-medium {
					width: 41.66667%;
				}

				.row > .off-5-medium {
					margin-left: 41.66667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.33333%;
				}

				.row > .off-7-medium {
					margin-left: 58.33333%;
				}

				.row > .col-8-medium {
					width: 66.66667%;
				}

				.row > .off-8-medium {
					margin-left: 66.66667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.33333%;
				}

				.row > .off-10-medium {
					margin-left: 83.33333%;
				}

				.row > .col-11-medium {
					width: 91.66667%;
				}

				.row > .off-11-medium {
					margin-left: 91.66667%;
				}

				.row > .col-12-medium {
					width: 100%;
				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.25em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.25em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.25em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.25em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.5em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.5em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.5em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.5em;
						}

				.row {
					margin-top: 0;
					margin-left: -1em;
				}

					.row > * {
						padding: 0 0 0 1em;
					}

					.row.gtr-uniform {
						margin-top: -1em;
					}

						.row.gtr-uniform > * {
							padding-top: 1em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -2em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 2em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2em;
						}

		}

		@media screen and (max-width: 768px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.33333%;
				}

				.row > .off-1-small {
					margin-left: 8.33333%;
				}

				.row > .col-2-small {
					width: 16.66667%;
				}

				.row > .off-2-small {
					margin-left: 16.66667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.33333%;
				}

				.row > .off-4-small {
					margin-left: 33.33333%;
				}

				.row > .col-5-small {
					width: 41.66667%;
				}

				.row > .off-5-small {
					margin-left: 41.66667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.33333%;
				}

				.row > .off-7-small {
					margin-left: 58.33333%;
				}

				.row > .col-8-small {
					width: 66.66667%;
				}

				.row > .off-8-small {
					margin-left: 66.66667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.33333%;
				}

				.row > .off-10-small {
					margin-left: 83.33333%;
				}

				.row > .col-11-small {
					width: 91.66667%;
				}

				.row > .off-11-small {
					margin-left: 91.66667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.25em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.25em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.25em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.25em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.5em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.5em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.5em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.5em;
						}

				.row {
					margin-top: 0;
					margin-left: -1em;
				}

					.row > * {
						padding: 0 0 0 1em;
					}

					.row.gtr-uniform {
						margin-top: -1em;
					}

						.row.gtr-uniform > * {
							padding-top: 1em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -2em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 2em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2em;
						}

		}

		@media screen and (max-width: 480px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-xsmall {
					order: -1;
				}

				.row > .col-1-xsmall {
					width: 8.33333%;
				}

				.row > .off-1-xsmall {
					margin-left: 8.33333%;
				}

				.row > .col-2-xsmall {
					width: 16.66667%;
				}

				.row > .off-2-xsmall {
					margin-left: 16.66667%;
				}

				.row > .col-3-xsmall {
					width: 25%;
				}

				.row > .off-3-xsmall {
					margin-left: 25%;
				}

				.row > .col-4-xsmall {
					width: 33.33333%;
				}

				.row > .off-4-xsmall {
					margin-left: 33.33333%;
				}

				.row > .col-5-xsmall {
					width: 41.66667%;
				}

				.row > .off-5-xsmall {
					margin-left: 41.66667%;
				}

				.row > .col-6-xsmall {
					width: 50%;
				}

				.row > .off-6-xsmall {
					margin-left: 50%;
				}

				.row > .col-7-xsmall {
					width: 58.33333%;
				}

				.row > .off-7-xsmall {
					margin-left: 58.33333%;
				}

				.row > .col-8-xsmall {
					width: 66.66667%;
				}

				.row > .off-8-xsmall {
					margin-left: 66.66667%;
				}

				.row > .col-9-xsmall {
					width: 75%;
				}

				.row > .off-9-xsmall {
					margin-left: 75%;
				}

				.row > .col-10-xsmall {
					width: 83.33333%;
				}

				.row > .off-10-xsmall {
					margin-left: 83.33333%;
				}

				.row > .col-11-xsmall {
					width: 91.66667%;
				}

				.row > .off-11-xsmall {
					margin-left: 91.66667%;
				}

				.row > .col-12-xsmall {
					width: 100%;
				}

				.row > .off-12-xsmall {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0;
					margin-left: 0em;
				}

					.row.gtr-0 > * {
						padding: 0 0 0 0em;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0em;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0em;
						}

				.row.gtr-25 {
					margin-top: 0;
					margin-left: -0.25em;
				}

					.row.gtr-25 > * {
						padding: 0 0 0 0.25em;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -0.25em;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 0.25em;
						}

				.row.gtr-50 {
					margin-top: 0;
					margin-left: -0.5em;
				}

					.row.gtr-50 > * {
						padding: 0 0 0 0.5em;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -0.5em;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 0.5em;
						}

				.row {
					margin-top: 0;
					margin-left: -1em;
				}

					.row > * {
						padding: 0 0 0 1em;
					}

					.row.gtr-uniform {
						margin-top: -1em;
					}

						.row.gtr-uniform > * {
							padding-top: 1em;
						}

				.row.gtr-150 {
					margin-top: 0;
					margin-left: -1.5em;
				}

					.row.gtr-150 > * {
						padding: 0 0 0 1.5em;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -1.5em;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 1.5em;
						}

				.row.gtr-200 {
					margin-top: 0;
					margin-left: -2em;
				}

					.row.gtr-200 > * {
						padding: 0 0 0 2em;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -2em;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 2em;
						}

		}

/* Author */

	.author {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-justify-content: -moz-flex-end;
		-webkit-justify-content: -webkit-flex-end;
		-ms-justify-content: -ms-flex-end;
		justify-content: flex-end;
		border-bottom: 0;
		font-size: 0.6em;
		font-weight: 400;
		white-space: nowrap;
	}

		.author .name {
			-moz-transition: border-bottom-color 0.2s ease;
			-webkit-transition: border-bottom-color 0.2s ease;
			-ms-transition: border-bottom-color 0.2s ease;
			transition: border-bottom-color 0.2s ease;
			border-bottom: dotted 1px rgba(160, 160, 160, 0.65);
			display: block;
			margin: 0 1.5em 0 0;
		}

		.author img {
			border-radius: 100%;
			display: block;
			width: 4em;
		}

		.author:hover .name {
			border-bottom-color: transparent;
		}


/* Box */

	.box {
		border: solid 1px #e9e9e9;
		margin-bottom: var(--space-lg);
		padding: var(--space-md);
	}

		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
		-webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
		-ms-transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
		transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
		background-color: transparent;
		border: 0;

		box-shadow: inset 0 0 0 1px var(--primary-color);
		color: var(--primary2-color) !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.6em;
		font-weight: 800;
		height: 4.8125em;
		
		line-height: 4.8125em;
		padding: 0 2.5em;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
		box-shadow: inset 0 0 0 1px var(--border-color);
			border-bottom: 0;
			color: var(--primary-color) !important;
		}

			input[type="submit"]:hover:active,
			input[type="reset"]:hover:active,
			input[type="button"]:hover:active,
			button:hover:active,
			.button:hover:active {
				background-color: rgba(46, 186, 174, 0.05);
			}

		input[type="submit"]:before, input[type="submit"]:after,
		input[type="reset"]:before,
		input[type="reset"]:after,
		input[type="button"]:before,
		input[type="button"]:after,
		button:before,
		button:after,
		.button:before,
		.button:after {
			color: var(--text-muted);
			position: relative;
		}

		input[type="submit"]:before,
		input[type="reset"]:before,
		input[type="button"]:before,
		button:before,
		.button:before {
			left: -1em;
			padding: 0 0 0 0.75em;
		}

		input[type="submit"]:after,
		input[type="reset"]:after,
		input[type="button"]:after,
		button:after,
		.button:after {
			left: 1em;
			padding: 0 0.75em 0 0;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		button.large,
		.button.large {
			font-size: 0.7em;
			padding: 0 3em;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.5em;
		}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			pointer-events: none;
			color: #e9e9e9 !important;
		}

			input[type="submit"].disabled:before, input[type="submit"]:disabled:before,
			input[type="reset"].disabled:before,
			input[type="reset"]:disabled:before,
			input[type="button"].disabled:before,
			input[type="button"]:disabled:before,
			button.disabled:before,
			button:disabled:before,
			.button.disabled:before,
			.button:disabled:before {
				color: #e9e9e9 !important;
			}

/* Form */


	label {
		color: var(--text-primary);
		display: block;
		font-size: 0.9em;
		font-weight: 700;
		margin: 0 0 var(--space-sm) 0;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: rgba(160, 160, 160, 0.075);
		border: none;
		border: solid 1px #e9e9e9;
		border-radius: 0;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			border-color: var(--primary-color);
			box-shadow: inset 0 0 0 1px var(--primary-color);
		}

	.select-wrapper {
		text-decoration: none;
		display: block;
		position: relative;
	}

		.select-wrapper:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 800;
		}

		.select-wrapper:before {
			color: #e9e9e9;
			content: '\f078';
			display: block;
			height: 2.75em;
			line-height: 2.75em;
			pointer-events: none;
			position: absolute;
			right: 0;
			text-align: center;
			top: 0;
			width: 2.75em;
		}

		.select-wrapper select::-ms-expand {
			display: none;
		}

	select {
		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#e9e9e9' /%3E%3C/svg%3E");
		background-size: 1.25rem;
		background-repeat: no-repeat;
		background-position: calc(100% - 1rem) center;
		height: 2.75em;
		padding-right: 2.75em;
		text-overflow: ellipsis;
	}

		select option {
			color: var(--text-primary);
			background: var(--layout-color);
		}

		select:focus::-ms-value {
			background-color: transparent;
		}

		select::-ms-expand {
			display: none;
		}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 2.75em;
	}

	textarea {
		padding: 0.75em 1em;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2em;
		opacity: 0;
		width: 1em;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			color: var(--text-color);
			cursor: pointer;
			display: inline-block;
			font-size: 1em;
			font-weight: 400;
			padding-left: 2.4em;
			padding-right: 0.75em;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				display: inline-block;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				line-height: 1;
				text-transform: none !important;
				font-family: 'Font Awesome 5 Free';
				font-weight: 800;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				background: rgba(160, 160, 160, 0.075);
				border: solid 1px #e9e9e9;
				content: '';
				display: inline-block;
				font-size: 0.8em;
				height: 2.0625em;
				left: 0;
				line-height: 2.0625em;
				position: absolute;
				text-align: center;
				top: 0;
				width: 2.0625em;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: var(--text-primary);
			border-color: var(--text-primary);
			color: var(--layout-color);
			content: '\f00c';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			border-color: var(--primary-color);
			box-shadow: 0 0 0 1px var(--primary-color);
		}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: var(--text-muted) !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: var(--text-muted) !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: var(--text-muted) !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: var(--text-muted) !important;
		opacity: 1.0;
	}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon > .label {
			display: none;
		}

		.icon:before {
			line-height: inherit;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

		.icon.suffix:before {
			float: right;
		}

/* Image */

	.image {
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			padding: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			padding: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		/* Titulní obrázky článků jsou 3:2 (1000x667). Kontejner drží tentýž poměr,
		   takže cover nic neořízne a obrázek se ani nedeformuje (PO 2026-07-31). */
		.image.featured {
			display: flex;
			margin: 0 0 0 0;
			width: 100%;
			aspect-ratio: 3 / 2;
			overflow: hidden;
		}

			.image.featured img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

/* List */

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 1em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px #e9e9e9;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

	dl {
		margin: 0 0 2em 0;
	}

		dl dt {
			display: block;
			font-weight: 700;
			margin: 0 0 1em 0;
		}

		dl dd {
			margin-left: 2em;
		}

/* Actions */

	ul.actions {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		cursor: default;
		list-style: none;
		margin-left: -1em;
		padding-left: 0;
	}

		ul.actions li {
			padding: 0 0 0 1em;
			vertical-align: middle;
		}

		ul.actions.special {
			-moz-justify-content: center;
			-webkit-justify-content: center;
			-ms-justify-content: center;
			justify-content: center;
			width: 100%;
			margin-left: 0;
		}

			ul.actions.special li:first-child {
				padding-left: 0;
			}

		ul.actions.stacked {
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			margin-left: 0;
		}

			ul.actions.stacked li {
				padding: 1.3em 0 0 0;
			}

				ul.actions.stacked li:first-child {
					padding-top: 0;
				}

		ul.actions.fit {
			width: calc(100% + 1em);
		}

			ul.actions.fit li {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-moz-flex-shrink: 1;
				-webkit-flex-shrink: 1;
				-ms-flex-shrink: 1;
				flex-shrink: 1;
				width: 100%;
			}

				ul.actions.fit li > * {
					width: 100%;
				}

			ul.actions.fit.stacked {
				width: 100%;
			}

		@media screen and (max-width: 480px) {

			ul.actions:not(.fixed) {
				-moz-flex-direction: column;
				-webkit-flex-direction: column;
				-ms-flex-direction: column;
				flex-direction: column;
				margin-left: 0;
				width: 100% !important;
			}

				ul.actions:not(.fixed) li {
					-moz-flex-grow: 1;
					-webkit-flex-grow: 1;
					-ms-flex-grow: 1;
					flex-grow: 1;
					-moz-flex-shrink: 1;
					-webkit-flex-shrink: 1;
					-ms-flex-shrink: 1;
					flex-shrink: 1;
					padding: 1em 0 0 0;
					text-align: center;
					width: 100%;
				}

					ul.actions:not(.fixed) li > * {
						width: 100%;
					}

					ul.actions:not(.fixed) li:first-child {
						padding-top: 0;
					}

					ul.actions:not(.fixed) li input[type="submit"],
					ul.actions:not(.fixed) li input[type="reset"],
					ul.actions:not(.fixed) li input[type="button"],
					ul.actions:not(.fixed) li button,
					ul.actions:not(.fixed) li .button {
						width: 100%;
					}

						ul.actions:not(.fixed) li input[type="submit"].icon:before,
						ul.actions:not(.fixed) li input[type="reset"].icon:before,
						ul.actions:not(.fixed) li input[type="button"].icon:before,
						ul.actions:not(.fixed) li button.icon:before,
						ul.actions:not(.fixed) li .button.icon:before {
							margin-left: -0.5em;
						}

		}

/* Icons */

	ul.icons {
		cursor: default;
		list-style: none;
		padding-left: 0;
		display: flex;
		align-items: center;
		gap: 1rem;
	}

		ul.icons li {
			display: inline-flex;
			padding: 0;
		}


			ul.icons li a {
				display: flex;
				text-decoration: none !important;
				border: 0 !important;
			}				
			ul.icons li a svg {
				height: 1.5rem;
				fill: var(--text-color);
				transition: all ease 150ms;
			}		
			ul.icons li a:hover svg {
				fill: var(--primary-color)
			}	

				ul.icons li > * .label {
					display: none;
				}

/* Posts */

	ul.posts {
		list-style: none;
		padding: 0;
	}

		ul.posts li {
			border-top: dotted 1px #e9e9e9;
			margin: 1.5em 0 0 0;
			padding: 1.5em 0 0 0;
		}

			ul.posts li:first-child {
				border-top: 0;
				margin-top: 0;
				padding-top: 0;
			}

		ul.posts article {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: -moz-flex-start;
			-webkit-align-items: -webkit-flex-start;
			-ms-align-items: -ms-flex-start;
			align-items: flex-start;
			-moz-flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;
		}

			ul.posts article .image {
				display: block;
				margin-right: 1.5em;
				min-width: 4em;
				width: 4em;
			}

				ul.posts article .image img {
					width: 100%;
				}

			ul.posts article header {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-ms-flex: 1;
			}

				ul.posts article header h3 {
					font-size: 0.7em;
					margin-top: 0.125em;
				}

				ul.posts article header .published {
					display: inline-flex;
					font-size: 0.7em;
					font-weight: 400;
				}

				ul.posts article header > :last-child {
					margin-bottom: 0;
				}


/* Mini Post */


	/* Poslední karta ve výpisu nesmí za sebou nechat spodní margin - #main by tím
	   končil o 24 px níž než poslední viditelná karta a sticky sidebar, který
	   dosedá na spodek #main, by vypadal posunutý (PO 2026-07-31: „teď je aside
	   níž o spodní margin článku posledního"). */
	#main .mini-post:last-child {
		margin-bottom: 0;
	}

	.mini-post {
		position: relative;
		display: flex;
		flex-direction: row; /* image left, content right when space allows */
		align-items: stretch;
		justify-content: stretch;
		background: var(--layout-color);
		border: solid 1px #e9e9e9;
		margin:  1.5rem 0;
	}
	.mini-post .overlay{
		position: absolute;
		inset: 0;
		font-size: 0;
		border: 0 !important;
		color: #000;
	}
	.mini-post:hover header a {
	color: var(--primary-color) !important;
	}


		/* PO 2026-07-31: karty ve výpisu končily každá jinak vysoko, protože sloupec
		   s obrázkem měl pevný poměr 4:3, kdežto výška textu se lišila podle délky
		   perexu. Sloupec se proto natahuje na výšku karty (align-self: stretch) a
		   obrázek se do něj vejde celý (contain) - nikdy oříznutý ani roztažený.
		   Poměr 3:2 odpovídá titulním obrázkům, takže pruh vedle obrázku vznikne
		   jen u výrazně delšího perexu. */
		.mini-post-image, .mini-post .image {
			display: flex;
			flex: 0 0 320px; /* fixed width when space allows */
			width: 320px;
			align-self: stretch;
			min-height: 213px; /* 320 / 1.5 - výška obrázku v poměru 3:2 */
			overflow: hidden;
			margin: 0;
			position: relative;
			/* PO 2026-08-06: bílá misto svetle modre - obrazky pripadovek maji bile
			   pozadi a pruh vedle nich byl videt jako ram. */
			background: #fff;
		}
		.mini-post-image::after, .mini-post .image::after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(-165deg, rgba(255,255,255,0.08) 45%, transparent 45.5%);
			pointer-events: none;
			transition: opacity 0.35s ease;
			z-index: 1;
			opacity: 1;
		}
		.mini-post:hover .mini-post-image::after, .mini-post:hover .image::after {
			opacity: 0;
		}



			.mini-post-image img, .mini-post .image img {
				width: 100%;
				height: 100%; /* fill the image container so object-fit works reliably */
				display: block;
				transition: transform 0.2s ease-out;
				object-fit: contain; /* celý obrázek, bez ořezu a bez deformace */
				/* PO 2026-08-21: obrázek k horní hraně sloupce, ne na střed - u delšího
				   perexu je sloupec vyšší než obrázek (viz komentář výš, align-self:
				   stretch) a karty tak končily vizuálně nesourodě, obrázek "plaval". */
				object-position: top;
			}

			.mini-post-image:hover img, .mini-post .image:hover img {
				transform: scale(1.05);
			}

		.mini-post-body { flex: 1 1 auto; padding: 0.8em 1em; }

		.mini-post header {
			display: flex;
			flex-direction: column;
			padding: 1.5rem;
			position: relative;
			flex: 1 1 auto;
			min-height: 0;
		}
		.mini-post header a {
			color: var(--text-primary);
		}		
		.mini-post header a:hover {
			color:var(--primary-color);
		}		
		.mini-post header > div {
			display: flex;
			flex-direction: column;
			height: 100%;
		}

		.mini-post header > div h2 {
			margin: 0 0 0.6rem;
		}

		.mini-post header > div p.mini-excerpt {
			flex: 1 1 auto;
			margin: 0;
			font-size: 1rem;
			line-height: 1.7;
			font-weight: 400;
			/* PO 2026-10-24: ve výpisu nejvýš 3 řádky perexu; celý perex zůstává
			   v článku a v meta description. */
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			overflow: hidden;
		}

		.mini-meta {
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			gap: 0;
			margin-top: auto;
			padding-top: 1rem;
		}

		.mini-post .mini-meta .mini-author {
			font-size: 0.78rem;
			font-weight: 400;
			color: var(--text-muted);
			white-space: nowrap;
		}

		.mini-post time.published {
			font-size: 0.78rem;
			color: var(--text-muted);
			letter-spacing: 0.01em;
			white-space: nowrap;
		}

		.mini-post time.published::before {
			content: "·";
			margin: 0 0.5em;
			opacity: 0.4;
		}

		.mini-post .category {
			display: none;
			align-self: center;
			margin-left: auto;
			padding-left: 1rem;
			flex-shrink: 0;
			font-size: 0.68rem;
			font-weight: 700;
			letter-spacing: 0.07em;
			text-transform: uppercase;
		/*	color: var(--primary-color);
			background: color-mix(in srgb, var(--primary-color) 10%, transparent);
			border: 1px solid color-mix(in srgb, var(--primary-color) 25%, transparent);*/
			padding: 0.15rem 0.55rem;
			border-radius: 2rem;
			color: var(--text-muted);		
			line-height: 1.6;
		}

		body[data-page="home"] .mini-post .category {
			display: inline-block;
		}

		#main .mini-post header h2 {
			font-size: 1.3em;
			/* PO 2026-08-06: vetsi prodech mezi radky titulku ve vypisu (bylo 1.25) */
			line-height: 1.4;
			margin: 0 0 0.6rem;
		}
		#main .mini-post header p {
			margin: 0;
		}	
				

		@media screen and (max-width: 768px) {

			.mini-post { flex-direction: column-reverse; }
			.mini-post header {
				padding: 1rem;
			}
			
			.mini-post-image, .mini-post .image, #main .mini-post .image {
				width: 100%;
				aspect-ratio: 3 / 2;
				min-width: 0;
				max-width: none; /* allow image to expand to container width on small screens */
				flex: 0 1 auto;
			}
			/* If mini-posts live in the sidebar, make sure any !important max-width is also removed */
			#sidebar .mini-post-image, #sidebar .mini-post .image {
				max-width: none !important;
				width: 100% !important;
			}
			.mini-post-body { padding: 0.8em; }
		}

/* Sidebar-specific overrides: ensure mini-posts in the sidebar are stacked
   and images never overflow the narrow sidebar column. These rules are
   specific to #sidebar so the main column layout remains row-oriented. */
#sidebar .mini-posts {
	display: block;
	width: 100%;
}

/* Ensure 3D perspective for flip animations */
#main, .posts, ul.posts {
	perspective: 1000px;
	-webkit-perspective: 1000px;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}

#main {
	min-height:  700px;
	max-width: 1050px;
}


.categories {
	/* keep the outer container neutral so only active item is highlighted */
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	border-radius: 0;
	margin: 1rem 0 2.5rem;

	a {
		color: var(--text-primary);
	}
}

.title{
	display: flex;
	font-size: 1em;
	font-weight: 600;
	margin: 0 0 1em 0;
	padding: 0 0 0 0;

	&.mb-8 {
		margin-bottom: 2rem;
	}
}
body[data-page="home"] .title {
	margin-bottom: 0 !important;
}






/* Categories menu in sidebar */
.categories nav ul {
	display: flex;
	flex-direction: column;
	gap: 0rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.categories nav ul li {
	margin: 0 0 0 0;
	padding: 0;

}




.categories nav ul li a {
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 400;
	gap: 0.5rem;
	text-decoration: none;
	border-top: 1px solid #e9e9e9;
	border-bottom: 1px solid #e9e9e9;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	margin: 0 0 -1px;
	transition: all ease 150ms;
}

.categories nav ul li a.active {
	background: #fff;
	border:solid 1px #e9e9e9;
	font-weight: 600;
	color: var(--primary2-color);
}
.categories nav ul li a:hover {
	color: var(--primary-color);
}

.categories nav ul li a .count {
	float: right;
	font-size: 0.85em;
	color: var(--text-muted);
	background: rgba(160,160,160,0.06);
	padding: 0.15em 0.5em;
	border-radius: 999px;
}


#sidebar .mini-posts > * {
	margin: 0 0 1.5em 0;
	width: 100%;
}

#sidebar .mini-post {

	display: block;
	flex-direction: column !important;
}

#sidebar .mini-post-image, #sidebar .mini-post .image {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
	min-width: 0 !important;
	overflow: hidden;
}

#sidebar .mini-post-body {
	padding: 0.6em 0.6em 0.8em 0.6em;
}
			.mini-post header h2 {
				font-size: 0.85em;
			}

			.published {
				display: inline-flex;
				font-size: 0.7em;
				font-weight: 400;
			}
 

			.mini-post .published {
				margin: 0 0 0 0;
			}



			.mini-excerpt {
				font-size: 0.95rem;
				font-weight: 300;


			}

	.mini-posts {
		margin: 0 0 2em 0;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

		@media screen and (max-width: 768px) {

			.mini-post {
				
			}


			.mini-post .image {
				flex: 0 0 100%; /* fixed width when space allows */
				max-width: 100%;
				min-width: 120px;
				height: auto;
				width: 100%;
				aspect-ratio: 3 / 2; /* poměr titulních obrázků; drží místo před načtením */
			}


		}

		@media screen and (max-width: 480px) {

			.mini-posts {
				display: block;
				width: 100%;
			}

				.mini-posts > * {
					margin: 0 0 2em 0;
					width: 100%;
				}

		}

/* Post */

	.post {
		padding: 0 ;
		position: relative;
	}

		.post > header {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			position: relative;
			flex-direction: column;
			justify-content: flex-start;
			width: calc(100%);
			padding-bottom: 1rem;
		}

			.post > header .title {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
				-ms-flex: 1;
				padding: 0;
				margin: 0 0 2rem;
				display: flex;
				gap: 1rem;
				flex-direction: column;

			}



				.post > header .title h1,
				.post > header .title h2
				{
					font-weight: 800;
					margin: 0 0 0;
				}
				.post > header .title p {
					font-weight: 300;
					font-size: 1.2em;
					color: var(--text2-color);
					
				}				

				.post > header .title > :last-child {
					margin-bottom: 0;
				}

			.post > .meta {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 0;
				margin: 0;
			}

				.post > .meta > * {
					margin: 0;
				}

				.post > .meta .published {

				}

		.post > a.image.featured {
			overflow: hidden;
		}

			.post > a.image.featured img {
				-moz-transition: -moz-transform 0.2s ease-out;
				-webkit-transition: -webkit-transform 0.2s ease-out;
				-ms-transition: -ms-transform 0.2s ease-out;
				transition: transform 0.2s ease-out;
			}

			.post > a.image.featured:hover {
				border-bottom: none !important;
			}

		.post > footer {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-align-items: center;
			-webkit-align-items: center;
			-ms-align-items: center;
			align-items: center;
		}

/* Post card variant: image left, 4:3 ratio, no margin */
.post.post-card {
	padding: 0; /* we will control padding inside */
}

.post.post-card > header {
	align-items: stretch;
	flex-direction: row-reverse;
}

.post-card-image {
	display: block;
	width: 40%;
	min-width: 18em;
	max-width: 40%;
	overflow: hidden;
	position: relative;
}
.post-card-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.13) 45%, transparent 45%);
	pointer-events: none;
	transition: opacity 0.35s ease;
	z-index: 1;
}
.post-card-image:hover::after {
	opacity: 0;
}

.post-card-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	display: block;
}

.post-card-body {
	padding: 1.25em 1.5em;
	flex: 1 1 auto;
}

@media screen and (max-width: 980px) {
	.post.post-card > header { flex-direction: column; }
	.post-card-image { width: 100%; min-width: 0; }
}

			.post > footer .actions {
				-moz-flex-grow: 1;
				-webkit-flex-grow: 1;
				-ms-flex-grow: 1;
				flex-grow: 1;
			}

			.post > footer .stats {
				cursor: default;
				list-style: none;
				padding: 0;
			}

				.post > footer .stats li {
					border-left: solid 1px #e9e9e9;
					display: inline-block;
					font-size: 0.6em;
					font-weight: 400;
					
					line-height: 1;
					margin: 0 0 0 2em;
					padding: 0 0 0 2em;
					text-transform: uppercase;
				}

					.post > footer .stats li:first-child {
						border-left: 0;
						margin-left: 0;
						padding-left: 0;
					}

					.post > footer .stats li .icon {
						border-bottom: 0;
					}

						.post > footer .stats li .icon:before {
							color: #e9e9e9;
							margin-right: 0.75em;
						}

		@media screen and (max-width: 980px) {

			.post {

			}

				.post > header {
					-moz-flex-direction: column;
					-webkit-flex-direction: column;
					-ms-flex-direction: column;
					flex-direction: column;
				}

					.post > header .title {
						-ms-flex: 0 1 auto;
						text-align: center;
					}

.post > .meta {
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;
						margin: 0;
						padding: 0;
						width: 100%;
					}

						.post > .meta > * {
							margin: 0;
						}

		}

		@media screen and (max-width: 768px) {

			.post {

			}

				.post > header {
					padding-bottom: 2rem;
				}

				.post > header .title {
					margin-bottom: 0;	
				}

					.post > header .title h2 {
						font-size: 1.1em;
					}

		}

		@media screen and (max-width: 480px) {

			.post > .meta {

			}

				.post > .meta > * {
					border-left: 0;
					margin: 0;
					padding-left: 0;
				}

			.post > .image.featured {

			}

			.post > footer {
				-moz-align-items: -moz-stretch;
				-webkit-align-items: -webkit-stretch;
				-ms-align-items: -ms-stretch;
				align-items: stretch;
				-moz-flex-direction: column-reverse;
				-webkit-flex-direction: column-reverse;
				-ms-flex-direction: column-reverse;
				flex-direction: column-reverse;
			}

				.post > footer .stats {
					text-align: center;
				}

					.post > footer .stats li {
						margin: 0 0 0 1.25em;
						padding: 0 0 0 1.25em;
					}

		}

/* ─── Article Meta ─── */

.article-meta {
	display: flex;
	flex-direction: row-reverse;
	gap: 0.4rem 1rem;
	align-items: center;
	justify-content: space-between;
	margin: 0.6rem 0 0;
	padding: 0.5rem 0 0;
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--text-muted);
	line-height: 1;
}

	.article-meta__item {
		display: flex;
		align-items: center;
		gap: 0.3rem;
	}

		.article-meta__item svg { display: none; }
		.article-meta__item--category { display: none; }

		.article-meta__item span,
		.article-meta__item time,
		.article-meta__item a {
			font-size: inherit;
			font-family: inherit;
			color: inherit;
			text-decoration: none;
		}


/* ─── Article CTA ─── */

.article-cta {
	background: linear-gradient(to bottom, #fff 0%, #c6e9fd 100%);
	border: 1px solid #e9e9e9;
	border-top: 0;
	border-radius: 0 0 var(--radius-sm) var(--radius-sm);
	margin-top: 0;
	overflow: hidden;
	position: relative;
}

	.article-cta::after {
		content: '';
		position: absolute;
		top: 0.5rem;
		right: 0.5rem;
		width: 250px;
		height: 250px;
		background: url('/assets/images/logo-blueorca.svg') no-repeat center center;
		background-size: 250px 250px;
		opacity: 0.04;
		pointer-events: none;
		filter: grayscale(1);
	}

	.article-cta__inner {
		padding: 2rem 3rem 3.5rem;
	}

	.article-cta__header {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		margin-bottom: 1rem;
	}

	.article-cta__divider {
		flex: 1;
		border: none;
		margin: 0 !important;
		height: 1px;
		background: linear-gradient(to right, #1a5a8a 0%, transparent 100%);
		border-radius: 1px;
	}

	.article-cta__logo {
		height: 26px;
		width: auto;
		opacity: 0.75;
		display: block;
	}

	.article-cta__body {
		color: #0d3f6e;
		font-size: var(--text-sm);
		font-weight: 400;
		line-height: var(--line-body);
	}

		.article-cta__body h2,
		.article-cta__body h3 {
			color: #0a2d52;
			margin-bottom: 1rem;
			font-size: 1.4em;
			font-weight: 600;
		}

		.article-cta__body p {
			color: #0d3f6e;
			margin-bottom: 1rem;
		}

		.article-cta__body p:last-child {
			margin-bottom: 0;
			margin-top: 0.5rem;
		}

		.article-cta__body strong {
			color: #0a2d52;
			font-weight: 600;
		}

		/* CTA výzva – poslední p před tlačítkem */
		.article-cta__body p:last-of-type:not(:only-of-type) strong:only-child,
		.article-cta__body p strong:only-child {
			font-size: 1.05em;
			color: #09274a;
		}

		.article-cta__body a:not(.btn-primary) {
			color: var(--primary2-color);
			text-decoration: none;
			border-bottom: 1px solid rgba(14, 115, 158, 0.35);
			transition: color 0.15s, border-color 0.15s;
		}

		.article-cta__body a:not(.btn-primary):hover {
			color: #0a2d52;
			border-bottom-color: #0a2d52;
		}

		/* before/after comparison images */
		.article-cta__body .bow-sbsv {
			display: flex;
			gap: 1rem;
			margin-top: 1.5rem;
		}

			.article-cta__body .bow-sbsv img {
				width: 50%;
				border-radius: var(--radius-sm);
			}

		@media screen and (max-width: 736px) {

			.article-cta__inner {
				padding: 1.5rem 1.5rem 2rem;
			}

			.article-cta__body .bow-sbsv {
				flex-direction: column;
			}

				.article-cta__body .bow-sbsv img {
					width: 100%;
				}

		}

/* Section/Article */

	section.special, article.special {
		text-align: center;
	}

	header p {
		font-size: 1.15rem;
		font-weight: 400;
		letter-spacing: 0.05em;
		line-height: 1.5;
	}

/* Table */

	.table-wrapper {
		-webkit-overflow-scrolling: touch;
		overflow-x: auto;
	}

	table {
		margin: 0 0 2em 0;
		width: 100%;
	}

		table tbody tr {
			border: solid 1px #e9e9e9;
			border-left: 0;
			border-right: 0;
		}

			table tbody tr:nth-child(2n + 1) {
				background-color: rgba(160, 160, 160, 0.075);
			}

		table td {
			padding: 0.75em 0.75em;
		}

		table th {
			color: var(--text-primary);
			font-size: 0.9em;
			font-weight: 700;
			padding: 0 0.75em 0.75em 0.75em;
			text-align: left;
		}

		table thead {
			border-bottom: solid 2px #e9e9e9;
		}

		table tfoot {
			border-top: solid 2px #e9e9e9;
		}

		table.alt {
			border-collapse: separate;
		}

			table.alt tbody tr td {
				border: solid 1px #e9e9e9;
				border-left-width: 0;
				border-top-width: 0;
			}

				table.alt tbody tr td:first-child {
					border-left-width: 1px;
				}

			table.alt tbody tr:first-child td {
				border-top-width: 1px;
			}

			table.alt thead {
				border-bottom: 0;
			}

			table.alt tfoot {
				border-top: 0;
			}

/* Header */

	/* Výška sjednocena s audit/metrics/admin (2026-08-11, PO: „výška,
	   menší stav... musí sedět") - `#header` zůstává (compact,
	   nezvětšený) výchozí stav, `.header--top` (jen na TOP stránky) ho
	   zvětší na 85px stejně jako plná hlavička na auditu. `body`
	   padding-top musí přesně sledovat, protože `#header` je `fixed`
	   (viz historická poznámka níž) - žádná mezera v normal flow, kam by
	   se to samo dorovnalo. */
	/* Konstantní, počítané z PLNÉ výšky hlavičky (2026-08-23, v4
	   sjednocení). Dřív se padding měnil spolu s výškou hlavičky
	   (`transition: padding-top`), takže při každém prvním scrollu popojel
	   celý obsah stránky o 29 px nahoru - naměřeno CLS 0.0153. Hlavička je
	   `fixed`, takže se compact stav nemusí v toku nijak promítnout: obsah
	   se pod ni prostě odroluje. */
	body {
		padding-top: calc(5.3125em + 24px);
	}



	#header {

		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-justify-content: space-between;
		-webkit-justify-content: space-between;
		-ms-justify-content: space-between;
		justify-content: space-between;
		background-color: var(--layout-color);
		border-bottom: solid 1px #e9e9e9;
		height: 3.5rem;
		left: 0;
		line-height: 3.5rem;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10000;
		/* Velikost (výška/line-height) se transitionuje - to je v pořádku,
		   je to změna ROZMĚRU, ne POZICE (tu řeší 1:1 scroll tracking v
		   main.js, žádná CSS transition). Stejný princip jako
		   `padding .25s ease` na auditu. */
		transition: height .25s ease, line-height .25s ease;
	}
	#header.header--top {
		height: 5.3125rem;
		line-height: 5.3125rem;
	}
	#header .wrapper {
		max-width: 1600px;
		margin: 0 auto;
		display: flex;
		width: 100%;
		padding: 0 4.5em;
		box-sizing: border-box;
		width: 100%;
	}
	#menu {
		position: relative;
		padding-top: 0rem;
	}
	#menu-heading {
		position: sticky;
		inset: 0;
		bottom: auto;
		z-index: 99;
		padding: 0 !important;
		height: 3.5rem;
		line-height: 3.5rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid var(--border-color);
	}

		#header a {
			text-decoration: none;
		}

		#header ul {
			list-style: none;
			margin: 0;
			padding-left: 0;
		}

			#header ul li {
				display: inline-block;
				padding-left: 0;
			}

		#header h1 {
			height: inherit;
			line-height: inherit;
			padding: 0 1.5em;
			white-space: nowrap;
			/* `.logo` uvnitř je teď blokový flex kontejner (52px kosatka +
			   dvouřádkový text), ne prostý řádek textu - `line-height`
			   centrování funguje jen na text, samo `.logo` by se bez tohohle
			   ve vyšší (85px) hlavičce necentrovalo, jen leželo nahoře
			   (2026-08-11, sjednocení výšky s audit/metrics/admin). */
			display: flex;
			align-items: center;
		}

			#header h1 a {
				font-size: 1em;
				font-weight: 800;
				color: var(--primary-color);
			}

			#header .logo {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				padding: 0 1.5rem;
				border: 0px solid transparent;
				font-weight: 800;
				font-size: 1.2rem;
				color:var(--primary-color);
			}
			#header .logo img {
				height: 2.6rem;

			}
			/* Značka v hlavičce (2026-08-11, PO: „vlevo logo blueorca jako na
			   auditu"): stejný dvouřádkový vzor jako .nav-brand na
			   audit.blueorcawebsites.eu (kosatka + název/produkt + podtitulek),
			   jen barvy přizpůsobené světlému pozadí blogu (--text-primary
			   #333 a --primary-color #1d95c9 místo světlých odstínů pro tmavou
			   lištu). */
			/* Záporný margin ruší padding .logo (0 1.5rem), ať kosatka sedí na
			   optickém okraji containeru (2026-08-11, PO: „kosatka v logu moc
			   odsazená od kraje") - stejný trik jako u brandu v liště/topnavu
			   admina. */
			/* Velikost kosatky sjednocena s audit/metrics (2026-08-11, PO:
			   „velikost kosatky musí sedět") - CSS přebíjí HTML atributy
			   width/height="32" ve všech 29 souborech, není potřeba je
			   editovat. Čtvercový viewBox (stejný jako audit) - width i
			   height stejné číslo. */
			.header-brand-icon { flex: none; margin-left: -1.5rem; width: 52px; height: 52px; }
			.header-brand-text {
				display: flex; flex-direction: column; gap: .1rem; line-height: 1.15;
				/* Dřív samostatný systémový font stack, protože Open Sans
				   (tehdejší --font-base) nešel dolů na skutečnou 300 - teď
				   web běží na Inter (2026-08-11), takže stačí dědit
				   var(--font-base) jako zbytek stránky. */
				font-family: var(--font-base);
			}
			.header-brand-title { font-size: 1.35rem; }
			.header-brand-blue { color: #333; font-weight: 800; }
			/* Řezy 800/300 sjednoceny s audit/admin (2026-08-11, PO:
			   "sjednotit logo řezy 800 a 300") - dřív 600. */
			/* Vlastní odstín, ne `--primary-color`: ta má na bílém pozadí kontrast 3,39,
   tedy pod hranicí 4,5 (WCAG AA). Proměnná se používá i jinde, kde je na tmavém
   podkladu v pořádku, takže se ztmavuje jen tenhle výskyt. Teď 5,69. */
.header-brand-accent { color: #147094; font-weight: 300; }
			/* 600 místo 700 (2026-08-11, druhé kolo, PO: „title pod logem je
			   nějak tučně") - sjednoceno s `.nav-brand-sub` na auditu
			   (font-weight:600), 700 na malém uppercase textu s letter-
			   spacing působilo těžší než zbytek rodiny. */
			/* Řez sjednocen s celou rodinou webů podle adminu (PO 2026-09-03):
			   .62rem / 600 / uppercase / letter-spacing .07em. */
			.header-brand-sub { font-size: .62rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #757575; }  /* #999 mělo kontrast 2,85 na bílé, pod hranicí WCAG AA; teď 4,61 */
		#header .links {
			-moz-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			height: inherit;
			line-height: inherit;
			overflow: hidden;
			display: flex;
			max-width: calc(1600px - 6rem); /* 1600px total max width - 6rem padding - 17.5em main nav */
			margin: auto;
		}
			/* width:100% (2026-08-11, třetí kolo, PO: „menu stále vlevo
			   nalepené na logo, má být napravo") - `ul` bez šířky zůstávalo
			   shrink-to-fit na obsah a sedělo hned za logem (flex-start
			   výchozí zarovnání `.links`), takže `justify-content:flex-end`
			   uvnitř samotného `ul` nemělo žádný volný prostor k využití.
			   `ul` teď vyplní celou šířku `.links` (flex:1 z rodiče), menu
			   se doopravdy zarovná k pravému okraji vedle CTA tlačítka. */
			#header .links ul  {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				gap: 1.75rem;
				width: 100%;
			}

			#header .links ul li {
				display: inline-flex;
				/* Přebíjí `ul{align-items:center}` (2026-08-11, sjednocení
				   s auditem) - li musí sáhnout na celou výšku hlavičky, ať
				   podtržení aktivní položky níž dosáhne až na spodní hranu,
				   ne jen na výšku textu. Stejný trik jako `.site-menu-link`
				   na audit.blueorcawebsites.eu. */
				align-self: stretch;
			}

				/* Menu ve stylu auditu (2026-08-11, PO: „menu jako v auditu -
				   aktivní podtržený dole") - nahrazuje dřívější „normal jako
				   menu, jen barva textu" (2026-08-11, dřívější kolo). */
				#header .links ul li a {
					display: inline-flex;
					align-items: center;
					position: relative;
					border-bottom: 0;
					font-size: 0.85em;
					font-weight: 400;
					padding: 0;
					height: 100%;
					color: var(--text-primary);
				}
				#header .links ul li a:hover {
					color: var(--primary-color);
				}

				#header .links ul li a.active {
					color: var(--primary-color);
				}
				/* 2px mezera k dolní hraně hlavičky (2026-08-11, druhé kolo,
				   PO: „border má být o pár px výše, ať je pod ním mezírka";
				   doladěno čtvrté kolo, PO: „o 1px níže" - 3px → 2px) - na
				   blogu není padding k bleednutí (`a` stretchuje na celou
				   výšku headeru přímo), takže `bottom:2px` prostě zvedne
				   linku o 2px nad spodní hranu. */
				#header .links ul li a.active::before {
					content: '';
					position: absolute;
					left: 0; right: 0; bottom: 2px;
					height: 3px;
					background: var(--primary-color);
				}


		#header .main {
			position: absolute;
			top: 0;
			right: 0;
			height: inherit;
			line-height: inherit;
			text-align: right;
			display: none;
		}

			#header .main ul {
				height: inherit;
				line-height: inherit;
			}

				#header .main ul li {
					border-left: solid 1px #e9e9e9;
					height: inherit;
					line-height: inherit;
					white-space: nowrap;
				}

					#header .main ul li > * {
						display: block;
						float: left;
					}

					#header .main ul li > a {
						display: flex;
						align-items: center;
						justify-content: center;
						text-decoration: none;
						border-bottom: 0;
						color: var(--text-muted);
						overflow: hidden;
						position: relative;
						width: 4em;
						height: 100%;
						svg {
							height: 32px;
							transition: all 150ms ease;
						}
					}

					#header .main ul li > a:hover svg {
						fill: var(--primary-color);
					}				

						#header .main ul li > a:before {
							-moz-osx-font-smoothing: grayscale;
							-webkit-font-smoothing: antialiased;
							display: inline-block;
							font-style: normal;
							font-variant: normal;
							text-rendering: auto;
							line-height: 1;
							text-transform: none !important;
							font-family: 'Font Awesome 5 Free';
							font-weight: 800;
						}

						#header .main ul li > a:before {
							display: block;
							height: inherit;
							left: 0;
							line-height: inherit;
							position: absolute;
							text-align: center;
							text-indent: 0;
							top: 0;
							width: inherit;
						}

		#header form {
			margin: 0;
		}

			#header form input {
				display: inline-block;
				height: 2.5em;
				position: relative;
				top: -2px;
				vertical-align: middle;
			}

		#header #search {
			-moz-transition: all 0.5s ease;
			-webkit-transition: all 0.5s ease;
			-ms-transition: all 0.5s ease;
			transition: all 0.5s ease;
			max-width: 0;
			opacity: 0;
			overflow: hidden;
			padding: 0;
			white-space: nowrap;
		}

			#header #search input {
				width: 12em;
			}

			#header #search.visible {
				max-width: 12.5em;
				opacity: 1;
				padding: 0 0.5em 0 0;
			}

		@media screen and (max-width: 1680px) {

			#header .wrapper {
				padding: 0 3em;
			}

			#wrapper {
				padding: 3em;
			}

		}

		@media screen and (max-width: 980px) {

			#header .links {
				display: none;
			}

			#header .main {
				display: flex;
				/* PO 2026-08-12: hamburger seděl na skutečném okraji #header
				   (right:0 z base pravidla), ne na okraji layoutu jako
				   brand/CTA tlačítko (.wrapper má padding 3em v tomhle
				   zlomu, viz #header .wrapper výš). `padding-right` na
				   #header samotném (dřívější pokus) na absolutně
				   pozicovaný potomek nepůsobil - nahrazeno přímým right. */
				right: 3em;
			}

		}

		@media screen and (max-width: 768px) {

			#header {
				height: 3rem;
				line-height: 3rem;
			}
			#header.header--top {
				height: 4.5rem;
				line-height: 4.5rem;
			}
			/* Kosatka na mobilu menší, ať se vejde do nižší lišty (52px by
			   přesáhlo i zvětšenou 4.5rem/72px variantu) - stejný přístup
			   jako admin (menší kosatka na mobilu, ne vyšší hlavička). */
			.header-brand-icon {
				width: 36px;
				height: 36px;
			}

			#header .wrapper {
				padding: 0 1.5em;
			}

			#header .main {
				right: 1.5em;
			}

			#wrapper {
				padding: 1.5em;
			}

			#menu-heading {
					height: 3rem;
					line-height: 3rem;
					padding: 0 1rem !important;
			}


				#header h1 {
					padding: 0 1.5rem;
				}

				#header .main .search {
					display: none;
				}

		}

/* Wrapper */

	#wrapper {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row-reverse;
		-webkit-flex-direction: row-reverse;
		-ms-flex-direction: row-reverse;
		flex-direction: row-reverse;
		justify-content: center;
		-moz-transition: opacity 0.5s ease;
		-webkit-transition: opacity 0.5s ease;
		-ms-transition: opacity 0.5s ease;
		transition: opacity 0.5s ease;
		margin: 0 auto;
		max-width: 1600px;
		width: 100%;
		box-sizing: border-box;
		opacity: 1;
		padding: 4.5em;
	}

		body.is-menu-visible #wrapper {
			opacity: 0.15;
		}

		@media screen and (max-width: 1680px) {

			#wrapper {
				padding: 3em;
			}

		}

		@media screen and (max-width: 1280px) {

			#wrapper {
				display: block;
			}

		}

		@media screen and (max-width: 768px) {

			#wrapper {
				padding: 1.5em;
			}

		}

/* Main */

	#main {
		-moz-flex-grow: 1;
		-webkit-flex-grow: 1;
		-ms-flex-grow: 1;
		flex-grow: 1;
		-ms-flex: 1;
		width: 100%;
		display: flex;
		flex-direction: column; 
		gap: 0rem;
	}

/* Sidebar */

	#sidebar {
		margin-right: var(--space-xxl);
		padding: 0 0 0;
		width: 350px;
		min-width: 350px;
		max-width: 350px;
		color: var(--text-secondary);
		font-weight: 300;
		font-size: var(--text-sm);
		display: flex;
		flex-direction: column;
	}


	/* Doleva místo na střed (2026-08-11, páté kolo, PO: „z sidebaru dát
	   pryč logo kosatky, title BlueOrca Blog zarovnat doleva") - kosatka
	   (velké centrované logo nad titulkem) smazána z HTML všech 10
	   souborů, co `#intro-sidebar` mají; bez ní centrování titulku a
	   perexu ztrácelo smysl (chyběl vizuální střed, ke kterému se
	   vztahovalo). */
	#sidebar #intro-sidebar header {
		margin: 0 0 var(--space-md);
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
		text-align: left;
	}

	#sidebar #intro-sidebar {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}



/* Ensure CTA is visible in desktop sidebar (some layouts may render CTA only in menu)
   Force visibility and sensible width on larger screens */
@media screen and (min-width: 1281px) {
    #sidebar .sidebar-cta {
        max-width: 100%;
        box-sizing: border-box;
        margin-top: auto;
    }
}

		/* Sticky sidebar on wide screens (only when flex row layout is active) */
		@media screen and (min-width: 1281px) {
			#sidebar {
				position: -webkit-sticky;
				position: sticky;
				top: 8em;
				align-self: flex-start;
				/* Výška je dopočítaná tak, aby spodek sidebaru sedl přesně na spodek
				   hlavního sloupce, když je stránka srolovaná dolů (PO 2026-07-31:
				   „furt nejsou stejně daleko odspod"). Rovnice: sticky top 8em (128px)
				   + výška = 100vh - spodní padding #wrapperu (48px). Modrý CTA box má
				   margin-top:auto, takže dosedne na spodní hranu sidebaru. Když se
				   změní `top` nebo padding #wrapperu, přepočítat i tohle. */
				height: calc(100vh - 128px - 48px);
				overflow-y: auto;
				overflow-x: hidden;
				/* hide scrollbar — sidebar must never show a scrollbar */
				scrollbar-width: none;
				-ms-overflow-style: none;
			}
			#sidebar::-webkit-scrollbar {
				display: none;
			}
		}

		#sidebar > * {
			/*border-top: solid 1px #e9e9e9;
			.actions: 3em 0 0 0;*/
		}

		#sidebar hr {
			margin: var(--space-lg) 0 !important;
		} 



		#sidebar > :first-child {
			border-top: 0;
			margin-top: 0;
			padding-top: 0;
		}

		@media screen and (max-width: 1280px) {

			#sidebar {
				border-top: solid 1px #e9e9e9;
				margin: var(--space-lg) auto 0 auto;
				min-width: 0;
				padding: var(--space-lg) 0 0 0;
				width: 100%;
				max-width: 450px;
				overflow-x: hidden;
			}

		}

/* Intro */

/* Sidebar CTA — schováno na PO zadání 2026-08-21 ("Chcete také podobný blog?"
   box pryč), HTML zůstává v šablonách kvůli data-bow-block editaci v adminu. */
.sidebar-cta {
        background: #fff;
        border: 1px solid var(--primary-color);
        padding: var(--space-sm) var(--space-sm);
        border-radius: 0;
        text-align: center;
        margin: 0;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-xs);
}
.sidebar-cta p {
        margin: 0;
        padding: 0;
}
.sidebar-cta h3 {
        margin: 0;
        font-size: 1.05rem;
        color: var(--primary2-color);
}
.sidebar-cta .cta-text {
        margin: 0;
        color: var(--text2-color);
        font-size: 0.92rem;
}
.sidebar-cta .btn-primary {
        margin-top: var(--space-xs);
}
.cta-button {
        display: inline-block;
        padding: 0.4rem 0.6rem;
        background: var(--primary2-color);
        color: #fff;
        font-size: 0.85rem;
        border-radius: var(--radius-md);
        text-decoration: none;
        font-weight: 600;
        transition: all ease 150ms;
}
.cta-button:hover {
        color: #fff !important;
        background: var(--primary-color);
}

		#intro .logo,
		#intro-sidebar.intro .logo,
		#intro-menu.intro .logo,
		.intro .logo {
		border-bottom: 0;
		display: inline-flex;
		margin: 0 0 0 0;
		overflow: hidden;
		position: relative;
	}
/*
		#intro .logo:before {
			background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100px' height='100px' viewBox='0 0 100 100' preserveAspectRatio='none' zoomAndPan='disable'%3E%3Cpolygon points='0,0 100,0 100,25 50,0 0,25' style='fill:%23f4f4f4' /%3E%3Cpolygon points='0,100 100,100 100,75 50,100 0,75' style='fill:%23f4f4f4' /%3E%3C/svg%3E");
			background-position: top left;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			content: '';
			display: block;
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
*/
		#intro .logo img,
		#intro-sidebar.intro .logo img,
		#intro-menu.intro .logo img,
		.intro .logo img {
			display: block;
			height: 6rem;
		}

	#intro header h2,
	#intro-sidebar.intro header h2,
	#intro-menu.intro header h2,
	.intro header h2 {
		font-size: 2em;
		font-weight: 800;
		margin-bottom: 0;
	}

	/* Titulek v sidebaru začíná ve stejné výšce jako nadpis obsahového
	   sloupce (PO 2026-09-02). Dědil margin-top 32px z obecného h2, takže
	   text startoval o ten kus níž než „Všechny články" vedle něj. */
	#sidebar #intro-sidebar.intro header h2 {
		margin-top: 0;
	}

	#intro header p,
	#intro-sidebar.intro header p,
	#intro-menu.intro header p,
	.intro header p {
		font-size: 0.9rem;
		color: var(--text-color);
		max-width: 420px;
		margin: 0 auto;
	}

	@media screen and (max-width: 1280px) {

			#intro,
			#intro-sidebar.intro,
			#intro-menu.intro,
			.intro {
			margin: 0 0 3em 0;
			text-align: center;
		}
		/* Doleva i na mobilu (2026-08-11, páté kolo) - přebíjí sdílené
		   `text-align:center` výš jen pro sidebar variantu (vyšší
		   specificita přes `#sidebar`), ostatní instance (`#intro`,
		   `#intro-menu`) beze změny. */
		#sidebar #intro-sidebar.intro {
			text-align: left;
		}

				#intro header h2,
				#intro-sidebar.intro header h2,
				#intro-menu.intro header h2,
				.intro header h2 {
				font-size: 2em;
			}

				#intro header p,
				#intro-sidebar.intro header p,
				#intro-menu.intro header p,
				.intro header p {
				font-size: 0.9rem;
			}

	}

	@media screen and (max-width: 768px) {

		#intro,
		#intro-sidebar.intro,
		#intro-menu.intro,
		.intro {
			margin: 0 0 0 0;
			padding: 1.5em 0;
		}

			#intro > :last-child,
			#intro-sidebar.intro > :last-child,
			#intro-menu.intro > :last-child,
			.intro > :last-child {
				margin-bottom: 0;
			}

			#intro .logo,
			#intro-sidebar.intro .logo,
			#intro-menu.intro .logo,
			.intro .logo {
				margin: 0 0 0.5em 0;
			}

			#intro header h2,
			#intro-sidebar.intro header h2,
			#intro-menu.intro header h2,
			.intro header h2 {
				font-size: 1.25em;
			}

			#intro header > :last-child,
			#intro-sidebar.intro header > :last-child,
			#intro-menu.intro header > :last-child,
			.intro header > :last-child {
				margin-bottom: 0;
			}

	}

/* Privacy link */

	/* Patička obsahové části. Blog nemá vlastní <footer>, tenhle odstavec je
	   poslední prvek <main> - dřív visel vpravo v prázdnu jako zapomenutý řádek
	   (PO 2026-07-31). Vlasová linka nad ním a zarovnání na střed z něj dělají
	   zřetelný konec stránky. Odkaz zůstává i mimo lištu o měření: ta po
	   odsouhlasení zmizí a jinou cestu na ochranu soukromí by čtenář neměl. */
	p.copyright {
		font-size: 0.7em;
		font-weight: 300;
		color: var(--text2-color);
		text-transform: uppercase;
		letter-spacing: 0.06em;
		text-align: center;
		margin: 2.5rem 0 0 0;
		padding-top: 1.25rem;
		border-top: 1px solid var(--border-color, #e9e9e9);
	}

	p.copyright a {
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid transparent;
	}

	p.copyright a:hover {
		color: var(--primary-color);
		border-bottom-color: currentColor;
	}

	body[data-page="article"] p.copyright {
		margin-top: 2.5rem;
	}

/* Footer */

	#footer .icons {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
		color: var(--text-muted);
	}

	#footer .copyright {
		color: var(--text2-color);
		font-size: 0.6em;
		font-weight: 300;
		text-align: left;
		text-transform: uppercase;
	}

	body.single #footer {
		text-align: center;
	}

	/* Patička webu (2026-08-01). Blog do té doby žádný <footer> neměl: nikde na
	   něm nebyl provozovatel ani IČ a jediná cesta k zásadám ochrany soukromí
	   vedla přes lištu o měření, která si po odsouhlasení zapíše _bo_notice_ok
	   do sessionStorage a do konce relace zmizí.
	   Vizuálně navazuje na dřív schválený předěl p.copyright (vlasová linka,
	   drobné prostrkané písmo), jen jde přes celou šířku pod #wrapper, aby
	   patřila stránce, ne obsahovému sloupci. Šířka i boční odsazení kopírují
	   #wrapper, takže text sedí do stejné mřížky jako obsah. */
	#footer {
		max-width: 1600px;
		margin: 0 auto;
		padding: 0 4.5em 3em;
		box-sizing: border-box;
		transition: opacity 0.5s ease;
	}

	body.is-menu-visible #footer {
		opacity: 0.15;
	}

	/* Lišta o měření z trackeru je position:fixed u spodní hrany okna a překryla
	   by konec stránky, tedy nově i patičku. Dokud je lišta v DOM (po kliknutí na
	   „Rozumím" ji tracker odstraní), drží stránka dole rezervu na její výšku:
	   změřeno 2026-08-01, 64 px na desktopu a 162 px na mobilu. */
	body:has(> #bo-notice-bar) {
		padding-bottom: 5em;
	}

	#footer .footer-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem var(--space-lg);
		padding-top: 1.25rem;
		border-top: 1px solid var(--border-color);
		font-size: 0.7em;
		font-weight: 300;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--text2-color);
	}

	#footer p {
		margin: 0;
	}

	#footer .footer-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem var(--space-md);
	}

	#footer a {
		color: inherit;
		text-decoration: none;
		border-bottom: 1px solid transparent;
	}

	#footer a:hover {
		color: var(--primary-color);
		border-bottom-color: currentColor;
	}

	@media screen and (max-width: 1680px) {

		#footer {
			padding: 0 3em 2.5em;
		}

	}

	@media screen and (max-width: 768px) {

		#footer {
			padding: 0 1rem 1.5rem;
		}

		#footer .footer-inner {
			flex-direction: column;
			justify-content: center;
			text-align: center;
			gap: 0.75rem;
		}

		body:has(> #bo-notice-bar) {
			padding-bottom: 11rem;
		}

	}

/* Menu */

	#menu {
		-moz-transform: translateX(25em);
		-webkit-transform: translateX(25em);
		-ms-transform: translateX(25em);
		transform: translateX(25em);
		-moz-transition: -moz-transform 0.5s ease, visibility 0.5s;
		-webkit-transition: -webkit-transform 0.5s ease, visibility 0.5s;
		-ms-transition: -ms-transform 0.5s ease, visibility 0.5s;
		transition: transform 0.5s ease, visibility 0.5s;
		-webkit-overflow-scrolling: touch;
	background: var(--layout-color);
		border-left: solid 1px #e9e9e9;
		box-shadow: none;
		height: 100%;
		max-width: calc(100vw - 2rem);
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		visibility: hidden;
		width: 100%;
		z-index: 10002;
	}

	#menu .sidebar-cta {
		margin: 0.5rem;
	}

		#menu > * {
			border-bottom: solid 1px #e9e9e9;
			padding: 1.5rem;
			margin: 0;
		}

			#menu > * > :last-child {
				margin-bottom: 0;
			}


		#menu .links {
			list-style: none;
			padding: 0;
		}

			#menu .links > li {
				border: 0;
				border-top: dotted 1px #e9e9e9;
				margin: 1.5em 0 0 0;
				padding: 1.5em 0 0 0;
			}

				#menu .links > li a {
					display: block;
					border-bottom: 0;
				}

					#menu .links > li a h3 {
						-moz-transition: color 0.2s ease;
						-webkit-transition: color 0.2s ease;
						-ms-transition: color 0.2s ease;
						transition: color 0.2s ease;
						font-size: 0.7em;
					}

					#menu .links > li a p {
						font-size: 0.6em;
						font-weight: 400;
						
						margin-bottom: 0;
						text-decoration: none;
						text-transform: uppercase;
					}

					#menu .links > li a:hover h3 {
						color: var(--primary-color);
					}

					/* Active state for menu links */
					#menu .links > li a.active h3 {
						color: #166f66;
						font-weight: 700;
					}

				#menu .links > li:first-child {
					border-top: 0;
					margin-top: 0;
					padding-top: 0;
				}

		body.is-menu-visible #menu {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
			visibility: visible;
		}


/* For mobile full-screen sidebar ensure intro/header remains fixed */
@media screen and (max-width: 767px) {
	#sidebar.sidebar-mobile-open > :first-child {
		position: sticky;
		top: 0;
		z-index: 10003;
		background: white;
	}
}




.article-content {
	margin: 0;
	padding: 3rem;
	background: #fff;
	border: solid 1px #e9e9e9;
	border-bottom: 0;
	color: var(--text-primary);


	> *:first-child {
		margin-top: 0 !important;
	}

	/* Galerie a oddělovač začínají vždy pod všemi floaty, jinak se do nich
	   plovoucí obrázek z předchozí sekce zaplete (PO 2026-08-05).
	   ⚠ h2 z pravidla VYJMUTO (PO 2026-08-06): nadpis má plovoucí obrázek
	   normálně obtékat, ne se pod něj odsouvat. Vrací to sice „schody"
	   řešené 2026-08-05, ale zkracuje článek a ruší bílá místa. */
	ul.gallery, hr {
		clear: both;
	}

	h2 {
		font-size: var(--text-lg);
		margin: var(--space-lg) 0 var(--space-sm);
	}
	h3 {
		font-size: var(--text-md);
		margin: var(--space-md) 0 var(--space-sm);	
	}	
	h4 {
		font-size: var(--text-sm);
		margin: var(--space-sm) 0 var(--space-xs);		
	}	
	h2, h3, h4 {
		font-weight: 600;
		color: var(--primary2-color);
	}
	em {
		display: inline-block;
		font-style: italic;			
	}
	em[title] {
		border-bottom: 1px dashed var(--text-muted);
		cursor: help;
		font-style: normal;
	}
	em[title]:hover {
		color: var(--primary-color);	
		border-bottom: 1px dashed var(--primary-color);
	}
	p {

		font-size: 1rem;
		line-height: var(--line-body);
	}

	a {
		color: var(--primary2-color);
		text-decoration: none;
	}
	a:hover {
		color: var(--primary-color);
	}

	/* Unicode ikonky (↗ nová karta, 🖼 snímek obrazovky) za odkazy zrušeny
	   na PO zadání 2026-08-21 ("hnusné unicode ikonky pryč", platí pro celý
	   blog). Odkazy na obrázky teď řeší assets/js/lightbox.js (prohlížeč
	   obrázků místo přímé navigace), ne CSS ikona. */

	strong {
		font-weight: 600;
	}

	.published {
		margin: 0 0 0 0;
	}

	ul {
		padding: 0;
		margin: 1.5rem 1.5rem 1.5rem 0.5rem;
	}
	ul li {

		font-size: 1rem;
		line-height: var(--line-body);
		list-style: none;
		padding-left: 1.4em;
		margin: 0.25rem 0;
		position: relative;
	}
	ul li::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0.55em;
		width: 0.5em;
		height: 0.5em;
		background: var(--primary-color);
		border-radius: 50%;
		opacity: 0.7;
	}
	/* PO 2026-08-06: modrá odrážka i odsazení běžného seznamu prosakovaly do položek
	   s obrázkem (galerie) - tečka seděla přes levý horní roh snímku. Detekce přes
	   :has(), tedy podle obsahu položky, ne podle třídy: platí i na galerie vložené
	   přes WYSIWYG, kde se do HTML nic dopisovat nedá. */
	ul li:has(img) {
		padding-left: 0;
	}
	ul li:has(img)::before {
		content: none;
	}
	.lighthouse-form,
	blockquote {
		margin: var(--space-lg) 0;
		padding: 1.5rem 5rem;
		border: none;
		background: color-mix(in srgb, var(--primary-color) 8%, white);
		border-radius: 6px;
		position: relative;
		text-align: center;
		text-wrap: balance;
		color: var(--primary2-color);
		font-style: italic;
		font-size: 1.15rem;
		font-weight: 600;
		line-height: 1.65;
		overflow: hidden;
	}
	blockquote::before {
		content: '';
		position: absolute;
		top:  -0.5rem;
		left: 1rem;
		width: 3rem;
		height: 3rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 32'%3E%3Crect x='1' y='0' width='12' height='22' rx='6' fill='%231d95c9' fill-opacity='0.4'/%3E%3Crect x='19' y='0' width='12' height='22' rx='6' fill='%231d95c9' fill-opacity='0.4'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		pointer-events: none;
	}
	blockquote::after {
		content: '';
		position: absolute;
		bottom: -0.5rem;
		right: 1rem;
		width: 3rem;
		height: 3rem;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 32'%3E%3Crect x='1' y='0' width='12' height='22' rx='6' fill='%231d95c9' fill-opacity='0.4'/%3E%3Crect x='19' y='0' width='12' height='22' rx='6' fill='%231d95c9' fill-opacity='0.4'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		pointer-events: none;
		transform: rotate(180deg);
	}

	.img-float-right {
		float: right;
		margin: 0 -3rem 1.5rem 1.5rem;
		max-width: min(300px, 50%);
	}
	.img-float-right img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* Inline image with caption — gallery-like style */
	a.image,
	.image {
		display: inline-block;
		border: 1px solid var(--border-color);
		border-radius: 4px;
		overflow: hidden;
		text-decoration: none;
		vertical-align: top;
		max-width: 220px;
	}
	a.image img,
	.image img {
		width: 100%;
		height: 150px;
		object-fit: cover;
		object-position: top;
		display: block;
		transition: opacity 0.2s ease;
	}
	a.image:hover img,
	.image:hover img {
		opacity: 0.85;
	}
	a.image span,
	.image span {
		display: block;
		margin: 0;
		padding: 0.45rem 0;
		font-size: 0.82rem;
		color: var(--text-color);
		line-height: 1.35;
		border-top: 1px solid var(--border-color);
		text-align: center;
	}
	/* PO 2026-08-06: clear se přesunul z nadpisů na obrázky. Nadpis teď float
	   normálně obtéká, ale další plovoucí snímek začíná až pod předchozím —
	   jinak se text mačká do úzkého pruhu mezi dvěma floaty (innoservice). */
	a.image.left,
	.image.left {
		float: left;
		clear: both;
		padding: 0;
		margin: 0.25rem 1.5rem 1rem 0;
		top: auto;
		max-width: 220px;
	}
	a.image.right,
	.image.right {
		float: right;
		clear: both;
		padding: 0;
		margin: 0.25rem 0 1rem 1.5rem;
		top: auto;
		max-width: 220px;
	}
	/* Size variants */
	a.image.image-sm,
	.image.image-sm {
		max-width: 160px !important;
	}
	a.image.image-sm img,
	.image.image-sm img {
		height: 110px;
	}
	a.image.image-xl,
	.image.image-xl {
		/* PO 2026-08-21: karta je inline-block bez pevné width, jen max-width -
		   img má width:100% na height:220px, takže se šířka dopočítá z poměru
		   stran KONKRÉTNÍHO obrázku (shrink-to-fit) a různě široké fotky vedle
		   sebe (innoservice) vypadaly nesourodě. width napevno + object-fit:
		   cover na img ořízne cokoli na stejný rozměr. */
		width: 320px;
		max-width: 320px !important;
	}
	a.image.image-xl img,
	.image.image-xl img {
		height: 220px;
	}

	ul.gallery {
		list-style: none;
		padding: 0;
		margin: var(--space-lg) 0;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem;
	}
	@media (min-width: 600px) {
		ul.gallery {
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		}
		/* PO 2026-08-06: čtyřprvková galerie se při auto-fill rozpadla na 3+1.
		   Modifikátor drží dvousloupcovou mřížku, tedy 2×2 a čitelně velké snímky. */
		ul.gallery.gallery-pairs {
			grid-template-columns: repeat(2, 1fr);
		}
		/* PO 2026-08-06: trojice snímků administrací patří na jeden řádek. */
		ul.gallery.gallery-trio {
			grid-template-columns: repeat(3, 1fr);
		}
	}
	ul.gallery li {
		display: flex;
		flex-direction: column;
		padding-left: 0;
		border: 1px solid var(--border-color);
		border-radius: 4px;
		overflow: hidden;
	}
	ul.gallery li a {
		display: block;
		height: 175px;
		overflow: hidden;
		border-bottom: none;
	}
	ul.gallery li a:has(span) {
		display: flex;
		flex-direction: column;
		height: auto;
		overflow: visible;
	}
	ul.gallery li a:has(span) img {
		height: 175px;
		flex-shrink: 0;
	}
	ul.gallery li a:hover {
		border-bottom: none;
	}
	ul.gallery li a img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top;
		display: block;
		transition: opacity 0.2s ease;
	}
	ul.gallery li a:hover img {
		opacity: 0.85;
	}
	ul.gallery li p,
	ul.gallery li a span {
		margin: 0;
		padding: 0.45rem 0;
		font-size: 0.82rem;
		color: var(--text-color);
		line-height: 1.35;
		border-top: 1px solid var(--border-color);
		text-align: center;
	}

	table {
		width: 100%;
		/* Bez fixed rozpočítá prohlížeč šířky podle obsahu a sloupec s delšími
		   texty vyhraje; u srovnávacích tabulek před/po mají být stejné. */
		table-layout: fixed;
		border-collapse: collapse;
		margin: var(--space-lg) 0;
		font-size: 0.93rem;
		line-height: 1.5;
	}
	table th,
	table td {
		padding: 0.65rem 1rem;
		text-align: left;
		border: 1px solid var(--border-color);
		vertical-align: top;
		overflow-wrap: break-word;
	}
	table thead th {
		background: var(--bg-color);
		font-weight: 700;
		font-size: 0.8rem;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--text-muted);
		border-bottom: 2px solid var(--border-color);
	}
	table tbody tr:nth-child(even) td {
		background: color-mix(in srgb, var(--bg-color) 60%, transparent);
	}
}

@media screen and (max-width: 768px) {

	h1 {
		font-size: var(--text-xl);
	}	
	h2 {
		font-size: var(--text-lg);
	}

	h3 {
		font-size: var(--text-md);
	}

	.image.featured {
		margin: 0 0 0 0;
	}


	.article-content {
		padding: 1rem;
	}

	.author-box-wrap {
		padding: 0 1rem;
	}
	#wrapper {
		padding: 1rem;
	}

	#menu > * {
		padding: 1.5em;
	}

}

/* Article detail - meta footer box */
body[data-page="article"] .post > .meta {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 var(--space-lg);
	padding: 1rem 3rem;
	font-size: var(--text-lg);
	color: var(--text-secondary);
	background: #fff;
	border: solid 1px #e9e9e9;
	border-top: solid 0px #f0f0f0;
}

body[data-page="article"] .post > .meta > * {
	margin: 0;
	line-height: 1.4;
	font-size: 1rem;
	font-weight: 600;
}

/* Mobile polish for article detail pages */
@media screen and (max-width: 767px) {
	body[data-page="article"] #main {
		gap: 1rem;
	}

	body[data-page="article"] .post > header {
		padding-bottom: 1.5rem;
	}

	body[data-page="article"] .breadcrumb {
		display: none;
	}

	body[data-page="article"] .post > header .title {
		margin: 1.5rem 0 1.25rem;
		gap: 0.75rem;
	}

	body[data-page="article"] .post > header .title h1 {
		font-size: clamp(1.8rem, 7.4vw, 2.2rem);
		line-height: 1.12;
		letter-spacing: 0.01em;
	}

	body[data-page="article"] .perex {
		line-height: 1.65;
	}

	body[data-page="article"] .post > .meta {
		margin: 0 0 1rem;
		padding: 1rem 1.25rem;
	}

	body[data-page="article"] .post > a.image.featured {
		border: 1px solid var(--border-color);
		border-radius: 0.35rem;
		overflow: hidden;
		margin-bottom: 0;
	}

	body[data-page="article"] .article-content {
		margin: 0;
		padding: 1.6rem 1.25rem;
		border-radius: 0;
		border-bottom: 0;
	}

	body[data-page="article"] .article-content .img-float-right {
		float: none;
		margin: 1.5rem auto;
		max-width: 100%;
		width: 100%;
		text-align: center;
	}
	body[data-page="article"] .article-content .img-float-right img {
		width: 100%;
		height: auto;
	}
	.article-content a.image.left,
	.article-content a.image.right,
	.article-content .image.left,
	.article-content .image.right {
		float: none;
		display: block;
		margin: 1.5rem auto;
		max-width: 100%;
	}
	.article-content a.image.left img,
	.article-content a.image.right img,
	.article-content .image.left img,
	.article-content .image.right img {
		width: 100%;
		height: 220px;
	}

	body[data-page="article"] .article-content h2 {
		margin: 2rem 0 0.85rem;
	}

	body[data-page="article"] .article-content p {
		line-height: 1.72;
	}

	body[data-page="article"] .article-content hr {
		margin: 1.75rem 0;
	}

	body[data-page="article"] .article-content blockquote {
		padding: 0.85rem 1.1rem;
		margin: 1.5rem 0;
	}

	/* Author box: na mobilu je sloupec vedle avataru moc úzký a bio se
	   mačká do třech slov na řádek. Mřížka drží foto vedle jména/role a
	   bio pustí na celou šířku boxu pod nimi (PO screenshot 2026-08-01). */
	body[data-page="article"] .author-box {
		display: grid;
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"avatar name"
			"avatar role"
			"bio bio";
		row-gap: 0.15rem;
	}

	body[data-page="article"] .author-box__info {
		display: contents;
	}

	body[data-page="article"] .author-box__name {
		grid-area: name;
	}

	body[data-page="article"] .author-box__role {
		grid-area: role;
		margin-bottom: 0;
	}

	body[data-page="article"] .author-box__bio {
		grid-area: bio;
		width: 100%;
		margin-top: 0.75rem;
	}
}

@media screen and (max-width: 480px) {
	body[data-page="article"] #wrapper {
		padding: 0.75rem;
	}

	body[data-page="article"] .post > header .title h1 {
		font-size: clamp(1.65rem, 8.2vw, 2rem);
	}

	body[data-page="article"] .article-content {
		padding: 1.4rem 1rem;
		margin: 0;
	}
}

/* Category transition animations */

/* ── Lightbox ────────────────────────────────────────────── */
#bow-lightbox {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 10001;
	background: rgba(0,0,0,0.88);
	align-items: center;
	justify-content: center;
	gap: 0;
	outline: none;
}
#bow-lightbox.is-open {
	display: flex;
	/* PO 2026-08-06: popisek sedával přišpendlený u spodní hrany okna, daleko od
	   snímku. Sloupcové rozvržení ho posadí těsně pod obrázek, kde je vidět. */
	flex-direction: column;
}
#bow-lightbox img {
	display: block;
	max-width: 90vw;
	max-height: 80vh;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 8px 40px rgba(0,0,0,0.6);
	user-select: none;
}
.bow-lb-caption {
	/* těsně pod snímkem, ne u spodní hrany okna (PO 2026-08-06) */
	position: static;
	margin: 0.7rem 0 0;
	padding: 0.35rem 0.9rem;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 0.85rem;
	border-radius: 3px;
	white-space: nowrap;
	max-width: 80vw;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}
.bow-lb-close,
.bow-lb-prev,
.bow-lb-next {
	position: absolute;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	color: #fff !important;
	cursor: pointer;
	width: 4rem;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s, opacity 0.15s;
	padding: 0;
	opacity: 0.85;
}
.bow-lb-close:hover,
.bow-lb-prev:hover,
.bow-lb-next:hover {
	color: #1d95c9 !important;
	opacity: 1;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.bow-lb-close:focus,
.bow-lb-prev:focus,
.bow-lb-next:focus {
	outline: none !important;
	box-shadow: none !important;
}
.bow-lb-close {
	top: 1rem;
	right: 1rem;
}
.bow-lb-prev {
	left: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
}
.bow-lb-next {
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
}
@media screen and (max-width: 480px) {
	#bow-lightbox img {
		max-width: 100vw;
		max-height: 80vh;
	}
	.bow-lb-prev { left: 0.25rem; }
	.bow-lb-next { right: 0.25rem; }
}
/* ── /Lightbox ───────────────────────────────────────────── */

/* ── Side-by-Side Viewer ─────────────────────────────────── */
.bow-sbsv {
	display: flex;
	position: relative;
	width: 100%;
	height: clamp(320px, 70vw, 640px);
	gap: 3px;
	background: #222;
	border-radius: 6px 6px 0 0;
	overflow: hidden;
	margin: 0 0;
	cursor: grab;
	touch-action: none;
	user-select: none;
}
.bow-sbsv.is-dragging {
	cursor: grabbing;
}
.bow-sbsv__pane {
	flex: 1;
	position: relative;
	overflow: hidden;
}
.bow-sbsv__label {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	background: #f4f4f4;
	border: 1px solid rgba(0,0,0,0.2);
	border-radius: 3px 3px;
	color: #000;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 0.25rem 0.65rem;
	pointer-events: none;
	z-index: 20;
	white-space: nowrap;
	opacity: 0.95rem;
}

.bow-sbsv__pane:first-child .bow-sbsv__label {
	left: 1rem;
	right: auto;
}

.bow-sbsv__hint {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: rgba(0,0,0,0.1);
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.bow-sbsv__hint.is-gone {
	opacity: 0;
}
.bow-sbsv__hint-icon {
	width: 2.2rem;
	height: auto;
	animation: sbsv-bounce 1.4s ease-in-out infinite;
}
.bow-sbsv__hint-text {
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
@keyframes sbsv-bounce {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(6px); }
}
/* ── /Side-by-Side Viewer ────────────────────────────────── */

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes flipOut {
	/* Flip forward around the horizontal axis and fade out by 90deg */
	from {
		opacity: 1;
		transform: perspective(800px) rotateX(0deg);
	}
	70% {
		/* near 90deg, reduce opacity so it appears to thin out */
		opacity: 0.25;
		transform: perspective(800px) rotateX(80deg) scaleY(0.85);
	}
	to {
		opacity: 0;
		transform: perspective(800px) rotateX(90deg) scaleY(0.2);
	}
}

@keyframes flipIn {
	/* Appear by rotating from -90deg back to 0 around the horizontal axis */
	from {
		opacity: 0;
		transform: perspective(800px) rotateX(-90deg) scaleY(0.2);
	}
	30% {
		opacity: 0.25;
		transform: perspective(800px) rotateX(-80deg) scaleY(0.85);
	}
	to {
		opacity: 1;
		transform: perspective(800px) rotateX(0deg) scaleY(1);
	}
}

.category-transition-out {
	animation: fadeOut 0.3s ease-out forwards;
}

.category-transition-in {
	animation: fadeIn 0.4s ease-in forwards;
}

.post.flip-out {
	will-change: transform, opacity;
	transform-origin: center center;
	-webkit-transform-origin: center center;
	animation: flipOut 0.45s cubic-bezier(.2,.9,.2,1) forwards;
}

.post.flip-in {
	will-change: transform, opacity;
	transform-origin: center center;
	-webkit-transform-origin: center center;
	animation: flipIn 0.45s cubic-bezier(.2,.9,.2,1) forwards;
	animation-delay: 0.12s;
}

/* Make mini-posts participate in the same 3D flip animations */
.mini-post {
	display: flex; /* anchor should behave as a block */
	text-decoration: none;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.mini-post.flip-out {
	will-change: transform, opacity;
	transform-origin: center center;
	-webkit-transform-origin: center center;
	animation: flipOut 0.45s cubic-bezier(.2,.9,.2,1) forwards;
}

.mini-post.flip-in {
	will-change: transform, opacity;
	transform-origin: center center;
	-webkit-transform-origin: center center;
	animation: flipIn 0.45s cubic-bezier(.2,.9,.2,1) forwards;
	animation-delay: 0.12s;
}

/* Stagger animation delays for posts */
.post.flip-out:nth-child(1) { animation-delay: 0s; }
.post.flip-out:nth-child(2) { animation-delay: 0.05s; }
.post.flip-out:nth-child(3) { animation-delay: 0.1s; }
.post.flip-out:nth-child(4) { animation-delay: 0.15s; }
.post.flip-out:nth-child(5) { animation-delay: 0.2s; }

.post.flip-in:nth-child(1) { animation-delay: 0.1s; }
.post.flip-in:nth-child(2) { animation-delay: 0.15s; }
.post.flip-in:nth-child(3) { animation-delay: 0.2s; }
.post.flip-in:nth-child(4) { animation-delay: 0.25s; }
.post.flip-in:nth-child(5) { animation-delay: 0.3s; }

/* Tag pills / badges */
.tags {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
}

.tag-pill {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	font-size: 0.9rem;
	color: var(--text2-color, #333);
	background: rgba(0,0,0,0.06);
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.06);
	line-height: 1;
}

.tag-pill:hover {
	background: rgba(0,0,0,0.09);
}

/* Breadcrumb navigation */
.breadcrumb {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: var(--text-xs);
	margin-bottom: var(--space-lg);
	color: var(--text-muted);
}

.breadcrumb a {
	color: var(--primary2-color);
	text-decoration: none;
	transition: color 0.2s ease;	
}
.breadcrumb strong {
	font-weight: 600;
}
.breadcrumb a:hover {
	color: var(--primary-color);
}

.breadcrumb span[aria-current="page"] {
	color: var(--text-primary);
}
.breadcrumb svg {
	height: 1rem;
	width: 1rem;
	flex-shrink: 0;
}
/* Read article indicator */
.mini-post.readed {
	opacity: 0.7;
}

.mini-post.readed header time::after {
	content: "✓ Přečteno";
	display: inline-flex;	
	color: #4CAF50;
	font-size: 0.75em;
	font-weight: 500;
	margin-left: 0.8rem;
	align-items: end;
}

/* Also make close button available for the slide-out #menu panel */
.sidebar-close {
	display: none;
}

body.is-menu-visible .sidebar-close {
	display: flex;
}




/* Styles extracted from article: Google Lighthouse form */
.lighthouse-form {
  background: var(--bg-color);
  border: solid 1px #e9e9e9;
  padding: 1.5rem;
  margin: 2rem 0;
}
.lighthouse-form h3 {
  margin-top: 0;
}
.lighthouse-form form {
	  display: flex;
  align-items: center;
  gap: 1rem;
}
.lighthouse-form p {
	 color: var(--text2-color);
}
.lighthouse-form label {
  color: var(--text2-color);
  display: block;
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
  margin: 0;
}
 
.lighthouse-form input[type="url"],
.lighthouse-form input[type="text"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: #fff;
  border: none;
  border: solid 1px #e9e9e9;
  border-radius: 0;
  color:var(--text-color);
  display: block;
  outline: 0;
  padding: 0 1em;
  text-decoration: none;
  width: 100%;
  height: 2.75em;
  font-size: 1em;
}

.lighthouse-form input[type="url"]:focus,
.lighthouse-form input[type="text"]:focus {
  border-color: var(--primary-color);
}


.lighthouse-form .error-message {
  color: #c94663;
  font-size: 0.9em;
  margin-top: 0.5em;
  display: none;
}

.lighthouse-form .error-message.show {
  display: block;
}

/* Tlacitko ve formulari nesmi zkolabovat na sirku textu vedle inputu (PO 2026-08-06). */
.lighthouse-form button.btn-primary {
  cursor: pointer;
  flex: 0 0 auto;
}

/* Mobile sidebar handling */
@media screen and (max-width: 580px) {

	.lighthouse-form form {
		flex-direction: column;
		align-items: stretch;
	}
}

/* Mobile sidebar handling */
@media screen and (max-width: 767px) {

	body {
		padding-top: calc(2.75em + 24px);
	}
	body.header--top {
		padding-top: calc(3.75em + 24px);
	}

	.lighthouse-form label {
		display: none;
	}


	#menu > * {
		padding: 1.5em;
	}

	#menu hr {
		display: none;
	}

	#sidebar {
		display: block;
		position: static;
		width: 100%;
		min-width: 0;
		margin: var(--space-lg) 0 0;
		padding: var(--space-lg) 0 0;
		border-top: solid 1px #e9e9e9;
		overflow: visible;
	}
	
	#sidebar.sidebar-mobile-open {
		display: block;
		position: static;
		padding: var(--space-lg) 0 0;
		margin: var(--space-lg) 0 0;
		border-top: solid 1px #e9e9e9;
		animation: none;
	}
	
	@keyframes slideInRight {
		from {
			transform: translateX(100%);
		}
		to {
			transform: translateX(0);
		}
	}
	
	.sidebar-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 10000;
		animation: fadeIn 0.3s ease-out;
	}
	
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}



	/* Close button shown inside the menu/sidebar when opened on small screens */
	.sidebar-close {
		position: absolute;
		top: 0.5rem;
		right: 1rem;
		background: transparent;
		border: 0;
		font-size: 2.2rem;
		height: auto;
		color: var(--text2-color);
		padding: 0 !important;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;;
		border: 0px solid transparent !important;;
		line-height: 1;
		box-shadow: none !important;


		svg {
			height: 2rem;
		}
	}

	.sidebar-close:focus,
	.sidebar-close:hover {
		color: var(--primary-color);
		outline: none;
		background: rgba(0,0,0,0.02);
	}
}

/* ── Pagination ─────────────────────────────────────────────────────── */
nav[data-bow-pagination] {
	margin: 2rem 0 1rem;
	display: flex;
	justify-content: center;
}

nav[data-bow-pagination].ihidden {
	display: none;
}

nav[data-bow-pagination] .pagination {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 0.25rem;
}

/* Hide prev/next arrow items – only page numbers are shown */
nav[data-bow-pagination] .page-item:first-child,
nav[data-bow-pagination] .page-item:last-child {
	display: none;
}

nav[data-bow-pagination] .page-item .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2rem;
	height: 2.2rem;
	padding: 0 0.6rem;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 1;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

nav[data-bow-pagination] .page-item .page-link:hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #ffffff !important;
}

nav[data-bow-pagination] .page-item.active .page-link {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #fff;
	pointer-events: none;
}

nav[data-bow-pagination] .page-item.disabled .page-link {
	color: var(--border-color);
	border-color: var(--border-color);
	pointer-events: none;
	cursor: default;
}
/* ---- Header CTA button ---- */
.header-cta-wrap {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	/* Odstup od menu (2026-08-11, třetí kolo) - `ul{width:100%}` výš teď
	   sune poslední odkaz až na pravý okraj `.links`, kde bez mezery sedělo
	   rovnou na tlačítku. Stejný účel jako `.nav-btn-external{margin-left:
	   1.5rem}` na auditu. */
	margin-left: 1.5rem;
	/* PO 2026-08-12: pravý okraj tlačítka musí lícovat s pravým okrajem
	   aktivního tabu v liště nad ním (`.network-link.je-aktivni`) - dřívější
	   `padding-right:.75em` tu nic neřešilo (mezeru od menu už dělá
	   margin-left výš) a jen odsouvalo tlačítko 12px od skutečného okraje. */
}
/* Media query musí být AŽ PO základním pravidlu (2026-08-11, nález): stejná
   specificita, takže dřív prohrávala se source-order kaskádou a tlačítko se
   na mobilu nikdy neschovalo, i když media query „platila". */
@media screen and (max-width: 480px) {
	.header-cta-wrap {
		display: none;
	}
}

/* ─── Unified Button ─── */

.btn-primary {
	display: inline-block;
	position: relative;
	overflow: hidden;
	background: var(--primary-color);
	color: #fff !important;
	padding: 0.7em 1.8em;
	border-radius: 6px;
	border: none;
	border-bottom: none;
	font-size: 1rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	line-height: 1.5;
	transition: filter 0.2s ease;
	cursor: pointer;
}

.btn-primary.btn-sm {
	padding: 0.3em 0.85em;
	font-size: 0.75em;
	border-radius: 3px;
}

.btn-primary::after {
	content: '';
	position: absolute;
	top: 0;
	left: -75%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		to right,
		rgba(255,255,255,0) 0%,
		rgba(255,255,255,0.45) 50%,
		rgba(255,255,255,0) 100%
	);
	transform: skewX(-20deg);
	transition: left 0s;
	pointer-events: none;
}

.btn-primary:hover {
	filter: brightness(1.15);
	color: #fff !important;
	border-bottom: none;
}

.btn-primary:hover::after {
	left: 130%;
	transition: left 0.45s ease;
}

.btn-primary:active {
	opacity: 0.85;
}

/* Arrow variant – only in CTA context */
.article-cta__body .btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	box-shadow: 0 2px 8px rgba(29, 149, 201, 0.3), 0 1px 2px rgba(0,0,0,0.08);
}

.article-cta__body .btn-primary::before {
	content: '→';
	order: 2;
	transition: transform 0.2s ease;
}

.article-cta__body .btn-primary:hover::before {
	transform: translateX(3px);
}

.header-cta {
	/* visual handled by .btn-primary.btn-sm */
}

/* ── Ambient orca decoration ─────────────────────────────── */
body::before {
content: '';
position: fixed;
bottom: 0;
left: 0;
width: 680px;
height: 680px;
background: url('/assets/images/logo-blueorca.svg') no-repeat center / contain;
opacity: 0.055;
pointer-events: none;
z-index: 0;
}

/* ── Author box ── */
/* Pozice (PO 2026-07-31): poslední blok článku, tedy pod .article-content a NAD
   .article-cta. Dřív stál samostatně pod CTA, což trhalo souvislé pozadí karty.
   `.author-box-wrap` je proto jen pokračování bílé plochy článku i s bočními
   linkami; podpis se odliší vsazeným panelem uvnitř, ne vlastní kartou.
   Boční padding drží zarovnání s textem článku (.article-content má 3rem). */
.author-box-wrap {
    background: #fff;
    border-left: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    padding: 0 3rem 1.5rem;
}

.author-box {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    margin: 0;
    /* Původní barvy byly z tmavého motivu (pozadí rgba(3,26,42,.4), světlé
       písmo) a na světlém blogu působily jako cizí tmavý blok. Vsazený světlý
       panel, stejný jazyk jako zbytek článku. */
    background: #f7fafc;
    border: 1px solid #e9e9e9;
    border-radius: var(--radius-sm);
}

.author-box__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    /* Zdrojová fotka je 400x910, tedy celá postava. Výchozí `cover` centruje
       svisle a v kruhu 56 px pak zbyde trup bez hlavy. Zarovnáním k hornímu
       okraji se do výřezu dostane obličej. */
    object-position: 50% 0;
    flex-shrink: 0;
    border: 1px solid #e0e0e0;
    background: #f4f8fb;
}

.author-box__info {
    flex: 1;
    min-width: 0;
}

.author-box__name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1c2b33;
    margin: 0 0 0.15rem;
}

.author-box__role {
    font-size: 0.8rem;
    color: #6b7d88;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}

.author-box__bio {
    font-size: 0.88rem;
    color: #43555f;
    line-height: 1.6;
    margin: 0;
}

/* Result stats for case studies */
.result-stats {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
    flex-wrap: wrap;
}

.result-stat {
    flex: 1;
    min-width: 120px;
    background: rgba(60,164,197,0.1);
    border: 1px solid rgba(60,164,197,0.3);
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.result-stat__value {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #3ca4c5;
    line-height: 1.1;
    margin-bottom: 0.35rem;
}

.result-stat__label {
    display: block;
    font-size: 0.78rem;
    color: rgba(199,233,244,0.65);
    line-height: 1.4;
}

/* ── Lišta o měření (bo-notice-bar) ── */
/* Pruh i tlačítko injektuje tracker.js z metrics repa a jeho pravidla jsou
   !important, takže přebití potřebuje vyšší specificitu (`body #id`) i vlastní
   !important. PO 2026-07-31: pevná výška tlačítka (2,2 rem), jinak ho okolní text
   v liště přetahuje. Záměrně jen pro blog - tracker běží i na ostatních
   BlueOrca webech a ty se tímhle souborem neřídí. */
body #bo-notice-bar .bo-notice-btn {
    height: 2.2rem !important;
}

/* Měřicí nástroj v článku (PO 2026-08-06): sdílí tónované pozadí s blockquote, ale nesmí
   vypadat jako citace — text vlevo, bez kurzívy, běžná velikost. Selektor musí nést
   `.article-content`, protože původní pravidlo je vnořené v něm (vyšší specificita). */
.article-content .lighthouse-form {
	text-align: left;
	text-wrap: initial;
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	color: var(--text-color);
	padding: 1.5rem;
}
.article-content .lighthouse-form h3 {
	margin: 0 0 0.35em;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--primary2-color);
}
.article-content .lighthouse-form p {
	margin: 0 0 1rem;
	font-size: 0.95rem;
}
.article-content .lighthouse-form form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
}
.article-content .lighthouse-form label {
	flex: 0 0 auto;
	margin: 0;
	font-weight: 600;
	font-size: 0.9rem;
}
.article-content .lighthouse-form input[type="text"] {
	flex: 1 1 14rem;
	width: auto;
}
.article-content .lighthouse-form button.btn-primary {
	flex: 0 0 auto;
	cursor: pointer;
	height: 2.75em;
	padding: 0 1.8em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.article-content .lighthouse-form .error-message {
	margin: 0.75rem 0 0;
	font-size: 0.9rem;
	color: #c94663;
}

/* Na mobilu se formulář skládá pod sebe (pravidlo výš). Bez tohohle se input v sloupcovém
   flexu roztáhne do výšky přes celý zbytek boxu — změřeno 2026-08-06 (220 px vysoké pole). */
@media screen and (max-width: 580px) {
	.article-content .lighthouse-form form {
		flex-direction: column;
		align-items: stretch;
	}
	.article-content .lighthouse-form input[type="text"] {
		flex: 0 0 auto;
		width: 100%;
		height: 2.75em;
	}
	.article-content .lighthouse-form button.btn-primary {
		width: 100%;
	}
}

/* ── Lišta napříč weby BlueOrca ──────────────────────────────────────────
   Sdílený blok napříč weby BlueOrca. Obsah, markup a barevné varianty
   zdokumentované v library/standards/network-bar.md (workspace repo
   engine-ai, PO 2026-08-10). Tenhle soubor je jedna instance.

   #header je tu taky `position:fixed; top:0` (z-index 10000) s
   `body{padding-top}` kompenzací — lišta se stejným trikem naskládá NAD
   něj: `#header{top:24px}` ho odsune, `body` padding-top naroste o
   stejných 24px v obou zlomech (desktop 3.5em, mobil ≤767px 2.75em).
   Přidáno na konec souboru, ať vyhraje kaskádou bez zásahu do starších
   pravidel výš.

   `!important` všude (PO: „styly lišty by měly být important
   a nepřepisovatelné webem"). `.je-svetla` aktivní (PO: „blog bude mít
   nějakou světlou variantu") — blog je jediný web rodiny se světlým
   tématem, tmavá lišta by na něm netvořila přirozený přechod. Aktivní
   tab: Blog. */
/* Scroll choreografie (2026-08-11, sjednoceno s audit.blueorcawebsites.eu):
   lišta teď `position:absolute` místo `fixed` - mimo normal flow stejně
   jako předtím (#wrapper layout se jí netýká), ale `absolute` bez
   pozicovaného předka je kotvené k DOKUMENTU, ne k viewportu, takže při
   scrollu přirozeně odroluje pryč (žádný JS). #header ZŮSTÁVÁ
   `position:fixed` (viz historická poznámka níž - měnit `position` na
   něm je riskantní, `#wrapper{flex-direction:row-reverse}` by ho znovu
   mohlo vtáhnout do flexu). Místo toho `main.js` hlídá scroll a hýbe
   `transform`, ať #header vypadá, že „odroluje" stejně jako lišta - dolů
   1:1 sledování bez CSS transition (instantní/tuhé), nahoru animovaný
   návrat (transition přidaná jen na ten jeden přechod, inline style).
   Viz `overflow-anchor:none` na html (2026-08-11, main.css shora) a
   scroll choreografie v assets/js/main.js. */
/* `position:fixed`, ne `absolute` (2026-08-23, v4 sjednocení): lišta
   a hlavička tvoří JEDEN blok posouvaný jedním sdíleným `transform`
   (assets/js/main.js). Dokud byla lišta součástí dokumentu, posouval ji
   prohlížeč a hlavičku JS - při scrollu nahoru se hlavička vracela
   uprostřed stránky sama, bez lišty (PO 2026-08-23: „vysouvají a
   zasouvají se jako dvě nezávislé sekce"). `body{padding-top}` s jejími
   24px počítalo už dřív, takže přechod na fixed nemění žádnou výšku. */
.network-bar { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 10001 !important; background: #0f4663 !important; will-change: transform !important; }
/* position:fixed na #header zůstává záměrně (2026-08-11, historie): je
   vnořený v #wrapper{display:flex;flex-direction:row-reverse} - pokus o
   normal flow (jako audit) ho vtáhl do toho flexu a rozsypal layout (viz
   historie commitů). `fixed`/`absolute` flex layout obchází úplně, proto
   lišta výš mohla bezpečně přejít na `absolute` beze změny #header. */
/* Barva sjednocena s audit/admin (2026-08-11, PO: "světlá varianta co je
   nyní na admin, do modra lehce") - dřív neutrální #f4f4f4, teď stejný
   lehce modrý odstín jako zbytek rodiny. */
.network-bar.je-svetla { background: #eaf4f8 !important; }
/* max-width 1600px (2026-08-11, PO: „jediné co má lišta dědit od webu je
   šířka containeru") - odpovídá skutečnému `#header .wrapper{max-width:1600px}`
   výš v tomhle souboru; dřív tu byl natvrdo zkopírovaný 1490px od jinud, co
   neodpovídal ničemu na blogu. */
/* Celá lišta scrolluje jako JEDEN pruh, ne jen produkty (2026-09-02, port
   z metrics/admin/audit po jejich živém potvrzení). Když se vejde:
   justify-content:space-between + .network-contact's order:-1;margin-
   right:auto níž drží kontakt vlevo, brand+produkty vpravo (beze změny
   proti dřívějšku). Když ne: nic nesmršťuje (flex:none všude), celý
   řádek jde jako jeden celek do overflow-x:auto tady. */
.network-inner { display: flex !important; align-items: stretch !important; justify-content: space-between !important; gap: 0 !important; height: 24px !important; max-width: 1600px !important; margin: 0 auto !important; padding: 0 4.5em !important; line-height: 1 !important; text-shadow: none !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; }
.network-inner::-webkit-scrollbar { display: none !important; }
/* Šipky "dá se to posunout" (2026-09-02, port z metrics/admin/audit) - sedí
   v gutteru mezi .network-bar (edge-to-edge) a .network-inner (max-width:
   1600px containerem). Čistě vizuální nápověda (pointer-events:none), JS
   přepíná viditelnost podle scrollLeft/scrollWidth (.ma-scroll-vlevo/vpravo
   na .network-bar). */
.network-edge {
    position: absolute !important; top: 0 !important; bottom: 0 !important; width: 24px !important;
    display: none !important; align-items: center !important; z-index: 2 !important;
    color: rgba(224, 240, 246, .55) !important; pointer-events: none !important;
}
.network-edge-vlevo { left: 0 !important; justify-content: flex-start !important; padding-left: 4px !important; background: linear-gradient(to right, #0f4663 40%, transparent) !important; }
.network-edge-vpravo { right: 0 !important; justify-content: flex-end !important; padding-right: 4px !important; background: linear-gradient(to left, #0f4663 40%, transparent) !important; }
.je-svetla .network-edge { color: rgba(15, 70, 99, .5) !important; }
.je-svetla .network-edge-vlevo { background: linear-gradient(to right, #eaf4f8 40%, transparent) !important; }
.je-svetla .network-edge-vpravo { background: linear-gradient(to left, #eaf4f8 40%, transparent) !important; }
.network-bar.ma-scroll-vlevo .network-edge-vlevo,
.network-bar.ma-scroll-vpravo .network-edge-vpravo { display: flex !important; }
/* Padding musí přesně sledovat #header .wrapper na obou zlomech (2026-08-11,
   nález: „lišta je širší než layout") - jinak sedí jen vnější box (stejný
   max-width), ale obsah uvnitř (logo, kontakt) je na jiné svislici než
   hlavička pod ním. */
@media screen and (max-width: 1680px) {
    .network-inner { padding: 0 3em !important; }
}
@media screen and (max-width: 768px) {
    .network-inner { padding: 0 1.5em !important; }
}
/* Preventivní reset (2026-08-11, PO): `.network-scroll` je reálný <nav> tag,
   šíleně ohrožený holými selektory bez třídy (metrics mělo `nav{padding:1rem 0;
   background:…}`). Cíleně, ne `all:unset` - to by smazalo i geometrii
   vnořených SVG ikon. Vlastní overflow-x/scrollbar-skrývání ODSTRANĚNO
   2026-09-02 - scroll teď nese `.network-inner` jako celek (viz výš),
   `.network-scroll` je zpátky obyčejný flex:none prvek bez vlastního
   scroll boxu. */
.network-scroll {
    position: static !important; top: auto !important; z-index: auto !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
    background: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    display: flex !important; align-items: stretch !important; flex: none !important;
}
.network-brand { border: none !important; margin: 0 !important; background: none !important; flex: none !important; display: flex !important; align-items: center !important; padding: 0 .5rem !important; text-decoration: none !important; transition: background 120ms ease !important; }
/* Kanonický edge-hug trik (margin-left:-.5rem, PO 2026-08-11) počítal s tím,
   že brand je PRVNÍ prvek lišty a sedí na optickém okraji containeru. Po
   „Zrcadlovém přesunu" (2026-08-12: „telefon a email nalevo, weby napravo")
   je ale první `.network-contact` (order:-1) - brand sedí uprostřed řady
   hned za kontaktem, ne na okraji. Stejný záporný margin ho stahoval
   k poslední kontaktní ikoně (LinkedIn) a s přidanými sociálními ikonami
   (2026-09-02) v „nevejde se" stavu srazil oba skoro bez mezery (PO
   screenshot, port fixu z metrics/admin/audit). Kladný odstup místo toho. */
.network-brand { margin-left: .4rem !important; }
.network-brand:hover, .network-brand:focus-visible { background: rgba(255, 255, 255, .1) !important; }
.je-svetla .network-brand:hover, .je-svetla .network-brand:focus-visible { background: rgba(15, 70, 99, .05) !important; }
.network-brand-wordmark { display: block !important; height: 10px !important; width: auto !important; border: 0 !important; margin: 0 !important; max-width: none !important; }
.je-svetla .network-brand-wordmark path { fill: #0f4663 !important; opacity: .82; }
.network-brand-icon {
    display: none !important; height: 19px !important; width: auto !important;
    border: 0 !important; margin: 0 !important; max-width: none !important;
    filter: drop-shadow(0 0 3px rgba(60, 164, 197, .45)) !important;
}
.je-svetla .network-brand-icon { filter: drop-shadow(0 0 3px rgba(15, 70, 99, .35)) !important; }
.network-sep { flex: none !important; align-self: center !important; color: rgba(255, 255, 255, .35) !important; display: block !important; fill: none !important; stroke: currentColor !important; stroke-width: 2.5 !important; stroke-linecap: round !important; stroke-linejoin: round !important; }
.je-svetla .network-sep { color: rgba(15, 70, 99, .35) !important; }
.network-link { border: none !important; margin: 0 !important; background: none !important; flex: none !important; display: flex !important; align-items: center !important; white-space: nowrap !important; padding: 0 .65rem !important; font-size: .72rem !important; font-weight: 400 !important; color: #e0f0f6 !important; text-decoration: none !important; transition: background 120ms ease, color 120ms ease !important; }
.network-link:hover, .network-link:focus-visible { background: rgba(255, 255, 255, .1) !important; }
.network-link.je-aktivni, .network-link.je-aktivni:hover, .network-link.je-aktivni:focus-visible { background: #031a2a !important; color: #8ed2e8 !important; }
.je-svetla .network-link { color: #0f4663 !important; }
.je-svetla .network-link:hover, .je-svetla .network-link:focus-visible { background: rgba(15, 70, 99, .05) !important; }
.je-svetla .network-link.je-aktivni, .je-svetla .network-link.je-aktivni:hover, .je-svetla .network-link.je-aktivni:focus-visible { background: #ffffff !important; color: #1f7da5 !important; }
/* Webolution odkaz odstraněn z lišty (PO 2026-08-11, čtvrté kolo). */

/* PROTOTYP 2026-08-11: přímý kontakt (tel/mailto) na pravém okraji lišty,
   tam kde dřív bydlelo Webolution. Sjednoceno s audit.blueorcawebsites.eu. */
.network-contact { flex: none !important; display: flex !important; align-items: stretch !important; order: -1 !important; margin-right: auto !important; }
.network-contact-link {
    flex: none !important; display: flex !important; align-items: center !important; gap: .35rem !important;
    padding: 0 .6rem !important; margin: 0 !important; border: 0 !important;
    color: #e0f0f6 !important; text-decoration: none !important;
    transition: background 120ms ease !important;
}
.network-contact-link:hover, .network-contact-link:focus-visible { background: rgba(255, 255, 255, .1) !important; }
.je-svetla .network-contact-link { color: #0f4663 !important; }
.je-svetla .network-contact-link:hover, .je-svetla .network-contact-link:focus-visible { background: rgba(15, 70, 99, .05) !important; }
.network-contact-link svg { display: block !important; fill: none !important; stroke: currentColor !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; position: relative !important; top: -1px !important; }
/* Sociální ikony (2026-09-02, port z metrics/admin/audit) jsou plné
   brandové značky, ne liniové jako tel/mailto výš - přebíjí zděděné
   stroke pravidlo. */
.network-social-link svg { fill: currentColor !important; stroke: none !important; top: 0 !important; }
/* :last-child (LinkedIn) záporný margin ODSTRANĚN 2026-09-02 (port fixu
   z metrics/admin/audit) - kontakt NENÍ poslední skupina lišty (order:-1),
   LinkedIn je uprostřed řady hned před brandem, ne na pravém okraji
   containeru - stahoval oba k sobě skoro bez mezery. */
.network-contact-text { display: block !important; font-size: .72rem !important; font-weight: 500 !important; white-space: nowrap !important; }
@media (max-width: 896px) {
    .network-contact-text { display: none !important; }
    .network-contact-link { padding: 0 .5rem !important; }
    .network-brand-wordmark { display: none !important; }
    .network-brand-icon { display: block !important; }
}
@media (max-width: 416px) {
    .network-sep { display: none !important; }
}

#header { top: 24px !important; }

/* Utlumené animace (v4 sjednocení, 2026-08-23): blok se neschovává vůbec
   (řeší JS) a nesmí ani přeskakovat velikost přechodem - jediné, co se
   pohne, je okamžitá změna výšky hlavičky. */
@media (prefers-reduced-motion: reduce) {
    body { transition: none !important; }
    #header { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Scroll reveal — standard animací pro weby značky (PO 2026-08-23).
   Pravidla: projects/jan-matousek/knowledge/standard-animaci-webu.md

   Při načtení se to, co je hned vidět, jen prolne (bez posunu). Při scrollu
   prvek prolne a přijede o kousek zdola — třídu `reveal-posun` přiděluje
   skript prvkům, které při registraci ležely pod ohybem.
   --------------------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transition: opacity .55s ease-out, transform .55s ease-out;
    transition-delay: var(--reveal-delay, 0s);
}
.reveal.reveal-posun { transform: translateY(16px); }
/* Registrace `.reveal` běží až po prvním vykreslení (skript je `defer`).
   Přidat třídu prvku, který prohlížeč UŽ nakreslil, spustí přechod do
   PRŮHLEDNA: text se objeví, prolne pryč a teprve pak se vrátí. Naměřeno
   2026-08-23 na studeném načtení auditu — 58 prvků naráz, přesně to, co PO
   popsal jako „úplně naprd". Po dobu registrace proto přechody vypínáme. */
.reveal-pripravuje .reveal { transition: none !important; }

/* Lišta a hlavička při první návštěvě hlavní stránky: sjedou shora
   (PO 2026-08-23 „mají se hlavičky s lištou vysunout"). */
.reveal.reveal-shora { transform: translateY(-12px); }

.reveal.is-visible   { opacity: 1; transform: none; }
/* Řádky tabulek nikdy neposouvat — uvnitř obalu s `overflow` posun přeteče
   a obal na dobu animace dostane posuvník, který pak zmizí. */
.reveal.reveal-fade  { transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* Výchozí schovaná poloha pro úvodní vysunutí (2026-08-23, v4). Třídu
   `topbar-intro` přidává inline skript v <head> — musí padnout před prvním
   vykreslením, jinak blok blikne. STEJNÁ hodnota pro lištu i hlavičku, aby
   spolu zůstaly slepené; stačí, když je větší než výška bloku. Pohyb dolů
   pak obstará JS jedním sdíleným `transform`. */
html.topbar-intro .network-bar, html.topbar-intro #header { transform: translateY(-200px) !important; }


/* ── Rychlost zasouvání a vysouvání bloku ─────────────────────────────────
   PO 2026-08-23: „rychlost zasunutí a vysunutí hlavičky musíme nějak
   regulovat, chci ale linear animace a ne zas přehnaně dlouhé."
   ⚠ Ruší tím pravidlo z 2026-08-12 („žádná transition na transform,
   hlavička má odrolovat spolu s webem") — blok do teď kopíroval scroll
   1:1 a PO ho chce tlumený. `linear` je výslovné zadání, ne volba.
   Lišta i hlavička dostávají TÝŽ předpis, jinak by se během pohybu
   rozpojily — a právě rozpojení byla původní stížnost. Rychlost je
   v jedné proměnné, ať se ladí na jednom místě. */
:root { --topbar-rychlost: 180ms; }

.network-bar, #header {
    transition: transform var(--topbar-rychlost) linear;
}

@media (prefers-reduced-motion: reduce) {
    .network-bar, #header { transition: none; }
}

/* Přeskočení navigace (WCAG 2.4.1) — vzor z blueorcawebsites.eu.
   Nález vlastního auditu 2026-08-25: a11y-skip-nav chyběl. */
.skip-link{position:absolute;top:-9999px;left:-9999px;z-index:9999;padding:.5rem 1rem;background:#031A2A;color:#e0f0f6;font-size:.9rem;text-decoration:none;border-radius:0 0 4px 4px;}
.skip-link:focus{top:0;left:0;}

/* Testimonial: doložené hodnocení klienta (PO 2026-09-12).
   Odlišený od běžného blockquote schválně — běžná citace je Janův vlastní
   zvýrazněný výrok, tohle je cizí hlas s ověřitelným zdrojem. Zlatá je táž
   barva jako hvězdy u referencí na blueorcawebsites.eu.

   Rozvržení (PO: „hvězdičky tam plujou uprostřed, tlačítko může být napravo,
   jméno nalevo"): text nahoře na celou šířku, pod ním patička v jednom řádku —
   vlevo hvězdy nad jménem a firmou, vpravo tlačítko na originál. Na úzkém
   displeji se patička skládá pod sebe a tlačítko jde na plnou šířku. */
.article-content blockquote.testimonial {
	background: rgba(253, 173, 80, 0.08);
	border: 1px solid rgba(253, 173, 80, 0.5);
	border-radius: 6px;
	padding: 1.5rem 1.75rem 1.35rem 3.1rem;
	font-weight: 400;
	font-size: 1.05rem;
	line-height: 1.6;
	text-align: left;
	color: #3a3a3a;
	position: relative;
}

/* Ozdobné uvozovky (PO 2026-09-12). Běžný blockquote má modré obdélníčky
   z `blockquote::before`; testimonial je oranžový blok, takže dostává vlastní
   dvojici skutečných českých uvozovek. `background-image: none` a `width/height:
   auto` jsou povinné: bez nich se zdědí krabice 48×48 px i s modrým SVG
   z obecného pravidla a vykreslí se obojí přes sebe. */
.article-content blockquote.testimonial::before,
.article-content blockquote.testimonial::after {
	position: absolute;
	width: auto;
	height: auto;
	background-image: none;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.2rem;
	line-height: 1;
	color: rgba(253, 173, 80, 0.45);
	pointer-events: none;
	user-select: none;
}

.article-content blockquote.testimonial::before {
	content: "\201E";
	/* Uvozovka „ sedí na účaří, takže její tvar je v dolní části řádku.
	   Záporný top ji zvedne na úroveň PRVNÍHO řádku citace (PO 2026-09-13),
	   ne druhého, kam ji posadila výška glyfu. */
	top: -1.35rem;
	left: 0.75rem;
	bottom: auto;
	right: auto;
}

/* Zavírací uvozovka patří za text citace, ne pod celý blok: dřív visela
   až pod jménem a odkazem (PO 2026-09-13). Kotví se proto k patičce
   citace a sedá těsně nad její dělicí linku, u pravého okraje. */
.article-content blockquote.testimonial::after {
	content: none;
}

.article-content .testimonial-foot {
	position: relative;
}

.article-content .testimonial-foot::before {
	content: "\201C";
	position: absolute;
	right: 0;
	bottom: calc(100% - 1.1rem);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.2rem;
	line-height: 1;
	color: rgba(253, 173, 80, 0.45);
	pointer-events: none;
	user-select: none;
}

.article-content .testimonial-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	margin-top: 1.2rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(253, 173, 80, 0.4);
}

.article-content .testimonial-who {
	display: block;
	min-width: 0;
}

.article-content .testimonial-stars {
	display: block;
	width: 5.5rem;
	margin-bottom: 0.4rem;
	line-height: 0;
	color: #fdad50;
}

.article-content .testimonial-stars svg {
	width: 100%;
	height: auto;
	display: block;
	fill: currentColor;
}

.article-content blockquote.testimonial cite {
	display: block;
	font-style: normal;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.35;
	color: var(--primary2-color);
}

.article-content blockquote.testimonial cite span {
	display: block;
	margin-top: 0.1rem;
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--text-muted);
}

.article-content .testimonial-verify {
	flex: 0 0 auto;
	display: inline-block;
	padding: 0.5rem 1.05rem;
	border: 1px solid rgba(253, 173, 80, 0.75);
	border-radius: 4px;
	font-style: normal;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	color: #8a5a12;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.6);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Globální `a:hover { color: var(--link-color) !important }` přebíjelo barvu
   textu, takže na oranžovém pozadí zůstávalo modré písmo (PO 2026-09-12,
   foto). Hover proto nejde do oranžové, ale do světle modré: modrý text je
   pak na svém pozadí a tlačítko drží identitu odkazu. `!important` je tu
   jediná cesta, jak ten globální zápis porazit. */
.article-content a.testimonial-verify:hover,
.article-content a.testimonial-verify:focus-visible {
	background: rgba(29, 149, 201, 0.12);
	border: 1px solid var(--primary-color);
	color: var(--primary2-color) !important;
}

@media (max-width: 600px) {
	.article-content blockquote.testimonial {
		padding: 1.25rem 1.1rem 1.1rem;
		font-size: 1rem;
	}

	.article-content .testimonial-foot {
		flex-direction: column;
		align-items: stretch;
		gap: 0.9rem;
	}

	.article-content .testimonial-verify {
		text-align: center;
	}
}

/* Citace na úzkém displeji (PO 2026-09-12 se screenshotem: „je třeba ať zabírá
   text větší šířku boxu, teď je tam moc padding a text se nepřirozeně zalamuje").
   Tři příčiny, ne jedna:
   1. `text-wrap: balance` z desktopového pravidla srovnává délku řádků — v úzkém
      centrovaném boxu z toho vznikne sloupec po jednom slově. Na mobilu proto
      `pretty`, které řeší jen sirotky a jinak láme přirozeně.
   2. font 1.15rem je na box široký ~260 px moc.
   3. boční padding ubíral dalších ~35 px z mála.
   Měřeno na 300 px: box 262 px, text měl 87 % šířky a 2,3 slova na řádek. */
@media screen and (max-width: 600px) {
	body[data-page="article"] .article-content blockquote {
		padding: 1.1rem 0.85rem;
		font-size: 1.02rem;
		line-height: 1.55;
		text-wrap: pretty;
	}

	body[data-page="article"] .article-content blockquote.testimonial {
		padding: 1.25rem 0.95rem 1.1rem;
		font-size: 0.98rem;
		text-wrap: pretty;
	}
}