/* ------------------------------------------------------------------ */
/* Okresní mapa obchodních zástupců — frontend                        */
/* ------------------------------------------------------------------ */

:root {
	--cm-oz-hover: #da2128;
	--cm-oz-stroke: #2b3e54;
}

.cm-oz-section .cm-oz-title    { margin: 0 0 .25rem; }
.cm-oz-section .cm-oz-subtitle { margin: 0 0 1.5rem; color: #555; font-size: .95rem; }

.cm-oz-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: flex-start;
}

.cm-oz-map-col   { flex: 1 1 60%; min-width: 320px; position: relative; }
.cm-oz-panel-col { flex: 1 1 32%; min-width: 300px; }

/* ---- SVG mapa ---- */

.cm-oz-map {
	position: relative;
	width: 100%;
	background: transparent;          /* žádný bílý podklad */
	padding: 0;
}

.cm-oz-map svg.cz-okresy-map {
	width: 100%;
	height: auto;
	display: block;
}

/* Bílé okresy, výrazný stroke (na bílém pozadí by jinak nebyly vidět). */
.cm-oz-map .okres {
	fill: #ffffff;
	stroke: var(--cm-oz-stroke);
	stroke-width: .7;
	stroke-linejoin: round;
	transition: fill .12s ease, stroke-width .12s ease;
	cursor: pointer;
}

.cm-oz-map .okres:hover,
.cm-oz-map .okres:focus {
	fill: var(--cm-oz-hover);
	stroke-width: 1.1;
	outline: none;
}

.cm-oz-map .okres.is-active {
	fill: var(--cm-oz-hover);
	stroke: #1a2a3e;
	stroke-width: 1.4;
}

/* ---- Tooltip ---- */

.cm-oz-tooltip {
	position: absolute;
	pointer-events: none;
	background: #1a2a3e;
	color: #fff;
	padding: .35rem .65rem;
	font-size: .85rem;
	border-radius: 3px;
	white-space: nowrap;
	transform: translate(-50%, -130%);
	box-shadow: 0 4px 12px rgba(0,0,0,.18);
	z-index: 10;
	line-height: 1.3;
}
.cm-oz-tooltip__name { font-weight: 600; }
.cm-oz-tooltip__kraj { display: block; font-size: .75rem; opacity: .8; font-weight: 400; }
.cm-oz-tooltip__rep  { display: block; font-size: .8rem; margin-top: .15rem; color: #ffb8b8; }

/* ---- Detail panel vpravo ---- */

.cm-oz-panel {
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 2px 2px 15px rgba(18, 17, 12, .1);
	padding: 1.5rem;
	min-height: 320px;
	position: sticky;
	top: 80px;
	max-height: calc(100vh - 100px);
	overflow-y: auto;
}

.cm-oz-prompt {
	display: flex; align-items: center; justify-content: center;
	min-height: 280px; text-align: center;
}
.cm-oz-prompt__text { color: #6b7785; font-size: .95rem; max-width: 260px; margin: 0; }

.cm-oz-detail__head {
	border-bottom: 2px solid var(--cm-oz-hover);
	padding-bottom: .55rem;
	margin-bottom: 1.25rem;
}

.cm-oz-detail__okres {
	display: block;
	font-size: .8rem;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--cm-oz-hover);
	font-weight: 700;
	margin: 0 0 .15rem;
}

.cm-oz-detail__kraj {
	font-size: .75rem;
	color: #6b7785;
	font-weight: 400;
}

/* ---- Karty zástupců ----
   Nezávislé na .peopleitem v theme CSS — vlastní styl, aby se nedědily
   konflikty (např. word-break: break-all u linků v narrow column).
*/

.cm-oz-detail__cards {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.cm-oz-card {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(0,0,0,.08);
}
.cm-oz-card:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.cm-oz-card__photo {
	width: 100%;
	max-width: 220px;
	aspect-ratio: 4 / 5;
	background-size: cover;
	background-position: center top;
	background-color: #e5e9ee;
	border-radius: 4px;
	margin: 0 auto .85rem;
	border-left: 4px solid var(--cm-oz-accent, var(--cm-oz-hover));
}
.cm-oz-card__photo.is-empty { background-color: #d8dde3; }

.cm-oz-card__body {
	text-align: left;
}

.cm-oz-card__name {
	margin: 0 0 .65rem;
	font-size: 1.15rem;
	font-weight: 700;
	color: #1a2a3e;
	line-height: 1.25;
}

/* Obsah z post_content (wpautop) — telefon, e-mail, popis.
   Klíčové: overflow-wrap:anywhere zlomí dlouhé řetězce (email/url),
   ale ne po jednotlivých písmenech jako word-break:break-all. */
.cm-oz-card__content {
	font-size: .92rem;
	line-height: 1.5;
	color: #333;
	overflow-wrap: anywhere;
	word-break: normal;
}
.cm-oz-card__content p {
	margin: 0 0 .4rem;
}
.cm-oz-card__content p:last-child { margin-bottom: 0; }

.cm-oz-card__content strong,
.cm-oz-card__content b {
	color: #1a2a3e;
}

.cm-oz-card__content a {
	color: var(--cm-oz-hover);
	text-decoration: none;
	word-break: normal;
	overflow-wrap: anywhere;
}
.cm-oz-card__content a:hover { text-decoration: underline; }

/* Regiony (post_excerpt) */
.cm-oz-card__regions {
	margin-top: .9rem;
	padding-top: .65rem;
	border-top: 1px dashed rgba(0,0,0,.12);
	font-size: .82rem;
	color: #555;
	line-height: 1.45;
}
.cm-oz-card__regions p { margin: 0 0 .25rem; }
.cm-oz-card__regions p:last-child { margin-bottom: 0; }

/* Empty state */
.cm-oz-empty { text-align: center; padding: 1.5rem 0; }
.cm-oz-empty__title { font-weight: 600; font-size: 1rem; margin: 0 0 .35rem; color: #1a2a3e; }
.cm-oz-empty__msg   { color: #6b7785; font-size: .88rem; margin: 0; }

/* ---- Responsive ---- */

@media (min-width: 1100px) {
	/* Na širších obrazovkách foto vlevo, text vpravo */
	.cm-oz-card {
		display: grid;
		grid-template-columns: 140px 1fr;
		column-gap: 1.1rem;
	}
	.cm-oz-card__photo {
		width: 140px;
		max-width: 140px;
		aspect-ratio: 4 / 5;
		margin: 0;
	}
	.cm-oz-card__name { margin-top: 0; }
	.cm-oz-card__regions { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
	.cm-oz-wrapper   { gap: 1.25rem; }
	.cm-oz-map-col, .cm-oz-panel-col { flex: 1 1 100%; }
	.cm-oz-panel     { position: static; min-height: 0; max-height: none; }
	.cm-oz-tooltip   { display: none; }
}