/* GA Locations city pages (templates/city.php). Builds on the theme's 27 styles; only the city-only parts are here.
   Sheet colours (Vakiot vari_*) arrive as --gal-main / --gal-frame / --gal-text on .gal-city. */

body.kulta27 .gal-city {
	--k27-gold: var(--gal-main, #fec800);
	--k27-silk: var(--gal-frame, #005a53);
	color: var(--gal-text, #111);
}

body.kulta27 .gal-city > .kulta26-module:not(.kulta27-cover-module):not(.kulta26-facts) {
	padding-block: 3rem;
}

body.kulta27 .gal-city .gal-city__narrow {
	max-width: var(--k27-reading);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

body.kulta27 .gal-city .gal-city__narrow p,
body.kulta27 .gal-city .gal-city-map__text p {
	margin: 1rem 0 0;
	font-size: 1.0625rem;
	line-height: 1.7;
}

/* Districts, nearby areas, nearby cities */
body.kulta27 .gal-city .gal-city-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

body.kulta27 .gal-city .gal-city-tags li {
	margin: 0;
	padding: 0.375rem 0.875rem;
	border: 1px solid var(--k27-card-border);
	border-radius: 999px;
	background: var(--k27-white);
	font-size: 0.9375rem;
	line-height: 1.4;
}

body.kulta27 .gal-city .gal-city-tags--links li {
	padding: 0;
}

body.kulta27 .gal-city .gal-city-tags--links a {
	display: block;
	padding: 0.375rem 0.875rem;
	color: inherit;
	text-decoration: none;
}

body.kulta27 .gal-city .gal-city-tags--links a:hover,
body.kulta27 .gal-city .gal-city-tags--links a:focus-visible {
	text-decoration: underline;
}

/* Reviews: a grid of quote cards (video when the sheet has a video_url) */
body.kulta27 .gal-city .gal-city-reviews__grid {
	display: grid;
	gap: 1rem;
	max-width: var(--k27-content);
	margin: 2rem auto 0;
	padding: 0 1.25rem;
}

body.kulta27 .gal-city .gal-city-reviews__card {
	justify-content: center;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 1.75rem;
}

body.kulta27 .gal-city .gal-city-reviews__video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	max-height: 28rem;
	margin-bottom: 1rem;
	border-radius: var(--k27-radius-control);
	background: #000;
	object-fit: cover;
}

body.kulta27 .gal-city .kulta27-steps .kulta27-heading__lead {
	margin-top: 0.75rem;
}

body.kulta27 .gal-city .gal-city-steps__image {
	display: block;
	width: 100%;
	margin-bottom: 1rem;
	border-radius: var(--k27-radius);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Map */
body.kulta27 .gal-city .gal-city-map__grid {
	display: grid;
	gap: 2rem;
	align-items: center;
	max-width: var(--k27-content);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

body.kulta27 .gal-city .gal-city-map__grid--text {
	max-width: var(--k27-reading);
}

body.kulta27 .gal-city .gal-city-map__text .kulta27-btn {
	margin-top: 1.5rem;
}

body.kulta27 .gal-city .gal-city-map__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--k27-radius);
}

body.kulta27 .gal-city .gal-city-faq__cta {
	margin-top: 1rem;
}

/* Nearby cities */
body.kulta27 .gal-city .gal-city-nearby {
	max-width: var(--k27-content);
	margin-inline: auto;
	padding-inline: 1.25rem;
	text-align: center;
}

body.kulta27 .gal-city .gal-city-nearby__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
}

body.kulta27 .gal-city .gal-city-nearby .gal-city-tags {
	justify-content: center;
}

@media (min-width: 768px) {
	body.kulta27 .gal-city > .kulta26-module:not(.kulta27-cover-module):not(.kulta26-facts) {
		padding-block: 4.5rem;
	}

	body.kulta27 .gal-city .gal-city-reviews__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-inline: 2rem;
	}

	body.kulta27 .gal-city .gal-city-map__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 3rem;
		padding-inline: 2rem;
	}

	body.kulta27 .gal-city .gal-city-map__grid--text {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Google Maps embed at the city's lat/lng */
body.kulta27 .gal-city .gal-city-map__embed {
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var(--k27-radius);
	background: var(--k27-surface);
}

body.kulta27 .gal-city .gal-city-map__embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 768px) {
	body.kulta27 .gal-city .gal-city-map__embed {
		aspect-ratio: 16 / 10;
	}
}