{% extends 'base.html.twig' %}

{% block title %}Grecja szlakiem św. Pawła{% endblock %}

{% block stylesheets %}
	<!-- Eleganckie fonty -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=EB+Garamond:ital@0;1&family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">

	<!-- Bootstrap 5.3 -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

	<style>
		:root {
			--deep: #14243b;
			--deep-2: #1e3a5f;
			--gold: #c9a227;
			--gold-light: #e6c75a;
			--cream: #fffdf8;
			--teal: #0d9488;
			--cruise: #147d9c;
			--cruise-light: #74d7e8;
			--burgundy: #7c1f2e;
			--ink: #2a2f38;
		}

		* {
			box-sizing: border-box;
		}

		html,
		body {
			margin: 0;
			height: 100%;
		}

		body {
			display: flex;
			flex-direction: column;
			height: 100vh;
			overflow: hidden;
			font-family: 'Montserrat', system-ui, sans-serif;
			color: var(--ink);
			background: var(--deep);
		}

		/* ===== Nagłówek ===== */
		.appbar {
			flex: 0 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 14px;
			padding: 10px 20px;
			background: linear-gradient(105deg, #0e1a2c 0%, #1e3a5f 60%, #24507f 100%);
			border-bottom: 3px solid var(--gold);
			flex-wrap: wrap;
			box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
			z-index: 10;
		}

		.brand {
			display: flex;
			align-items: center;
			gap: 13px;
			min-width: 0;
		}

		.brand-badge {
			width: 44px;
			height: 44px;
			flex: 0 0 auto;
			border-radius: 50%;
			background: radial-gradient(circle at 35% 30%, #f4e3a8, var(--gold) 70%);
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
		}

		.brand h1 {
			font-family: 'Cormorant Garamond', serif;
			font-weight: 700;
			color: #f6e9c4;
			font-size: 1.55rem;
			line-height: 1.05;
			margin: 0;
			letter-spacing: .02em;
		}

		.brand small {
			display: block;
			color: #9db6d6;
			font-size: .62rem;
			letter-spacing: .26em;
			text-transform: uppercase;
			margin-top: 2px;
		}

		.toolbar {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
		}

		.tbtn {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			background: rgba(255, 255, 255, .07);
			color: #f3e6c0;
			border: 1px solid rgba(201, 162, 39, .55);
			padding: 8px 13px;
			border-radius: 9px;
			font-size: .82rem;
			font-weight: 500;
			cursor: pointer;
			text-decoration: none;
			transition: all .16s ease;
			white-space: nowrap;
		}

		.tbtn:hover {
			background: var(--gold);
			color: var(--deep);
			border-color: var(--gold);
			transform: translateY(-1px);
		}

		.tbtn.active {
			background: var(--gold);
			color: var(--deep);
		}

		/* ===== Pasek miejsc ===== */
		.pillbar {
			flex: 0 0 auto;
			display: flex;
			gap: 9px;
			overflow-x: auto;
			padding: 9px 18px;
			background: linear-gradient(180deg, #14243b, #16294399);
			border-bottom: 1px solid rgba(201, 162, 39, .25);
			scrollbar-width: thin;
			scrollbar-color: var(--gold) transparent;
		}

		.pillbar::-webkit-scrollbar {
			height: 6px;
		}

		.pillbar::-webkit-scrollbar-thumb {
			background: rgba(201, 162, 39, .5);
			border-radius: 3px;
		}

		.pill {
			flex: 0 0 auto;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			background: rgba(255, 255, 255, .05);
			border: 1px solid rgba(201, 162, 39, .4);
			color: #e9dcb8;
			border-radius: 22px;
			padding: 5px 14px 5px 6px;
			font-size: .82rem;
			font-weight: 500;
			cursor: pointer;
			white-space: nowrap;
			transition: all .16s ease;
		}

		.pill:hover {
			background: var(--gold);
			color: var(--deep);
			border-color: var(--gold);
		}

		.pill .n {
			width: 22px;
			height: 22px;
			border-radius: 50%;
			background: linear-gradient(160deg, var(--gold-light), #b8901f);
			color: #3a2c08;
			font-weight: 700;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: .74rem;
			flex: 0 0 auto;
		}

		/* ===== Mapa ===== */
		.map-wrap {
			position: relative;
			flex: 1 1 auto;
			min-height: 0;
		}

		#map {
			position: absolute;
			inset: 0;
		}

		#mapinfo {
			position: absolute;
			top: 12px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 6;
			margin: 0;
			max-width: min(92vw, 640px);
			background: rgba(20, 36, 59, .92);
			color: #f6e9c4;
			padding: 8px 42px 8px 16px;
			border-radius: 24px;
			font-size: .85rem;
			text-align: center;
			box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
			border: 1px solid rgba(201, 162, 39, .4);
			display: none;
		}

		#mapinfo.show {
			display: block;
		}

		.mapinfo-close {
			position: absolute;
			top: 50%;
			right: 8px;
			transform: translateY(-50%);
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 26px;
			height: 26px;
			padding: 0;
			border: 1px solid rgba(255, 255, 255, .35);
			border-radius: 50%;
			background: rgba(255, 255, 255, .08);
			color: #fff;
			font-size: 1rem;
			line-height: 1;
			cursor: pointer;
			transition: background .15s ease, border-color .15s ease;
		}

		.mapinfo-close:hover,
		.mapinfo-close:focus-visible {
			background: rgba(255, 255, 255, .2);
			border-color: rgba(255, 255, 255, .7);
			outline: none;
		}

		.legend {
			position: absolute;
			left: 12px;
			bottom: 24px;
			z-index: 5;
			background: rgba(255, 253, 248, .95);
			border-radius: 12px;
			padding: 11px 14px;
			font-size: .76rem;
			box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
			color: var(--deep);
			border: 1px solid #e6dcc4;
			backdrop-filter: blur(2px);
			transition: all 0.2s ease;
			display: block;
		}

		.legend b {
			font-family: 'Cormorant Garamond', serif;
			font-size: .95rem;
			font-weight: 700;
			letter-spacing: .02em;
		}

		.legend .lrow {
			display: flex;
			align-items: center;
			gap: 9px;
			margin-top: 7px;
		}

		.legend .dot {
			width: 15px;
			height: 15px;
			border-radius: 50% 50% 50% 0;
			transform: rotate(-45deg);
			flex: 0 0 auto;
			box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
		}

		.legend .d-place {
			background: linear-gradient(160deg, var(--gold-light), #b8901f);
		}

		.legend .d-attr {
			background: var(--teal);
		}

		.legend .d-hist {
			background: var(--burgundy);
		}

		.legend .d-hotel {
			background: var(--deep);
			border: 1px solid var(--gold);
		}

		.legend .d-cruise {
			background: linear-gradient(160deg, var(--cruise-light), var(--cruise));
			border: 1px solid #0a536b;
		}

		/* Custom styled select inside InfoWindow */
		select.iw-btn {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M0 2l4 4 4-4z' fill='%2314243b'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 10px center;
			padding-right: 24px !important;
			height: 32px;
			padding-top: 5px;
			padding-bottom: 5px;
			cursor: pointer;
		}

		.route-planner-controls {
			display: flex;
			flex: 1 1 100%;
			gap: 7px;
			min-width: 0;
		}

		.route-planner-controls .iw-btn {
			min-width: 0;
		}

		.route-origin-select {
			flex: 1 1 180px;
			max-width: 100%;
		}

		.route-mode-select {
			flex: 0 1 auto;
		}

		/* Styling for routing mode buttons inside #mapinfo */
		.route-mode-btn {
			background: transparent;
			border: 1px solid rgba(255, 255, 255, .35);
			color: #f6e9c4;
			padding: 2px 6px;
			border-radius: 12px;
			font-size: .75rem;
			cursor: pointer;
			transition: all .15s ease;
		}
		.route-mode-btn:hover {
			background: rgba(255, 255, 255, .1);
			border-color: rgba(255, 255, 255, .6);
			color: #fff;
		}
		.route-mode-btn.active {
			background: var(--gold);
			border-color: var(--gold);
			color: var(--deep);
			font-weight: 600;
		}

		.route-error {
			color: #ffd7a8;
			font-weight: 500;
		}

		.cursor-pointer {
			cursor: pointer;
		}

		/* ===== Przyciski mobilne (hamburger + miejsca) ===== */
		.mobile-controls {
			display: none;
			gap: 6px;
			align-items: center;
		}

		.mobile-btn {
			width: 44px;
			height: 44px;
			border-radius: 10px;
			border: 1px solid rgba(201, 162, 39, .55);
			background: rgba(255, 255, 255, .07);
			color: #f3e6c0;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all .16s ease;
			font-size: 1.3rem;
			position: relative;
		}

		.mobile-btn:hover,
		.mobile-btn:active {
			background: var(--gold);
			color: var(--deep);
			border-color: var(--gold);
		}

		/* ===== Offcanvas menu mobilne ===== */
		.mobile-offcanvas {
			position: fixed;
			top: 0;
			right: -100%;
			width: 100%;
			height: 100%;
			z-index: 2000;
			transition: right .3s cubic-bezier(.4, 0, .2, 1);
		}

		.mobile-offcanvas.open {
			right: 0;
		}

		.mobile-offcanvas-backdrop {
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, .6);
			backdrop-filter: blur(4px);
		}

		.mobile-offcanvas-panel {
			position: absolute;
			top: 0;
			right: 0;
			width: 85%;
			max-width: 320px;
			height: 100%;
			background: linear-gradient(180deg, #0e1a2c, #14243b 40%);
			border-left: 2px solid rgba(201, 162, 39, .4);
			overflow-y: auto;
			display: flex;
			flex-direction: column;
		}

		.mobile-offcanvas-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 16px 18px;
			border-bottom: 1px solid rgba(201, 162, 39, .3);
		}

		.mobile-offcanvas-header h2 {
			font-family: 'Cormorant Garamond', serif;
			color: var(--gold-light);
			font-size: 1.3rem;
			font-weight: 700;
			margin: 0;
		}

		.mobile-offcanvas-close {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			border: 1px solid rgba(201, 162, 39, .4);
			background: rgba(255, 255, 255, .07);
			color: #f3e6c0;
			font-size: 1.2rem;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all .15s ease;
		}

		.mobile-offcanvas-close:hover {
			background: var(--gold);
			color: var(--deep);
		}

		.mobile-offcanvas-body {
			padding: 12px 0;
			flex: 1;
		}

		.mobile-menu-item {
			display: flex;
			align-items: center;
			gap: 14px;
			padding: 14px 20px;
			color: #e9dcb8;
			font-size: .95rem;
			font-weight: 500;
			cursor: pointer;
			border: none;
			background: none;
			width: 100%;
			text-align: left;
			transition: all .12s ease;
			text-decoration: none;
		}

		.mobile-menu-item:hover,
		.mobile-menu-item:active {
			background: rgba(201, 162, 39, .15);
			color: var(--gold-light);
		}

		.mobile-menu-item.active {
			background: rgba(201, 162, 39, .2);
			color: var(--gold-light);
			border-right: 3px solid var(--gold);
		}

		.mobile-menu-item i {
			font-size: 1.15rem;
			width: 24px;
			text-align: center;
			flex-shrink: 0;
		}

		.mobile-menu-divider {
			height: 1px;
			background: rgba(201, 162, 39, .2);
			margin: 8px 16px;
		}

		.mobile-menu-section {
			padding: 10px 20px 6px;
			color: #9db6d6;
			font-size: .7rem;
			text-transform: uppercase;
			letter-spacing: .18em;
			font-weight: 600;
		}

		/* ===== Dropdown miejsc mobilny ===== */
		.place-dropdown {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2000;
		}

		.place-dropdown.open {
			display: block;
		}

		.place-dropdown-backdrop {
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, .5);
			backdrop-filter: blur(3px);
		}

		.place-dropdown-list {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			background: linear-gradient(180deg, #0e1a2c, #14243b);
			border-bottom: 2px solid var(--gold);
			padding: 14px 10px;
			box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
			max-height: 85vh;
			overflow-y: auto;
		}

		.place-dropdown-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 4px 8px 12px;
		}

		.place-dropdown-header h3 {
			font-family: 'Cormorant Garamond', serif;
			color: var(--gold-light);
			font-size: 1.15rem;
			font-weight: 700;
			margin: 0;
		}

		.place-dropdown-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;
		}

		.place-card {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 12px 12px;
			background: rgba(255, 255, 255, .05);
			border: 1px solid rgba(201, 162, 39, .35);
			border-radius: 12px;
			cursor: pointer;
			transition: all .15s ease;
		}

		.place-card:hover,
		.place-card:active {
			background: rgba(201, 162, 39, .2);
			border-color: var(--gold);
			transform: scale(1.02);
		}

		.place-card .cc-num {
			width: 32px;
			height: 32px;
			border-radius: 50%;
			background: linear-gradient(160deg, var(--gold-light), #b8901f);
			color: #3a2c08;
			font-family: 'Cormorant Garamond', serif;
			font-weight: 700;
			font-size: 1rem;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.place-card .cc-info {
			min-width: 0;
		}

		.place-card .cc-name {
			color: #f6e9c4;
			font-size: .88rem;
			font-weight: 600;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.place-card .cc-sub {
			color: #9db6d6;
			font-size: .65rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		@media (max-width: 600px) {
			/* Ukryj desktop toolbar i pillbar */
			.toolbar {
				display: none !important;
			}

			.pillbar {
				display: none !important;
			}

			.legend {
				display: none;
			}

			/* Pokaż mobilne kontrolki */
			.mobile-controls {
				display: flex;
			}

			/* Kompaktowy nagłówek */
			.appbar {
				padding: 8px 12px;
				gap: 8px;
				flex-wrap: nowrap;
			}

			.brand {
				flex: 1;
				min-width: 0;
			}

			.brand h1 {
				font-size: 1.15rem;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.brand-badge {
				width: 36px;
				height: 36px;
			}

			.brand small {
				font-size: .52rem;
			}

			/* Lepsze touch targets w InfoWindow */
			.iw {
				width: 280px;
			}

			.iw-btn {
				padding: 9px 13px;
				font-size: .82rem;
			}

			.iw-desc {
				font-size: .82rem;
			}

			.iw-hero {
				height: 130px;
			}

			/* ===== Modale pełnoekranowe na mobile ===== */
			#galleryModal .modal-dialog,
			#travelInfoModal .modal-dialog,
			#filterModal .modal-dialog {
				margin: 0 !important;
				padding: 0 !important;
				max-width: 100vw !important;
				width: 100vw !important;
				height: 100vh !important;
				min-height: 100vh !important;
				max-height: 100vh !important;
				transform: none !important;
				align-items: stretch !important;
			}

			#galleryModal .modal-content,
			#travelInfoModal .modal-content,
			#filterModal .modal-content {
				min-height: 100vh !important;
				height: 100vh !important;
				width: 100vw !important;
				border-radius: 0 !important;
				border: none !important;
			}

			#galleryModal .modal-body {
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;
			}

			#filterModal .modal-content {
				display: flex !important;
				flex-direction: column !important;
			}

			#filterModal .modal-body {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			#filterModal .form-check {
				padding: 10px 0 10px 2.5em;
				font-size: 1.05rem;
			}

			#filterModal .form-check-input {
				width: 1.4em;
				height: 1.4em;
			}

			#filterModal .dot {
				width: 18px;
				height: 18px;
			}
		}

		/* ===== Okno informacyjne (InfoWindow) ===== */
		.gm-style .gm-style-iw-c {
			padding: 0 !important;
			border-radius: 16px !important;
			box-shadow: 0 14px 38px rgba(8, 18, 36, .4) !important;
			overflow: hidden !important;
			max-width: 332px !important;
		}

		.gm-style .gm-style-iw-d {
			overflow-y: auto !important;
			overflow-x: hidden !important;
			max-width: 332px !important;
		}

		.gm-style .gm-style-iw-c button.gm-ui-hover-effect {
			top: 9px !important;
			right: 9px !important;
			width: 28px !important;
			height: 28px !important;
			background: rgba(20, 36, 59, .08) !important;
			border-radius: 50% !important;
			opacity: 1 !important;
			transition: background .15s ease;
		}

		.gm-style .gm-style-iw-c button.gm-ui-hover-effect:hover {
			background: rgba(20, 36, 59, .18) !important;
		}

		.gm-style .gm-style-iw-c button.gm-ui-hover-effect>span {
			background-color: var(--deep) !important;
			margin: 6px !important;
			width: 16px !important;
			height: 16px !important;
		}

		.gm-style .gm-style-iw-tc::after {
			background: var(--cream) !important;
		}

		.iw {
			width: 300px;
			max-width: 84vw;
			font-family: 'Montserrat', sans-serif;
		}

		.iw-head {
			background: var(--cream);
			padding: 12px 48px 11px 16px;
		}

		.iw-hero {
			height: 158px;
			position: relative;
			background: linear-gradient(135deg, var(--deep-2), var(--deep));
			overflow: hidden;
		}

		.iw-hero img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}

		.iw-hero::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(to top, rgba(0, 0, 0, .35), transparent 45%);
		}

		.iw-hero.cruise-hero,
		.location-detail-hero.cruise-hero {
			background:
				radial-gradient(circle at 75% 24%, rgba(255, 255, 255, .2), transparent 28%),
				linear-gradient(145deg, #0b6685 0%, #147d9c 48%, #14243b 100%);
		}

		.iw-hero.cruise-hero::before,
		.location-detail-hero.cruise-hero::before {
			content: "";
			position: absolute;
			inset: auto -8% 18px -8%;
			height: 34px;
			background: radial-gradient(28px 11px at 50% 0, transparent 48%, rgba(255, 255, 255, .22) 51%, transparent 56%) 0 0 / 56px 22px repeat-x;
			transform: rotate(-2deg);
		}

		.cruise-emblem {
			position: absolute;
			inset: 0;
			z-index: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 5px;
			color: #fffdf8;
			text-shadow: 0 2px 10px rgba(8, 18, 36, .55);
		}

		.cruise-emblem i {
			font-size: 2.15rem;
			line-height: 1;
		}

		.cruise-emblem span {
			font-size: .65rem;
			font-weight: 700;
			letter-spacing: .2em;
			text-transform: uppercase;
		}

		.iw-badge {
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 2;
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: linear-gradient(160deg, var(--gold-light), #b8901f);
			color: #3a2c08;
			font-family: 'Cormorant Garamond', serif;
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 19px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
			border: 2px solid var(--cream);
		}

		.iw-tag {
			position: absolute;
			top: 12px;
			right: 12px;
			z-index: 2;
			font-size: .62rem;
			text-transform: uppercase;
			letter-spacing: .12em;
			background: rgba(20, 36, 59, .85);
			color: #f3e6c0;
			padding: 4px 9px;
			border-radius: 12px;
		}

		.iw-body {
			padding: 13px 15px 15px;
			background: var(--cream);
		}

		.iw-title {
			font-family: 'Cormorant Garamond', serif;
			color: var(--deep);
			font-size: 1.45rem;
			font-weight: 700;
			margin: 0;
			line-height: 1.1;
		}

		.iw-sub {
			font-size: .72rem;
			text-transform: uppercase;
			letter-spacing: .12em;
			color: #b8901f;
			font-weight: 600;
			margin: 3px 0 0;
		}

		.iw-verse {
			font-family: 'EB Garamond', serif;
			font-style: italic;
			color: #5a4632;
			font-size: 1rem;
			line-height: 1.4;
			border-left: 3px solid var(--gold-light);
			padding-left: 11px;
			margin: 11px 0 4px;
		}

		.iw-verse .ref {
			display: block;
			font-style: normal;
			font-size: .72rem;
			letter-spacing: .06em;
			color: #a98c4a;
			margin-top: 3px;
		}

		.iw-desc {
			font-size: .84rem;
			color: #3a3a3a;
			line-height: 1.5;
			margin: 10px 0 13px;
		}

		.iw-actions {
			display: flex;
			flex-wrap: wrap;
			gap: 7px;
		}

		.iw-btn {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			font-size: .78rem;
			font-weight: 500;
			padding: 7px 11px;
			border-radius: 21px;
			background: #efe7d6;
			color: var(--deep) !important;
			text-decoration: none;
			cursor: pointer;
			border: 1px solid #e2d6bd;
			transition: all .15s ease;
		}

		.iw-btn:hover {
			background: var(--deep);
			color: #fff !important;
			border-color: var(--deep);
		}

		.iw-btn.gold {
			background: linear-gradient(160deg, var(--gold-light), #cba227);
			color: #3a2c08 !important;
			border-color: #b8901f;
			font-weight: 600;
		}

		.iw-btn.gold:hover {
			background: linear-gradient(160deg, #b8901f, #9a7919);
			color: #fff !important;
		}

		/* ===== Pełnoekranowe szczegóły miejsca na telefonie ===== */
		#locationModal {
			z-index: 2200;
		}

		#locationModal .modal-dialog {
			width: 100vw;
			max-width: none;
			height: 100vh;
			height: 100dvh;
			margin: 0;
		}

		#locationModal .modal-content {
			width: 100vw;
			min-height: 100vh;
			min-height: 100dvh;
			height: 100vh;
			height: 100dvh;
			border: 0;
			border-radius: 0;
			background: var(--cream);
			color: var(--ink);
		}

		#locationModal .modal-header {
			flex: 0 0 auto;
			align-items: flex-start;
			gap: 14px;
			padding:
				max(15px, env(safe-area-inset-top))
				max(18px, env(safe-area-inset-right))
				14px
				max(18px, env(safe-area-inset-left));
			background: linear-gradient(105deg, #0e1a2c, var(--deep-2));
			border-bottom: 3px solid var(--gold);
			box-shadow: 0 4px 18px rgba(0, 0, 0, .28);
		}

		#locationModal .modal-heading {
			min-width: 0;
			flex: 1;
		}

		#locationModal .modal-title {
			margin: 0;
			font-family: 'Cormorant Garamond', serif;
			font-size: clamp(1.65rem, 7vw, 2.15rem);
			font-weight: 700;
			line-height: 1.05;
			color: #f6e9c4;
		}

		#locationModalSubtitle {
			margin-top: 4px;
			font-size: .68rem;
			font-weight: 600;
			letter-spacing: .13em;
			text-transform: uppercase;
			color: #9db6d6;
		}

		#locationModal .btn-close {
			flex: 0 0 auto;
			width: 44px;
			height: 44px;
			margin: -4px -5px 0 0;
			padding: 0;
			border-radius: 50%;
			background-color: rgba(255, 255, 255, .1);
			filter: invert(1) grayscale(1) brightness(2);
			opacity: 1;
		}

		#locationModal .modal-body {
			flex: 1 1 auto;
			min-height: 0;
			padding: 0;
			overflow-y: auto;
			overscroll-behavior-y: contain;
			-webkit-overflow-scrolling: touch;
		}

		.location-detail {
			min-height: 100%;
			background: var(--cream);
		}

		.location-detail-hero {
			position: relative;
			width: 100%;
			height: clamp(180px, 28dvh, 260px);
			overflow: hidden;
			background: linear-gradient(135deg, var(--deep-2), var(--deep));
		}

		.location-detail-hero img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.location-detail-hero::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(to top, rgba(8, 18, 36, .45), transparent 55%);
			pointer-events: none;
		}

		.location-detail-badge,
		.location-detail-tag {
			position: absolute;
			z-index: 2;
			top: 14px;
			box-shadow: 0 3px 12px rgba(0, 0, 0, .4);
		}

		.location-detail-badge {
			left: max(16px, env(safe-area-inset-left));
			width: 46px;
			height: 46px;
			display: grid;
			place-items: center;
			border: 2px solid var(--cream);
			border-radius: 50%;
			background: linear-gradient(160deg, var(--gold-light), #b8901f);
			color: #3a2c08;
			font-family: 'Cormorant Garamond', serif;
			font-size: 1.45rem;
			font-weight: 700;
		}

		.location-detail-tag {
			right: max(16px, env(safe-area-inset-right));
			padding: 6px 11px;
			border-radius: 18px;
			background: rgba(20, 36, 59, .9);
			color: #f3e6c0;
			font-size: .66rem;
			font-weight: 600;
			letter-spacing: .1em;
			text-transform: uppercase;
		}

		.location-detail-copy {
			width: min(100%, 720px);
			margin: 0 auto;
			padding:
				22px
				max(20px, env(safe-area-inset-right))
				calc(28px + env(safe-area-inset-bottom))
				max(20px, env(safe-area-inset-left));
		}

		.location-detail-verse {
			margin: 0 0 20px;
			padding: 14px 16px;
			border-left: 4px solid var(--gold);
			border-radius: 0 10px 10px 0;
			background: #f6efdf;
			color: #5a4632;
			font-family: 'EB Garamond', serif;
			font-size: 1.18rem;
			font-style: italic;
			line-height: 1.55;
		}

		.location-detail-verse .ref {
			display: block;
			margin-top: 7px;
			color: #98792e;
			font-family: 'Montserrat', sans-serif;
			font-size: .72rem;
			font-style: normal;
			font-weight: 600;
			letter-spacing: .08em;
		}

		.location-detail-desc {
			margin: 0 0 24px;
			color: #303640;
			font-family: 'Montserrat', sans-serif;
			font-size: 1.04rem;
			line-height: 1.75;
			overflow-wrap: anywhere;
		}

		.location-detail-actions {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 10px;
		}

		.location-detail-actions .iw-btn {
			width: 100%;
			min-height: 48px;
			justify-content: center;
			margin: 0;
			padding: 10px 12px;
			border-radius: 12px;
			font-size: .82rem;
			text-align: center;
		}

		.location-detail-actions select.iw-btn {
			height: 48px;
			padding-right: 28px !important;
		}

		.location-detail-actions .route-planner-controls {
			display: grid;
			grid-column: 1 / -1;
			grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
			gap: 10px;
		}

		@media (max-width: 360px) {
			.location-detail-actions,
			.location-detail-actions .route-planner-controls {
				grid-template-columns: 1fr;
			}
		}

		/* ===== Galeria (modal + karuzela) ===== */
		#galleryModal .modal-content {
			background: #11141a;
			color: #eee;
			border: 1px solid rgba(201, 162, 39, .55);
			border-radius: 16px;
			overflow: hidden;
		}

		#galleryModal .modal-header {
			border-bottom: 1px solid rgba(201, 162, 39, .25);
			padding: 13px 18px;
		}

		#galleryModal .modal-title {
			font-family: 'Cormorant Garamond', serif;
			color: var(--gold-light);
			font-size: 1.5rem;
			font-weight: 700;
			letter-spacing: .02em;
		}

		#galleryModal .btn-close {
			filter: invert(1) grayscale(1) brightness(1.7);
		}

		#galleryModal .modal-footer {
			border-top: 1px solid rgba(201, 162, 39, .25);
			padding: 10px 18px;
		}

		/* ===== Informacje organizacyjne ===== */
		#travelInfoModal .modal-content {
			background: #11141a;
			color: #e8edf4;
			border: 1px solid rgba(201, 162, 39, .55);
			border-radius: 16px;
			overflow: hidden;
		}

		#travelInfoModal .modal-header {
			border-bottom: 1px solid rgba(201, 162, 39, .25);
			padding: 15px 20px;
		}

		#travelInfoModal .modal-title {
			font-family: 'Cormorant Garamond', serif;
			color: var(--gold-light);
			font-size: 1.65rem;
			font-weight: 700;
			letter-spacing: .02em;
		}

		#travelInfoModal .btn-close {
			filter: invert(1) grayscale(1) brightness(1.7);
		}

		#travelInfoModal .modal-body {
			padding: 20px;
			line-height: 1.65;
		}

		#travelInfoModal .modal-footer {
			border-top: 1px solid rgba(201, 162, 39, .25);
			padding: 10px 20px;
		}

		.travel-info-whatsapp {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			margin-bottom: 20px;
			padding: 16px 18px;
			background: rgba(37, 211, 102, .1);
			border: 1px solid rgba(37, 211, 102, .38);
			border-radius: 14px;
		}

		.travel-info-whatsapp strong {
			display: block;
			color: #f5fff8;
			font-size: 1rem;
		}

		.travel-info-whatsapp span {
			display: block;
			margin-top: 2px;
			color: #a8c8b4;
			font-size: .82rem;
		}

		.travel-info-whatsapp-link {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			flex: 0 0 auto;
			padding: 9px 14px;
			border-radius: 10px;
			background: #25d366;
			color: #082c16;
			font-size: .85rem;
			font-weight: 700;
			text-decoration: none;
			transition: transform .16s ease, background .16s ease;
		}

		.travel-info-whatsapp-link:hover {
			background: #4ae07f;
			color: #082c16;
			transform: translateY(-1px);
		}

		.travel-info-section + .travel-info-section {
			margin-top: 24px;
		}

		.travel-info-section h3 {
			display: flex;
			align-items: center;
			gap: 9px;
			margin: 0 0 10px;
			color: #f3d980;
			font-family: 'Cormorant Garamond', serif;
			font-size: 1.35rem;
			font-weight: 700;
		}

		.travel-info-section p {
			margin: 0 0 10px;
			color: #d8dee8;
		}

		.travel-info-highlight {
			padding: 14px 16px;
			background: rgba(201, 162, 39, .1);
			border-left: 3px solid var(--gold);
			border-radius: 0 10px 10px 0;
			font-size: 1rem;
		}

		.travel-info-flights {
			overflow-x: auto;
			overflow-y: hidden;
			border: 1px solid rgba(201, 162, 39, .22);
			border-radius: 12px;
		}

		.travel-info-table {
			width: 100%;
			min-width: 660px;
			border-collapse: collapse;
			font-size: .84rem;
		}

		.travel-info-table th,
		.travel-info-table td {
			padding: 11px 13px;
			border-bottom: 1px solid rgba(255, 255, 255, .08);
			text-align: left;
			vertical-align: middle;
		}

		.travel-info-table th {
			background: rgba(201, 162, 39, .13);
			color: #f3d980;
			font-size: .72rem;
			letter-spacing: .06em;
			text-transform: uppercase;
		}

		.travel-info-table tbody tr:last-child td {
			border-bottom: 0;
		}

		.travel-info-table strong {
			color: #fff5d6;
		}

		.travel-info-table small {
			display: block;
			color: #99a8ba;
			font-size: .7rem;
		}

		.travel-info-list {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 8px 24px;
			margin: 0;
			padding-left: 20px;
		}

		.travel-info-list li {
			padding-left: 2px;
			color: #d8dee8;
		}

		.travel-info-list li::marker {
			color: var(--gold-light);
		}

		@media (max-width: 767px) {
			#travelInfoModal .modal-body {
				padding: 16px;
			}

			.travel-info-whatsapp {
				align-items: stretch;
				flex-direction: column;
			}

			.travel-info-whatsapp-link {
				justify-content: center;
			}

			.travel-info-list {
				grid-template-columns: 1fr;
			}

			.travel-info-flights {
				overflow: visible;
				border: 0;
			}

			.travel-info-table {
				display: block;
				min-width: 0;
			}

			.travel-info-table thead {
				position: absolute;
				width: 1px;
				height: 1px;
				padding: 0;
				margin: -1px;
				overflow: hidden;
				clip: rect(0, 0, 0, 0);
				white-space: nowrap;
				border: 0;
			}

			.travel-info-table tbody {
				display: grid;
				gap: 10px;
			}

			.travel-info-table tr {
				display: block;
				padding: 7px 12px;
				background: rgba(255, 255, 255, .025);
				border: 1px solid rgba(201, 162, 39, .22);
				border-radius: 11px;
			}

			.travel-info-table td,
			.travel-info-table tbody tr:last-child td {
				display: grid;
				grid-template-columns: 72px minmax(0, 1fr);
				gap: 8px;
				padding: 7px 0;
				border-bottom: 1px solid rgba(255, 255, 255, .07);
			}

			.travel-info-table td::before {
				content: attr(data-label);
				color: #d7bc64;
				font-size: .67rem;
				font-weight: 700;
				letter-spacing: .04em;
				text-transform: uppercase;
			}

			.travel-info-table td:last-child,
			.travel-info-table tbody tr:last-child td:last-child {
				border-bottom: 0;
			}
		}

		.gallery-img {
			height: 72vh;
			width: 100%;
			object-fit: contain;
			background: #000;
		}

		@media (max-width: 767px) {
			.gallery-img {
				height: 56vh;
			}
		}

		.gallery-meta {
			color: #9a8c6a;
			font-size: .78rem;
			letter-spacing: .04em;
			text-align: center;
			margin-top: 10px;
		}

		.carousel-indicators [data-bs-target] {
			width: 9px;
			height: 9px;
			border-radius: 50%;
			border: 0;
		}

		.spinner-wrap {
			padding: 60px 0;
			text-align: center;
		}

		/* ===== Fullscreen Lightbox Viewer (Premium Dark Design) ===== */
		#fullscreenViewer {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background: rgba(8, 11, 16, 0.97);
			backdrop-filter: blur(15px);
			z-index: 2500;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}

		#fullscreenViewer img {
			max-width: 92vw;
			max-height: 82vh;
			object-fit: contain;
			border-radius: 8px;
			box-shadow: 0 15px 50px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(201, 162, 39, 0.25);
			transition: transform 0.25s cubic-bezier(0.1, 0.76, 0.55, 0.94);
		}

		#fullscreenViewer .close-btn {
			position: absolute;
			top: 25px;
			right: 30px;
			font-size: 3rem;
			color: rgba(255, 255, 255, 0.6);
			cursor: pointer;
			background: none;
			border: none;
			outline: none;
			transition: color 0.2s, transform 0.2s;
			line-height: 1;
		}

		#fullscreenViewer .close-btn:hover {
			color: var(--gold-light);
			transform: scale(1.15);
		}

		#fullscreenViewer .nav-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 3.5rem;
			color: rgba(255, 255, 255, 0.35);
			cursor: pointer;
			background: none;
			border: none;
			outline: none;
			transition: color 0.2s, transform 0.2s;
			user-select: none;
			padding: 20px;
		}

		#fullscreenViewer .nav-btn:hover {
			color: var(--gold-light);
			transform: translateY(-50%) scale(1.15);
		}

		#fullscreenViewer .prev-btn {
			left: 20px;
		}

		#fullscreenViewer .next-btn {
			right: 20px;
		}

		#fullscreenCaption {
			font-family: 'Montserrat', sans-serif;
			color: #9db6d6;
			font-size: 0.92rem;
			letter-spacing: 0.05em;
			text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
			pointer-events: none;
			text-align: center;
			margin-top: 15px;
			max-width: 80%;
		}

		/* ===== Oś czasu ===== */
		#timeline-bar {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 7;
			background: linear-gradient(180deg, rgba(14, 26, 44, 0.95), rgba(14, 26, 44, 0.85));
			backdrop-filter: blur(8px);
			border-bottom: 2px solid rgba(201, 162, 39, 0.4);
			padding: 10px 16px;
			gap: 8px;
			align-items: center;
			overflow-x: auto;
			scrollbar-width: thin;
			scrollbar-color: var(--gold) transparent;
		}

		#timeline-bar::-webkit-scrollbar { height: 5px; }
		#timeline-bar::-webkit-scrollbar-thumb { background: rgba(201,162,39,.5); border-radius: 3px; }

		.tl-label {
			flex: 0 0 auto;
			color: var(--gold-light);
			font-family: 'Cormorant Garamond', serif;
			font-weight: 700;
			font-size: .9rem;
			white-space: nowrap;
			margin-right: 6px;
		}

		.tl-dates-wrap {
			display: flex;
			gap: 6px;
			align-items: stretch;
		}

		.tl-date {
			flex: 0 0 auto;
			background: rgba(255,255,255,.07);
			border: 1px solid rgba(201,162,39,.4);
			color: #e9dcb8;
			border-radius: 10px;
			padding: 6px 12px;
			font-size: .72rem;
			font-weight: 500;
			cursor: pointer;
			text-align: center;
			transition: all .16s ease;
			line-height: 1.35;
			white-space: nowrap;
		}

		.tl-date:hover {
			background: rgba(201,162,39,.25);
			border-color: var(--gold);
		}

		.tl-date.active {
			background: var(--gold);
			color: var(--deep);
			border-color: var(--gold);
			font-weight: 700;
			box-shadow: 0 2px 10px rgba(201,162,39,.4);
		}

		.tl-date strong {
			font-size: 1.1rem;
			display: block;
		}
	</style>
{% endblock %}

{% block javascripts %}
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
{% endblock %}

{% block body %}
	<!-- ===== Nagłówek ===== -->
	<header class="appbar">
		<div class="brand">
			<span class="brand-badge">
				<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 32 32">
					<path d="M16 3l4 4v3l4 3v16H8V13l4-3V7z" fill="#14243b" />
					<rect x="14.7" y="19" width="2.6" height="9" fill="#f4e3a8" />
					<rect x="15" y="9" width="2" height="6" fill="#14243b" />
					<rect x="13" y="11" width="6" height="2" fill="#14243b" />
				</svg>
			</span>
			<div>
				<h1>Grecja szlakiem św. Pawła</h1>
				<small>Podróż śladami Apostoła Narodów</small>
			</div>
		</div>

		<div class="toolbar">
			<a class="tbtn" href="/grecja-szlakiem-sw-pawla" title="Strona główna">
				<i class="bi bi-house-door"></i><span class="lbl">Start</span>
			</a>
			<button class="tbtn" onclick="getLocation()" type="button" title="Pokaż moją lokalizację">
				<i class="bi bi-geo-alt"></i><span class="lbl">Lokalizacja</span>
			</button>
			<button class="tbtn" onclick="fitPlaces()" type="button" title="Pokaż wszystkie miejsca">
				<i class="bi bi-globe-europe-africa"></i><span class="lbl">Wszystkie</span>
			</button>
			<button class="tbtn" onclick="focusCruisePorts()" type="button" title="Pokaż porty rejsu">
				<i class="bi bi-water"></i><span class="lbl">Porty rejsu</span>
			</button>
			<button class="tbtn" data-bs-toggle="modal" data-bs-target="#filterModal" type="button" title="Filtry miejsc">
				<i class="bi bi-funnel"></i><span class="lbl">Filtry</span>
			</button>
			<button class="tbtn" id="trafficBtn" onclick="getTraffic()" type="button" title="Natężenie ruchu">
				<i class="bi bi-stoplights"></i><span class="lbl">Ruch</span>
			</button>
			<button class="tbtn" id="timelineBtn" onclick="toggleTimeline()" type="button" title="Oś czasu">
				<i class="bi bi-calendar3"></i><span class="lbl">Oś czasu</span>
			</button>
			{% if app.user %}
				<button class="tbtn" data-bs-toggle="modal" data-bs-target="#travelInfoModal" type="button" title="Informacje organizacyjne">
					<i class="bi bi-info-circle"></i><span class="lbl">Informacje</span>
				</button>
			{% endif %}
		</div>

		<!-- Mobilne przyciski: miejsca + hamburger -->
		<div class="mobile-controls">
			{% if app.user %}
				<button class="mobile-btn" data-bs-toggle="modal" data-bs-target="#travelInfoModal" type="button" title="Informacje organizacyjne" aria-label="Informacje organizacyjne">
					<i class="bi bi-info-circle"></i>
				</button>
			{% endif %}
			<button class="mobile-btn" onclick="togglePlaceDropdown()" type="button" title="Miejsca">
				<i class="bi bi-geo-fill"></i>
			</button>
			<button class="mobile-btn" onclick="toggleMobileMenu()" type="button" title="Menu">
				<i class="bi bi-list"></i>
			</button>
		</div>
	</header>

	<!-- ===== Pasek 7 miejsc (desktop) ===== -->
	<nav class="pillbar" id="pillbar"></nav>

	<!-- ===== Dropdown miejsc (mobile) ===== -->
	<div class="place-dropdown" id="placeDropdown">
		<div class="place-dropdown-backdrop" onclick="togglePlaceDropdown()"></div>
		<div class="place-dropdown-list">
			<div class="place-dropdown-header">
				<h3><i class="bi bi-geo-fill" style="color: var(--gold)"></i> Siedem miejsc</h3>
				<button class="mobile-offcanvas-close" onclick="togglePlaceDropdown()"><i class="bi bi-x"></i></button>
			</div>
			<div class="place-dropdown-grid" id="placeDropdownGrid"></div>
		</div>
	</div>

	<!-- ===== Offcanvas menu (mobile) ===== -->
	<div class="mobile-offcanvas" id="mobileMenu">
		<div class="mobile-offcanvas-backdrop" onclick="toggleMobileMenu()"></div>
		<div class="mobile-offcanvas-panel">
			<div class="mobile-offcanvas-header">
				<h2>Menu</h2>
				<button class="mobile-offcanvas-close" onclick="toggleMobileMenu()"><i class="bi bi-x"></i></button>
			</div>
			<div class="mobile-offcanvas-body">
				<div class="mobile-menu-section">Nawigacja</div>
				<a class="mobile-menu-item" href="/grecja-szlakiem-sw-pawla">
					<i class="bi bi-house-door"></i> Start
				</a>
				<button class="mobile-menu-item" onclick="getLocation(); toggleMobileMenu();">
					<i class="bi bi-geo-alt"></i> Moja lokalizacja
				</button>
				<button class="mobile-menu-item" onclick="fitPlaces(); toggleMobileMenu();">
					<i class="bi bi-globe-europe-africa"></i> Pokaż wszystkie
				</button>
				<button class="mobile-menu-item" onclick="focusCruisePorts(); toggleMobileMenu();">
					<i class="bi bi-water"></i> Porty rejsu statkiem
				</button>

				<div class="mobile-menu-divider"></div>
				<div class="mobile-menu-section">Narzędzia</div>
				<button class="mobile-menu-item" onclick="openMobileFilters(); toggleMobileMenu();">
					<i class="bi bi-funnel"></i> Filtry miejsc
				</button>
				<button class="mobile-menu-item" id="mobileTrafficBtn" onclick="getTraffic(); syncMobileTrafficBtn(); toggleMobileMenu();">
					<i class="bi bi-stoplights"></i> Natężenie ruchu
				</button>
				<button class="mobile-menu-item" id="mobileTimelineBtn" onclick="toggleTimeline(); syncMobileTimelineBtn(); toggleMobileMenu();">
					<i class="bi bi-calendar3"></i> Oś czasu
				</button>
			</div>
		</div>
	</div>

	<!-- ===== Mapa ===== -->
	<div class="map-wrap">
		<p id="mapinfo" role="status" aria-live="polite"></p>
		<div id="timeline-bar">
			<span class="tl-label"><i class="bi bi-calendar3"></i> Oś czasu</span>
			<div class="tl-dates-wrap" id="timeline-dates"></div>
		</div>
		<div id="map"></div>
		<div class="legend">
			<b>Legenda i filtry</b>
			<div class="mt-2">
				<div class="form-check form-switch mb-2">
					<input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="toggle-place" checked onchange="toggleGroup('place', this.checked)">
					<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="toggle-place">
						<span class="dot d-place"></span> Miejsca związane ze św. Pawłem
					</label>
				</div>
				<div class="form-check form-switch mb-2">
					<input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="toggle-historic" checked onchange="toggleGroup('historic', this.checked)">
					<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="toggle-historic">
						<span class="dot d-hist"></span> Miejsca historyczne
					</label>
				</div>
				<div class="form-check form-switch mb-2">
					<input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="toggle-attraction" checked onchange="toggleGroup('attraction', this.checked)">
					<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="toggle-attraction">
						<span class="dot d-attr"></span> Atrakcje turystyczne
					</label>
				</div>
				<div class="form-check form-switch mb-2">
					<input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="toggle-hotels" checked onchange="toggleGroup('hotels', this.checked)">
					<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="toggle-hotels">
						<span class="dot d-hotel"></span> Hotele i noclegi
					</label>
				</div>
				<div class="form-check form-switch">
					<input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="toggle-cruise" checked onchange="toggleGroup('cruise', this.checked)">
					<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="toggle-cruise">
						<span class="dot d-cruise"></span> Porty rejsu statkiem
					</label>
				</div>
			</div>
		</div>
	</div>

	<!-- ===== Pełnoekranowe szczegóły miejsca (mobile) ===== -->
	<div class="modal fade" id="locationModal" tabindex="-1" aria-labelledby="locationModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-fullscreen">
			<div class="modal-content">
				<div class="modal-header">
					<div class="modal-heading">
						<h2 class="modal-title" id="locationModalLabel"></h2>
						<div id="locationModalSubtitle"></div>
					</div>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
				</div>
				<div class="modal-body" id="locationModalBody"></div>
			</div>
		</div>
	</div>

	<!-- ===== Modal galerii ===== -->
	<div class="modal fade" id="galleryModal" tabindex="-1" aria-labelledby="galleryModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="galleryModalLabel">Galeria zdjęć</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
				</div>
				<div class="modal-body p-2 p-md-3" id="galleryModalBody"></div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline-warning btn-sm" data-bs-dismiss="modal">Zamknij</button>
				</div>
			</div>
		</div>
	</div>

	{% if app.user %}
		<!-- ===== Informacje organizacyjne ===== -->
		<div class="modal fade" id="travelInfoModal" tabindex="-1" aria-labelledby="travelInfoModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h2 class="modal-title" id="travelInfoModalLabel"><i class="bi bi-info-circle me-2"></i>Informacje organizacyjne</h2>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij"></button>
				</div>
				<div class="modal-body">
					<div class="travel-info-whatsapp">
						<div>
							<strong>Grupa pielgrzymów na WhatsAppie</strong>
							<span>Dołącz, aby otrzymywać bieżące informacje organizacyjne.</span>
						</div>
						<a class="travel-info-whatsapp-link" href="https://chat.whatsapp.com/HhtsbOgRO8CHjXRceScszA" target="_blank" rel="noopener noreferrer">
							<i class="bi bi-whatsapp"></i> Dołącz do grupy
						</a>
					</div>

					<section class="travel-info-section" aria-labelledby="travel-meeting-title">
						<h3 id="travel-meeting-title"><i class="bi bi-geo-alt"></i>Zbiórka grupy</h3>
						<p class="travel-info-highlight">Zbiórka grupy odbędzie się na lotnisku w Gdańsku <strong>2 września 2026 r. o godz. 03:00</strong>.</p>
					</section>

					<section class="travel-info-section" aria-labelledby="travel-flights-title">
						<h3 id="travel-flights-title"><i class="bi bi-airplane"></i>Przeloty PLL LOT</h3>
						<div class="travel-info-flights">
							<table class="travel-info-table">
								<caption class="visually-hidden">Plan przelotów do Grecji i z powrotem</caption>
								<thead>
									<tr>
										<th scope="col">Data</th>
										<th scope="col">Rejs</th>
										<th scope="col">Trasa</th>
										<th scope="col">Godziny</th>
										<th scope="col">Kod</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td data-label="Data">2 września 2026</td>
										<td data-label="Rejs"><strong>LO3828</strong></td>
										<td data-label="Trasa">Gdańsk (GDN) → Warszawa (WAW)</td>
										<td data-label="Godziny">05:35–06:35</td>
										<td data-label="Kod">G · HN43</td>
									</tr>
									<tr>
										<td data-label="Data">2 września 2026</td>
										<td data-label="Rejs"><strong>LO605</strong></td>
										<td data-label="Trasa">Warszawa (WAW) → Saloniki (SKG)</td>
										<td data-label="Godziny">09:40–12:55</td>
										<td data-label="Kod">G · HN43</td>
									</tr>
									<tr>
										<td data-label="Data">10 września 2026</td>
										<td data-label="Rejs"><strong>LO604</strong></td>
										<td data-label="Trasa">Ateny (ATH) → Warszawa (WAW)</td>
										<td data-label="Godziny">19:05–20:45</td>
										<td data-label="Kod">G · HN43</td>
									</tr>
									<tr>
										<td data-label="Data">10 września 2026</td>
										<td data-label="Rejs"><strong>LO3827</strong></td>
										<td data-label="Trasa">Warszawa (WAW) → Gdańsk (GDN)</td>
										<td data-label="Godziny">22:55–23:50</td>
										<td data-label="Kod">G · HN43</td>
									</tr>
								</tbody>
							</table>
						</div>
					</section>

					<section class="travel-info-section" aria-labelledby="travel-luggage-title">
						<h3 id="travel-luggage-title"><i class="bi bi-suitcase-lg"></i>Bagaż i bezpieczeństwo</h3>
						<p>Każdy pasażer ma prawo do nadania <strong>1 bagażu głównego</strong> o maksymalnej wadze 23 kg i maksymalnych rozmiarach 158 cm oraz wniesienia na pokład samolotu <strong>1 bagażu podręcznego</strong> o maksymalnej wadze 8 kg i maksymalnych rozmiarach 115 cm.</p>
						<p>Dopuszczalne jest wniesienie drugiego, bardzo małego bagażu podręcznego — akcesorium typu mała damska torebka, futerał z aparatem fotograficznym czy laptop.</p>
						<p>Na pokład samolotu nie wolno wnosić ostrych przedmiotów (nożyczki, scyzoryki, pilniki) ani płynów w pojemnikach o pojemności powyżej 100 ml.</p>
					</section>

					<section class="travel-info-section" aria-labelledby="travel-packing-title">
						<h3 id="travel-packing-title"><i class="bi bi-check2-circle"></i>Co należy zabrać?</h3>
						<p>Myśląc o swoim komforcie i bezpieczeństwie, prosimy zabrać:</p>
						<ul class="travel-info-list">
							<li>przewiewne ubrania (w miejscach sakralnych wymagane będą zakryte ramiona, kolana i dekolty),</li>
							<li>nakrycie głowy i okulary przeciwsłoneczne,</li>
							<li>strój kąpielowy (będzie możliwość kąpieli w morzu),</li>
							<li>lekki sweterek na ewentualne chłodniejsze wieczory,</li>
							<li>wygodne buty,</li>
							<li>lekarstwa — zwłaszcza zażywane stale, w odpowiedniej ilości na cały pobyt, ale także profilaktycznie, m.in. przeciw problemom żołądkowym,</li>
							<li>walutę EUR na własne wydatki oraz 270 EUR do przekazania pilotowi,</li>
							<li>dokument tożsamości: dowód osobisty lub paszport, ważny minimum 6 miesięcy od daty powrotu do kraju,</li>
							<li>prowiant na pierwszy dzień (pierwszym posiłkiem będzie obiadokolacja w hotelu wieczorem).</li>
						</ul>
					</section>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-outline-warning btn-sm" data-bs-dismiss="modal">Zamknij</button>
				</div>
			</div>
		</div>
		</div>
	{% endif %}

	<!-- ===== Modal filtrów ===== -->
	<div class="modal fade" id="filterModal" tabindex="-1" aria-labelledby="filterModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-sm">
			<div class="modal-content" style="background: #11141a; color: #eee; border: 1px solid rgba(201, 162, 39, .55); border-radius: 16px;">
				<div class="modal-header" style="border-bottom: 1px solid rgba(201, 162, 39, .25);">
					<h5 class="modal-title" id="filterModalLabel" style="font-family: 'Cormorant Garamond', serif; color: var(--gold-light); font-weight: 700;">Filtry miejsc</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Zamknij" style="filter: invert(1) grayscale(1) brightness(1.7);"></button>
				</div>
				<div class="modal-body">
					<div class="form-check form-switch mb-3">
						<input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="m-toggle-place" checked onchange="toggleGroup('place', this.checked)">
						<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="m-toggle-place">
							<span class="dot d-place"></span> Miejsca związane ze św. Pawłem
						</label>
					</div>
					<div class="form-check form-switch mb-3">
						<input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="m-toggle-historic" checked onchange="toggleGroup('historic', this.checked)">
						<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="m-toggle-historic">
							<span class="dot d-hist"></span> Miejsca historyczne
						</label>
					</div>
					<div class="form-check form-switch mb-3">
						<input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="m-toggle-attraction" checked onchange="toggleGroup('attraction', this.checked)">
						<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="m-toggle-attraction">
							<span class="dot d-attr"></span> Atrakcje turystyczne
						</label>
					</div>
					<div class="form-check form-switch mb-3">
						<input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="m-toggle-hotels" checked onchange="toggleGroup('hotels', this.checked)">
						<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="m-toggle-hotels">
							<span class="dot d-hotel"></span> Hotele i noclegi
						</label>
					</div>
					<div class="form-check form-switch">
						<input class="form-check-input cursor-pointer" type="checkbox" role="switch" id="m-toggle-cruise" checked onchange="toggleGroup('cruise', this.checked)">
						<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="m-toggle-cruise">
							<span class="dot d-cruise"></span> Porty rejsu statkiem
						</label>
					</div>
				</div>
				<div class="modal-footer" style="border-top: 1px solid rgba(201, 162, 39, .25);">
					<button type="button" class="btn btn-outline-warning btn-sm" data-bs-dismiss="modal">Zamknij</button>
				</div>
			</div>
		</div>
	</div>

	<!-- ===== Fullscreen Lightbox Overlay ===== -->
	<div id="fullscreenViewer">
		<button class="close-btn" onclick="closeFullscreen()" title="Zamknij (Esc)">&times;</button>
		<button class="nav-btn prev-btn" onclick="navigateFullscreen(-1)" title="Poprzednie (Strzałka w lewo)">&lt;</button>
		<img id="fullscreenImage" src="" alt="Fullscreen View">
		<button class="nav-btn next-btn" onclick="navigateFullscreen(1)" title="Następne (Strzałka w prawo)">&gt;</button>
		<div id="fullscreenCaption"></div>
	</div>

	<script>
		const lumenBibleLinksEnabled = {{ app.user ? 'true' : 'false' }};
		var directionsService, directionsDisplay, infoWindow, map, trafficLayer;
		var trafficVisible = false;
		var miejsce = null;
		var placeMarkers = {};
		var markersGroup = {
			place: [],
			historic: [],
			attraction: [],
			hotels: [],
			cruise: []
		};
		var allMarkerData = [];
		var timelineVisible = false;
		var selectedDates = new Set();
		var currentRouteOrigin = null;
		var currentRouteTarget = null;
		var currentRouteMode = null;
		var routeRequestSequence = 0;

		/* =========================================================
		   DANE: 7 miejsc odwiedzenia na szlaku św. Pawła,
		   miejsca historyczne, atrakcje oraz hotele.
		   ========================================================= */
		const places = [
			{
				type: 'place', number: 1, title: 'Neapolis', subtitle: 'obecnie Kawala · port św. Pawła',
				position: { lat: 40.9362, lng: 24.4107 },
				quotations: [
					{ verse: 'Odpłynęliśmy z Troady, a następnego dnia przybyliśmy do Neapolis.', ref: 'Dz 16,11' }
				],
				description: 'Do starożytnego Neapolis przybił św. Paweł z Sylasem, Tymoteuszem i Łukaszem. Stąd rozpoczął lądową część pierwszej misji na kontynencie europejskim.',
				folder: '/grecjaszlakiemswpawla/2',
				wiki: 'https://en.wikipedia.org/wiki/Kavala',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Kavala_%282%29.JPG/1280px-Kavala_%282%29.JPG',
				dates: ['2026-09-03T09:00']
			},
			{
				type: 'place', number: 2, title: 'Filippi', subtitle: 'rzymskie miasto pierwszej wspólnoty w Europie',
				position: { lat: 41.0121, lng: 24.2846 },
				quotations: [
					{ verse: 'Zatrzymaliśmy się w Filippi przez kilka dni.', ref: 'Dz 16,12-40' },
					{ verse: 'List do Filipian', ref: 'Flp 1,1' }
				],
				description: 'W Filippi Paweł głosił Ewangelię, spotkał Lidię, został uwięziony wraz z Sylasem i ochrzcił strażnika więziennego. Później skierował do tutejszej wspólnoty List do Filipian.',
				folder: '/grecjaszlakiemswpawla/3',
				wiki: 'https://en.wikipedia.org/wiki/Philippi',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Philippi_city_center.jpg/1280px-Philippi_city_center.jpg',
				dates: ['2026-09-03T13:00']
			},
			{
				type: 'place', number: 3, title: 'Baptysterium św. Lidii', subtitle: 'tradycyjne miejsce pierwszego chrztu w Europie',
				position: { lat: 41.020832, lng: 24.276826 },
				quotations: [
					{ verse: 'Pan otworzył jej serce, tak że uważnie słuchała słów Pawła.', ref: 'Dz 16,13-15' }
				],
				description: 'Nad rzeką Zygaktis tradycja wskazuje miejsce, w którym Lidia z Tiatyry wraz ze swoim domem przyjęła chrzest. Obok znajduje się współczesny kościół-baptysterium.',
				folder: '/grecjaszlakiemswpawla/4',
				wiki: 'https://en.wikipedia.org/wiki/Lydia_of_Thyatira',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/BaptistryAtPhilippi.JPG/1280px-BaptistryAtPhilippi.JPG',
				dates: ['2026-09-03T15:30']
			},
			{
				type: 'place', number: 4, title: 'Saloniki', subtitle: 'Tesalonika · działalność św. Pawła',
				position: { lat: 40.6401, lng: 22.9444 },
				quotations: [
					{ verse: 'Paweł przez trzy szabaty rozmawiał z nimi na podstawie Pisma.', ref: 'Dz 17,1-9' },
					{ verse: 'Pierwszy list do Tesaloniczan.', ref: '1 Tes 1,1' },
					{ verse: 'Drugi list do Tesaloniczan.', ref: '2 Tes 1,1' }
				],
				description: 'W rzymskiej Tesalonice Paweł głosił w synagodze podczas drugiej podróży misyjnej. Powstała tu wspólnota, do której skierował Pierwszy i Drugi List do Tesaloniczan.',
				folder: '/grecjaszlakiemswpawla/1',
				wiki: 'https://en.wikipedia.org/wiki/Thessaloniki',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Tessaloniki_BW_2017-10-05_18-22-47.jpg/1280px-Tessaloniki_BW_2017-10-05_18-22-47.jpg',
				dates: ['2026-09-02T18:00']
			},
			{
				type: 'place', number: 5, title: 'Weria', subtitle: 'starożytna Berea · Trybuna św. Pawła',
				position: { lat: 40.51858, lng: 22.20004 },
				quotations: [
					{ verse: 'Przyjęli naukę z całą gorliwością i codziennie badali Pisma.', ref: 'Dz 17,10-14' }
				],
				description: 'Paweł i Sylas przybyli do Berei po opuszczeniu Tesaloniki. Współczesny pomnik zwany Trybuną lub Ołtarzem św. Pawła upamiętnia jego nauczanie w mieście.',
				folder: '/grecjaszlakiemswpawla/5',
				wiki: 'https://en.wikipedia.org/wiki/Veria',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Beroia_St_Paul%27s_Altar.jpg/1280px-Beroia_St_Paul%27s_Altar.jpg',
				dates: ['2026-09-04T11:00']
			},
			{
				type: 'place', number: 6, title: 'Areopag', subtitle: 'Ateny · mowa św. Pawła',
				position: { lat: 37.9720, lng: 23.7234 },
				quotations: [
					{ verse: 'W Nim żyjemy, poruszamy się i jesteśmy.', ref: 'Dz 17,16-34' }
				],
				description: 'Skaliste wzgórze obok Akropolu wiązane jest ze słynną mową św. Pawła o „Nieznanym Bogu”. Wśród słuchaczy, którzy uwierzyli, był Dionizy Areopagita.',
				folder: '/grecjaszlakiemswpawla/6',
				wiki: 'https://en.wikipedia.org/wiki/Areopagus',
				image: 'https://upload.wikimedia.org/wikipedia/commons/0/0d/Areopagus_hill.jpg',
				dates: ['2026-09-07T12:00']
			},
			{
				type: 'place', number: 7, title: 'Bema św. Pawła', subtitle: 'starożytny Korynt',
				position: { lat: 37.905178, lng: 22.880266 },
				quotations: [
					{ verse: 'Przebywał tam rok i sześć miesięcy i nauczał słowa Bożego.', ref: 'Dz 18,1-18' },
					{ verse: 'Pierwszy list do Koryntian.', ref: '1 Kor 1,1' },
					{ verse: 'Drugi list do Koryntian.', ref: '2 Kor 1,1' }
				],
				description: 'W Koryncie Paweł mieszkał u Akwili i Pryscylli, pracował jako wytwórca namiotów i założył wspólnotę. Bema na agorze jest tradycyjnie łączona z jego przesłuchaniem przed prokonsulem Gallionem.',
				folder: '/grecjaszlakiemswpawla/7',
				wiki: 'https://en.wikipedia.org/wiki/Ancient_Corinth',
				image: 'https://upload.wikimedia.org/wikipedia/commons/4/41/Ravel_1008.2.jpg',
				dates: ['2026-09-08T16:00']
			}
		];

		const historic = [
			{
				type: 'historic', title: 'Biała Wieża', subtitle: 'Saloniki · XV–XVI wiek',
				position: { lat: 40.6264, lng: 22.9483 },
				description: 'Symbol Salonik i zachowany fragment osmańskich umocnień nadmorskich. Dziś mieści ekspozycję poświęconą historii miasta.',
				wiki: 'https://en.wikipedia.org/wiki/White_Tower_of_Thessaloniki',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/WhiteTowerThessaloniki_%283%29.JPG/1280px-WhiteTowerThessaloniki_%283%29.JPG',
				dates: ['2026-09-02T18:30']
			},
			{
				type: 'historic', title: 'Rotunda Galeriusza', subtitle: 'Saloniki · początek IV wieku',
				position: { lat: 40.63396, lng: 22.95293 },
				description: 'Monumentalna budowla wzniesiona za cesarza Galeriusza, później kościół i meczet. Wewnątrz zachowały się wczesnochrześcijańskie mozaiki.',
				wiki: 'https://en.wikipedia.org/wiki/Arch_of_Galerius_and_Rotunda',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2a/Thessaloniki_Saint_George_Rotunda_from_the_Arch_of_Galerius.jpg/1280px-Thessaloniki_Saint_George_Rotunda_from_the_Arch_of_Galerius.jpg',
				dates: ['2026-09-02T19:00']
			},
			{
				type: 'historic', title: 'Łuk Galeriusza', subtitle: 'Saloniki · około 300 roku',
				position: { lat: 40.63211, lng: 22.95180 },
				description: 'Triumfalny łuk upamiętniający zwycięstwo Galeriusza nad Persami. Reliefy przedstawiają sceny cesarskiej kampanii.',
				wiki: 'https://en.wikipedia.org/wiki/Arch_of_Galerius_and_Rotunda',
				image: 'https://upload.wikimedia.org/wikipedia/commons/f/f2/Ac.galerius2.jpg',
				dates: ['2026-09-02T19:15']
			},
			{
				type: 'historic', title: 'Bazylika św. Dymitra', subtitle: 'Saloniki · zabytek w pobliżu trasy',
				position: { lat: 40.63888889, lng: 22.94777778 },
				description: 'Najważniejsze sanktuarium patrona Salonik, z kryptą i zachowanymi mozaikami bizantyjskimi.',
				wiki: 'https://en.wikipedia.org/wiki/Hagios_Demetrios',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/%CE%9D%CE%B1%CF%8C%CF%82_%CE%91%CE%B3%CE%AF%CE%BF%CF%85_%CE%94%CE%B7%CE%BC%CE%B7%CF%84%CF%81%CE%AF%CE%BF%CF%85%2C_%CE%98%CE%B5%CF%83%CF%83%CE%B1%CE%BB%CE%BF%CE%BD%CE%AF%CE%BA%CE%B7_3785.jpg/1280px-%CE%9D%CE%B1%CF%8C%CF%82_%CE%91%CE%B3%CE%AF%CE%BF%CF%85_%CE%94%CE%B7%CE%BC%CE%B7%CF%84%CF%81%CE%AF%CE%BF%CF%85%2C_%CE%98%CE%B5%CF%83%CF%83%CE%B1%CE%BB%CE%BF%CE%BD%CE%AF%CE%BA%CE%B7_3785.jpg',
				dates: ['2026-09-02T19:45']
			},
			{
				type: 'historic', title: 'Twierdza w Kawali', subtitle: 'Kawala · stare miasto',
				position: { lat: 40.9341, lng: 24.4155 },
				description: 'Cytadela górująca nad półwyspem Panagia, rozbudowana w epoce bizantyjskiej i osmańskiej. Z murów rozciąga się panorama portu.',
				wiki: 'https://en.wikipedia.org/wiki/Kavala',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/The_Arsenal_-_Kavala_castle.jpg/1280px-The_Arsenal_-_Kavala_castle.jpg',
				dates: ['2026-09-03T10:00']
			},
			{
				type: 'historic', title: 'Akwedukt Kamares', subtitle: 'Kawala · XVI wiek',
				position: { lat: 40.9390, lng: 24.4163 },
				description: 'Monumentalny osmański akwedukt wzniesiony na starszych fundamentach, jeden z najbardziej charakterystycznych zabytków Kawali.',
				wiki: 'https://en.wikipedia.org/wiki/Aqueduct_of_Kavala',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Kavala_Aqueduct_Kamares_Greece_%2816611060636%29.jpg/1280px-Kavala_Aqueduct_Kamares_Greece_%2816611060636%29.jpg',
				dates: ['2026-09-03T10:30']
			},
			{
				type: 'historic', title: 'Teatr antyczny w Filippi', subtitle: 'Filippi · IV wiek p.n.e.',
				position: { lat: 41.01375, lng: 24.2852 },
				description: 'Teatr założony w epoce Filipa II Macedońskiego i przebudowany przez Rzymian. Jest częścią stanowiska archeologicznego Filippi.',
				wiki: 'https://en.wikipedia.org/wiki/Philippi',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Philippi_-_1.jpg/1280px-Philippi_-_1.jpg',
				dates: ['2026-09-03T14:00']
			},
			{
				type: 'historic', title: 'Wielki Meteoron', subtitle: 'Meteory · XIV wiek',
				position: { lat: 39.72388889, lng: 21.62444444 },
				description: 'Największy i najstarszy z czynnych klasztorów Meteorów, założony przez św. Atanazego Meteorytę.',
				wiki: 'https://en.wikipedia.org/wiki/Monastery_of_Great_Meteoron',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Megalo_Meteoro_panorama.jpg/1280px-Megalo_Meteoro_panorama.jpg',
				dates: ['2026-09-05T09:00']
			},
			{
				type: 'historic', title: 'Monastyr Warłama', subtitle: 'Meteory · XVI wiek',
				position: { lat: 39.71416667, lng: 21.62694444 },
				description: 'Drugi co do wielkości klasztor Meteorów, znany z późnobizantyjskich fresków i dawnego systemu transportu linowego.',
				wiki: 'https://en.wikipedia.org/wiki/Monastery_of_Varlaam',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/%CE%9C%CE%BF%CE%BD%CE%AE_%CE%92%CE%B1%CF%81%CE%BB%CE%B1%CE%AC%CE%BC_%CE%9C%CE%B5%CF%84%CE%B5%CF%8E%CF%81%CF%89%CE%BD_%CE%B1%CF%80%CF%8C_%CE%BA%CE%AC%CF%84%CF%89.jpg/1280px-%CE%9C%CE%BF%CE%BD%CE%AE_%CE%92%CE%B1%CF%81%CE%BB%CE%B1%CE%AC%CE%BC_%CE%9C%CE%B5%CF%84%CE%B5%CF%8E%CF%81%CF%89%CE%BD_%CE%B1%CF%80%CF%8C_%CE%BA%CE%AC%CF%84%CF%89.jpg',
				dates: ['2026-09-05T11:00']
			},
			{
				type: 'historic', title: 'Monastyr Świętej Trójcy', subtitle: 'Meteory · XV wiek',
				position: { lat: 39.7132, lng: 21.6358 },
				description: 'Jeden z najbardziej widowiskowo położonych klasztorów, wzniesiony na samotnym skalnym filarze nad Kalambaką.',
				wiki: 'https://en.wikipedia.org/wiki/Monastery_of_the_Holy_Trinity,_Meteora',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Meteora_Agios_Triadas_IMG_7632.jpg/1280px-Meteora_Agios_Triadas_IMG_7632.jpg',
				dates: ['2026-09-05T13:00']
			},
			{
				type: 'historic', title: 'Świątynia Apollina', subtitle: 'Delfy · sanktuarium wyroczni',
				position: { lat: 38.48222222, lng: 22.50111111 },
				description: 'Centralna budowla sanktuarium delfickiego, w której Pytia udzielała odpowiedzi w imieniu Apollina.',
				wiki: 'https://en.wikipedia.org/wiki/Temple_of_Apollo_(Delphi)',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Delphi_Temple_of_Apollo.jpg/1280px-Delphi_Temple_of_Apollo.jpg',
				dates: ['2026-09-06T09:00']
			},
			{
				type: 'historic', title: 'Skarbiec Ateńczyków', subtitle: 'Delfy · około 490 roku p.n.e.',
				position: { lat: 38.4818, lng: 22.5014 },
				description: 'Marmurowy skarbiec przy Świętej Drodze, zrekonstruowany na początku XX wieku z zachowanych elementów.',
				wiki: 'https://en.wikipedia.org/wiki/Athenian_Treasury',
				image: 'https://upload.wikimedia.org/wikipedia/commons/7/78/Treasury_of_Athens_at_Delphi.jpg',
				dates: ['2026-09-06T10:00']
			},
			{
				type: 'historic', title: 'Monastyr Osios Loukas', subtitle: 'Distomo · X–XI wiek',
				position: { lat: 38.39536111, lng: 22.74683333 },
				description: 'Jeden z najlepiej zachowanych zespołów architektury bizantyjskiej w Grecji, słynący ze złotych mozaik.',
				wiki: 'https://en.wikipedia.org/wiki/Hosios_Loukas',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/%CE%9C%CE%BF%CE%BD%CE%AE_%CE%9F%CF%83%CE%AF%CE%BF%CF%85_%CE%9B%CE%BF%CF%85%CE%BA%CE%AC_1290.jpg/1280px-%CE%9C%CE%BF%CE%BD%CE%AE_%CE%9F%CF%83%CE%AF%CE%BF%CF%85_%CE%9B%CE%BF%CF%85%CE%BA%CE%AC_1290.jpg',
				dates: ['2026-09-06T13:00']
			},
			{
				type: 'historic', title: 'Katedra św. Dionizego Areopagity', subtitle: 'Ateny · katedra katolicka',
				position: { lat: 37.9808, lng: 23.7345 },
				description: 'Główna świątynia katolicka Aten, poświęcona Dionizemu Areopagicie, który według Dziejów Apostolskich uwierzył po mowie Pawła.',
				wiki: 'https://en.wikipedia.org/wiki/Cathedral_Basilica_of_St._Dionysius_the_Areopagite',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Cathedral_Basilica_of_St._Dionysius_the_Areopagite%2C_Athens.jpg/1280px-Cathedral_Basilica_of_St._Dionysius_the_Areopagite%2C_Athens.jpg',
				dates: ['2026-09-07T09:00']
			},
			{
				type: 'historic', title: 'Akropol ateński', subtitle: 'Ateny · wzgórze świątynne',
				position: { lat: 37.97166667, lng: 23.72611111 },
				description: 'Najważniejszy zespół zabytkowy Aten, obejmujący m.in. Partenon, Erechtejon i Propyleje.',
				wiki: 'https://en.wikipedia.org/wiki/Acropolis_of_Athens',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/1029_Acropolis_of_Athens_in_Greece_at_night_Photo_by_Giles_Laurent.jpg/1280px-1029_Acropolis_of_Athens_in_Greece_at_night_Photo_by_Giles_Laurent.jpg',
				dates: ['2026-09-07T10:00']
			},
			{
				type: 'historic', title: 'Partenon', subtitle: 'Ateny · V wiek p.n.e.',
				position: { lat: 37.9715, lng: 23.7266 },
				description: 'Dorycka świątynia Ateny Partenos i najważniejsza budowla Akropolu, wzniesiona w czasach Peryklesa.',
				wiki: 'https://en.wikipedia.org/wiki/Parthenon',
				image: 'https://upload.wikimedia.org/wikipedia/commons/d/da/The_Parthenon_in_Athens.jpg',
				dates: ['2026-09-07T10:30']
			},
			{
				type: 'historic', title: 'Agora ateńska', subtitle: 'Ateny · centrum życia starożytnego miasta',
				position: { lat: 37.975, lng: 23.7225 },
				description: 'Dawne centrum polityczne, handlowe i społeczne Aten, leżące u północno-zachodniego podnóża Akropolu.',
				wiki: 'https://en.wikipedia.org/wiki/Ancient_Agora_of_Athens',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/Agora_-_Ath%C3%A8nes_%28GRA1%29_-_2022-03-26_-_97.jpg/1280px-Agora_-_Ath%C3%A8nes_%28GRA1%29_-_2022-03-26_-_97.jpg',
				dates: ['2026-09-07T13:00']
			},
			{
				type: 'historic', title: 'Stadion Panateński', subtitle: 'Ateny · marmurowy stadion olimpijski',
				position: { lat: 37.96833333, lng: 23.74111111 },
				description: 'Starożytny stadion odbudowany w XIX wieku; arena pierwszych nowożytnych igrzysk olimpijskich w 1896 roku.',
				wiki: 'https://en.wikipedia.org/wiki/Panathenaic_Stadium',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/Panathenaic_Stadium_-_panoramio_%281%29.jpg/1280px-Panathenaic_Stadium_-_panoramio_%281%29.jpg',
				dates: ['2026-09-07T15:00']
			},
			{
				type: 'historic', title: 'Grób Nieznanego Żołnierza', subtitle: 'Ateny · plac Syntagma',
				position: { lat: 37.97527778, lng: 23.73638889 },
				description: 'Monument przed parlamentem strzeżony przez ewzonów. Tutaj odbywa się uroczysta zmiana warty.',
				wiki: 'https://en.wikipedia.org/wiki/Tomb_of_the_Unknown_Soldier_(Athens)',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/Tomb_of_Unknown_at_Syntagma_Square.jpg/1280px-Tomb_of_Unknown_at_Syntagma_Square.jpg',
				dates: ['2026-09-07T17:00']
			},
			{
				type: 'historic', title: 'Mykeny', subtitle: 'Argolida · cytadela epoki brązu',
				position: { lat: 37.73027778, lng: 22.7575 },
				description: 'Ruiny ufortyfikowanego ośrodka cywilizacji mykeńskiej z Bramą Lwic i pozostałościami pałacu.',
				wiki: 'https://en.wikipedia.org/wiki/Mycenae',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Path_upto_the_Lion_Gate%2C_Mycenae_%2828693130016%29.jpg/1280px-Path_upto_the_Lion_Gate%2C_Mycenae_%2828693130016%29.jpg',
				dates: ['2026-09-08T09:00']
			},
			{
				type: 'historic', title: 'Skarbiec Atreusza', subtitle: 'Mykeny · około 1250 roku p.n.e.',
				position: { lat: 37.72682, lng: 22.75387 },
				description: 'Monumentalny grobowiec kopułowy zwany także Grobem Agamemnona, położony poza murami cytadeli.',
				wiki: 'https://en.wikipedia.org/wiki/Treasury_of_Atreus',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Treasury_of_Atreus_Mycenae.jpg/1280px-Treasury_of_Atreus_Mycenae.jpg',
				dates: ['2026-09-08T10:30']
			},
			{
				type: 'historic', title: 'Sanktuarium Asklepiosa', subtitle: 'Epidauros · ośrodek medycyny starożytnej',
				position: { lat: 37.5967, lng: 23.0757 },
				description: 'Rozległe sanktuarium boga medycyny z pozostałościami świątyń, abatonu i okrągłej budowli zwanej tholos.',
				wiki: 'https://en.wikipedia.org/wiki/Sanctuary_of_Asclepius%2C_Epidaurus',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/The_Tholos_at_the_Sanctuary_of_Asclepius_in_Epidaurus_on_23_May_2019.jpg/1280px-The_Tholos_at_the_Sanctuary_of_Asclepius_in_Epidaurus_on_23_May_2019.jpg',
				dates: ['2026-09-08T13:00']
			},
			{
				type: 'historic', title: 'Teatr w Epidauros', subtitle: 'Epidauros · IV wiek p.n.e.',
				position: { lat: 37.59611111, lng: 23.07916667 },
				description: 'Jeden z najlepiej zachowanych teatrów greckich, ceniony za harmonijne proporcje i wyjątkową akustykę.',
				wiki: 'https://en.wikipedia.org/wiki/Ancient_Theatre_of_Epidaurus',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/The_great_theater_of_Epidaurus%2C_designed_by_Polykleitos_the_Younger_in_the_4th_century_BC%2C_Sanctuary_of_Asklepeios_at_Epidaurus%2C_Greece_%2814015010416%29.jpg/1280px-The_great_theater_of_Epidaurus%2C_designed_by_Polykleitos_the_Younger_in_the_4th_century_BC%2C_Sanctuary_of_Asklepeios_at_Epidaurus%2C_Greece_%2814015010416%29.jpg',
				dates: ['2026-09-08T14:00']
			},
			{
				type: 'historic', title: 'Akrokorynt', subtitle: 'w pobliżu starożytnego Koryntu',
				position: { lat: 37.89055556, lng: 22.8725 },
				description: 'Potężna twierdza na skalistym wzgórzu ponad Koryntem, użytkowana od starożytności po czasy osmańskie.',
				wiki: 'https://en.wikipedia.org/wiki/Acrocorinth',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Akrokorinth_nordmauern.jpg/1280px-Akrokorinth_nordmauern.jpg',
				dates: ['2026-09-08T17:00']
			}
		];

		const atractions = [
			{
				type: 'attraction', title: 'Plac Arystotelesa', subtitle: 'Saloniki · reprezentacyjne centrum miasta',
				position: { lat: 40.63238, lng: 22.94094 },
				description: 'Najbardziej rozpoznawalny plac Salonik, otwarty ku zatoce i otoczony charakterystyczną zabudową z arkadami.',
				wiki: 'https://en.wikipedia.org/wiki/Aristotelous_Square',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Aristotelous_Plateia_2006_%28cropped%29.jpg/1280px-Aristotelous_Plateia_2006_%28cropped%29.jpg',
				dates: ['2026-09-02T20:00']
			},
			{
				type: 'attraction', title: 'Nadmorska promenada w Salonikach', subtitle: 'Nea Paralia',
				position: { lat: 40.6216, lng: 22.9528 },
				description: 'Popularny spacer wzdłuż Zatoki Termajskiej, z widokiem na Olimp i instalacją „Parasole” Zongolopoulosa.',
				wiki: 'https://en.wikipedia.org/wiki/Thessaloniki',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Thessaloniki_waterfront_by_night.jpg/1280px-Thessaloniki_waterfront_by_night.jpg',
				dates: ['2026-09-02T20:30']
			},
			{
				type: 'attraction', title: 'Ladadika', subtitle: 'Saloniki · historyczna dzielnica portowa',
				position: { lat: 40.635, lng: 22.937 },
				description: 'Odrestaurowana dzielnica magazynów i kupieckich uliczek, dziś znana z tawern, kawiarni i wieczornego życia.',
				wiki: 'https://en.wikipedia.org/wiki/Ladadika',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Thessalonikki%2C_Greece_Street_Scene_45.jpg/1280px-Thessalonikki%2C_Greece_Street_Scene_45.jpg',
				dates: ['2026-09-02T21:00']
			},
			{
				type: 'attraction', title: 'Panagia — starówka Kawali', subtitle: 'Kawala · półwysep starego miasta',
				position: { lat: 40.9342, lng: 24.4160 },
				description: 'Najstarsza dzielnica Kawali z brukowanymi uliczkami, tradycyjną zabudową i szerokimi widokami na port.',
				wiki: 'https://en.wikipedia.org/wiki/Kavala',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Xersonisos_Panagia_Kavalas_me_teixos_kai_kastro_4.jpg/1280px-Xersonisos_Panagia_Kavalas_me_teixos_kai_kastro_4.jpg',
				dates: ['2026-09-03T09:30']
			},
			{
				type: 'attraction', title: 'Port w Kawali', subtitle: 'panorama dawnego Neapolis',
				position: { lat: 40.9358, lng: 24.4074 },
				description: 'Nabrzeże u stóp starego miasta pozwala zobaczyć port, do którego według Dziejów Apostolskich przybył św. Paweł.',
				wiki: 'https://en.wikipedia.org/wiki/Kavala',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Kavala%2C_Panorama.jpg/1280px-Kavala%2C_Panorama.jpg',
				dates: ['2026-09-03T09:00']
			},
			{
				type: 'attraction', title: 'Kalambaka', subtitle: 'miasto u stóp Meteorów',
				position: { lat: 39.708056, lng: 21.628355 },
				description: 'Baza noclegowa pod skalnymi filarami Meteorów i dobre miejsce na wieczorny spacer z widokiem na klasztory.',
				wiki: 'https://en.wikipedia.org/wiki/Kalabaka',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/%D0%9C%D0%B5%D1%82%D0%B5%D0%BE%D1%80%D0%B0_-_panoramio_%2814%29.jpg/1280px-%D0%9C%D0%B5%D1%82%D0%B5%D0%BE%D1%80%D0%B0_-_panoramio_%2814%29.jpg',
				dates: ['2026-09-04T18:00']
			},
			{
				type: 'attraction', title: 'Punkty widokowe Meteorów', subtitle: 'skalny krajobraz Tesalii',
				position: { lat: 39.7217, lng: 21.6328 },
				description: 'Naturalne tarasy przy drodze między klasztorami oferują panoramę skalnych wież, doliny Piniosu i Kalambaki.',
				wiki: 'https://en.wikipedia.org/wiki/Meteora',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Meteora%27s_monastery_2.jpg/1280px-Meteora%27s_monastery_2.jpg',
				dates: ['2026-09-05T15:00']
			},
			{
				type: 'attraction', title: 'Muzeum Archeologiczne w Delfach', subtitle: 'najważniejsze znaleziska sanktuarium',
				position: { lat: 38.4805, lng: 22.4997 },
				description: 'Muzeum prezentuje m.in. Woźnicę z Delf, rzeźby ze skarbców i zabytki związane z wyrocznią Apollina.',
				wiki: 'https://en.wikipedia.org/wiki/Delphi_Archaeological_Museum',
				image: 'https://upload.wikimedia.org/wikipedia/commons/6/66/Museuarqueologicodelfos.jpg',
				dates: ['2026-09-06T11:00']
			},
			{
				type: 'attraction', title: 'Arachowa', subtitle: 'górskie miasteczko koło Delf',
				position: { lat: 38.4796, lng: 22.5831 },
				description: 'Malownicza miejscowość na zboczach Parnasu, dogodny przystanek między Delfami a Osios Loukas.',
				wiki: 'https://en.wikipedia.org/wiki/Arachova',
				image: 'https://upload.wikimedia.org/wikipedia/commons/5/5c/GR-arachova.jpg',
				dates: ['2026-09-06T12:00']
			},
			{
				type: 'attraction', title: 'Plaka', subtitle: 'Ateny · stare miasto',
				position: { lat: 37.9729, lng: 23.7284 },
				description: 'Najstarsza zamieszkana dzielnica Aten, pełna neoklasycznych domów, zaułków, tawern i widoków na Akropol.',
				wiki: 'https://en.wikipedia.org/wiki/Plaka',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Carrer_del_barri_de_Plaka%2C_Atenes.JPG/1280px-Carrer_del_barri_de_Plaka%2C_Atenes.JPG',
				dates: ['2026-09-07T14:00']
			},
			{
				type: 'attraction', title: 'Wzgórze Likawitos', subtitle: 'Ateny · panorama miasta',
				position: { lat: 37.9819, lng: 23.7437 },
				description: 'Najwyższe wzgórze centrum Aten, z widokiem na Akropol, Zatokę Sarońską i okoliczne góry.',
				wiki: 'https://en.wikipedia.org/wiki/Mount_Lycabettus',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/%CE%9B%CF%85%CE%BA%CE%B1%CE%B2%CE%B7%CF%84%CF%84%CF%8C%CF%82_-_Mount_Lycabettus.jpg/1280px-%CE%9B%CF%85%CE%BA%CE%B1%CE%B2%CE%B7%CF%84%CF%84%CF%8C%CF%82_-_Mount_Lycabettus.jpg',
				dates: ['2026-09-07T18:00']
			},
			{
				type: 'attraction', title: 'Ogród Narodowy', subtitle: 'Ateny · zielona oaza przy parlamencie',
				position: { lat: 37.9736, lng: 23.7375 },
				description: 'Historyczny ogród miejski między placem Syntagma a Stadionem Panateńskim, dobry na krótki odpoczynek w trasie.',
				wiki: 'https://en.wikipedia.org/wiki/National_Garden,_Athens',
				image: 'https://upload.wikimedia.org/wikipedia/commons/d/d0/%CE%95%CE%B8%CE%BD%CE%B9%CE%BA%CF%8C%CF%82_%CE%9A%CE%AE%CF%80%CE%BF%CF%82.jpg',
				dates: ['2026-09-07T16:00']
			},
			{
				type: 'attraction', title: 'Plac Syntagma', subtitle: 'Ateny · serce współczesnego miasta',
				position: { lat: 37.9755, lng: 23.7348 },
				description: 'Główny plac Aten przed budynkiem parlamentu, bezpośrednio przy Grobie Nieznanego Żołnierza.',
				wiki: 'https://en.wikipedia.org/wiki/Syntagma_Square',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/%CE%A0%CE%BB%CE%B1%CF%84%CE%B5%CE%AF%CE%B1_%CE%A3%CF%85%CE%BD%CF%84%CE%AC%CE%B3%CE%BC%CE%B1%CF%84%CE%BF%CF%82_6386.jpg/1280px-%CE%A0%CE%BB%CE%B1%CF%84%CE%B5%CE%AF%CE%B1_%CE%A3%CF%85%CE%BD%CF%84%CE%AC%CE%B3%CE%BC%CE%B1%CF%84%CE%BF%CF%82_6386.jpg',
				dates: ['2026-09-07T17:00']
			},
			{
				type: 'attraction', title: 'Nafplio', subtitle: 'starówka w pobliżu Myken i Epidauros',
				position: { lat: 37.5670, lng: 22.7970 },
				description: 'Nadmorskie miasto z neoklasyczną starówką, dawniej pierwsza stolica niepodległej Grecji. Ciekawy przystanek na trasie przez Argolidę.',
				wiki: 'https://en.wikipedia.org/wiki/Nafplio',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/%CE%94%CE%B7%CE%BC%CE%B1%CF%81%CF%87%CE%B5%CE%AF%CE%BF_%CE%9D%CE%B1%CF%85%CF%80%CE%BB%CE%AF%CE%BF%CF%85%2C_Nafplio_Town_Hall.jpg/1280px-%CE%94%CE%B7%CE%BC%CE%B1%CF%81%CF%87%CE%B5%CE%AF%CE%BF_%CE%9D%CE%B1%CF%85%CF%80%CE%BB%CE%AF%CE%BF%CF%85%2C_Nafplio_Town_Hall.jpg',
				dates: ['2026-09-08T11:30']
			},
			{
				type: 'attraction', title: 'Twierdza Palamidi', subtitle: 'Nafplio · punkt widokowy',
				position: { lat: 37.5637, lng: 22.8074 },
				description: 'Wenecka forteca z początku XVIII wieku, położona wysoko nad Nafplio i Zatoką Argolidzką.',
				wiki: 'https://en.wikipedia.org/wiki/Palamidi',
				image: 'https://upload.wikimedia.org/wikipedia/commons/1/17/Palamidi_fortress_%28Nafplio%2C_Greece%29.jpg',
				dates: ['2026-09-08T12:00']
			},
			{
				type: 'attraction', title: 'Kanał Koryncki', subtitle: 'przesmyk Koryncki',
				position: { lat: 37.9270, lng: 22.9941 },
				description: 'Wąski, głęboko wykuty kanał łączący Zatokę Koryncką z Zatoką Sarońską, jeden z najbardziej efektownych punktów na trasie.',
				wiki: 'https://en.wikipedia.org/wiki/Corinth_Canal',
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Corinth_Canal_in_Greece.jpg/1280px-Corinth_Canal_in_Greece.jpg',
				dates: ['2026-09-08T15:00']
			},
			{
				type: 'attraction', title: 'Loutraki', subtitle: 'nadmorski kurort koło Koryntu',
				position: { lat: 37.9784, lng: 22.9778 },
				description: 'Nadmorska miejscowość z promenadą i widokiem na Zatokę Koryncką, położona blisko Kanału Korynckiego i miejsca noclegu.',
				wiki: 'https://en.wikipedia.org/wiki/Loutraki',
				image: 'https://upload.wikimedia.org/wikipedia/commons/5/5c/Loutraki.jpg',
				dates: ['2026-09-08T18:00']
			}
		];

		const hotels = [
			{
				type: 'hotels', title: 'Hotel Holiday Inn 5*', subtitle: 'Saloniki · 02–04.09.2026',
				position: { lat: 40.64172, lng: 22.93379 },
				description: 'Pobyt w dniach 02–04.09.2026.',
				links: [{ label: 'Strona WWW', url: 'https://www.ihg.com/holidayinn/hotels/pl/pl/thessaloniki/skgti/hoteldetail' }],
				dates: ['2026-09-02T21:00', '2026-09-03T21:00', '2026-09-04T09:00'],
				image: '/grecjaszlakiemswpawla/HotelSaloniki/holiday-inn-thessaloniki.avif',
				folder: '/grecjaszlakiemswpawla/HotelSaloniki'
			},
			{
				type: 'hotels', title: 'Hotel Antoniadis 4*', subtitle: 'Kalambaka · 04–05.09.2026',
				position: { lat: 39.70225, lng: 21.63145 },
				description: 'Pobyt w dniach 04–05.09.2026.',
				links: [{ label: 'Strona WWW', url: 'https://hotelantoniadis.gr' }],
				dates: ['2026-09-04T21:00', '2026-09-05T09:00'],
				image: '/grecjaszlakiemswpawla/HotelAntoniadis/HotelAntoniadis.jpg',
				folder: '/grecjaszlakiemswpawla/HotelAntoniadis'
			},
			{
				type: 'hotels', title: 'Hotel Nidimos 3*', subtitle: 'Delfy · 05–06.09.2026',
				position: { lat: 38.47973, lng: 22.49158 },
				description: 'Pobyt w dniach 05-06.09.2026.',
				links: [{ label: 'Strona WWW', url: 'https://www.nidimoshotel.gr/' }],
				dates: ['2026-09-05T21:00', '2026-09-06T09:00'],
				image: '/grecjaszlakiemswpawla/HotelNidimos/HotelNidimos.jpg',
				folder: '/grecjaszlakiemswpawla/HotelNidimos'
			},
			{
				type: 'hotels', title: 'Hotel Candia 4*', subtitle: 'Ateny · 06–08.09.2026',
				position: { lat: 37.98916, lng: 23.72041 },
				description: 'Pobyt w dniach 06–08.09.2026.',
				links: [{ label: 'Strona WWW', url: 'https://www.candia-hotel.gr/' }],
				dates: ['2026-09-06T21:00', '2026-09-07T21:00', '2026-09-08T09:00'],
				image: '/grecjaszlakiemswpawla/HotelCandia/HotelCandia.jpg',
				folder: '/grecjaszlakiemswpawla/HotelCandia'
			},
			{
				type: 'hotels', title: 'Hotel Alkyon 5*', subtitle: 'Vrachati · 08–10.09.2026',
				position: { lat: 37.9635836, lng: 22.7995808 },
				description: 'Pobyt w dniach 08–10.09.2026.',
				links: [{ label: 'Strona WWW', url: 'https://www.alkyonhotel.gr/' }],
				dates: ['2026-09-08T21:00', '2026-09-09T21:00', '2026-09-10T09:00'],
				image: '/grecjaszlakiemswpawla/HotelAlkyon/HotelAlkyon.jpg',
				folder: '/grecjaszlakiemswpawla/HotelAlkyon'
			}
		];

		const cruiseDate = '2026-09-07';
		const cruiseStops = [
			{
				type: 'cruise', cruiseOrder: 0, markerLabel: 'P', title: 'Pireus',
				subtitle: 'Dzień VI · port wypłynięcia i powrotu',
				position: { lat: 37.9429, lng: 23.6467 },
				description: 'Port rozpoczęcia i zakończenia całodziennego rejsu po Wyspach Sarońskich. Zaznaczona na mapie pętla ma charakter orientacyjny.',
				wiki: 'https://pl.wikipedia.org/wiki/Pireus',
				dates: ['2026-09-07T07:00'],
				suppressRoutePlanner: true
			},
			{
				type: 'cruise', cruiseOrder: 1, markerLabel: '1', title: 'Egina',
				subtitle: 'Wyspy Sarońskie · Egina',
				position: { lat: 37.7461, lng: 23.4275 },
				description: 'Pierwszy hipotetyczny przystanek rejsu: port w Eginie.',
				wiki: 'https://pl.wikipedia.org/wiki/Egina_(wyspa)',
				dates: ['2026-09-07T10:30'],
				suppressRoutePlanner: true
			},
			{
				type: 'cruise', cruiseOrder: 2, markerLabel: '2', title: 'Poros',
				subtitle: 'Wyspy Sarońskie · Poros',
				position: { lat: 37.5009, lng: 23.4547 },
				description: 'Drugi hipotetyczny przystanek rejsu: zielona wyspa Poros i jej portowe miasteczko.',
				wiki: 'https://pl.wikipedia.org/wiki/Poros',
				dates: ['2026-09-07T13:00'],
				suppressRoutePlanner: true
			},
			{
				type: 'cruise', cruiseOrder: 3, markerLabel: '3', title: 'Hydra',
				subtitle: 'Wyspy Sarońskie · Hydra',
				position: { lat: 37.3498, lng: 23.4656 },
				description: 'Trzeci hipotetyczny przystanek rejsu: port na Hydrze, wyspie znanej z kamiennej zabudowy i ulic wolnych od samochodów, przed powrotem do Pireusu.',
				wiki: 'https://pl.wikipedia.org/wiki/Hydra_(wyspa)',
				dates: ['2026-09-07T16:30'],
				suppressRoutePlanner: true
			}
		];

		const locations = places.concat(historic, atractions, hotels, cruiseStops);

		/* ===== Detekcja urządzenia mobilnego ===== */
		function isMobile() {
			const coarsePointer = window.matchMedia('(pointer: coarse)').matches || navigator.maxTouchPoints > 0;
			return window.innerWidth <= 768 || (coarsePointer && window.innerWidth <= 1024);
		}

		/* ===== Ikony markerów (SVG data URI) ===== */
		function svgUri(svg) {
			return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
		}

		function placeIcon(n) {
			const mobile = isMobile();
			const w = mobile ? 50 * 0.65 : 46;
			const h = mobile ? 65 * 0.65 : 60;
			const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="46" height="60" viewBox="0 0 46 60">
				<defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
				<stop offset="0" stop-color="#e6c75a"/><stop offset="1" stop-color="#b8901f"/></linearGradient></defs>
				<path d="M23 59C23 59 43 33 43 21A20 20 0 1 0 3 21C3 33 23 59 23 59Z" fill="url(#g)" stroke="#7a5e12" stroke-width="1.5"/>
				<circle cx="23" cy="21" r="13.5" fill="#fffaf0"/>
				<text x="23" y="27.5" font-family="Georgia, 'Times New Roman', serif" font-size="18" font-weight="700" fill="#7a5e12" text-anchor="middle">${n}</text>
			</svg>`;
			return { url: svgUri(svg), scaledSize: new google.maps.Size(w, h), anchor: new google.maps.Point(w / 2, h) };
		}

		function historicIcon() {
			const mobile = isMobile();
			const w = mobile ? 42 * 0.65 : 38;
			const h = mobile ? 55 * 0.65 : 50;
			const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="38" height="50" viewBox="0 0 38 50">
				<path d="M19 49C19 49 35 28 35 18A16 16 0 1 0 3 18C3 28 19 49 19 49Z" fill="#7c1f2e" stroke="#4d101a" stroke-width="1.4"/>
				<g transform="translate(9.5,8) scale(1.18)" fill="#f6e7c1">
				<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></g>
			</svg>`;
			return { url: svgUri(svg), scaledSize: new google.maps.Size(w, h), anchor: new google.maps.Point(w / 2, h) };
		}

		function attractionIcon() {
			const mobile = isMobile();
			const w = mobile ? 34 * 0.65 : 30;
			const h = mobile ? 45 * 0.65 : 40;
			const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="40" viewBox="0 0 30 40">
				<path d="M15 39C15 39 28 22 28 13.5A13 13 0 1 0 2 13.5C2 22 15 39 15 39Z" fill="#0d9488" stroke="#08534c" stroke-width="1.2"/>
				<g transform="translate(7.2,5.6) scale(0.95)" fill="#ffffff">
				<path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/></g>
			</svg>`;
			return { url: svgUri(svg), scaledSize: new google.maps.Size(w, h), anchor: new google.maps.Point(w / 2, h) };
		}

		function hotelsIcon() {
			const mobile = isMobile();
			const w = mobile ? 30 * 0.65 : 28;
			const h = mobile ? 41 * 0.65 : 38;
			const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="38" viewBox="0 0 28 38">
				<path d="M14 37C14 37 26 20 26 12.5A12 12 0 1 0 2 12.5C2 20 14 37 14 37Z" fill="#5b6b8c" stroke="#33415c" stroke-width="1.1"/>
				<circle cx="14" cy="12.5" r="4.5" fill="#fff"/>
			</svg>`;
			return { url: svgUri(svg), scaledSize: new google.maps.Size(w, h), anchor: new google.maps.Point(w / 2, h) };
		}

		function stayIcon() {
			const mobile = isMobile();
			const w = mobile ? 46 * 0.65 : 44;
			const h = mobile ? 59 * 0.65 : 56;
			const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="44" height="56" viewBox="0 0 44 56">
				<path d="M22 55C22 55 41 31 41 20A19 19 0 1 0 3 20C3 31 22 55 22 55Z" fill="#14243b" stroke="#d4af37" stroke-width="2"/>
				<path d="M22 9l10 8v1h-3v9H15v-9h-3v-1z" fill="#d4af37"/>
				<rect x="20" y="21" width="4" height="5" fill="#14243b"/>
			</svg>`;
			return { url: svgUri(svg), scaledSize: new google.maps.Size(w, h), anchor: new google.maps.Point(w / 2, h) };
		}

		function cruiseIcon(label, isPort) {
			const mobile = isMobile();
			const w = mobile ? 44 * 0.72 : 44;
			const h = mobile ? 56 * 0.72 : 56;
			const topColor = isPort ? '#14243b' : '#74d7e8';
			const bottomColor = isPort ? '#24507f' : '#147d9c';
			const textColor = isPort ? '#f6e9c4' : '#0b3b4a';
			const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="44" height="56" viewBox="0 0 44 56">
				<defs><linearGradient id="cruise-gradient" x1="0" y1="0" x2="0" y2="1">
					<stop offset="0" stop-color="${topColor}"/><stop offset="1" stop-color="${bottomColor}"/>
				</linearGradient></defs>
				<path d="M22 55C22 55 41 31 41 20A19 19 0 1 0 3 20C3 31 22 55 22 55Z" fill="url(#cruise-gradient)" stroke="#f3d36d" stroke-width="2"/>
				<circle cx="22" cy="20" r="13" fill="#fffdf8" fill-opacity=".93"/>
				<text x="22" y="22" font-family="Montserrat,Arial,sans-serif" font-size="12" font-weight="700" fill="${textColor}" text-anchor="middle">${label}</text>
				<path d="M13 27c3-2 5 2 8 0s5 2 9 0" fill="none" stroke="#147d9c" stroke-width="1.7" stroke-linecap="round"/>
			</svg>`;
			return { url: svgUri(svg), scaledSize: new google.maps.Size(w, h), anchor: new google.maps.Point(w / 2, h) };
		}

		function showCruisePortsInfo() {
			showInfo('<strong>Dzień VI · porty rejsu:</strong> Pireus → Egina → Poros → Hydra → Pireus. Pireus jest portem wypłynięcia i powrotu.');
		}

		function focusCruisePorts() {
			if (!map || !window.google) return;
			if (selectedDates.size > 0 && !selectedDates.has(cruiseDate)) {
				selectedDates.clear();
				selectedDates.add(cruiseDate);
				document.querySelectorAll('.tl-date').forEach(button => {
					button.classList.toggle('active', button.dataset.date === cruiseDate);
				});
				applyTimelineFilter();
			}
			const checkbox = document.getElementById('toggle-cruise');
			if (checkbox && !checkbox.checked) {
				checkbox.checked = true;
				toggleGroup('cruise', true);
			}
			const bounds = new google.maps.LatLngBounds();
			cruiseStops.forEach(stop => bounds.extend(stop.position));
			map.fitBounds(bounds, { top: 72, bottom: 72, left: 72, right: 72 });
			showCruisePortsInfo();
		}

		/* ===== Budowa treści okna informacyjnego ===== */
		function escapeHtml(value) {
			return String(value).replace(/[&<>"']/g, character => ({
				'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'
			})[character]);
		}

		function distanceBetweenPositions(first, second) {
			const earthRadiusKm = 6371;
			const toRadians = degrees => degrees * Math.PI / 180;
			const latitudeDifference = toRadians(second.lat - first.lat);
			const longitudeDifference = toRadians(second.lng - first.lng);
			const firstLatitude = toRadians(first.lat);
			const secondLatitude = toRadians(second.lat);
			const haversine = Math.sin(latitudeDifference / 2) ** 2
				+ Math.cos(firstLatitude) * Math.cos(secondLatitude) * Math.sin(longitudeDifference / 2) ** 2;
			return 2 * earthRadiusKm * Math.asin(Math.sqrt(haversine));
		}

		function formatMarkerDistance(distanceKm) {
			if (distanceKm < 1) return `${Math.round(distanceKm * 1000)} m`;
			if (distanceKm < 10) return `${distanceKm.toFixed(1)} km`;
			return `${Math.round(distanceKm)} km`;
		}

		function buildRouteOriginOptions(destinationIndex) {
			const destination = locations[destinationIndex];
			let options = '<option value="current">📍 Aktualna lokalizacja</option>';
			if (!destination) return options;

			const markerOrigins = locations
				.map((location, index) => ({
					location: location,
					index: index,
					distance: distanceBetweenPositions(location.position, destination.position)
				}))
				.filter(origin => origin.index !== destinationIndex && origin.location.type !== 'cruise')
				.sort((first, second) => first.distance - second.distance);

			if (markerOrigins.length > 0) {
				options += '<optgroup label="Inne markery — od najbliższego">';
				markerOrigins.forEach(origin => {
					const label = `${origin.location.title} · ${formatMarkerDistance(origin.distance)}`;
					options += `<option value="${origin.index}">📌 ${escapeHtml(label)}</option>`;
				});
				options += '</optgroup>';
			}

			return options;
		}

		function buildLocationActions(loc, index, fromModal = false) {
			let h = '';
			const hasGallery = Boolean(
				loc.folder ||
				loc.image ||
				(Array.isArray(loc.gallery) && loc.gallery.length > 0)
			);
			if (index >= 0 && hasGallery) {
				const galleryAction = fromModal ? `openLocationGallery(${index})` : `openGallery(${index})`;
				h += `<button type="button" class="iw-btn gold" onclick="${galleryAction}"><i class="bi bi-images"></i> Galeria</button>`;
			}
			if (loc.wiki) h += `<a class="iw-btn" href="${loc.wiki}" target="_blank" rel="noopener"><i class="bi bi-book"></i> Wikipedia</a>`;
			if (loc.link) h += `<a class="iw-btn" href="${loc.link}" target="_blank" rel="noopener"><i class="bi bi-info-circle"></i> Informacje</a>`;
			if (Array.isArray(loc.links)) loc.links.forEach(l => { h += `<a class="iw-btn" href="${l.url}" target="_blank" rel="noopener"><i class="bi bi-link-45deg"></i> ${l.label}</a>`; });

			if (!loc.suppressRoutePlanner) {
				h += '<div class="route-planner-controls">';
				h += `<select class="iw-btn route-origin-select" aria-label="Wybierz punkt początkowy trasy">
					${buildRouteOriginOptions(index)}
				</select>`;
				h += `<select class="iw-btn route-mode-select" aria-label="Wybierz sposób podróży" onchange="if(this.value) startRouteFromActions(this, ${index}, this.value, ${fromModal});">
					<option value="" disabled selected>Wyznacz trasę...</option>
					<option value="DRIVING">🚗 Samochodem</option>
					<option value="BICYCLING">🚲 Rowerem</option>
					<option value="WALKING">🚶 Pieszo</option>
				</select>`;
				h += '</div>';
			}
			h += `<a class="iw-btn" href="https://www.google.com/maps/search/?api=1&query=${loc.position.lat},${loc.position.lng}" target="_blank" rel="noopener"><i class="bi bi-geo-alt"></i> Google Maps</a>`;
			return h;
		}

		function buildBibleReferenceUrl(reference) {
			if (!lumenBibleLinksEnabled) {
				return `https://biblia.deon.pl/otworz.php?skrot=${encodeURIComponent(reference)}`;
			}

			const normalizedReference = reference.replaceAll('–', '-');
			const separatorIndex = normalizedReference.lastIndexOf(' ');
			const book = normalizedReference
				.slice(0, separatorIndex)
				.replaceAll('Ł', 'L')
				.replaceAll('ł', 'l')
				.replaceAll(' ', '');
			const passage = normalizedReference.slice(separatorIndex + 1);

			return `https://lumen.favourite.pl/biblia-online/${encodeURIComponent(book)}/${passage}`;
		}

		function buildQuotations(loc, elementName, className) {
			if (!Array.isArray(loc.quotations)) return '';

			return loc.quotations
				.filter(quotation => quotation.verse || quotation.ref)
				.map(quotation => {
					const verse = quotation.verse ? `„${quotation.verse}”` : '';
					const reference = quotation.ref
						? `<a class="ref" href="${buildBibleReferenceUrl(quotation.ref)}" target="_blank" rel="noopener">${quotation.ref}</a>`
						: '';
					return `<${elementName} class="${className}">${verse}${reference}</${elementName}>`;
				})
				.join('');
		}

		function buildMobileLocationContent(loc, index) {
			const hasGallery = Array.isArray(loc.gallery) && loc.gallery.length > 0;
			const hero = loc.image || (hasGallery ? loc.gallery[0] : '');
			let h = '<article class="location-detail">';

			if (hero || loc.type === 'cruise') {
				h += `<div class="location-detail-hero${loc.type === 'cruise' ? ' cruise-hero' : ''}">`;
				if (hero) h += `<img src="${hero}" alt="${loc.title}" onerror="this.style.display='none'">`;
				if (loc.type === 'cruise') h += '<div class="cruise-emblem"><i class="bi bi-water"></i><span>Wyspy Sarońskie</span></div>';
				if (loc.type === 'place') h += `<span class="location-detail-badge">${loc.number}</span>`;
				if (loc.type === 'historic') h += '<span class="location-detail-tag">miejsce historyczne</span>';
				if (loc.type === 'attraction') h += '<span class="location-detail-tag">atrakcja</span>';
				if (loc.type === 'hotels') h += '<span class="location-detail-tag">nocleg</span>';
				if (loc.type === 'cruise') h += '<span class="location-detail-tag">rejs · dzień VI</span>';
				h += '</div>';
			}

			h += '<div class="location-detail-copy">';
			h += buildQuotations(loc, 'blockquote', 'location-detail-verse');
			if (loc.description) h += `<p class="location-detail-desc">${loc.description}</p>`;
			h += `<div class="location-detail-actions">${buildLocationActions(loc, index, true)}</div>`;
			h += '</div></article>';
			return h;
		}

		function openLocationModal(loc, index) {
			if (infoWindow) infoWindow.close();

			const title = document.getElementById('locationModalLabel');
			const subtitle = document.getElementById('locationModalSubtitle');
			const body = document.getElementById('locationModalBody');
			title.textContent = loc.title || 'Szczegóły miejsca';
			subtitle.textContent = loc.subtitle || '';
			subtitle.hidden = !loc.subtitle;
			body.innerHTML = buildMobileLocationContent(loc, index);
			body.scrollTop = 0;

			bootstrap.Modal.getOrCreateInstance(document.getElementById('locationModal')).show();
		}

		function closeLocationModal() {
			const modal = document.getElementById('locationModal');
			bootstrap.Modal.getInstance(modal)?.hide();
		}

		function openLocationGallery(index) {
			const modal = document.getElementById('locationModal');
			const instance = bootstrap.Modal.getInstance(modal);
			if (!instance) {
				openGallery(index);
				return;
			}
			modal.addEventListener('hidden.bs.modal', () => openGallery(index), { once: true });
			instance.hide();
		}

		function buildContent(loc, index) {
			const hasGallery = Array.isArray(loc.gallery) && loc.gallery.length > 0;
			const hero = loc.image || (hasGallery ? loc.gallery[0] : '');
			let h = '<div class="iw">';

			h += '<div class="iw-head">';
			h += `<h3 class="iw-title">${loc.title}</h3>`;
			if (loc.subtitle) h += `<div class="iw-sub">${loc.subtitle}</div>`;
			h += '</div>';

			h += `<div class="iw-hero${loc.type === 'cruise' ? ' cruise-hero' : ''}">`;
			if (hero) h += `<img src="${hero}" alt="${loc.title}" onerror="this.style.display='none'">`;
			if (loc.type === 'cruise') h += '<div class="cruise-emblem"><i class="bi bi-water"></i><span>Wyspy Sarońskie</span></div>';
			if (loc.type === 'place') h += `<span class="iw-badge">${loc.number}</span>`;
			if (loc.type === 'historic') h += '<span class="iw-tag">miejsce historyczne</span>';
			if (loc.type === 'attraction') h += '<span class="iw-tag">atrakcja</span>';
			if (loc.type === 'cruise') h += '<span class="iw-tag">rejs · dzień VI</span>';
			h += '</div>';

			h += '<div class="iw-body">';
			h += buildQuotations(loc, 'p', 'iw-verse');
			if (loc.description) h += `<p class="iw-desc">${loc.description}</p>`;

			h += '<div class="iw-actions">';
			h += buildLocationActions(loc, index);
			h += '</div></div></div>';
			return h;
		}

		/* ===== Inicjalizacja mapy ===== */
		function initMap() {
			directionsService = new google.maps.DirectionsService();
			directionsDisplay = new google.maps.DirectionsRenderer({
				suppressMarkers: true,
				polylineOptions: { strokeColor: '#c9a227', strokeOpacity: 0.9, strokeWeight: 4 }
			});

			map = new google.maps.Map(document.getElementById('map'), {
				zoom: 5,
				center: { lat: 39.1, lng: 22.3 },
				mapTypeControl: true,
				streetViewControl: false,
				fullscreenControl: true,
				scaleControl: true,
				styles: [{ "featureType": "water", "stylers": [{ "saturation": 43 }, { "lightness": -11 }, { "hue": "#0088ff" }] }, { "featureType": "road", "elementType": "geometry.fill", "stylers": [{ "hue": "#ff0000" }, { "saturation": -100 }, { "lightness": 99 }] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [{ "color": "#808080" }, { "lightness": 54 }] }, { "featureType": "landscape.man_made", "elementType": "geometry.fill", "stylers": [{ "color": "#ece2d9" }] }, { "featureType": "poi.park", "elementType": "geometry.fill", "stylers": [{ "color": "#ccdca1" }] }, { "featureType": "road", "elementType": "labels.text.fill", "stylers": [{ "color": "#767676" }] }, { "featureType": "road", "elementType": "labels.text.stroke", "stylers": [{ "color": "#ffffff" }] }, { "featureType": "poi", "stylers": [{ "visibility": "off" }] }, { "featureType": "landscape.natural", "elementType": "geometry.fill", "stylers": [{ "visibility": "on" }, { "color": "#b8cb93" }] }, { "featureType": "poi.park", "stylers": [{ "visibility": "on" }] }]
			});

			directionsDisplay.setMap(map);
			trafficLayer = new google.maps.TrafficLayer();
			infoWindow = new google.maps.InfoWindow({ maxWidth: isMobile() ? 290 : 332 });

			// Markery wszystkich lokalizacji
			locations.forEach((loc, index) => {
				let icon;
				if (loc.type === 'place') icon = placeIcon(loc.number);
				else if (loc.type === 'historic') icon = historicIcon();
				else if (loc.type === 'attraction') icon = attractionIcon();
				else if (loc.type === 'hotels') icon = stayIcon();
				else if (loc.type === 'cruise') icon = cruiseIcon(loc.markerLabel, loc.cruiseOrder === 0);
				else icon = hotelsIcon();

				const marker = new google.maps.Marker({
					position: loc.position, map: map, title: loc.title, icon: icon,
					zIndex: loc.type === 'place' ? 1000 : (loc.type === 'cruise' ? 900 : (loc.type === 'historic' ? 800 : 400))
				});
				marker.addListener('click', () => {
					if (isMobile()) {
						openLocationModal(loc, index);
						return;
					}
					infoWindow.setContent(buildContent(loc, index));
					infoWindow.open(map, marker);
				});
				if (loc.type === 'place') placeMarkers[loc.number] = marker;

				const groupKey = markersGroup[loc.type] ? loc.type : 'hotels';
				markersGroup[groupKey].push(marker);
				allMarkerData.push({ marker: marker, dates: loc.dates || [], type: loc.type });
			});

			buildPills();
			fitInitialView();
		}

		/* ===== Pasek 7 miejsc + mobilny dropdown ===== */
		function buildPills() {
			const bar = document.getElementById('pillbar');
			const grid = document.getElementById('placeDropdownGrid');
			places.forEach(c => {
				// Desktop pill
				const pill = document.createElement('div');
				pill.className = 'pill';
				pill.innerHTML = `<span class="n">${c.number}</span> ${c.title}`;
				pill.onclick = () => flyToPlace(c.number);
				bar.appendChild(pill);

				// Mobile place card
				if (grid) {
					const card = document.createElement('div');
					card.className = 'place-card';
					const subText = c.subtitle ? c.subtitle.replace(/obecnie\s*/i, '') : '';
					card.innerHTML = `<span class="cc-num">${c.number}</span><div class="cc-info"><div class="cc-name">${c.title}</div>${subText ? '<div class="cc-sub">' + subText + '</div>' : ''}</div>`;
					card.onclick = () => { flyToPlace(c.number); togglePlaceDropdown(); };
					grid.appendChild(card);
				}
			});
		}

		/* ===== Mobilne menu i dropdown miejsc ===== */
		function toggleMobileMenu() {
			const menu = document.getElementById('mobileMenu');
			menu.classList.toggle('open');
			document.body.style.overflow = menu.classList.contains('open') ? 'hidden' : '';
		}

		function togglePlaceDropdown() {
			const dd = document.getElementById('placeDropdown');
			dd.classList.toggle('open');
			document.body.style.overflow = dd.classList.contains('open') ? 'hidden' : '';
		}

		function openMobileFilters() {
			const filterModal = new bootstrap.Modal(document.getElementById('filterModal'));
			filterModal.show();
		}

		function syncMobileTrafficBtn() {
			const btn = document.getElementById('mobileTrafficBtn');
			if (btn) {
				btn.classList.toggle('active', trafficVisible);
			}
		}

		function syncMobileTimelineBtn() {
			const btn = document.getElementById('mobileTimelineBtn');
			if (btn) {
				btn.classList.toggle('active', timelineVisible);
			}
		}


		function flyToPlace(n) {
			const cb = document.getElementById('toggle-place');
			if (cb && !cb.checked) {
				cb.checked = true;
				toggleGroup('place', true);
			}
			const m = placeMarkers[n];
			if (!m) return;
			map.panTo(m.getPosition());
			map.setZoom(13);
			google.maps.event.trigger(m, 'click');
		}

		function fitPlaces() {
			const b = new google.maps.LatLngBounds();
			places.forEach(c => b.extend(c.position));
			map.fitBounds(b, { top: 60, bottom: 60, left: 60, right: 60 });
		}

		/* ===== Lokalizacja użytkownika ===== */
		function setUserLocation(position) {
			miejsce = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
			new google.maps.Marker({
				position: miejsce, map: map, title: 'Twoja lokalizacja',
				icon: {
					url: svgUri(`<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><circle cx="11" cy="11" r="8" fill="#dc3545" stroke="#fff" stroke-width="3"/></svg>`),
					scaledSize: new google.maps.Size(22, 22), anchor: new google.maps.Point(11, 11)
				}
			});
		}

		function getLocation() {
			if (!navigator.geolocation) { showInfo('Twoja przeglądarka nie obsługuje lokalizacji.'); return; }
			navigator.geolocation.getCurrentPosition(pos => {
				setUserLocation(pos);
				map.setCenter(miejsce);
				map.setZoom(13);
				showInfo('Twoja lokalizacja: ' + pos.coords.latitude.toFixed(5) + ', ' + pos.coords.longitude.toFixed(5));
			}, () => showInfo('Nie udało się ustalić lokalizacji.'));
		}

		function showInfo(text) {
			const el = document.getElementById('mapinfo');
			el.innerHTML = `<span class="mapinfo-content">${text}</span>
				<button type="button" class="mapinfo-close" onclick="closeMapInfo()" aria-label="Zamknij komunikat" title="Zamknij">
					<i class="bi bi-x-lg" aria-hidden="true"></i>
				</button>`;
			el.classList.add('show');
		}

		function closeMapInfo() {
			const el = document.getElementById('mapinfo');
			routeRequestSequence += 1;
			el.classList.remove('show');
			el.innerHTML = '';
		}

		function getTraffic() {
			const btn = document.getElementById('trafficBtn');
			if (!trafficVisible) { trafficLayer.setMap(map); trafficVisible = true; btn.classList.add('active'); }
			else { trafficLayer.setMap(null); trafficVisible = false; btn.classList.remove('active'); }
		}

		function toggleGroup(type, isVisible) {
			const group = markersGroup[type];
			if (!group) return;
			group.forEach(marker => {
				marker.setMap(isVisible ? map : null);
			});
			if (!isVisible) {
				infoWindow.close();
			}

			// Sync checkbox states between legend and mobile filter modal
			const cbLegend = document.getElementById('toggle-' + type);
			const cbModal = document.getElementById('m-toggle-' + type);
			if (cbLegend && cbLegend.checked !== isVisible) cbLegend.checked = isVisible;
			if (cbModal && cbModal.checked !== isVisible) cbModal.checked = isVisible;
			if (selectedDates.size > 0) {
				applyTimelineFilter();
			}
		}

		/* ===== Trasy ===== */
		function startRouteFromActions(modeSelect, destinationIndex, mode, closeModalAfterRoute) {
			const controls = modeSelect.closest('.route-planner-controls');
			const originSelect = controls ? controls.querySelector('.route-origin-select') : null;
			const origin = originSelect ? originSelect.value : 'current';
			modeSelect.value = '';
			showRouteToLocation(destinationIndex, mode, origin);
			if (closeModalAfterRoute) closeLocationModal();
		}

		function showRouteToLocation(destinationIndex, mode, originSelection) {
			const destination = locations[destinationIndex];
			if (!destination) {
				showInfo('Nie udało się odczytać punktu docelowego.');
				return;
			}

			mode = mode || 'DRIVING';
			currentRouteMode = null;
			currentRouteTarget = {
				lat: destination.position.lat,
				lng: destination.position.lng,
				title: destination.title
			};

			if (originSelection !== 'current') {
				const originLocation = locations[Number.parseInt(originSelection, 10)];
				if (!originLocation) {
					showInfo('Nie udało się odczytać wybranego punktu początkowego.');
					return;
				}

				currentRouteOrigin = {
					lat: originLocation.position.lat,
					lng: originLocation.position.lng,
					title: originLocation.title
				};
				showRouteFromTo(
					currentRouteOrigin.lat,
					currentRouteOrigin.lng,
					currentRouteTarget.lat,
					currentRouteTarget.lng,
					mode
				);
				return;
			}

			if (!miejsce) {
				if (navigator.geolocation) {
					navigator.geolocation.getCurrentPosition(pos => {
						setUserLocation(pos);
						currentRouteOrigin = { lat: miejsce.lat(), lng: miejsce.lng(), title: 'Twoja lokalizacja' };
						showRouteFromTo(
							currentRouteOrigin.lat,
							currentRouteOrigin.lng,
							currentRouteTarget.lat,
							currentRouteTarget.lng,
							mode
						);
					}, () => showInfo('Aby wyznaczyć trasę, włącz dostęp do lokalizacji.'));
				} else { showInfo('Twoja przeglądarka nie obsługuje lokalizacji.'); }
				return;
			}

			currentRouteOrigin = { lat: miejsce.lat(), lng: miejsce.lng(), title: 'Twoja lokalizacja' };
			showRouteFromTo(
				currentRouteOrigin.lat,
				currentRouteOrigin.lng,
				currentRouteTarget.lat,
				currentRouteTarget.lng,
				mode
			);
		}

		function getRouteModeInfo(mode) {
			const modes = {
				DRIVING: { icon: '<i class="bi bi-car-front"></i>', label: 'Samochód', routeType: 'samochodowej' },
				BICYCLING: { icon: '<i class="bi bi-bicycle"></i>', label: 'Rower', routeType: 'rowerowej' },
				WALKING: { icon: '<i class="bi bi-person-walking"></i>', label: 'Pieszo', routeType: 'pieszej' }
			};
			return modes[mode] || modes.DRIVING;
		}

		function buildRouteModeButtons(activeMode) {
			return `<span class="ms-2 d-inline-flex gap-1" style="vertical-align: middle;">
				<button type="button" class="route-mode-btn ${activeMode === 'DRIVING' ? 'active' : ''}" onclick="changeRouteMode('DRIVING')" title="Samochodem" aria-label="Wyznacz trasę samochodem" aria-pressed="${activeMode === 'DRIVING'}"><i class="bi bi-car-front"></i></button>
				<button type="button" class="route-mode-btn ${activeMode === 'BICYCLING' ? 'active' : ''}" onclick="changeRouteMode('BICYCLING')" title="Rowerem" aria-label="Wyznacz trasę rowerem" aria-pressed="${activeMode === 'BICYCLING'}"><i class="bi bi-bicycle"></i></button>
				<button type="button" class="route-mode-btn ${activeMode === 'WALKING' ? 'active' : ''}" onclick="changeRouteMode('WALKING')" title="Pieszo" aria-label="Wyznacz trasę pieszo" aria-pressed="${activeMode === 'WALKING'}"><i class="bi bi-person-walking"></i></button>
			</span>`;
		}

		function buildRouteHeading() {
			const originTitle = currentRouteOrigin ? currentRouteOrigin.title : 'Punkt początkowy';
			const targetTitle = currentRouteTarget ? currentRouteTarget.title : 'Cel';
			return `<strong>${escapeHtml(originTitle)}</strong> → <strong>${escapeHtml(targetTitle)}</strong>`;
		}

		function showRouteFromTo(fromLat, fromLng, toLat, toLng, mode) {
			const requestSequence = ++routeRequestSequence;
			const travelMode = google.maps.TravelMode[mode] || google.maps.TravelMode.DRIVING;
			directionsService.route({
				origin: new google.maps.LatLng(fromLat, fromLng),
				destination: new google.maps.LatLng(toLat, toLng),
				travelMode: travelMode
			}, function (response, status) {
				if (requestSequence !== routeRequestSequence) return;

				if (status === google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
					const route = response.routes[0];
					const modeInfo = getRouteModeInfo(mode);
					const routeDetails = route.legs
						.map(leg => `${leg.distance.text} · ${leg.duration.text}`)
						.join(' · ');
					currentRouteMode = mode;
					showInfo(`${buildRouteHeading()}<br>${modeInfo.icon} ${modeInfo.label}: ${routeDetails} ${buildRouteModeButtons(currentRouteMode)}`);
				} else {
					const modeInfo = getRouteModeInfo(mode);
					const errorMessage = status === google.maps.DirectionsStatus.ZERO_RESULTS
						? `Google Maps nie znalazło trasy ${modeInfo.routeType} dla tego odcinka. Wybierz inny środek transportu.`
						: `Nie udało się wyznaczyć trasy (${escapeHtml(status)}). Spróbuj ponownie lub wybierz inny środek transportu.`;
					showInfo(`${buildRouteHeading()}<br><span class="route-error">${errorMessage}</span> ${buildRouteModeButtons(currentRouteMode)}`);
				}
			});
		}

		function changeRouteMode(mode) {
			if (currentRouteOrigin && currentRouteTarget) {
				showRouteFromTo(
					currentRouteOrigin.lat,
					currentRouteOrigin.lng,
					currentRouteTarget.lat,
					currentRouteTarget.lng,
					mode
				);
			}
		}

		/* ===== Nazwa folderu na zdjęcia danego miejsca ===== */
		function folderName(loc) {
			if (loc.folder) return loc.folder;
			const map = { 'ą': 'a', 'ć': 'c', 'ę': 'e', 'ł': 'l', 'ń': 'n', 'ó': 'o', 'ś': 's', 'ź': 'z', 'ż': 'z', 'Ą': 'A', 'Ć': 'C', 'Ę': 'E', 'Ł': 'L', 'Ń': 'N', 'Ó': 'O', 'Ś': 'S', 'Ź': 'Z', 'Ż': 'Z' };
			return loc.title
				.replace(/[ąćęłńóśźżĄĆĘŁŃÓŚŹŻ]/g, c => map[c])
				.replace(/[„”"’'<>:/\\|?*]/g, '')
				.replace(/\s+/g, ' ')
				.trim();
		}

		/* ===== Galeria zdjęć (wczytywana dynamicznie przez API) ===== */
		function openGallery(index) {
			const loc = locations[index];
			if (!loc) return;
			const title = loc.title;
			const folder = folderName(loc);
			document.getElementById('galleryModalLabel').innerText = 'Galeria: ' + title;
			const body = document.getElementById('galleryModalBody');
			body.innerHTML = '<div class="spinner-wrap"><div class="spinner-border text-warning" role="status"><span class="visually-hidden">Ładowanie…</span></div><div class="gallery-meta mt-3">Wczytywanie zdjęć…</div></div>';

			const modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('galleryModal'));
			modal.show();

			// Podpowiedź dla administratora/użytkownika
			const hint = `<div class="gallery-meta mt-3 p-2 bg-dark rounded border border-secondary text-secondary">Aby dodać własne zdjęcia tego miejsca z oryginalnymi nazwami, umieść je w folderze <code>public${folder}/</code>, a mniejsze wersje do podglądu w <code>public${folder}/small/</code>.</div>`;

			// Pobierz listę zdjęć z Symfony Controller
			fetch(`/grecja-szlakiem-sw-pawla/images?folder=${encodeURIComponent(folder)}`)
				.then(res => {
					if (!res.ok) throw new Error('Błąd serwera');
					return res.json();
				})
				.then(localImgs => {
					// localImgs to tablica obiektów: {name: string, large: string, small: string}
					const remote = (Array.isArray(loc.gallery) ? loc.gallery : (loc.image ? [loc.image] : [])).map(url => ({
						name: url.substring(url.lastIndexOf('/') + 1),
						large: url,
						small: url
					}));

					const imgs = localImgs.concat(remote);

					if (imgs.length === 0) {
						body.innerHTML = '<div class="text-center p-4 text-secondary">Brak zdjęć dla tej lokalizacji.</div>' + hint;
						return;
					}

					// Zapisujemy globalnie zdjęcia aktualnej galerii dla podglądu fullscreen
					window.currentGalleryImages = imgs;
					window.currentGalleryTitle = title;

					const slides = imgs.map((img, i) => `
						<div class="carousel-item ${i === 0 ? 'active' : ''}">
							<img src="${img.small}" class="gallery-img cursor-pointer" onclick="openFullscreen(${i})" alt="${title} ${i + 1}" title="Kliknij zdjęcie, aby otworzyć w pełnej rozdzielczości">
						</div>`).join('');

					const indicators = imgs.map((_, i) => `<button type="button" data-bs-target="#galleryCarousel" data-bs-slide-to="${i}" class="${i === 0 ? 'active' : ''}" aria-label="Zdjęcie ${i + 1}"></button>`).join('');

					body.innerHTML = `
						<div id="galleryCarousel" class="carousel slide" data-bs-ride="false">
							<div class="carousel-indicators">${indicators}</div>
							<div class="carousel-inner rounded">${slides}</div>
							<button class="carousel-control-prev" type="button" data-bs-target="#galleryCarousel" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span><span class="visually-hidden">Poprzednie</span></button>
							<button class="carousel-control-next" type="button" data-bs-target="#galleryCarousel" data-bs-slide="next"><span class="carousel-control-next-icon"></span><span class="visually-hidden">Następne</span></button>
						</div>
						<div class="gallery-meta mt-2">${imgs.length} zdjęć · ${title} · Kliknij zdjęcie, aby zobaczyć w pełnym rozmiarze (maksymalna rozdzielczość)</div>`;

					bootstrap.Carousel.getOrCreateInstance(document.getElementById('galleryCarousel'), { interval: false });
				})
				.catch(err => {
					console.error(err);
					body.innerHTML = '<div class="text-center p-4 text-danger">Brak zdjęć dla tej lokalizacji.</div>';
				});
		}

		/* ===== Obsługa Fullscreen Lightbox ===== */
		let currentFullscreenIndex = -1;

		function openFullscreen(index) {
			if (!window.currentGalleryImages || !window.currentGalleryImages[index]) return;
			currentFullscreenIndex = index;
			const imgObj = window.currentGalleryImages[index];

			const viewer = document.getElementById('fullscreenViewer');
			const fsImg = document.getElementById('fullscreenImage');
			const caption = document.getElementById('fullscreenCaption');

			fsImg.src = imgObj.large;
			caption.innerText = `Zdjęcie ${index + 1} z ${window.currentGalleryImages.length} · ${window.currentGalleryTitle} (${imgObj.name || 'oryginalna rozdzielczość'})`;

			viewer.style.display = 'flex';
			document.body.style.overflow = 'hidden'; // wyłączamy przewijanie tła
		}

		function closeFullscreen() {
			const viewer = document.getElementById('fullscreenViewer');
			viewer.style.display = 'none';
			document.body.style.overflow = ''; // włączamy z powrotem przewijanie tła
		}

		function navigateFullscreen(direction) {
			if (!window.currentGalleryImages || window.currentGalleryImages.length === 0) return;
			let newIndex = currentFullscreenIndex + direction;
			if (newIndex < 0) newIndex = window.currentGalleryImages.length - 1;
			if (newIndex >= window.currentGalleryImages.length) newIndex = 0;

			openFullscreen(newIndex);
		}

		// Sterowanie klawiaturą
		document.addEventListener('keydown', function (e) {
			const viewer = document.getElementById('fullscreenViewer');
			const viewerOpen = viewer && viewer.style.display === 'flex';

			if (e.key === 'Escape') {
				// 0. Zamknij mobilne menu / dropdown miejsc
				const mobileMenu = document.getElementById('mobileMenu');
				if (mobileMenu && mobileMenu.classList.contains('open')) { toggleMobileMenu(); return; }
				const placeDD = document.getElementById('placeDropdown');
				if (placeDD && placeDD.classList.contains('open')) { togglePlaceDropdown(); return; }
				// 1. Zamknij podgląd pełnoekranowy
				if (viewerOpen) { closeFullscreen(); return; }
				// 2. Zamknij pełnoekranowe szczegóły miejsca
				const lm = document.getElementById('locationModal');
				if (lm && lm.classList.contains('show')) {
					bootstrap.Modal.getInstance(lm)?.hide(); return;
				}
				// 3. Zamknij modal galerii
				const gm = document.getElementById('galleryModal');
				if (gm && gm.classList.contains('show')) {
					bootstrap.Modal.getInstance(gm)?.hide(); return;
				}
				// 4. Zamknij modal filtrów
				const fm = document.getElementById('filterModal');
				if (fm && fm.classList.contains('show')) {
					bootstrap.Modal.getInstance(fm)?.hide(); return;
				}
				// 5. Zamknij InfoWindow na mapie
				if (infoWindow) { infoWindow.close(); }
				return;
			}

			if (viewerOpen) {
				if (e.key === 'ArrowLeft') navigateFullscreen(-1);
				else if (e.key === 'ArrowRight') navigateFullscreen(1);
			}
		});

		/* ===== Oś czasu — funkcje ===== */
		function toggleTimeline() {
			const bar = document.getElementById('timeline-bar');
			const btn = document.getElementById('timelineBtn');
			timelineVisible = !timelineVisible;
			if (timelineVisible) {
				bar.style.display = 'flex';
				btn.classList.add('active');
				buildTimelineBar();
			} else {
				bar.style.display = 'none';
				btn.classList.remove('active');
				selectedDates.clear();
				applyTimelineFilter();
			}
		}

		function buildTimelineBar() {
			const bar = document.getElementById('timeline-dates');
			const allData = locations;
			const dateSet = new Set();
			allData.forEach(loc => {
				if (Array.isArray(loc.dates)) {
					loc.dates.forEach(d => dateSet.add(d.substring(0, 10)));
				}
			});
			const sortedDates = Array.from(dateSet).sort();

			bar.innerHTML = sortedDates.map(d => {
				const dateObj = new Date(d + 'T00:00:00');
				const shortWeekdays = {
				poniedziałek: 'pn',
				wtorek: 'wt',
				środa: 'śr',
				czwartek: 'cz',
				piątek: 'pt',
				sobota: 'so',
				niedziela: 'nd'
				};
				const full = dateObj.toLocaleDateString('pl-PL', { weekday: 'long' });
				const dayName = shortWeekdays[full];
				/*const dayName = dateObj.toLocaleDateString('pl-PL', { weekday: 'short' });*/
				const dayNum = dateObj.getDate();
				const month = dateObj.toLocaleDateString('pl-PL', { month: 'short' });
				return `<button class="tl-date${selectedDates.has(d) ? ' active' : ''}" data-date="${d}" onclick="toggleTimelineDate('${d}')">${dayName}<br><strong>${dayNum}</strong>${month}</button>`;
			}).join('');
		}

		function toggleTimelineDate(dateStr) {
			if (selectedDates.has(dateStr)) {
				selectedDates.delete(dateStr);
			} else {
				selectedDates.add(dateStr);
			}
			document.querySelectorAll('.tl-date').forEach(btn => {
				btn.classList.toggle('active', selectedDates.has(btn.dataset.date));
			});
			applyTimelineFilter();
		}

		function applyTimelineFilter() {
			if (selectedDates.size === 0) {
				['place', 'historic', 'attraction', 'hotels', 'cruise'].forEach(type => {
					const cb = document.getElementById('toggle-' + type);
					const isVisible = cb ? cb.checked : true;
					if (markersGroup[type]) {
						markersGroup[type].forEach(m => m.setMap(isVisible ? map : null));
					}
				});
				return;
			}
			allMarkerData.forEach(md => md.marker.setMap(null));
			allMarkerData.forEach(md => {
				if (Array.isArray(md.dates) && md.dates.length > 0) {
					const hasMatch = md.dates.some(d => selectedDates.has(d.substring(0, 10)));
					const checkbox = document.getElementById('toggle-' + md.type);
					const groupEnabled = checkbox ? checkbox.checked : true;
					if (hasMatch && groupEnabled) md.marker.setMap(map);
				}
			});
			infoWindow.close();
		}

		/* ===== Widok startowy Grecji ===== */
		function fitInitialView() {
			const b = new google.maps.LatLngBounds();
			b.extend({ lat: 41.15, lng: 24.60 });
			b.extend({ lat: 37.25, lng: 21.35 });
			map.fitBounds(b, { top: 60, bottom: 60, left: 60, right: 60 });
		}
	</script>

	<!-- Google Maps API -->
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSmZYq6ZFb2MtpOUZL13qrpLxM3Fpsn5s&callback=initMap"></script>
{% endblock %}