/* ============================================================
   Seaside — interaktív kemping-térkép
   ============================================================ */

.camp-section { text-align: center; }
.camp-intro { max-width: 640px; margin-left: auto; margin-right: auto; }

.camp-map {
	position: relative;
	max-width: 720px;
	margin: 32px auto 0;
	aspect-ratio: 1 / 1;
	border-radius: 26px;
	overflow: hidden;
	box-shadow: 0 26px 60px -28px rgba(20, 88, 140, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
	background: #eaf6dd;
	touch-action: manipulation;
}
.camp-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Házjelölők ---------- */
.camp-markers { position: absolute; inset: 0; }
.camp-marker {
	position: absolute;
	transform: translate(-50%, -100%);
	display: grid;
	justify-items: center;
	gap: 3px;
	border: 0;
	background: none;
	padding: 6px;
	cursor: pointer;
	z-index: 2;
	-webkit-tap-highlight-color: transparent;
	animation: camp-drop 0.5s cubic-bezier(0.3, 1.3, 0.5, 1) backwards;
}
.camp-marker-pin {
	position: relative;
	width: 22px;
	height: 22px;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	background: linear-gradient(135deg, #f9a03a, #f58220);
	box-shadow: 0 6px 12px -4px rgba(213, 95, 19, 0.7);
	transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.camp-marker-pin::after {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: #fff;
}
.camp-marker-label {
	font-family: "Baloo 2", sans-serif;
	font-weight: 700;
	font-size: 0.72rem;
	color: var(--navy);
	background: rgba(255, 255, 255, 0.9);
	padding: 1px 8px;
	border-radius: 999px;
	white-space: nowrap;
	box-shadow: 0 3px 8px -4px rgba(20, 88, 140, 0.5);
	opacity: 0;
	transform: translateY(-3px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	pointer-events: none;
}
.camp-marker:hover .camp-marker-pin,
.camp-marker:focus-visible .camp-marker-pin { transform: rotate(-45deg) scale(1.18); }
.camp-marker:hover .camp-marker-label,
.camp-marker:focus-visible .camp-marker-label,
.camp-marker.is-active .camp-marker-label { opacity: 1; transform: translateY(0); }
.camp-marker.is-active .camp-marker-pin {
	transform: rotate(-45deg) scale(1.22);
	background: linear-gradient(135deg, #1b75bc, #14588c);
}
.camp-marker:focus-visible { outline: none; }

@keyframes camp-drop {
	from { opacity: 0; transform: translate(-50%, -140%); }
	to { opacity: 1; transform: translate(-50%, -100%); }
}

/* ---------- Popup kártya ---------- */
.camp-popup {
	position: absolute;
	z-index: 5;
	width: 210px;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 22px 46px -18px rgba(20, 88, 140, 0.7);
	transform: translate(-50%, -12px) scale(0.94);
	transform-origin: bottom center;
	opacity: 0;
	transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.3, 1.3, 0.5, 1);
	pointer-events: none;
	text-align: left;
}
.camp-popup.is-open { opacity: 1; transform: translate(-50%, -16px) scale(1); pointer-events: auto; }
.camp-popup::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 14px;
	height: 14px;
	background: #fff;
	transform: translateX(-50%) rotate(45deg);
	box-shadow: 4px 4px 8px -4px rgba(20, 88, 140, 0.4);
}
.camp-popup-img {
	display: block;
	width: 100%;
	height: 108px;
	object-fit: cover;
	background: var(--sky-soft, #dceffb);
}
.camp-popup-body { padding: 11px 14px 14px; }
.camp-popup-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1rem; color: var(--navy); margin: 0 0 2px; }
.camp-popup-meta { font-size: 0.78rem; color: var(--muted); margin: 0 0 10px; }
.camp-popup-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: "Baloo 2", sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	color: #fff;
	background: linear-gradient(135deg, #62b8e0, #1b75bc);
	text-decoration: none;
	padding: 7px 13px;
	border-radius: 999px;
}
.camp-popup-link:hover { background: linear-gradient(135deg, #1b75bc, #14588c); }
.camp-popup-close {
	position: absolute;
	top: 6px; right: 6px;
	width: 26px; height: 26px;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	color: var(--navy);
	font-size: 1.1rem; line-height: 1; cursor: pointer;
	display: grid; place-items: center;
	box-shadow: 0 2px 6px -2px rgba(0,0,0,0.3);
}

/* ---------- Strand-távolság ---------- */
.camp-beach {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 22px auto 0;
	font-weight: 600;
	color: var(--navy);
}
.camp-beach svg { width: 22px; height: 22px; color: var(--wave); flex: none; }
.camp-beach strong { color: var(--sunset, #f58220); }

@media (max-width: 640px) {
	.camp-marker-label { font-size: 0.66rem; padding: 1px 6px; }
	.camp-marker-pin { width: 19px; height: 19px; }
	.camp-popup { width: 170px; }
	.camp-popup-img { height: 92px; }
}

@media (prefers-reduced-motion: reduce) {
	.camp-marker { animation: none; }
	.camp-marker-pin, .camp-marker-label, .camp-popup { transition: none; }
}