@font-face {
	font-family: 'MPGeoNamu';
	src: url('/wp-content/themes/media-theme/assets/fonts/NAMU-Pro.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

.mpg-wrap {
	position: relative;
	margin: 28px 0;
	border: 1px solid #e9e9ec;
	border-radius: 12px;
	overflow: hidden;
	background: #f7f7f8;
}

.mpg-map {
	width: 100%;
	height: 560px;
}

.mpg-mk {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #c8102e;
	background-size: cover;
	background-position: center;
	border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	transition: transform .12s;
}

.mpg-mk:hover { transform: scale(1.12); }
.mpg-mk.on { border-color: #c8102e; box-shadow: 0 0 0 4px rgba(200, 16, 46, .25); }

.mpg-panel {
	position: absolute;
	top: 0;
	right: 0;
	width: 340px;
	height: 100%;
	background: #fff;
	border-left: 1px solid #e9e9ec;
	transform: translateX(100%);
	transition: transform .22s ease;
	overflow-y: auto;
	z-index: 4;
}

.mpg-panel.open { transform: none; }

.mpg-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border: none;
	border-radius: 50%;
	background: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
	z-index: 2;
}

.mpg-photo {
	height: 190px;
	background: #f0f0f2 center / cover no-repeat;
	position: relative;
}

.mpg-ini {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 44px;
	font-weight: 800;
	color: #c9c9d0;
}

.mpg-body { padding: 18px; }

.mpg-body h3 {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 6px;
}

.mpg-old { font-size: 12px; color: #6b6b73; }
.mpg-old s { color: #a0a0a8; }

.mpg-years {
	font-size: 13px;
	color: #c8102e;
	font-weight: 600;
	margin-top: 10px;
}

.mpg-bio {
	font-size: 14px;
	line-height: 1.6;
	color: #33333a;
	margin: 12px 0 0;
}

.mpg-more {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	font-weight: 600;
	color: #c8102e;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.mpg-credit {
	font-size: 11px;
	color: #a0a0a8;
	margin-top: 16px;
}

@media (max-width: 700px) {
	.mpg-map { height: 460px; }

	.mpg-panel {
		width: 100%;
		height: 68%;
		top: auto;
		bottom: 0;
		border-left: none;
		border-top: 1px solid #e9e9ec;
		border-radius: 14px 14px 0 0;
		transform: translateY(100%);
	}

	.mpg-photo { height: 150px; }
}

.mpg-bio p { margin:0 0 10px; }
.mpg-bio p:last-child { margin-bottom:0; }

/* Повний екран */
.mpg-fs { position:absolute; top:12px; right:12px; z-index:5; width:36px; height:36px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid #e9e9ec; border-radius:8px; background:#fff; color:#16161a; cursor:pointer; box-shadow:0 1px 6px rgba(0,0,0,.14); }
.mpg-fs:hover { color:#c8102e; border-color:#c8102e; }

.mpg-wrap.mpg-full { position:fixed; inset:0; z-index:99999; margin:0; border:none; border-radius:0; }
.mpg-wrap.mpg-full .mpg-map { height:100% !important; }
body.mpg-full-open { overflow:hidden; }

@media (max-width:700px) {
	.mpg-wrap.mpg-full .mpg-panel { height:58%; }
}

/* Палітра картки */
.mpg-person { font-size:13px; font-weight:600; color:#006f77; margin-top:10px; }
.mpg-years { font-size:13px; font-weight:600; color:#16161a; margin-top:2px; }
.mpg-more { color:#006f77 !important; }
.mpg-mk.on { border-color:#6BBBC1; box-shadow:0 0 0 4px rgba(107,187,193,.35); }

.mpg-panel .mpg-more { border-bottom:none !important; text-decoration:underline; }
.mpg-bio a { border-bottom:none !important; }

/* Перебиваємо типографіку теми всередині панелі */
.mpg-wrap .mpg-panel .mpg-bio,
.mpg-wrap .mpg-panel .mpg-bio p,
.mpg-wrap .mpg-panel .mpg-bio li,
.mpg-wrap .mpg-panel h3,
.mpg-wrap .mpg-panel .mpg-person,
.mpg-wrap .mpg-panel .mpg-years,
.mpg-wrap .mpg-panel .mpg-more,
.mpg-wrap .mpg-panel .mpg-old,
.mpg-wrap .mpg-panel .mpg-credit {
	font-family: 'MPGeoNamu', 'Namu', 'NAMU', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
.mpg-wrap .mpg-panel .mpg-bio,
.mpg-wrap .mpg-panel .mpg-bio p {
	font-size: 15px !important;
	line-height: 1.62 !important;
	font-weight: 600 !important;
	color: #16161a !important;
}

.mpg-fs { top:auto !important; right:auto !important; bottom:12px; left:12px; }
.mpg-nav { padding:10px 18px 0; }
.mpg-select { width:100%; padding:7px 10px; font-size:13px; border:1px solid #e9e9ec; border-radius:8px; background:#fff; color:#16161a; cursor:pointer; }
.mpg-select:focus { outline:2px solid #6BBBC1; outline-offset:1px; }

/* Галерея в панелі */
.mpg-gal { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.mpg-gal-i { width:56px; height:56px; padding:0; border:1px solid #e9e9ec; border-radius:6px; background:#f0f0f2 center/cover no-repeat; cursor:zoom-in; }
.mpg-gal-i:hover { border-color:#6BBBC1; }

/* Лайтбокс */
.mpg-lb { position:fixed; inset:0; z-index:100000; background:rgba(10,10,10,.92); display:flex; align-items:center; justify-content:center; }
.mpg-lb img { max-width:92vw; max-height:86vh; object-fit:contain; }
.mpg-lb-x, .mpg-lb-p, .mpg-lb-n { position:absolute; border:none; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; border-radius:8px; }
.mpg-lb-x { top:18px; right:18px; width:40px; height:40px; font-size:24px; line-height:1; }
.mpg-lb-p, .mpg-lb-n { top:50%; transform:translateY(-50%); width:44px; height:64px; font-size:30px; line-height:1; }
.mpg-lb-p { left:18px; }
.mpg-lb-n { right:18px; }
.mpg-lb-x:hover, .mpg-lb-p:hover, .mpg-lb-n:hover { background:rgba(255,255,255,.24); }
.mpg-lb-cap { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#e8e8e8; font-size:13px; max-width:80vw; text-align:center; }

body.mpg-lb-open { overflow:hidden; }
.mpg-lb { position:fixed !important; inset:0 !important; z-index:2147483647 !important; }
.mpg-gal-i { display:block; }

/* Карусель на головному фото */
.mpg-photo { position:relative; }
.mpg-ph-p, .mpg-ph-n { position:absolute; top:50%; transform:translateY(-50%); width:30px; height:44px; padding:0; border:none; border-radius:6px; background:rgba(0,0,0,.35); color:#fff; font-size:22px; line-height:1; cursor:pointer; z-index:2; }
.mpg-ph-p { left:8px; }
.mpg-ph-n { right:8px; }
.mpg-ph-p:hover, .mpg-ph-n:hover { background:rgba(0,0,0,.55); }
.mpg-dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:2; }
.mpg-dots i { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; }
.mpg-dots i.on { background:#fff; }

/* Пошук вулиці в панелі */
.mpg-pick { position:relative; }
.mpg-q { width:100%; box-sizing:border-box; padding:8px 12px; font-size:13px; border:1px solid #e9e9ec; border-radius:8px; background:#fff; color:#16161a; }
.mpg-q:focus { outline:2px solid #6BBBC1; outline-offset:1px; }
.mpg-opts { display:none; position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:6; max-height:260px; overflow-y:auto; margin:0; padding:4px 0; list-style:none; background:#fff; border:1px solid #e9e9ec; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.12); }
.mpg-opts.open { display:block; }
.mpg-opts li { padding:7px 12px; font-size:13px; line-height:1.3; cursor:pointer; color:#16161a; }
.mpg-opts li small { display:block; font-size:11px; color:#a0a0a8; text-decoration:line-through; }
.mpg-opts li:hover, .mpg-opts li.on { background:#eef7f8; }
.mpg-opts li.none { color:#a0a0a8; cursor:default; }

/* Пошук на карті */
.mpg-search { position:absolute; top:10px; left:52px; z-index:5; width:min(300px, calc(100% - 64px)); }
.mpg-search .mpg-q { height:38px; padding:8px 12px 8px 36px; font-size:14px; border:1px solid #dcdce0; border-radius:10px; box-shadow:0 2px 10px rgba(0,0,0,.12);
	background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b73' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
.mpg-wrap.mpg-full .mpg-search { top:12px; }
@media (max-width:700px) {
	.mpg-search { right:12px; width:auto; }
}

/* Панель світла незалежно від темного режиму теми */
.mpg-wrap .mpg-panel { background:#fff !important; color:#16161a !important; }
.mpg-wrap .mpg-panel h3 { color:#16161a !important; }
.mpg-wrap .mpg-search .mpg-q { color:#16161a !important; background-color:#fff !important; }
.mpg-wrap .mpg-search .mpg-q::placeholder { color:#8a8a92 !important; }
.mpg-wrap .mpg-opts, .mpg-wrap .mpg-opts li { background:#fff; color:#16161a !important; }
.mpg-wrap .mpg-opts li:hover, .mpg-wrap .mpg-opts li.on { background:#eef7f8 !important; }