/* =====================================================================
 * Karty s panely – jedna komponenta pro „Jak pracuji“ (O mně),
 * „Častá témata“ (individuální terapie) a další. Panel = nativní <dialog>.
 * ===================================================================== */
.vz-panely__mrizka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { .vz-panely__mrizka { grid-template-columns: 1fr; } }
.vz-panel { margin: 0; }

/* ── karta ── */
.vz-panel__karta {
	position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; height: 100%; min-height: 340px; box-sizing: border-box;
	background: var(--vz-karta); border: 1px solid var(--vz-linka); border-radius: 24px; padding: 26px 26px 22px;
	text-decoration: none; color: inherit; cursor: pointer; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.vz-panel__karta:focus-visible { outline: 3px solid var(--vz-oranz); outline-offset: 3px; }
.vz-panel__obrazek { position: relative; height: 170px; margin: -6px -8px 6px; opacity: .55; transition: opacity .4s ease; }
.vz-panel__obrazek .vz-svg { width: 100%; height: 100%; }
.vz-panel__nazev { font-family: var(--vz-serif); font-size: 1.75rem; line-height: 1.1; color: var(--vz-inkoust); }
.vz-panel__posun { font-family: var(--vz-serif); font-style: italic; font-size: 1.15rem; line-height: 1.3; color: var(--vz-zelen); }
.vz-panel__perex { color: var(--vz-inkoust-jemny); font-size: .98rem; }
.vz-panel__vice { margin-top: auto; padding-top: 12px; font-size: .92rem; font-weight: 500; color: var(--vz-oranz-tmava); display: flex; align-items: center; gap: 6px; }
.vz-panel__vice span { transition: transform .25s ease; }
@media (hover: hover) {
	.vz-panel__karta:hover { transform: translateY(-4px); border-color: var(--vz-oranz); box-shadow: 0 22px 44px -28px rgba(var(--vz-inkoust-rgb), .55); }
	.vz-panel__karta:hover .vz-panel__obrazek { opacity: 1; }
	.vz-panel__karta:hover .vz-panel__vice span { transform: translateX(4px); }
}
.vz-panel__karta:focus-visible .vz-panel__obrazek { opacity: 1; }
@media (max-width: 820px) {
	.vz-panel__karta { min-height: 0; padding: 22px 20px 18px; }
	.vz-panel__obrazek { height: 120px; }
}

/* ── kompaktní karty (témata): ilustrace jako průsvitné pozadí ── */
.is-style-kompaktni .vz-panely__mrizka { gap: 14px; }
@media (max-width: 900px) { .is-style-kompaktni .vz-panely__mrizka { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .is-style-kompaktni .vz-panely__mrizka { grid-template-columns: 1fr; } }
.is-style-kompaktni .vz-panel__karta { border-radius: 18px; padding: 22px 22px 18px; min-height: 268px; isolation: isolate; }
.is-style-kompaktni .vz-panel__karta > span { position: relative; z-index: 1; }
.is-style-kompaktni .vz-panel__karta > .vz-panel__obrazek { position: absolute; z-index: 0; right: -4%; bottom: 2px; width: 88%; height: auto; margin: 0; opacity: .3; pointer-events: none; }
.is-style-kompaktni .vz-panel__nazev { font-family: var(--vz-sans); font-size: 17px; font-weight: 500; line-height: 1.35; }
.is-style-kompaktni .vz-panel__posun { font-size: 19px; line-height: 1.25; }
.is-style-kompaktni .vz-panel__vice { align-self: flex-start; background: var(--vz-karta); border-radius: 999px; padding: 5px 12px 5px 0; box-shadow: 12px 0 14px -6px var(--vz-karta); font-size: 14px; }
@media (hover: hover) {
	.is-style-kompaktni .vz-panel__karta:hover { transform: translateY(-3px); box-shadow: 0 10px 28px -18px rgba(var(--vz-inkoust-rgb), .45); }
	.is-style-kompaktni .vz-panel__karta:hover .vz-panel__obrazek { opacity: .7; }
}
@media (max-width: 560px) {
	.is-style-kompaktni .vz-panel__karta { min-height: 0; padding: 18px 18px 16px; }
	.is-style-kompaktni .vz-panel__karta > .vz-panel__obrazek { width: 70%; opacity: .22; }
	.is-style-kompaktni .vz-panel__posun { font-size: 17px; }
}

/* ── 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; box-sizing: border-box; flex-direction: column; overflow: hidden;
	background: rgba(var(--vz-papir-rgb), .97); color: var(--vz-inkoust); font-size: 1rem; line-height: 1.6;
	box-shadow: -24px 0 60px -30px rgba(var(--vz-inkoust-rgb), .5);
}
.vz-panel__dialog[open] { display: flex; animation: vz-panel-vjezd .45s cubic-bezier(.2, .8, .2, 1); }
.vz-panel__dialog.zavira { animation: vz-panel-odjezd .3s ease forwards; }
.vz-panel__dialog::backdrop { background: rgba(var(--vz-inkoust-rgb), .28); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: vz-panel-pozadi .35s 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: 12px; padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 10px; border-bottom: 1px solid var(--vz-linka); }
.vz-panel__uchyt { display: none; }
.vz-panel__navigace { display: flex; gap: 4px; }
.vz-panel__pocet { font-size: .82rem; color: var(--vz-inkoust-jemny); font-variant-numeric: tabular-nums; }
.vz-panel__btn { all: unset; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--vz-inkoust); transition: background .2s; }
.vz-panel__btn svg { width: 20px; height: 20px; }
.vz-panel__btn:hover { background: var(--vz-papir-2); }
.vz-panel__btn:focus-visible { outline: 3px solid var(--vz-oranz); outline-offset: 2px; }

.vz-panel__telo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 28px 32px; }
.vz-panel__hero { height: 190px; margin: 0 -28px 22px; background: var(--vz-salvej-svetla); display: grid; place-items: center; border-bottom: 1px solid var(--vz-linka); }
.vz-panel__hero .vz-svg { height: 170px; width: auto; max-width: 100%; }
.is-style-kompaktni .vz-panel__hero { display: none; }
.is-style-kompaktni .vz-panel__telo { padding-top: 28px; }
.vz-panel__telo .vz-panel__posun { font-size: 1.3rem; margin: 0 0 4px; }
.vz-panel__titulek { font-family: var(--vz-serif); font-weight: 400; font-size: clamp(2rem, 4.2vw, 2.5rem); line-height: 1.08; margin: 0 0 24px; text-wrap: balance; }

/* obsah panelu = běžné bloky */
.vz-panel__telo > h3 { font-family: var(--vz-sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--vz-inkoust-jemny); margin: 0 0 8px; }
.vz-panel__telo > p { margin: 0 0 24px; max-width: 60ch; }
.vz-panel__telo > p:has(+ .is-style-vz-stitky) { margin-bottom: 0; }
.vz-panel__telo > .is-style-vz-stitky { margin: 12px 0 24px; }
.vz-panel__telo > .is-style-vz-poznamka { margin: 0 0 8px; }
.vz-panel__telo a { color: var(--vz-oranz-tmava); }

/* „Zkuste si hned“ */
.vz-zkuste { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; background: var(--vz-karta); border: 1px solid var(--vz-linka); border-radius: 18px; padding: 16px 18px; margin: 0 0 24px; }
.vz-zkuste .vz-ilustrace .vz-svg { width: 88px; height: 88px; }
.vz-zkuste .is-style-vz-stitek { font-size: .72rem; letter-spacing: .14em; color: var(--vz-oranz-tmava); font-weight: 600; margin: 0 0 2px; }
.vz-zkuste h3 { font-family: var(--vz-serif); font-size: 1.35rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--vz-inkoust); margin: 0 0 4px; }
.vz-zkuste p { margin: 0; }
.vz-zkuste p:not([class]), .vz-zkuste p.wp-block-paragraph:not(.is-style-vz-stitek) { font-size: .94rem; color: var(--vz-inkoust-jemny); }

.vz-panel__pata { border-top: 1px solid var(--vz-linka); padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: rgba(var(--vz-papir-rgb), .98); }
.vz-panel__meta { font-size: .82rem; color: var(--vz-inkoust-jemny); flex: 1 1 180px; line-height: 1.4; margin: 0; }
.vz-panel__meta strong { color: var(--vz-inkoust); font-weight: 500; }
.vz-panel__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box; padding: .85em 1.4em; border-radius: 999px; background: var(--vz-oranz); color: var(--vz-inkoust); font: 600 1rem/1.1 var(--vz-sans); text-decoration: none; transition: transform .25s, box-shadow .25s; }
@media (hover: hover) { .vz-panel__cta:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--vz-oranz-rgb), .45); } }

@media (max-width: 640px) {
	.vz-panel__dialog { inset: auto 0 0 0; width: 100%; height: 92dvh; border-radius: 22px 22px 0 0; box-shadow: 0 -20px 50px -25px rgba(var(--vz-inkoust-rgb), .5); }
	.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: 5px; margin-left: -22px; border-radius: 5px; background: var(--vz-linka); }
	.vz-panel__lista { position: relative; padding-top: 16px; }
	.vz-panel__telo { padding: 0 20px 28px; }
	.vz-panel__hero { margin-inline: -20px; height: 160px; }
	.vz-panel__hero .vz-svg { height: 140px; }
	.is-style-kompaktni .vz-panel__telo { padding-top: 22px; }
	.vz-panel__cta { flex: 1 1 100%; }
	.vz-zkuste { grid-template-columns: 64px 1fr; }
	.vz-zkuste .vz-ilustrace .vz-svg { width: 64px; height: 64px; }
}