/* =====================================================================
 * Karty s panely – jedna komponenta pro „Jak pracuji“ (O mně),
 * „Častá témata“ (individuální terapie) a dlaždice na úvodní stránce.
 * Panel = nativní <dialog>.
 * ===================================================================== */
.vz-panely__mrizka { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--vz-m6); row-gap: var(--vz-m5); list-style: none; margin: 0; padding: 0; }
@media (max-width: 919px) { .vz-panely__mrizka { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .vz-panely__mrizka { grid-template-columns: 1fr; } }
.vz-panel { margin: 0; max-width: none; }

/* ── karta ──
   Bez podkladu, bez rámečku, bez stínu. Že je ke kliknutí, nese znak +
   v akcentu – a ten je vidět vždycky, ne až po najetí myší: na dotykovém
   displeji by se jinak afordance nikdy neobjevila. */
.vz-panel__karta {
	position: relative; display: grid; gap: var(--vz-m2); height: 100%; box-sizing: border-box;
	padding: 0 40px var(--vz-m4) 0; min-height: 44px;
	border-bottom: 0; text-decoration: none; color: inherit; cursor: pointer;
	transition: color .15s ease-out;
}
.vz-panel__karta::after {
	content: "+"; position: absolute; right: 6px; top: -2px;
	width: 20px; height: 20px; display: grid; place-items: center;
	font: 300 24px/1 var(--vz-sans); color: var(--vz-akcent);
	transition: transform .25s var(--vz-ease);
}
.vz-panel__karta:focus-visible { outline: 3px solid var(--vz-akcent); outline-offset: 3px; }
.vz-panel__obrazek { position: relative; height: 150px; margin-bottom: var(--vz-m2); }
.vz-panel__obrazek .vz-svg { width: 100%; height: 100%; }
.vz-panel__nazev { font-family: var(--vz-serif); font-weight: 300; font-size: 26px; line-height: 1.12; color: var(--vz-inkoust); }
.vz-panel__posun { font-size: 15px; line-height: 1.4; color: var(--vz-inkoust-2); }
.vz-panel__perex { color: var(--vz-inkoust-2); font-size: 15px; }
.vz-panel__vice { margin-top: auto; padding-top: var(--vz-m3); font-size: 15px; font-weight: 600; color: var(--vz-akcent); display: flex; align-items: center; gap: var(--vz-m2); }
@media (hover: hover) {
	.vz-panel__karta:hover .vz-panel__nazev { color: var(--vz-akcent); }
	.vz-panel__karta:hover::after { transform: rotate(45deg); }
}

/* ── kompaktní karty (témata) ── */
.is-style-kompaktni .vz-panel__karta { padding-right: 36px; }
.is-style-kompaktni .vz-panel__obrazek { height: 110px; }
.is-style-kompaktni .vz-panel__nazev { font-family: var(--vz-sans); font-size: 17px; font-weight: 600; line-height: 1.35; }
.is-style-kompaktni .vz-panel__posun { font-size: 15px; }
.is-style-kompaktni .vz-panel__vice { display: none; }

/* ── Styl „Dlaždice“: jen název a posun, bez ilustrace – úvodní stránka ──
   Tři pevné sloupce, ne auto-fit: jinak vyjde šest témat na 4+2 s dírou
   vpravo a tři služby pod sebou mají tři různé šířky dlaždic. */
.is-style-dlazdice .vz-panely__mrizka { grid-template-columns: repeat(3, 1fr); column-gap: var(--vz-m6); row-gap: var(--vz-m5); }
@media (max-width: 919px) { .is-style-dlazdice .vz-panely__mrizka { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .is-style-dlazdice .vz-panely__mrizka { grid-template-columns: 1fr; } }
.is-style-dlazdice .vz-panel__karta { gap: var(--vz-m1); padding: 0 32px var(--vz-m2) 0; }
.is-style-dlazdice .vz-panel__karta::after { font-size: 22px; right: 2px; }
.is-style-dlazdice .vz-panel__nazev { font-family: var(--vz-sans); font-size: 17px; font-weight: 600; line-height: 1.35; }
.is-style-dlazdice .vz-panel__posun { font-size: 15px; line-height: 1.35; color: var(--vz-inkoust-2); }
.is-style-dlazdice .vz-panel__obrazek { display: none; }
.is-style-dlazdice .vz-panel__vice { display: none; }
.is-style-dlazdice .vz-panel__hero { display: none; }
.is-style-dlazdice .vz-panel__telo { padding-top: var(--vz-m6); }

/* ── panel (dialog): zprava, na mobilu zespodu ── */
html:has(.vz-panel__dialog[open]) { overflow: hidden; }
.vz-panel__dialog {
	position: fixed; inset: 0 0 0 auto; margin: 0; width: min(580px, 100%); max-width: 100%; height: 100%; max-height: 100%;
	padding: 0; border: 0; border-left: 1px solid var(--vz-linka); box-sizing: border-box; flex-direction: column; overflow: hidden;
	background: var(--vz-papir); color: var(--vz-inkoust); font-size: 17px; line-height: 1.65;
}
.vz-panel__dialog[open] { display: flex; animation: vz-panel-vjezd .35s var(--vz-ease); }
.vz-panel__dialog.zavira { animation: vz-panel-odjezd .25s ease forwards; }
.vz-panel__dialog::backdrop { background: rgba(var(--vz-inkoust-rgb), .32); animation: vz-panel-pozadi .3s ease; }
@keyframes vz-panel-vjezd { from { transform: translateX(100%); } }
@keyframes vz-panel-odjezd { to { transform: translateX(100%); } }
@keyframes vz-panel-pozadi { from { opacity: 0; } }

.vz-panel__lista { display: flex; align-items: center; justify-content: space-between; gap: var(--vz-m3); padding: calc(var(--vz-m3) + env(safe-area-inset-top, 0px)) var(--vz-m5) var(--vz-m3); border-bottom: 1px solid var(--vz-linka); }
.vz-panel__uchyt { display: none; }
.vz-panel__navigace { display: flex; gap: var(--vz-m1); }
.vz-panel__pocet { font-size: 14px; color: var(--vz-inkoust-2); font-variant-numeric: tabular-nums; }
.vz-panel__btn { all: unset; cursor: pointer; width: 44px; height: 44px; border-radius: var(--vz-radius); display: grid; place-items: center; color: var(--vz-inkoust); transition: color .15s ease-out; }
.vz-panel__btn svg { width: 20px; height: 20px; }
@media (hover: hover) { .vz-panel__btn:hover { color: var(--vz-akcent); } }
.vz-panel__btn:focus-visible { outline: 3px solid var(--vz-akcent); outline-offset: 2px; }

.vz-panel__telo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--vz-m5) var(--vz-m6); }
.vz-panel__hero { height: 180px; margin: 0 calc(-1 * var(--vz-m5)) var(--vz-m5); display: grid; place-items: center; border-bottom: 1px solid var(--vz-linka); }
.vz-panel__hero .vz-svg { height: 160px; width: auto; max-width: 100%; }
.is-style-kompaktni .vz-panel__hero { display: none; }
.is-style-kompaktni .vz-panel__telo { padding-top: var(--vz-m6); }
.vz-panel__telo .vz-panel__posun { font-size: 17px; margin: 0 0 var(--vz-m1); }
.vz-panel__titulek { font-family: var(--vz-serif); font-weight: 300; font-size: clamp(28px, 4.2vw, 36px); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 var(--vz-m5); text-wrap: balance; }

/* obsah panelu = běžné bloky */
.vz-panel__telo > h3 { font-family: var(--vz-sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--vz-inkoust-2); margin: 0 0 var(--vz-m2); }
.vz-panel__telo > p { margin: 0 0 var(--vz-m5); max-width: var(--vz-mira); }
.vz-panel__telo > p:has(+ .is-style-vz-stitky) { margin-bottom: 0; }
.vz-panel__telo > .is-style-vz-stitky { margin: var(--vz-m3) 0 var(--vz-m5); }
.vz-panel__telo > .is-style-vz-poznamka { margin: 0 0 var(--vz-m2); }
.vz-panel__telo a { color: var(--vz-akcent); text-decoration: underline; text-underline-offset: .12em; }

/* „Zkuste si hned“ – jediná plocha uvnitř panelu, a drží ji akcentní pruh.
   Světlina ji vyjmenovává mezi místy, kde akcent smí být. */
.vz-zkuste { display: grid; grid-template-columns: 80px 1fr; gap: var(--vz-m4); align-items: center; border-left: 3px solid var(--vz-akcent); padding: var(--vz-m4) 0 var(--vz-m4) var(--vz-m5); margin: 0 0 var(--vz-m5); }
.vz-zkuste .vz-ilustrace .vz-svg { width: 80px; height: 80px; }
.vz-zkuste .is-style-vz-stitek { margin: 0 0 var(--vz-m1); }
.vz-zkuste h3 { font-family: var(--vz-sans); font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--vz-inkoust); margin: 0 0 var(--vz-m1); }
.vz-zkuste p { margin: 0; }
.vz-zkuste p:not([class]), .vz-zkuste p.wp-block-paragraph:not(.is-style-vz-stitek) { font-size: 15px; color: var(--vz-inkoust-2); }

.vz-panel__pata { border-top: 1px solid var(--vz-linka); padding: var(--vz-m4) var(--vz-m5) calc(var(--vz-m4) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: var(--vz-m4); flex-wrap: wrap; background: var(--vz-papir); }
.vz-panel__meta { font-size: 14px; color: var(--vz-inkoust-2); flex: 1 1 180px; line-height: 1.4; margin: 0; }
.vz-panel__meta strong { color: var(--vz-inkoust); font-weight: 600; }
/* Stejné hodnoty jako primární tlačítko v assets/css/jadro/button.css */
.vz-panel__cta {
	display: inline-flex; align-items: center; justify-content: center; min-height: 56px;
	box-sizing: border-box; padding: 0 28px; border-radius: var(--vz-radius);
	border: 1.5px solid var(--vz-inkoust); background: var(--vz-inkoust); color: var(--vz-papir);
	font: 600 16px/1 var(--vz-sans); text-decoration: none;
	transition: background .15s ease-out, border-color .15s ease-out;
}
@media (hover: hover) { .vz-panel__cta:hover { background: var(--vz-akcent); border-color: var(--vz-akcent); } }

@media (max-width: 559px) {
	.vz-panel__dialog { inset: auto 0 0 0; width: 100%; height: 92dvh; border-left: 0; border-top: 1px solid var(--vz-linka); }
	.vz-panel__dialog[open] { animation-name: vz-panel-vyjezd; }
	.vz-panel__dialog.zavira { animation-name: vz-panel-sjezd; }
	@keyframes vz-panel-vyjezd { from { transform: translateY(100%); } }
	@keyframes vz-panel-sjezd { to { transform: translateY(100%); } }
	.vz-panel__uchyt { display: block; position: absolute; left: 50%; top: 8px; width: 44px; height: 4px; margin-left: -22px; border-radius: var(--vz-radius); background: var(--vz-linka); }
	.vz-panel__lista { position: relative; padding-top: var(--vz-m4); }
	.vz-panel__telo { padding: 0 var(--vz-gutter) var(--vz-m6); }
	.vz-panel__hero { margin-inline: calc(-1 * var(--vz-gutter)); height: 150px; }
	.vz-panel__hero .vz-svg { height: 130px; }
	.vz-panel__cta { flex: 1 1 100%; }
	.vz-zkuste { grid-template-columns: 60px 1fr; padding-left: var(--vz-m4); }
	.vz-zkuste .vz-ilustrace .vz-svg { width: 60px; height: 60px; }
}