/* ==========================================================================
   Arshan — Map component (.ar-gmap)
   A real, interactive Google Maps embed (no API key required). The embed is
   plain HTML, so it works without JavaScript and ports 1:1 to WordPress,
   Elementor (Google Maps widget), Blade, React, Vue, etc.

   Markup
   <div class="xx-map ar-gmap-host">                    ← any demo container
     <div class="ar-gmap">
       <iframe class="ar-gmap__frame" title="Map: …" loading="lazy"
         referrerpolicy="no-referrer-when-downgrade" allowfullscreen
         src="https://maps.google.com/maps?q=LAT,LNG&z=15&hl=en&output=embed"></iframe>
     </div>
     <div class="xx-map__card ar-gmap-overlay">…</div>   ← optional overlays
   </div>

   Change the location: edit q= (coordinates or an address) and z= (zoom 3–20).
   OpenStreetMap alternative (also key-free):
   https://www.openstreetmap.org/export/embed.html?bbox=W,S,E,N&layer=mapnik&marker=LAT,LNG

   Tokens
   --ar-map-h        host height on desktop      (default 440px)
   --ar-map-h-md     host height on tablet       (default 400px)
   --ar-map-h-sm     host height on mobile       (default 340px)
   --ar-map-bg       colour shown while the map loads
   --ar-map-filter   CSS filter applied to the map (see modifiers)
   ========================================================================== */

.ar-gmap-host {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: var(--ar-map-h, 440px);
	aspect-ratio: auto !important; /* the old illustration ratio no longer applies */
	container: ar-map / inline-size;
}

.ar-gmap {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	background:
		repeating-linear-gradient(0deg, transparent 0 47px, rgba(0, 0, 0, .04) 47px 48px),
		repeating-linear-gradient(90deg, transparent 0 47px, rgba(0, 0, 0, .04) 47px 48px),
		var(--ar-map-bg, #e9ecf1);
}

/* loading hint, covered by the iframe as soon as tiles paint */
.ar-gmap::before {
	content: "Loading map…";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 13px;
	letter-spacing: .04em;
	color: rgba(0, 0, 0, .45);
}

.ar-gmap__frame {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	filter: var(--ar-map-filter, none);
	transition: filter .4s ease;
}

/* Overlays (address cards, buttons) sit above the map; the empty space
   around them lets pointer events through so the map stays draggable. */
.ar-gmap-host > :not(.ar-gmap) { z-index: 1; pointer-events: none; }
.ar-gmap-host .ar-gmap-overlay,
.ar-gmap-host .ar-gmap-overlay * { pointer-events: auto; }

/* Keep Google's required attribution (bottom-left logo, bottom-right
   zoom/terms) and the top-left place box visible: overlays are lifted
   clear of the bottom edge. */
.ar-gmap-host .ar-gmap-overlay { margin-bottom: 30px; }

/* Narrow maps (phones, sidebars, small widgets): the address card moves
   out of the map and sits underneath it, so it never hides the map. */
@container ar-map (max-width: 440px) {
	.ar-gmap-host:has(> .ar-gmap-overlay) > .ar-gmap { position: relative; inset: auto; height: var(--ar-map-h-sm, 300px); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
	.ar-gmap-host > .ar-gmap-overlay {
		position: relative !important;
		inset: auto !important;
		transform: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		border-top: 1px solid rgba(0, 0, 0, .08);
	}
}

/* Modifiers ---------------------------------------------------------------- */
.ar-gmap--mono  { --ar-map-filter: grayscale(1) contrast(1.05) brightness(1.03); }
.ar-gmap--soft  { --ar-map-filter: saturate(.55) contrast(.98) brightness(1.04); }
.ar-gmap--warm  { --ar-map-filter: grayscale(.6) sepia(.18) contrast(1.02); }
.ar-gmap--dark  { --ar-map-filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.95) contrast(.95); --ar-map-bg: #1b2027; }
.ar-gmap--dark::before { color: rgba(255, 255, 255, .5); }

/* restore full colour while the visitor is using the map */
@media (hover: hover) {
	.ar-gmap:not(.ar-gmap--dark):hover .ar-gmap__frame,
	.ar-gmap:not(.ar-gmap--dark):focus-within .ar-gmap__frame { filter: none; }
}

@media (max-width: 991px) {
	.ar-gmap-host { min-height: var(--ar-map-h-md, 400px); }
}

@media (max-width: 575px) {
	.ar-gmap-host { min-height: var(--ar-map-h-sm, 300px); }
	/* the card now sits under the map, so the host grows with it */
	.ar-gmap-host:has(> .ar-gmap-overlay) { height: auto !important; padding: 0 !important; }
}

@media print {
	.ar-gmap__frame { display: none; }
}

/* Per-demo placement tweaks ------------------------------------------------ */
.es-map.ar-gmap-host .es-map__card { top: auto; bottom: 28px; }        /* clear Google's place box */
.hc-map.ar-gmap-host .hc-map__btn { top: 16px; bottom: auto; margin: 0; } /* clear the zoom buttons */
.tv-mapbox.ar-gmap-host { --ar-map-h: 360px; --ar-map-h-md: 340px; --ar-map-h-sm: 260px; }
.re-map.ar-gmap-host { --ar-map-h: 460px; }
@media (max-width: 575px) {
	.ft-map.ar-gmap-host .ft-map__card { max-width: calc(100% - 70px); } /* keep the zoom buttons reachable */
}