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

{% block title %}Siedem Kościołów Apokalipsy św. Jana{% 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;
			--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 kościołów ===== */
		.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 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;
		}

		.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-church {
			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);
		}

		/* 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;
		}

		/* 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;
		}
		
		.cursor-pointer {
			cursor: pointer;
		}

		/* ===== Przyciski mobilne (hamburger + kościoły) ===== */
		.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 kościołów mobilny ===== */
		.church-dropdown {
			display: none;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2000;
		}

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

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

		.church-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;
		}

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

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

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

		.church-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;
		}

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

		.church-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;
		}

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

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

		.church-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,
			#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,
			#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-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;
		}

		@media (max-width: 360px) {
			.location-detail-actions {
				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;
		}

		.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>Siedem Kościołów Apokalipsy</h1>
				<small>Apokalipsa św. Jana · Azja Mniejsza</small>
			</div>
		</div>

		<div class="toolbar">
			<a class="tbtn" href="/7-kosciolow-apokalipsy" 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="fitChurches()" type="button" title="Pokaż wszystkie kościoły">
				<i class="bi bi-globe-europe-africa"></i><span class="lbl">Wszystkie</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>
		</div>

		<!-- Mobilne przyciski: kościoły + hamburger -->
		<div class="mobile-controls">
			<button class="mobile-btn" onclick="toggleChurchDropdown()" type="button" title="Kościoły">
				<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 kościołów (desktop) ===== -->
	<nav class="pillbar" id="pillbar"></nav>

	<!-- ===== Dropdown kościołów (mobile) ===== -->
	<div class="church-dropdown" id="churchDropdown">
		<div class="church-dropdown-backdrop" onclick="toggleChurchDropdown()"></div>
		<div class="church-dropdown-list">
			<div class="church-dropdown-header">
				<h3><i class="bi bi-geo-fill" style="color: var(--gold)"></i> Siedem Kościołów</h3>
				<button class="mobile-offcanvas-close" onclick="toggleChurchDropdown()"><i class="bi bi-x"></i></button>
			</div>
			<div class="church-dropdown-grid" id="churchDropdownGrid"></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="/7-kosciolow-apokalipsy">
					<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="fitChurches(); toggleMobileMenu();">
					<i class="bi bi-globe-europe-africa"></i> Pokaż wszystkie
				</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"></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-church" checked onchange="toggleGroup('church', this.checked)">
					<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="toggle-church">
						<span class="dot d-church"></span> Kościoły Apokalipsy (1–7)
					</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">
					<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>
		</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>

	<!-- ===== 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-church" checked onchange="toggleGroup('church', this.checked)">
						<label class="form-check-label d-flex align-items-center gap-2 cursor-pointer" for="m-toggle-church">
							<span class="dot d-church"></span> Kościoły Apokalipsy (1–7)
						</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">
						<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>
				<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>
		var directionsService, directionsDisplay, infoWindow, map, trafficLayer;
		var trafficVisible = false;
		var miejsce = null;
		var churchMarkers = {};
		var markersGroup = {
			church: [],
			historic: [],
			attraction: [],
			hotels: []
		};
		var allMarkerData = [];
		var timelineVisible = false;
		var selectedDates = new Set();
		var currentRouteTarget = null;
		const domPolskiBellevue = { lat: 43.11109845966206, lng: -0.05045240265166639 };

		/* =========================================================
		   DANE: 7 kościołów Apokalipsy + miejsca historyczne +
		   pobliskie atrakcje turystyczne + miejsca w Lourdes.
		   Zdjęcia: Wikimedia Commons (zweryfikowane).
		   ========================================================= */
		const churches = [
			{
				type: 'church', number: 1, title: 'Efez', subtitle: '03.07.2026 obecnie Selçuk',
				position: { lat: 37.93592084338447, lng: 27.346144670432587 },
				verse: 'Mam ci jednak za złe, że odstąpiłeś od twojej pierwotnej miłości.', ref: 'Ap 2,4',
				description: 'Efez to pierwszy z siedmiu Kościołów Apokalipsy i jeden z najważniejszych ośrodków wczesnego chrześcijaństwa, związany ze św. Pawłem i tradycją o św. Janie Apostole. Dziś to jedno z najlepiej zachowanych miast antycznych świata (UNESCO).',
				wiki: 'https://pl.wikipedia.org/wiki/Efez',
				gallery: [
					'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Celsus_library_in_Ephesus_%2815508851508%29.jpg/1280px-Celsus_library_in_Ephesus_%2815508851508%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/The_Great_Theatre_of_Ephesus%2C_Ephesus_Archaeological_Site%2C_Selcuk%2C_Turkiye_%2853526276093%29.jpg/1280px-The_Great_Theatre_of_Ephesus%2C_Ephesus_Archaeological_Site%2C_Selcuk%2C_Turkiye_%2853526276093%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/7/77/Ephesus_Temple_of_Hadrian_Front_1.jpg/1280px-Ephesus_Temple_of_Hadrian_Front_1.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/Looking_down_the_Street_of_Curetes_%2816314212482%29.jpg/1280px-Looking_down_the_Street_of_Curetes_%2816314212482%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Celsus_library_from_Curetes_Street_Ephesus.jpg/1280px-Celsus_library_from_Curetes_Street_Ephesus.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Ephesus%2C_the_Curetes_street.jpg/1280px-Ephesus%2C_the_Curetes_street.jpg'
				],
				folder: '/7kosciolowapokalipsy/Efez',
				dates: ['2026-07-03T12:00']
			},
			{
				type: 'church', number: 2, title: 'Smyrna', subtitle: '04.07.2026 obecnie Izmir',
				position: { lat: 38.433333, lng: 27.15 },
				verse: 'Bądź wierny aż do śmierci, a dam ci wieniec życia.', ref: 'Ap 2,10',
				description: 'Smyrna to wspólnota pochwalona za wierność mimo ubóstwa i prześladowań, której obiecano „wieniec życia”. Dziś to Izmir — trzecie co do wielkości miasto Turcji i tętniący życiem port nad Morzem Egejskim.',
				wiki: 'https://pl.wikipedia.org/wiki/Izmir',
				gallery: [
					'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Izmir_Konak_Square_and_Clock_Tower%2C_2026.jpg/1280px-Izmir_Konak_Square_and_Clock_Tower%2C_2026.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Izmir_-_Kadifekale.JPG/1280px-Izmir_-_Kadifekale.JPG',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Izmir_Alsancak_Kordon_2606.jpg/1280px-Izmir_Alsancak_Kordon_2606.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Izmir_Asans%C3%B6r_%28October_2018%29.jpg/1280px-Izmir_Asans%C3%B6r_%28October_2018%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Afternoon_from_Kar%C5%9F%C4%B1yaka_Shore.jpg/1280px-Afternoon_from_Kar%C5%9F%C4%B1yaka_Shore.jpg'
				],
				folder: '/7kosciolowapokalipsy/Smyrna',
				dates: ['2026-07-04T10:00']
			},
			{
				type: 'church', number: 3, title: 'Pergamon', subtitle: '01.07.2026 obecnie Bergama',
				position: { lat: 39.13137197344471, lng: 27.18609718387641 },
				verse: 'Wiem, gdzie mieszkasz: tam, gdzie jest tron szatana.', ref: 'Ap 2,13',
				description: 'Pergamon, opisany jako miejsce „gdzie jest tron szatana”, to wybitne stanowisko UNESCO ze stromym akropolem mającym najbardziej stromy teatr świata antycznego, Wielkim Ołtarzem Zeusa oraz antycznym centrum uzdrowiskowym Asklepiejonem.',
				wiki: 'https://pl.wikipedia.org/wiki/Pergamon_(miasto)',
				gallery: [
					'https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Acropolis_columns_of_Pergamon.jpg/1280px-Acropolis_columns_of_Pergamon.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Bergama_%28Pergamon%29_Antik_Kenti.jpg/1280px-Bergama_%28Pergamon%29_Antik_Kenti.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Asclepieion_%28Pergamon%29_%281%29.jpg/1280px-Asclepieion_%28Pergamon%29_%281%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/8/8e/Bergama_Red_Basilica_010.jpg/1280px-Bergama_Red_Basilica_010.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Pergamon_ancient_city_6.jpg/1280px-Pergamon_ancient_city_6.jpg'
				],
				folder: '/7kosciolowapokalipsy/Pergamon',
				dates: ['2026-07-01T12:30']
			},
			{
				type: 'church', number: 4, title: 'Tiatyra', subtitle: '04.07.2026 obecnie Akhisar',
				position: { lat: 38.918056, lng: 27.8375 },
				verse: 'Znam twoje czyny, miłość, wiarę, posługę i wytrwałość.', ref: 'Ap 2,19',
				description: 'Tiatyra słynęła jako miasto rzemieślników i cechów, zwłaszcza farbiarzy purpury — stąd pochodziła Lidia, ochrzczona przez św. Pawła (Dz 16,14). Dziś to Akhisar, gdzie pośród nowoczesnej zabudowy zachowały się ruiny antycznego miasta.',
				wiki: 'https://pl.wikipedia.org/wiki/Tiatyra',
				gallery: [
					'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Akhisar_ruins_Tempemezari_1.jpg/1280px-Akhisar_ruins_Tempemezari_1.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Columns_of_Thiatira.jpg/1280px-Columns_of_Thiatira.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/ThyatiraArkaden.jpg/1280px-ThyatiraArkaden.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Grand_Mosque_of_Akhisar_01.jpg/1280px-Grand_Mosque_of_Akhisar_01.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Akhisar_General_view_6174.jpg/1280px-Akhisar_General_view_6174.jpg'
				],
				folder: '/7kosciolowapokalipsy/Tiatyra',
				dates: ['2026-07-04T13:30']
			},
			{
				type: 'church', number: 5, title: 'Sardes', subtitle: '01.07.2026 obecnie Sart',
				position: { lat: 38.48893176420022, lng: 28.040050748742992 },
				verse: 'Masz imię, które mówi, że żyjesz, a jesteś umarły.', ref: 'Ap 3,1',
				description: 'Sardes to dawna stolica Lidii, gdzie za króla Krezusa wybito pierwsze na świecie monety. Rozległe ruiny obejmują monumentalny gimnazjon z odbudowaną Marmurową Salą, największą znaną starożytną synagogę oraz świątynię Artemidy.',
				wiki: 'https://pl.wikipedia.org/wiki/Sardes',
				gallery: [
					'https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Gymnasium_in_Sardes.jpg/1280px-Gymnasium_in_Sardes.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/38_-_Sardis._The_Bath-Gymnasium_Complex_-_%E2%80%9CPalaestra%E2%80%9D_and_%E2%80%9CMarble_Court%E2%80%9D_%2851195302312%29.jpg/1280px-38_-_Sardis._The_Bath-Gymnasium_Complex_-_%E2%80%9CPalaestra%E2%80%9D_and_%E2%80%9CMarble_Court%E2%80%9D_%2851195302312%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/2_%E2%80%93_Sardis%2C_Temple_of_Artemis%2C_View_from_West_toward_East._The_Cella_%2851153008057%29.jpg/1280px-2_%E2%80%93_Sardis%2C_Temple_of_Artemis%2C_View_from_West_toward_East._The_Cella_%2851153008057%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/ArtemisionSardi-DaSudOvest.jpg/1280px-ArtemisionSardi-DaSudOvest.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/29_-_Sardis._The_Monumental_Synagogue_-_The_Main_Hall_%2851188143868%29.jpg/1280px-29_-_Sardis._The_Monumental_Synagogue_-_The_Main_Hall_%2851188143868%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Sardis_Synagogue%2C_late_3rd_century_AD%2C_Sardis%2C_Lydia%2C_Turkey_%2818897204194%29.jpg/1280px-Sardis_Synagogue%2C_late_3rd_century_AD%2C_Sardis%2C_Lydia%2C_Turkey_%2818897204194%29.jpg'
				],
				folder: '/7kosciolowapokalipsy/Sardes',
				dates: ['2026-07-01T13:30']
			},
			{
				type: 'church', number: 6, title: 'Filadelfia', subtitle: '01.07.2026 obecnie Alaşehir',
				position: { lat: 38.34954882880892, lng: 28.517480269815426 },
				verse: 'Oto postawiłem jako dar przed tobą drzwi otwarte, których nikt nie może zamknąć.', ref: 'Ap 3,8',
				description: 'Filadelfia — obok Smyrny jedyny Kościół, który otrzymał od Chrystusa samą pochwaję za wierność. Dziś to Alaşehir, miasto słynące z winnic i suszonych sułtanek, gdzie po dawnym kościele zachowały się potężne ceglane filary bizantyjskiej bazyliki św. Jana.',
				wiki: 'https://pl.wikipedia.org/wiki/Ala%C5%9Fehir',
				gallery: [
					'https://upload.wikimedia.org/wikipedia/commons/thumb/d/d8/Ala%C5%9Fehir_Church_of_St._John.jpg/1280px-Ala%C5%9Fehir_Church_of_St._John.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Ala%C5%9Fehir_Church_of_St._John_2.jpg/1280px-Ala%C5%9Fehir_Church_of_St._John_2.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Biblical_Philadelphia%2C_Ala%C5%9Fehir%2C_Turkey_%28%E2%80%9CSeven_Churches_of_Revelation%E2%80%9D%29_%2851966166907%29.jpg/1280px-Biblical_Philadelphia%2C_Ala%C5%9Fehir%2C_Turkey_%28%E2%80%9CSeven_Churches_of_Revelation%E2%80%9D%29_%2851966166907%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Alasehir_St_Jean_Church.jpg/1280px-Alasehir_St_Jean_Church.jpg'
				],
				folder: '/7kosciolowapokalipsy/Filadelfia',
				dates: ['2026-07-01T13:30']
			},
			{
				type: 'church', number: 7, title: 'Laodycea', subtitle: '02.07.2026 koło Denizli · Pamukkale',
				position: { lat: 37.8376276553768, lng: 29.107221857567687 },
				verse: 'Obyś był zimny albo gorący! A tak, skoro jesteś letni, chcę cię wyrzucić z mych ust.', ref: 'Ap 3,15–16',
				description: 'Laodycea nad Lykos to Kościół zganiony jako „letni”, zadufany w swoim bogactwie. Dziś rozległe stanowisko archeologiczne pod Denizli z kolumnową Ulicą Syryjską, dwoma rzymskimi teatrami, świątyniami i jednym z najstarszych odkrytych kościołów chrześcijańskich.',
				wiki: 'https://pl.wikipedia.org/wiki/Laodycea_(Frygia)',
				gallery: [
					'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Laodicea_on_the_Lycus%2C_Phrygia%2C_Turkey_%2821437471700%29.jpg/1280px-Laodicea_on_the_Lycus%2C_Phrygia%2C_Turkey_%2821437471700%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/4/40/Laodikeia_ad_Lycum_Syria_street_4757.jpg/1280px-Laodikeia_ad_Lycum_Syria_street_4757.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/5/59/Laodicea_Temple-A_20240929_090143.jpg/1280px-Laodicea_Temple-A_20240929_090143.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/Laodicea%2C_Western_Theatre%2C_2021.jpg/1280px-Laodicea%2C_Western_Theatre%2C_2021.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Laodicea_column_-_panoramio.jpg/1280px-Laodicea_column_-_panoramio.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9c/Inside_The_Church_of_Laodicea.jpg/1280px-Inside_The_Church_of_Laodicea.jpg'
				],
				folder: '/7kosciolowapokalipsy/Laodycea',
				dates: ['2026-07-02T13:30']
			}
		];

		const historic = [
			/* Stambuł */
			{
				type: 'historic', title: 'Hagia Sofia', subtitle: 'Stambuł',
				position: { lat: 41.00866463542066, lng: 28.979960226466677 },
				description: 'Wzniesiona w latach 532–537 przez cesarza Justyniana I, przez niemal tysiąc lat największy kościół chrześcijańskiego świata i arcydzieło architektury bizantyńskiej. Po 1453 r. meczet, w 1935 r. muzeum, a od 2020 r. ponownie czynny meczet.',
				wiki: 'https://pl.wikipedia.org/wiki/Hagia_Sophia',
				gallery: [
					'https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Hagia_Sophia_Mars_2013.jpg/1280px-Hagia_Sophia_Mars_2013.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Exterior_of_Hagia_Sophia_%281%29_-_Istanbul_%282022%29.jpg/1280px-Exterior_of_Hagia_Sophia_%281%29_-_Istanbul_%282022%29.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Hagia_Sophia_Interior_Dome.jpg/1280px-Hagia_Sophia_Interior_Dome.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/0/03/Hagia_Sophia_Interior_Panorama.jpg/1280px-Hagia_Sophia_Interior_Panorama.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Deesis_mosaic_Hagia_Sophia.jpg/1280px-Deesis_mosaic_Hagia_Sophia.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Hagia_Sophia_2013-03-17zk.jpg/1280px-Hagia_Sophia_2013-03-17zk.jpg'
				],
				image: '/7kosciolowapokalipsy/Stambul/HagiaSophia/20260705_152259.jpg',
				folder: '/7kosciolowapokalipsy/Stambul/HagiaSophia',
				dates: ['2026-07-05T13:30']
			},
			{ 	type: 'historic', title: 'Błękitny Meczet', subtitle: 'Sultan Ahmet Camii', 
				position: { lat: 41.005375, lng: 28.976892 }, 
				description: 'Monumentalny meczet sułtana Ahmeda I z pocz. XVII w., słynący z kaskady kopuł, sześciu minaretów i błękitnych płytek z İznik.', 
				link: 'https://pl.wikipedia.org/wiki/B%C5%82%C4%99kitny_Meczet', 
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Exterior_of_Sultan_Ahmed_I_Mosque_in_Istanbul%2C_Turkey_002.jpg/1280px-Exterior_of_Sultan_Ahmed_I_Mosque_in_Istanbul%2C_Turkey_002.jpg',
				folder: '/7kosciolowapokalipsy/Stambul/BlekitnyMeczet',
				dates: ['2026-07-05T16:30'] 
			},
			{ 	type: 'historic', title: 'Pałac Topkapı', subtitle: 'Topkapı Sarayı', 
				position: { lat: 41.012519, lng: 28.983442 }, 
				description: 'Pałac sułtanów osmańskich wzniesiony po 1453 r., przez blisko cztery wieki główna rezydencja władców imperium.', 
				link: 'https://pl.wikipedia.org/wiki/Topkapi_(pa%C5%82ac)', 
				gallery: [				
					'https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/Topkap%C4%B1_-_01.jpg/1280px-Topkap%C4%B1_-_01.jpg'
				],
				image: '/7kosciolowapokalipsy/Stambul/Topkapi/20260706_113310.jpg',
				folder: '/7kosciolowapokalipsy/Stambul/Topkapi',
				dates: ['2026-07-06T11:00'] 
			},
			{ 	type: 'historic', title: 'Hipodrom', subtitle: 'Sultanahmet Meydanı', 
				position: { lat: 41.006389, lng: 28.975833 }, 
				description: 'Dawny bizantyjski tor wyścigów rydwanów, dziś plac z egipskim obeliskiem i antyczną Kolumną Wężową.', 
				link: 'https://pl.wikipedia.org/wiki/Hipodrom_(Stambu%C5%82)', 
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/da/Hipodrom.jpg/1280px-Hipodrom.jpg',
				folder: '/7kosciolowapokalipsy/Stambul/Hipodrom',
				dates: ['2026-07-05T17:00']
			},
			{ 	type: 'historic', title: 'Muzeum Mickiewicza', subtitle: 'Muzeum Mickiewicza w Stambule', 
				position: { lat: 41.038854858898866, lng: 28.97709690894775 }, 
				description: 'Miejsce gdzie przebywał i zmarł Adam Mickiewicz w 1855 r. podczas pobytu w Stambule.', 
				link: '', 
				image: '/7kosciolowapokalipsy/Stambul/DomMickiewicza/small/20260706_102652.jpg',
				folder: '/7kosciolowapokalipsy/Stambul/DomMickiewicza',
				dates: ['2026-07-06T10:00']
			},
			{ 	type: 'historic', title: 'Patriarchat Grecki', subtitle: '', 
				position: { lat: 41.031179051535595, lng: 28.951490660442204 }, 
				description: 'Siedziba ekumenicznego patriarchatu greckiego.', 
				link: '', 
				image: '/7kosciolowapokalipsy/Stambul/KosciolPartiarchyGreckiego/small/20260706_154921.jpg',
				folder: '/7kosciolowapokalipsy/Stambul/KosciolPartiarchyGreckiego',
				dates: ['2026-07-06T16:00']
			},


			{
				type: 'historic', title: 'Nicea', subtitle: 'obecnie İznik',
				position: { lat: 40.42979360943262, lng: 29.720031868343657 },
				description: 'Starożytne miasto w Bitynii, gdzie odbyły się dwa sobory powszechne — w 325 r. (wyznanie nicejskie) i w 787 r. (spór o kult obrazów). Zachowały się potężne mury miejskie z monumentalnymi bramami oraz bizantyjski kościół Hagia Sophia.',
				wiki: 'https://pl.wikipedia.org/wiki/İznik',
				image: '/7kosciolowapokalipsy/Nicea/small/20260705_113001.jpg',
				folder: '/7kosciolowapokalipsy/Nicea',
				dates: ['2026-07-05T11:00']
			},

			{
				type: 'historic', title: 'Troja', subtitle: 'Hisarlık · Çanakkale',
				position: { lat: 39.9576, lng: 26.2389 },
				description: 'Legendarne miasto z eposów Homera, odkryte przez Heinricha Schliemanna na wzgórzu Hisarlık i wpisane na listę UNESCO. Stanowisko archeologiczne odsłania dziewięć nawarstwionych miast obejmujących ponad 4000 lat historii.',
				wiki: 'https://pl.wikipedia.org/wiki/Troja',
				gallery: [
					'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/A_view_from_Troy_Ancient_City%2C_%C3%87anakkale%2C_Turkey.jpg/1280px-A_view_from_Troy_Ancient_City%2C_%C3%87anakkale%2C_Turkey.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Trojan_Horse_in_Troy_National_Park_01.jpg/1280px-Trojan_Horse_in_Troy_National_Park_01.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Truva_Kenti_Rampa.jpg/1280px-Truva_Kenti_Rampa.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Trojan_walls_from_level_VI.jpg/1280px-Trojan_walls_from_level_VI.jpg',
					'https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Troja-Blick-Schliemanngraben.jpg/1280px-Troja-Blick-Schliemanngraben.jpg'
				],
				image: 'https://jw.gd/7kosciolowapokalipsy/Troja/small/20260630_155452.jpg',
				folder: '/7kosciolowapokalipsy/Troja',
				dates: ['2026-06-30T15:30']
			},

			/* --- Efez --- */
			{ 	type: 'historic', title: 'Dom Najświętszej Marii Panny', subtitle: 'Meryem Ana Evi · k. Efezu', 
				position: { lat: 37.91187412423337, lng: 27.334142738863275 }, 
				description: 'Kamienny domek na zboczu góry Bülbül, czczony przez chrześcijan i muzułmanów jako miejsce, gdzie ostatnie lata życia miała spędzić Maryja, matka Jezusa.', 
				link: 'https://pl.wikipedia.org/wiki/Dom_Naj%C5%9Bwi%C4%99tszej_Marii_Panny', 
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/House_of_the_Virgin_Mary.jpg/1280px-House_of_the_Virgin_Mary.jpg',
				folder: '/7kosciolowapokalipsy/Efez/DomNajswietszejMaryiPanny',
				dates: ['2026-07-03T12:00']
			},
			{ 	type: 'historic', title: 'Bouleterion', subtitle: 'Bouleterion w Efezie', 
				position: { lat: 37.93692513970334, lng: 27.344903549544718 }, 
				description: 'Miejsce w którym odbywały się zebrania rady miejskiej.', 
				link: 'https://pl.wikipedia.org/wiki/Buleuterion', 
				image: 'https://jw.gd/7kosciolowapokalipsy/Efez/Buleuterion/small/20260703_142609.jpg',
				folder: '/7kosciolowapokalipsy/Efez/Buleuterion',
				dates: ['2026-07-03T15:00']
			},
			{ 	type: 'historic', title: 'Droga do biblioteki Celsiusa', subtitle: '', 
				position: { lat: 37.937169052056625, lng: 27.343343879979145 }, 
				description: '', 
				link: '', 
				image: 'https://jw.gd/7kosciolowapokalipsy/Efez/GlownaDrogaEfez/small/20260703_143429.jpg', 
				folder: '/7kosciolowapokalipsy/Efez/GlownaDrogaEfez',
				dates: ['2026-07-03T16:30'] 
			},
			{ 	type: 'historic', title: 'Biblioteka Celsusa', subtitle: '', 
				position: { lat: 37.93924224456958, lng: 27.340920389636434 }, 
				description: 'Ruiny biblioteki Celsiusa. Znanej w starożytności ze względu na swój bogaty zbiór dokumentów', 
				link: '', 
				image: '/7kosciolowapokalipsy/Efez/BibliotekaCelsusa/small/20260703_145905.jpg', 
				folder: '/7kosciolowapokalipsy/Efez/BibliotekaCelsusa',
				dates: ['2026-07-03T16:30'] 
			},
			{ 	type: 'historic', title: 'Amfiteatr', subtitle: '', 
				position: { lat: 37.941065017704105, lng: 27.342376061566753 }, 
				description: 'Amfiteatr który był miejscem wydarzeń opisanych w dziejach apostolskich.', 
				link: '', 
				image: 'https://jw.gd/7kosciolowapokalipsy/Efez/Amfiteatr/small/20260703_153718.jpg', 
				folder: '/7kosciolowapokalipsy/Efez/Amfiteatr',
				dates: ['2026-07-03T20:00'] 
			},
			{ 	type: 'historic', title: 'Kościół Najświętszej Maryi Panny', subtitle: '', 
				position: { lat: 37.944865610273325, lng: 27.340248549692486 }, 
				description: 'Kościło pod wezwaniem NMP wybudowany dla uczczenia soboru Efeskiego, który zapoczątkował kult Maryjny', 
				link: '', 
				image: 'https://jw.gd/7kosciolowapokalipsy/Efez/KosciolNMP/small/20260703_155832.jpg', 
				folder: '/7kosciolowapokalipsy/Efez/KosciolNMP',
				dates: ['2026-07-03T21:00'] 
			},

			{ 	type: 'historic', title: 'Świątynia Artemidy', subtitle: 'Artemis Tapınağı · k. Efezu', 
				position: { lat: 37.94972, lng: 27.36389 }, 
				description: 'Ruiny ogromnej świątyni Artemidy, jednego z siedmiu cudów świata starożytnego — dziś zachowała się głównie pojedyncza zrekonstruowana kolumna.', 
				link: 'https://pl.wikipedia.org/wiki/%C5%9Awi%C4%85tynia_Artemidy_w_Efezie', 
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Ruins_of_the_Temple_of_Artemis_at_Ephesus%2C_Selcuk%2C_Turkiye_%2853521081516%29.jpg/1280px-Ruins_of_the_Temple_of_Artemis_at_Ephesus%2C_Selcuk%2C_Turkiye_%2853521081516%29.jpg', 
				folder: '/7kosciolowapokalipsy/Efez/SwiatyniaArtemidy',
				dates: ['2026-07-03T16:30'] 
			},
			{ 	type: 'historic', title: 'Bazylika św. Jana', subtitle: 'Aziz Yahya Bazilikası · Selçuk', 
				position: { lat: 37.9525, lng: 27.3678 }, 
				description: 'Ruiny monumentalnej bizantyjskiej bazyliki wzniesionej przez Justyniana nad domniemanym grobem św. Jana Apostoła na wzgórzu Ayasuluk.', 
				link: 'https://pl.wikipedia.org/wiki/Bazylika_%C5%9Bw._Jana_%28Efez%29', 
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Saint_John%27s_Basilica%2C_Seljuk.jpg/1280px-Saint_John%27s_Basilica%2C_Seljuk.jpg', 
				folder: '/7kosciolowapokalipsy/Efez/BazylikaSwJana',
				dates: ['2026-07-03T16:45'] 
			},

			{ 	type: 'historic', title: 'Starożytne Hierapolis', subtitle: 'Hierapolis Antik Kenti', 
				position: { lat: 37.92511, lng: 29.12591 }, 
				description: 'Ruiny antycznego miasta uzdrowiskowego tuż nad trawertynami Pamukkale, z monumentalnym teatrem, nekropolią i świątynią Apollina (UNESCO).', 
				link: 'https://pl.wikipedia.org/wiki/Hierapolis', 
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Amphitheater_in_Hierapolis.jpg/1280px-Amphitheater_in_Hierapolis.jpg', 
				folder: '/7kosciolowapokalipsy/Pamukalle/Hierapolis',
				dates: ['2026-07-02T21:00'] 
			},

			/* --- Kolosy --- */
			{ 	type: 'historic', title: 'Kolosy', subtitle: '', 
				position: { lat: 37.7851946, lng: 29.2617567 }, 
				description: 'Starożytne miasto Kolosy. Zniszczone przez trzęsienie ziemi w roku 60 n.e. Znane z listu św. Pawła do Kolosan.', 
				image: '/7kosciolowapokalipsy/Kolosy/small/20260702_111627.jpg', 
				folder: '/7kosciolowapokalipsy/Kolosy',
				dates: ['2026-07-02T11:00'] 
			}
		];

		const attractions = [

			/* --- Stambuł --- */
			{ 	type: 'attraction', title: 'Kościół św. Antoniego', subtitle: '', 
				position: { lat: 41.03246140621039, lng: 28.977135011519774 }, 
				description: '', 
				image: '/7kosciolowapokalipsy/Stambul/KosciolSwAntoniego/small/20260630_100742.jpg', 
				folder: '/7kosciolowapokalipsy/Stambul/KosciolSwAntoniego',
				dates: ['2026-06-30T11:00','2026-07-06T09:00'] 
			},
			{ 	type: 'attraction', title: 'Bosfor', subtitle: 'Cieśnina Bosfor', 
				position: { lat: 41.041784086555126, lng: 29.0256986598681 }, 
				description: 'Widok ze staktu płynącego cieśniną Bosfor.', 
				link: '', 
				image: '/7kosciolowapokalipsy/Stambul/Bosfor/small/20260706_140617.jpg',
				folder: '/7kosciolowapokalipsy/Stambul/Bosfor',
				dates: ['2026-07-06T12:00']
			},
		
			/* --- Tiatyra / Akhisar --- */
			{ 	type: 'attraction', title: 'Stanowisko archeologiczne Tiatyra', subtitle: 'Thyateira Ören Yeri', 
				position: { lat: 38.92, lng: 27.8361 }, description: 'Odsłonięte w centrum Akhisar ruiny antycznej Tiatyry z rzymską kolumnadą i bazyliką — miejsce jednego z siedmiu kościołów Apokalipsy.', link: 'https://pl.wikipedia.org/wiki/Tiatyra', image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/70/Akhisar_ruins_Tempemezari_2.jpg/1280px-Akhisar_ruins_Tempemezari_2.jpg' 
			},

			/* --- Sardes / Sart --- */
			{ 	type: 'attraction', title: 'Gimnazjon i synagoga', subtitle: 'Gymnasium ve Sinagog · Sart', 
				position: { lat: 38.4885, lng: 28.0404 }, description: 'Rzymski kompleks łaźni i gimnazjonu z odbudowaną Marmurową Salą oraz przylegającą największą znaną synagogą starożytności, wyłożoną mozaikami.', link: 'https://en.wikipedia.org/wiki/Sardis_Synagogue', image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Gymnasium_in_Sardes.jpg/1280px-Gymnasium_in_Sardes.jpg' 
			},

			/* --- Pamukkale / Hierapolis --- */
			{ 	type: 'attraction', title: 'Trawertyny Pamukkale', subtitle: 'Pamukkale Travertenleri', position: { lat: 37.9203, lng: 29.1206 }, 
				description: 'Olśniewające białe tarasy trawertynowe („bawełniany zamek”) uformowane przez gorące źródła — wpisany na listę UNESCO cud natury.', 
				link: 'https://pl.wikipedia.org/wiki/Pamukkale', 
				image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a6/Le_bianche_scogliere_di_Pamukkale.jpg/1280px-Le_bianche_scogliere_di_Pamukkale.jpg', 
				folder: '/7kosciolowapokalipsy/Pamukalle',
				dates: ['2026-07-02T21:00']
			},

			/* Izmir */
			{ 	type: 'attraction', title: 'Kościół MB z Lourdes', subtitle: 'Dawna Smyrna', 
				position: { lat: 38.398235093889596, lng: 27.091033913806598 }, 
				description: 'Msza świeta i opowieść polskiego ksiedza o realiach ewangelizacji w Turcji.', 
				link: '', 
				image: '/7kosciolowapokalipsy/Smyrna/KosciolMBzLourdes/small/20260704_102704.jpg', 
				folder: '/7kosciolowapokalipsy/Smyrna/KosciolMBzLourdes',
				dates: ['2026-07-04T10:30']  
			},

			/* Dardanele */
			{ 	type: 'attraction', title: 'Most nad cieśniną Dardanele', subtitle: '', 
				position: { lat: 40.33995128286479, lng: 26.637365951118724 }, 
				description: '', 
				link: '', 
				image: '/7kosciolowapokalipsy/Dardanele/small/20260630_110000.jpeg', 
				folder: '/7kosciolowapokalipsy/Dardanele',
				dates: ['2026-06-30T10:00'] 
			},

			/* Gdansk */
			{ 	type: 'attraction', title: 'Gdańsk', subtitle: 'Port lotniczy', 
				position: { lat: 54.38230160859836, lng: 18.465153526051168 }, 
				description: 'Życzenia z okazji 50 urodzin bpa Piotra.', 
				link: '', 
				image: '/7kosciolowapokalipsy/Gdansk/small/20260629_140002.jpeg', 
				folder: '/7kosciolowapokalipsy/Gdansk',
				dates: ['2026-06-29T14:00','2026-07-06T23:30']
			},
		];

		const lourdes = [
			{ 	type: 'hotels', title: 'Ephesus Hotel', 
				position: { lat: 41.00798877405947, lng: 28.954244405595706 }, 
				description: '1 i 7 nocleg', 
				image: '/7kosciolowapokalipsy/Stambul/HotelEphesus/HotelEphesus.jpg',
				folder: '/7kosciolowapokalipsy/Stambul/HotelEphesus', 
				dates: ["2026-06-29T21:00", "2026-07-05T21:00"] 
			},
			{ 	type: 'hotels', title: 'Iris Hotel', 
				position: { lat: 40.04064668573937, lng: 26.33829815785887 }, 
				description: '2 nocleg', 
				image: '/7kosciolowapokalipsy/Iris Hotel/small/1.jpg', 
				dates: ['2026-06-30T21:00'] 
			},
			{ 	type: 'hotels', title: 'Hotel PAM Thermal & SPA', 
				position: { lat: 37.9627384302058, lng: 29.1074198183879 }, 
				description: '3 i 4 nocleg', 
				links: [{ label: 'Strona 1', url: 'https://www.pamthermal.com/'}], 
				image: '/7kosciolowapokalipsy/Pamukalle/HotelPam/small/20260702_210000.jpeg',
				folder: '/7kosciolowapokalipsy/Pamukalle/HotelPam', 
				dates: ["2026-07-01T21:00", "2026-07-02T21:00"] 
			},
			{ 	type: 'hotels', title: 'Proxima Hotel Kuşadası', 
				position: { lat: 37.89778900339084, lng: 27.275805604622487 }, 
				description: '5 nocleg', 
				link: 'https://www.proximahotel.com/', 
				image: '/7kosciolowapokalipsy/Efez/HotelKusadasiProxima/small/20260703_210001.jpg',
				folder: '/7kosciolowapokalipsy/Efez/HotelKusadasiProxima', 
				dates: ['2026-07-03T21:00'] 
			},
			{ 	type: 'hotels', title: 'Tiara Termal Hotel', 
				position: { lat: 40.20235045961094, lng: 29.02222056012612 }, 
				description: '6 nocleg', 
				link: 'https://www.tiaraotel.com', 
				image: '/7kosciolowapokalipsy/Bursa/HotelTiara/small/20260704_210000.jpg',
				dates: ['2026-07-04T21:00'] 
			}
		];

		const locations = churches.concat(historic, attractions, lourdes);

		/* ===== 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 churchIcon(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 lourdesIcon() {
			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) };
		}

		/* ===== Budowa treści okna informacyjnego ===== */
		function buildLocationActions(loc, index, fromModal = false) {
			let h = '';
			if (index >= 0) {
				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> Więcej</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>`; });

			const closeAfterRoute = fromModal ? ' closeLocationModal();' : '';
			h += `<select class="iw-btn" aria-label="Wybierz rodzaj trasy" onchange="if(this.value) { showRouteToLocation(${loc.position.lat}, ${loc.position.lng}, this.value);${closeAfterRoute} this.value=''; }">
				<option value="" disabled selected>Trasa...</option>
				<option value="DRIVING">🚗 Samochodem</option>
				<option value="BICYCLING">🚲 Rowerem</option>
				<option value="WALKING">🚶 Pieszo</option>
			</select>`;
			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 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) {
				h += '<div class="location-detail-hero">';
				h += `<img src="${hero}" alt="${loc.title}" onerror="this.parentElement.style.display='none'">`;
				if (loc.type === 'church') 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>';
				h += '</div>';
			}

			h += '<div class="location-detail-copy">';
			if (loc.verse) h += `<blockquote class="location-detail-verse">„${loc.verse}”<span class="ref">${loc.ref || ''}</span></blockquote>`;
			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">';
			if (hero) h += `<img src="${hero}" alt="${loc.title}" onerror="this.style.display='none'">`;
			if (loc.type === 'church') 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>';
			h += '</div>';

			h += '<div class="iw-body">';
			if (loc.verse) h += `<p class="iw-verse">„${loc.verse}”<span class="ref">${loc.ref || ''}</span></p>`;
			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: 38.6, lng: 28.2 },
				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 });

			// Marker miejsca pobytu (Lourdes)
			const markerStay = new google.maps.Marker({
				position: domPolskiBellevue, map: map, title: 'Dom polski Bellevue', icon: stayIcon(), zIndex: 9999
			});
			markerStay.addListener('click', () => {
				if (isMobile()) {
					openLocationModal({
						type: 'hotels',
						title: 'Dom polski Bellevue',
						subtitle: 'Lourdes · miejsce pobytu',
						description: 'Nasze miejsce pobytu we Francji.',
						position: domPolskiBellevue
					}, -1);
					return;
				}
				infoWindow.setContent('<div class="iw"><div class="iw-head"><h3 class="iw-title">Dom polski Bellevue</h3><div class="iw-sub">Lourdes · miejsce pobytu</div></div><div class="iw-body"><p class="iw-desc">Nasze miejsce pobytu we Francji.</p><div class="iw-actions"><a class="iw-btn" href="https://www.google.com/maps/search/?api=1&query=' + domPolskiBellevue.lat + ',' + domPolskiBellevue.lng + '" target="_blank" rel="noopener"><i class="bi bi-geo-alt"></i> Google Maps</a></div></div></div>');
				infoWindow.open(map, markerStay);
			});
			markersGroup.hotels.push(markerStay);
			allMarkerData.push({ marker: markerStay, dates: [], type: 'hotels' });

			// Markery wszystkich lokalizacji
			locations.forEach((loc, index) => {
				let icon;
				if (loc.type === 'church') icon = churchIcon(loc.number);
				else if (loc.type === 'historic') icon = historicIcon();
				else if (loc.type === 'attraction') icon = attractionIcon();
				else if (loc.type === 'hotels') icon = stayIcon();
				else icon = lourdesIcon();

				const marker = new google.maps.Marker({
					position: loc.position, map: map, title: loc.title, icon: icon,
					zIndex: loc.type === 'church' ? 1000 : (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 === 'church') churchMarkers[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 kościołów + mobilny dropdown ===== */
		function buildPills() {
			const bar = document.getElementById('pillbar');
			const grid = document.getElementById('churchDropdownGrid');
			churches.forEach(c => {
				// Desktop pill
				const pill = document.createElement('div');
				pill.className = 'pill';
				pill.innerHTML = `<span class="n">${c.number}</span> ${c.title}`;
				pill.onclick = () => flyToChurch(c.number);
				bar.appendChild(pill);

				// Mobile church card
				if (grid) {
					const card = document.createElement('div');
					card.className = 'church-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 = () => { flyToChurch(c.number); toggleChurchDropdown(); };
					grid.appendChild(card);
				}
			});
		}

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

		function toggleChurchDropdown() {
			const dd = document.getElementById('churchDropdown');
			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 flyToChurch(n) {
			const cb = document.getElementById('toggle-church');
			if (cb && !cb.checked) {
				cb.checked = true;
				toggleGroup('church', true);
			}
			const m = churchMarkers[n];
			if (!m) return;
			map.panTo(m.getPosition());
			map.setZoom(13);
			google.maps.event.trigger(m, 'click');
		}

		function fitChurches() {
			const b = new google.maps.LatLngBounds();
			churches.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 = text;
			el.classList.add('show');
		}

		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;
		}

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

		function showRouteFromTo(fromLat, fromLng, toLat, toLng, mode) {
			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 (status === google.maps.DirectionsStatus.OK) {
					directionsDisplay.setDirections(response);
					const route = response.routes[0];
					
					let modeIcon = '';
					if (mode === 'DRIVING') modeIcon = '<i class="bi bi-car-front"></i> Samochód: ';
					else if (mode === 'BICYCLING') modeIcon = '<i class="bi bi-bicycle"></i> Rower: ';
					else if (mode === 'WALKING') modeIcon = '<i class="bi bi-person-walking"></i> Pieszo: ';
					
					let txt = modeIcon;
					for (let i = 0; i < route.legs.length; i++) {
						txt += route.legs[i].distance.text + ' · ' + route.legs[i].duration.text;
					}
					
					txt += ` <span class="ms-2 d-inline-flex gap-1" style="vertical-align: middle;">
						<button class="route-mode-btn ${mode === 'DRIVING' ? 'active' : ''}" onclick="changeRouteMode('DRIVING')" title="Samochodem"><i class="bi bi-car-front"></i></button>
						<button class="route-mode-btn ${mode === 'BICYCLING' ? 'active' : ''}" onclick="changeRouteMode('BICYCLING')" title="Rowerem"><i class="bi bi-bicycle"></i></button>
						<button class="route-mode-btn ${mode === 'WALKING' ? 'active' : ''}" onclick="changeRouteMode('WALKING')" title="Pieszo"><i class="bi bi-person-walking"></i></button>
					</span>`;
					
					showInfo(txt);
				} else {
					showInfo('Nie można wyznaczyć trasy (' + status + ').');
				}
			});
		}

		function changeRouteMode(mode) {
			if (currentRouteTarget && miejsce) {
				showRouteFromTo(miejsce.lat(), miejsce.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(`/7-kosciolow-apokalipsy/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 kościołów
				const mobileMenu = document.getElementById('mobileMenu');
				if (mobileMenu && mobileMenu.classList.contains('open')) { toggleMobileMenu(); return; }
				const churchDD = document.getElementById('churchDropdown');
				if (churchDD && churchDD.classList.contains('open')) { toggleChurchDropdown(); 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 = churches.concat(historic, attractions, lourdes);
			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) {
				['church', 'historic', 'attraction', 'hotels'].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)));
					if (hasMatch) md.marker.setMap(map);
				}
			});
			infoWindow.close();
		}

		/* ===== Widok startowy Stambuł – Efez ===== */
		function fitInitialView() {
			const b = new google.maps.LatLngBounds();
			b.extend({ lat: 41.01, lng: 28.98 });
			b.extend({ lat: 37.94, lng: 27.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 %}