/* Vzorník — Home Look. Rubriky jsou vzorky: plný odstín + bílý štítek s kódem a názvem. */

@font-face {
	font-family: Archivo;
	src: url(../fonts/archivo-var.woff2) format("woff2");
	font-weight: 400 800;
	font-stretch: 75% 100%;
	font-display: swap;
}

:root {
	--paper: #fff;
	--ink: #15171a;
	--ink-2: #4a4f57;
	--line: #d9dce0;
	--board: #f2f3f4;
	--page-hue: #e8b21c;
	--page-mark: #15171a;
	--gut: 16px;
	--wide: 1200px;
	--text: 680px;
	--cond: 78%;
	--ease: cubic-bezier(.16, 1, .3, 1);
}

.vz-r-by { --page-hue: #2f6b4f; --page-mark: #2f6b4f; }
.vz-r-in { --page-hue: #1f4e8c; --page-mark: #1f4e8c; }
.vz-r-zt { --page-hue: #8db03a; --page-mark: #15171a; }
.vz-r-av { --page-hue: #e8b21c; --page-mark: #15171a; }
.vz-r-ls { --page-hue: #b4466e; --page-mark: #b4466e; }
.vz-r-pd { --page-hue: #ee7a3a; --page-mark: #15171a; }
.vz-r-rv { --page-hue: #8e3b26; --page-mark: #8e3b26; }

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

html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-2) var(--paper); }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: Archivo, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	font-stretch: 100%;
	font-variant-numeric: lining-nums;
	text-rendering: optimizeLegibility;
}

::selection { background: var(--page-hue); color: var(--ink); }
.vz-r-by ::selection, .vz-r-in ::selection, .vz-r-ls ::selection, .vz-r-rv ::selection { color: #fff; }

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
[style*="--hue"] :focus-visible { outline-color: currentColor; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.vz-skip {
	position: absolute; left: var(--gut); top: -60px; z-index: 100;
	background: var(--ink); color: #fff; padding: 10px 14px; font-weight: 650;
}
.vz-skip:focus { top: 8px; }

.vz-ico { width: 1.25em; height: 1.25em; flex: none; }

/* Technické písmo: kódy, údaje, popisky. */
.vz-num, .vz-meta, .vz-chip__num, .vz-strip__code, .vz-strip__count,
.vz-av__code, .vz-av__gh span, .vz-art__data dt, .vz-arch__code, .vz-toc__n, .vz-toc__count,
.vz-sec-h, .vz-menu__btn, .vz-search__label, .vz-foot .vz-widget__title, .vz-foot__h {
	font-stretch: 75%;
	font-weight: 640;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums lining-nums;
}

.vz-num { display: inline-flex; align-items: center; gap: .5em; font-size: .75rem; line-height: 1.2; color: var(--ink-2); }
.vz-num__code { display: inline-flex; align-items: center; gap: .45em; color: var(--ink); }
.vz-num__code::before { content: ""; width: .8em; height: .8em; background: var(--hue); flex: none; }

.vz-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: .75rem; line-height: 1.3; color: var(--ink-2); letter-spacing: .04em; }

.vz-sec-h { margin: 0 0 12px; font-size: .8125rem; color: var(--ink-2); }

/* ——— Hlavička ——— */

.vz-head { background: var(--paper); border-bottom: 1px solid var(--line); }

.vz-head__bar {
	display: flex; align-items: center; gap: 8px;
	max-width: var(--wide); margin: 0 auto; padding: 10px var(--gut);
	min-height: 60px;
}

.vz-logo { display: block; color: var(--ink); margin-right: auto; line-height: 0; }
.vz-logo svg { height: 30px; width: auto; display: block; }

.vz-head__search {
	display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--ink);
}

.vz-menu { position: static; }
.vz-menu__btn {
	list-style: none; cursor: pointer; user-select: none;
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
	border: 1.5px solid var(--ink); font-size: .8125rem; background: var(--paper);
}
.vz-menu__btn::-webkit-details-marker { display: none; }
.vz-menu__btn > span { display: inline-flex; align-items: center; gap: 8px; }
.vz-menu__close, .vz-menu[open] .vz-menu__open { display: none !important; }
.vz-menu[open] .vz-menu__close { display: inline-flex !important; }
.vz-menu[open] .vz-menu__btn { background: var(--ink); color: #fff; }

.vz-menu__panel {
	position: fixed; inset: 60px 0 0 0; z-index: 60;
	overflow-y: auto; overscroll-behavior: contain;
	background: var(--paper); border-top: 1px solid var(--line);
	padding: 20px var(--gut) 48px;
}
@media (prefers-reduced-motion: no-preference) {
	.vz-menu[open] .vz-menu__panel { animation: vz-drop .32s var(--ease); }
	@keyframes vz-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
}

.vz-menu__panel > * { max-width: var(--wide); margin-left: auto; margin-right: auto; }

.vz-nav__list, .vz-nav__list ul { list-style: none; margin: 0; padding: 0; }
.vz-nav__list { margin-top: 24px; display: grid; gap: 0 32px; }
.vz-nav__list > li { border-top: 1.5px solid var(--ink); padding: 12px 0 16px; }
.vz-nav__list > li > a, .vz-nav__list > li > .vz-nav__group {
	display: block; font-size: 1.375rem; font-weight: 760; font-stretch: var(--cond); line-height: 1.15; text-decoration: none;
}
.vz-nav__list ul { margin-top: 8px; }
.vz-nav__list ul a { display: block; padding: 6px 0; text-decoration: none; }
.vz-nav__list ul a:hover { text-decoration: underline; }
.vz-nav__list ul .vz-nav__group {
	display: block; margin-top: 12px; font-size: .75rem; font-weight: 640; font-stretch: 75%;
	letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2);
}
.vz-nav__list ul ul { margin: 2px 0 6px; }
.vz-nav__list ul ul a { font-size: .9375rem; color: var(--ink-2); padding: 4px 0; }

@media (min-width: 900px) {
	.vz-nav__list { grid-template-columns: repeat(3, 1fr); }
	.vz-menu__panel { padding-top: 32px; }
}

.vz-menu__aside { margin-top: 32px; }
.vz-menu__aside img { display: block; }
/* Widget Recent Posts Widget Extended si vkládá vlastní šedé písmo pod AA. */
.vz-menu__aside .rpwe-time, .vz-menu__aside .rpwe-comment { color: var(--ink-2) !important; font-size: .8125rem !important; }

/* Hledání */
.vz-search { display: block; }
.vz-search__label { display: block; font-size: .75rem; margin-bottom: 6px; color: var(--ink-2); }
.vz-search__row { display: flex; }
.vz-search__input {
	flex: 1; min-width: 0; min-height: 48px; padding: 0 14px;
	font: inherit; font-size: 1.0625rem; color: var(--ink);
	border: 1.5px solid var(--ink); border-right: 0; border-radius: 0; background: var(--paper);
}
.vz-search__input::placeholder { color: #6b7079; }
.vz-search__btn {
	display: inline-grid; place-items: center; width: 52px; border: 0; cursor: pointer;
	background: var(--ink); color: #fff;
}

/* Pás čipů rubrik */
.vz-rail { max-width: var(--wide); margin: 0 auto; }
.vz-rail ul {
	list-style: none; margin: 0; padding: 10px var(--gut) 14px;
	display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gut); scrollbar-width: none;
}
.vz-rail ul::-webkit-scrollbar { display: none; }
.vz-rail li { scroll-snap-align: start; flex: none; }
@media (min-width: 1000px) {
	.vz-rail ul { overflow: visible; justify-content: space-between; }
	.vz-rail li { flex: 1 1 0; }
	.vz-rail .vz-chip { width: 100%; }
}

/* ——— Čip: plný odstín nahoře, bílý štítek dole ——— */

.vz-chip {
	display: inline-grid; grid-template-rows: auto auto auto; min-width: 104px;
	text-decoration: none; color: var(--ink); background: var(--paper);
	border: 1px solid var(--line);
	transition: transform .28s var(--ease), border-color .28s var(--ease);
}
.vz-chip__sw {
	display: block; height: 26px; margin-bottom: -8px; background: var(--hue);
	transform: scaleY(.69); transform-origin: 50% 0; transition: transform .28s var(--ease);
}
.vz-chip__num { padding: 6px 10px 0; font-size: .6875rem; color: var(--ink-2); line-height: 1.2; }
.vz-chip__name { padding: 1px 10px 8px; font-size: .9375rem; font-weight: 650; font-stretch: 88%; line-height: 1.2; white-space: nowrap; }
.vz-chip:hover, .vz-chip.is-current { transform: translateY(-6px); border-color: var(--ink); }
.vz-chip:hover .vz-chip__sw, .vz-chip.is-current .vz-chip__sw { transform: scaleY(1); }
.vz-chip.is-current { border-color: var(--ink); }

/* ——— Homepage ——— */

.vz-main { display: block; }

.vz-top { max-width: var(--wide); margin: 0 auto; }

.vz-lead__link { display: grid; text-decoration: none; color: var(--on); background: var(--hue); }
.vz-lead__field { display: flex; flex-direction: column; gap: 12px; padding: 22px var(--gut) 26px; }
.vz-lead .vz-num, .vz-lead .vz-num__code, .vz-lead .vz-meta { color: var(--on); }
.vz-lead .vz-num__code::before { background: var(--on); }
.vz-lead__title {
	font-size: clamp(1.875rem, 6.4vw, 3.25rem); line-height: 1.04; font-weight: 780; font-stretch: var(--cond);
	letter-spacing: -.015em; text-wrap: balance;
}
.vz-lead__excerpt { font-size: 1rem; line-height: 1.5; max-width: 46ch; }
.vz-lead__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--board); }
.vz-lead__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vz-lead__link:hover .vz-lead__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }

@media (min-width: 900px) {
	.vz-top { padding: 24px var(--gut) 0; }
	.vz-lead__link { grid-template-columns: 5fr 7fr; min-height: 440px; }
	.vz-lead__field { justify-content: flex-end; padding: 32px 36px 36px; }
	.vz-lead__img { aspect-ratio: auto; height: 100%; }
}

.vz-top__side { padding: 28px var(--gut) 8px; }
@media (min-width: 700px) {
	.vz-top__side { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
	.vz-top__side .vz-sec-h { grid-column: 1 / -1; margin: 0; }
}
@media (min-width: 900px) { .vz-top__side { padding: 36px 0 8px; gap: 24px; } }

/* Karta: fotka + štítek vzorku */
.vz-card__link {
	display: grid; grid-template-columns: 34% 1fr; gap: 14px; align-items: start;
	padding: 14px 0; border-top: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.vz-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--board); }
.vz-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vz-card__label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vz-card__title { margin: 0; font-size: 1.0625rem; line-height: 1.25; font-weight: 700; font-stretch: 90%; text-wrap: pretty; }
.vz-card__link:hover .vz-card__title { text-decoration: underline; text-underline-offset: .15em; }

@media (min-width: 700px) {
	.vz-card__link { grid-template-columns: 1fr; gap: 0; padding: 0; border: 0; }
	.vz-card__label {
		position: relative; padding: 18px 14px 16px; border: 1px solid var(--line); border-top: 0;
	}
	.vz-card__label::before {
		content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 10px; background: var(--hue);
		transform: scaleY(.6); transform-origin: 50% 0; transition: transform .28s var(--ease);
	}
	.vz-card__link:hover .vz-card__label::before { transform: scaleY(1); }
	.vz-card__title { font-size: 1.1875rem; }
}

/* Reklamní sloty */
.vz-slot { max-width: var(--wide); margin: 32px auto; padding: 0 var(--gut); text-align: center; }
.vz-slot img { display: inline-block; }

/* Rozcestník Ako vybrať: žlutá deska s bílými vzorky skupin */
.vz-av { background: var(--hue); color: var(--on); margin: 40px 0; padding: 32px 0 36px; }
.vz-av__head, .vz-av__fan { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gut); }
.vz-av__head { display: grid; gap: 8px; margin-bottom: 22px; }
.vz-av__code { font-size: .75rem; }
.vz-av__data { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.vz-av__title { margin: 0; font-size: clamp(2.25rem, 7vw, 3.75rem); line-height: 1; font-weight: 800; font-stretch: 75%; letter-spacing: -.02em; }
.vz-av__lead { margin: 0; max-width: 52ch; }
.vz-av__all { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; min-height: 44px; }

/* Skupiny mají různou délku; sloupcová sazba je skládá bez prázdných děr. */
.vz-av__fan { list-style: none; columns: 2 160px; column-gap: 12px; }
.vz-av__group {
	display: inline-block; width: 100%; margin: 0 0 12px; break-inside: avoid;
	background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); padding: 0 14px 10px;
}
.vz-av__gh {
	margin: 0 -14px 6px; padding: 12px 14px 10px; border-bottom: 1.5px solid var(--ink);
	display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
	font-size: 1.125rem; line-height: 1.1; font-weight: 760; font-stretch: var(--cond);
}
.vz-av__gh span { font-size: .6875rem; color: var(--ink-2); flex: none; }
.vz-av__group ul { list-style: none; margin: 0; padding: 0; }
.vz-av__group li + li { border-top: 1px solid var(--line); }
.vz-av__group a { display: block; padding: 9px 0; text-decoration: none; line-height: 1.3; }
.vz-av__group a::first-letter { text-transform: uppercase; }
.vz-av__group a:hover { text-decoration: underline; }

@media (min-width: 900px) {
	.vz-av { padding: 48px 0 52px; }
	.vz-av__head { grid-template-columns: auto 1fr auto; align-items: end; column-gap: 40px; }
	.vz-av__lead { padding-bottom: .4em; }
	.vz-av__fan { columns: 4 220px; column-gap: 16px; }
	.vz-av__group { margin-bottom: 16px; }
}

/* Vějíř pásů vzorků */
.vz-fan {
	display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; align-items: start;
	max-width: var(--wide); margin: 32px auto; padding: 8px var(--gut) 16px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: thin;
}
.vz-fan > .vz-strip { scroll-snap-align: start; }
@media (min-width: 900px) {
	.vz-fan { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 28px; overflow: visible; padding-top: 16px; }
	.vz-fan > .vz-strip { transform-origin: 50% 100%; transition: transform .45s var(--ease); }
	.vz-fan > .vz-strip:nth-child(1) { transform: rotate(-1.2deg); }
	.vz-fan > .vz-strip:nth-child(3) { transform: rotate(1.2deg); }
	.vz-fan > .vz-strip:hover, .vz-fan > .vz-strip:focus-within { transform: translateY(-6px) rotate(0); border-color: var(--ink); }
}

/* Pás vzorků: plná hlavička, světlejší odstíny pod ní */
.vz-strip {
	display: flex; flex-direction: column; background: var(--paper);
	border: 1px solid color-mix(in srgb, var(--hue) 45%, var(--line));
}
.vz-strip__head {
	display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px;
	min-height: 132px; padding: 14px 16px 16px; background: var(--hue); color: var(--on); text-decoration: none;
}
.vz-strip__code { font-size: .75rem; }
.vz-strip__name { grid-column: 1 / -1; align-self: start; margin: 0 0 14px; font-size: 1.625rem; line-height: 1.05; font-weight: 780; font-stretch: var(--cond); text-wrap: balance; }
.vz-strip__count { font-size: .6875rem; white-space: nowrap; }
.vz-strip__head:hover .vz-strip__name { text-decoration: underline; text-decoration-thickness: 2px; }

.vz-strip__rows { list-style: none; margin: 0; padding: 0; flex: 1; }
.vz-strip__row { background: color-mix(in srgb, var(--hue) var(--shade), #fff); }
.vz-strip__row a { display: flex; flex-direction: column; gap: 3px; min-height: 76px; padding: 12px 16px 14px; text-decoration: none; color: var(--ink); }
.vz-strip__row a:hover .vz-strip__title { text-decoration: underline; text-underline-offset: .15em; }
.vz-strip__title { font-size: 1rem; line-height: 1.3; font-weight: 620; text-wrap: pretty; }

.vz-strip__more {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	min-height: 48px; padding: 0 16px; font-size: .875rem; font-weight: 650; text-decoration: none;
	border-top: 1px solid var(--line);
}
.vz-strip__more:hover { text-decoration: underline; }

/* ——— Článek ——— */

.vz-art__head { background: var(--hue); color: var(--on); }
.vz-art__headin { max-width: 1000px; margin: 0 auto; padding: 18px var(--gut) 28px; }
.vz-art__head:has(+ .vz-art__img) .vz-art__headin { padding-bottom: 72px; }

.vz-crumbs ol { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .8125rem; }
.vz-crumbs li { display: inline-flex; align-items: center; }
.vz-crumbs li + li::before { content: ""; width: 14px; height: 1px; background: currentColor; margin: 0 8px; opacity: .6; }
.vz-crumbs a { text-decoration: none; }
.vz-crumbs a:hover { text-decoration: underline; }

.vz-art__num { display: inline-flex; align-items: center; gap: .5em; text-decoration: none; }
.vz-art__num:hover { text-decoration: underline; }
.vz-art__num .vz-num__code { color: inherit; }
.vz-art__num .vz-num__code::before { background: currentColor; }

.vz-art__title {
	margin: 16px 0 22px; max-width: 24ch;
	font-size: clamp(2rem, 6.2vw, 3.625rem); line-height: 1.03; font-weight: 790; font-stretch: var(--cond);
	letter-spacing: -.018em; text-wrap: balance;
}

.vz-art__data { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 0; }
.vz-art__data div { padding: 8px 18px 0 0; margin-right: 18px; border-top: 1px solid color-mix(in srgb, var(--on) 45%, transparent); }
.vz-art__data div:last-child { margin-right: 0; }
.vz-art__data dt { font-size: .6875rem; opacity: .85; }
.vz-art__data dd { margin: 2px 0 0; font-size: .9375rem; font-weight: 620; }

.vz-art__img { max-width: 1000px; margin: -48px auto 0; padding: 0 var(--gut); }
.vz-art__img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--board); }

.vz-art__body {
	max-width: calc(var(--text) + 2 * var(--gut)); margin: 36px auto 0; padding: 0 var(--gut);
	font-size: 1.125rem; line-height: 1.7;
}
.vz-art__body > * { margin-top: 0; margin-bottom: 1.1em; }
.vz-art__body h2 {
	margin: 2.1em 0 .6em; font-size: 1.75rem; line-height: 1.15; font-weight: 760; font-stretch: 85%;
	letter-spacing: -.01em; text-wrap: balance; scroll-margin-top: 16px;
}
.vz-art__body h3 { margin: 1.8em 0 .5em; font-size: 1.3125rem; line-height: 1.25; font-weight: 720; font-stretch: 90%; scroll-margin-top: 16px; }
.vz-art__body h4 { margin: 1.6em 0 .4em; font-size: 1.125rem; font-weight: 720; }
.vz-art__body a { text-decoration-color: var(--page-mark); text-decoration-thickness: 2px; }
.vz-art__body a:hover { text-decoration-thickness: 3px; }
.vz-art__body ul, .vz-art__body ol { padding-left: 1.3em; }
.vz-art__body li { margin-bottom: .35em; }
.vz-art__body li::marker { color: var(--page-mark); font-weight: 700; }
.vz-art__body figure { margin-left: 0; margin-right: 0; }
.vz-art__body img { display: block; height: auto; }
.vz-art__body figcaption, .vz-art__body .wp-caption-text { margin-top: 8px; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.vz-art__body .wp-caption { max-width: 100%; }
.vz-art__body .aligncenter { margin-left: auto; margin-right: auto; }
@media (min-width: 760px) {
	.vz-art__body .alignleft { float: left; margin: .3em 1.4em 1em 0; max-width: 50%; }
	.vz-art__body .alignright { float: right; margin: .3em 0 1em 1.4em; max-width: 50%; }
}
.vz-art__body::after { content: ""; display: table; clear: both; }

.vz-art__body blockquote, .vz-art__body .wp-block-pullquote {
	margin: 2em 0; padding: 0; border: 0; font-size: 1.3125rem; line-height: 1.4; font-weight: 600; font-stretch: 92%;
}
.vz-art__body blockquote::before, .vz-art__body .wp-block-pullquote::before {
	content: ""; display: block; width: 56px; height: 10px; margin-bottom: 14px; background: var(--page-hue);
}
.vz-art__body .wp-block-pullquote { text-align: left; }
.vz-art__body .wp-block-pullquote blockquote::before { display: none; }
.vz-art__body .wp-block-pullquote blockquote { margin: 0; }
.vz-art__body blockquote p:last-child { margin-bottom: 0; }
.vz-art__body cite { display: block; margin-top: 10px; font-size: .875rem; font-style: normal; font-weight: 500; color: var(--ink-2); }

.vz-art__body .wp-block-table, .vz-art__body .wp-block-table + * { overflow-x: auto; }
.vz-art__body table { width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; }
.vz-art__body th, .vz-art__body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.vz-art__body th, .vz-art__body thead td { background: var(--board); font-weight: 680; }

.vz-art__body hr, .vz-art__body .wp-block-separator { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; }
.vz-art__body pre { white-space: pre-wrap; background: var(--board); padding: 14px; font-size: .9375rem; }
.vz-art__body .wp-block-embed { margin: 1.6em 0; }
.vz-art__body .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.vz-art__body .wp-block-button__link {
	display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px;
	background: var(--ink); color: #fff; text-decoration: none; font-weight: 650;
}
.vz-art__body .wp-block-media-text { display: grid; gap: 16px; }
@media (min-width: 700px) { .vz-art__body .wp-block-media-text { grid-template-columns: 1fr 1fr; align-items: center; } }

/* Třídy po pluginu Canvas (15 článků), aby šel plugin vypnout */
.vz-art__body .cnvs-list-styled { list-style: none; padding-left: 0; }
.vz-art__body .cnvs-list-styled > li { position: relative; padding-left: 30px; }
.vz-art__body .cnvs-list-styled > li::before {
	content: ""; position: absolute; left: 2px; top: .5em; width: 12px; height: 12px; background: var(--page-hue);
}
.vz-art__body .cnvs-list-styled-positive > li::before, .vz-art__body .cnvs-list-styled-negative > li::before {
	left: 0; top: .28em; width: 20px; height: 20px;
	-webkit-mask: var(--vz-mask) center / contain no-repeat; mask: var(--vz-mask) center / contain no-repeat;
}
.vz-art__body .cnvs-list-styled-positive > li::before {
	background: #2f6b4f;
	--vz-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.vz-art__body .cnvs-list-styled-negative > li::before {
	background: #a63a2a;
	--vz-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}
.vz-art__body .cnvs-paragraph-callout { font-size: 1.3125rem; line-height: 1.45; font-weight: 520; }

/* RankMath FAQ */
.vz-art__body .rank-math-list-item { border-top: 1px solid var(--line); padding-top: 4px; }
.vz-art__body .rank-math-question { margin: .8em 0 .3em; font-size: 1.1875rem; }

/* Advanced Ads v obsahu */
.vz-art__body [class*="homel-"] img { display: inline-block; }

/* Kroky výběru u rubriky Ako vybrať */
.is-ako-vybrat .vz-art__body { counter-reset: krok; }
.vz-art__body h2.vz-krok { counter-increment: krok; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
.vz-art__body h2.vz-krok::before {
	content: counter(krok, decimal-leading-zero);
	display: grid; place-items: center; width: 56px; height: 56px; background: #e8b21c; color: var(--ink);
	font-size: 1.75rem; font-weight: 800; font-stretch: 75%; font-variant-numeric: tabular-nums; letter-spacing: 0;
}

/* Obsah článku */
.vz-toc { margin: 2em 0; border: 1.5px solid var(--ink); background: var(--paper); }
.vz-toc summary {
	list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
	min-height: 52px; padding: 0 14px 0 16px; border-bottom: 1.5px solid transparent;
}
.vz-toc summary::-webkit-details-marker { display: none; }
.vz-toc summary::before { content: ""; width: 14px; height: 14px; background: var(--page-hue); flex: none; }
.vz-toc summary::after {
	content: ""; margin-left: 4px; width: 18px; height: 18px; background: var(--ink); transition: transform .25s var(--ease);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.vz-toc[open] summary { border-bottom-color: var(--ink); }
.vz-toc[open] summary::after { transform: rotate(180deg); }
.vz-toc__title { font-size: 1rem; font-weight: 720; font-stretch: 85%; }
.vz-toc__count { margin-left: auto; font-size: .6875rem; color: var(--ink-2); }
.vz-toc ol { list-style: none; margin: 0; padding: 4px 16px 10px; }
.vz-toc li { margin: 0; }
.vz-toc li + li { border-top: 1px solid var(--line); }
/* Položky obsahu jako čipy úrovní: H2 plný čtverec odstínu, H3 nižší a světlejší proužek. */
.vz-toc a { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-size: 1rem; line-height: 1.35; text-decoration: none; }
.vz-toc a::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--page-hue); transform: translateY(1px); }
.vz-toc__l3 a::before { height: 6px; transform: translateY(-2px); background: color-mix(in srgb, var(--page-hue) 45%, #fff); }
.vz-toc__n { min-width: 1.6em; }
.vz-toc a:hover span:last-child { text-decoration: underline; }
.vz-toc__n { font-size: .8125rem; color: var(--ink-2); padding-top: .12em; }
.vz-toc__l3 a { padding-left: 22px; font-size: .9375rem; color: var(--ink-2); }

/* Pokračování: pás rubriky + legenda */
.vz-next { max-width: calc(var(--text) + 2 * var(--gut)); margin: 56px auto 0; padding: 0 var(--gut); }

/* ——— Rubrika, hledání, 404 ——— */

.vz-arch__head { background: var(--hue); color: var(--on); }
.vz-arch__in { max-width: var(--wide); margin: 0 auto; padding: 18px var(--gut) 30px; }
.vz-arch__code { display: inline-block; margin-right: 14px; font-size: .75rem; }
.vz-arch__title {
	margin: 6px 0 4px; font-size: clamp(2.25rem, 8vw, 4.5rem); line-height: 1; font-weight: 800; font-stretch: 75%; letter-spacing: -.02em; text-wrap: balance;
}
.vz-arch__page { font-size: .45em; font-weight: 600; letter-spacing: 0; }
.vz-arch__count { margin: 0; font-size: .9375rem; }
.vz-arch__desc { max-width: 62ch; margin-top: 14px; }
.vz-arch__desc p { margin: 0 0 .6em; }
.vz-arch__in .vz-search { margin-top: 18px; max-width: 560px; }
.vz-arch__head .vz-search__label { color: inherit; }

.vz-arch__kids { max-width: var(--wide); margin: 0 auto; }
.vz-arch__kids ul { list-style: none; margin: 0; padding: 18px var(--gut) 6px; display: flex; flex-wrap: wrap; gap: 10px; }

.vz-list { max-width: var(--wide); margin: 12px auto 0; padding: 0 var(--gut); }
.vz-row__link {
	display: grid; grid-template-columns: 34% 1fr; gap: 14px; align-items: start;
	padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.vz-row__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--board); }
.vz-row__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vz-row__label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vz-row__title { margin: 0; font-size: 1.125rem; line-height: 1.22; font-weight: 720; font-stretch: 88%; text-wrap: pretty; }
.vz-row__excerpt { display: none; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
.vz-row__link:hover .vz-row__title { text-decoration: underline; text-underline-offset: .15em; }
@media (min-width: 760px) {
	.vz-row__link { grid-template-columns: 280px 1fr; gap: 28px; padding: 24px 0; }
	.vz-row__title { font-size: 1.5rem; }
	.vz-row__excerpt { display: block; }
}

.vz-empty { padding: 32px 0; font-size: 1.125rem; }

.vz-pages { max-width: var(--wide); margin: 28px auto 64px; padding: 0 var(--gut); }
.vz-pages ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.vz-pages .page-numbers {
	display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px;
	border: 1px solid var(--line); text-decoration: none; font-weight: 640; font-variant-numeric: tabular-nums;
}
.vz-pages a.page-numbers:hover { border-color: var(--ink); }
.vz-pages .current { background: var(--ink); border-color: var(--ink); color: #fff; }
.vz-pages .dots { border-color: transparent; }

.vz-404 .vz-arch__kids { padding-bottom: 64px; }
.vz-page .vz-art__body { margin-bottom: 64px; }

/* ——— Patička: zadní strana vzorkovníku ——— */

.vz-foot { background: var(--ink); color: #fff; margin-top: 64px; }
.vz-front + .vz-foot, .vz-front ~ .vz-foot { margin-top: 48px; }
.vz-foot__in {
	max-width: var(--wide); margin: 0 auto; padding: 44px var(--gut) 28px;
	display: grid; gap: 32px;
}
.vz-logo--foot { color: #fff; }
.vz-foot__brand p { margin: 12px 0 0; color: #c4c8ce; max-width: 34ch; }
.vz-foot__h, .vz-foot .vz-widget__title { margin: 0 0 12px; font-size: .75rem; color: #aab0b8; }
.vz-foot__legend ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vz-foot__legend .vz-chip { border-color: #2e3238; min-width: 0; }
.vz-foot .vz-widget ul { list-style: none; margin: 0; padding: 0; }
.vz-foot .vz-widget li { margin: 0; }
.vz-foot .vz-widget a { display: inline-block; padding: 5px 0; text-decoration: none; color: #fff; }
.vz-foot .vz-widget a:hover { text-decoration: underline; }
.vz-foot .vz-widget ul ul { display: none; }
.vz-foot__base {
	max-width: var(--wide); margin: 0 auto; padding: 18px var(--gut) 28px; border-top: 1px solid #2e3238;
	display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-size: .875rem; color: #c4c8ce;
}
.vz-foot__base a { color: #fff; text-decoration: none; }
.vz-foot__base a:hover { text-decoration: underline; }
.vz-foot__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }

@media (min-width: 900px) {
	.vz-foot__in { grid-template-columns: 1.3fr 1.6fr repeat(3, 1fr); gap: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.vz-fan > .vz-strip { transform: none !important; }
}

/* Kroky u autorem číslovaných nadpisů: čip ukazuje autorovo číslo. */
.vz-art__body h2.vz-krok[data-n]::before { content: attr(data-n); }

/* Měřítko textu článku na širších displejích: ~68 znaků na řádek. */
@media (min-width: 760px) {
	.vz-art__body { --text: 620px; font-size: 1.25rem; }
}

/* Řádek výpisu nese štítek vzorku jako karta. */
.vz-row__label::before { content: ""; display: block; width: 44px; height: 8px; background: var(--hue); margin-bottom: 4px; }

/* Konec článku: kratší hlavička pásu, odkaz do rozcestníku. */
.vz-next .vz-strip__head { min-height: 0; }
.vz-next .vz-strip__name { margin-bottom: 10px; }
.vz-next__av { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 24px 0 0; font-weight: 600; }

/* Titulek hlavního článku je nadpis, ne span. */
.vz-lead__title { margin: 0; }