/* mod_my_map - แผนที่หน่วยงาน */

.my-map {
	--map-h: 380px;
	--map-h-sm: 280px;
	--map-card-w: 320px;
	--map-org-size: 17px;
	--map-pin-size: 44px;

	--map-accent: var(--my-primary, #1b5fa8);
	--map-card-bg: var(--my-card, #fff);
	--map-card-line: var(--my-line, #e5e7eb);
	--map-org: var(--my-dark, #13203a);
	--map-text: var(--my-muted, #566173);
	--map-pin: #d93025;
}

.my-map *, .my-map *::before, .my-map *::after { box-sizing: border-box; }

/* ------------------------------------------------------------ the heading -- */
.my-map__head { color: var(--map-head, var(--my-dark, #13203a)); }
.my-map__head[class] { font-size: var(--map-head-size, 1.35rem); }

/* The template's bar steps aside when an icon has been chosen instead. */
.my-map__head.no-bar::before { display: none; }

.my-map__head-icon {
	color: var(--map-head-icon, var(--map-accent));
	font-size: .92em; line-height: 1;
}

/* ------------------------------------------------------------ the layouts -- */
.my-map__wrap { position: relative; display: grid; gap: 14px; min-width: 0; }

.my-map.pos-left .my-map__wrap  { grid-template-columns: var(--map-card-w) minmax(0, 1fr); align-items: start; }
.my-map.pos-right .my-map__wrap { grid-template-columns: minmax(0, 1fr) var(--map-card-w); align-items: start; }
.my-map.pos-left .my-map__card  { order: -1; }
.my-map.pos-above .my-map__card { order: -1; }

/* The card sits on top of the map, tucked into a corner. */
.my-map.pos-over-bl .my-map__wrap,
.my-map.pos-over-tl .my-map__wrap { gap: 0; }

.my-map.pos-over-bl .my-map__card,
.my-map.pos-over-tl .my-map__card {
	position: absolute; z-index: 2;
	left: 16px; width: min(var(--map-card-w), calc(100% - 32px));
	max-height: calc(100% - 32px); overflow: auto;
	box-shadow: 0 8px 26px rgb(0 0 0 / .18);
	backdrop-filter: blur(2px);
}

.my-map.pos-over-bl .my-map__card { bottom: 16px; }
.my-map.pos-over-tl .my-map__card { top: 16px; }

/* -------------------------------------------------------------- the frame -- */
.my-map__frame {
	position: relative; min-width: 0;
	height: var(--map-h);
	border-radius: var(--my-radius, 14px);
	overflow: hidden;
	background: #e8eaed;
	border: 1px solid var(--map-frame-line, transparent);
}

.my-map.has-shadow .my-map__frame { box-shadow: 0 6px 20px rgb(19 32 58 / .12); }

.my-map__frame-el {
	display: block; width: 100%; height: 100%;
	border: 0;
	transition: filter .35s ease;
}

/* Google's own map is a photograph of a place; these settle it into a page. */
.my-map.fx-gray .my-map__frame-el      { filter: grayscale(1) contrast(1.02); }
.my-map.fx-grayhover .my-map__frame-el { filter: grayscale(1) contrast(1.02); }
.my-map.fx-grayhover:hover .my-map__frame-el,
.my-map.fx-grayhover:focus-within .my-map__frame-el { filter: none; }
.my-map.fx-soft .my-map__frame-el      { filter: saturate(.72) brightness(1.04); }
.my-map.fx-warm .my-map__frame-el      { filter: sepia(.28) saturate(1.05); }

/* ------------------------------------------------- load only when asked to -- */
.my-map__facade {
	display: flex; align-items: center; justify-content: center;
	width: 100%; height: 100%;
	padding: 0; border: 0; cursor: pointer;
	font: inherit; color: var(--map-org);
	background:
		repeating-linear-gradient(45deg, rgb(255 255 255 / .55) 0 12px, transparent 12px 24px),
		linear-gradient(160deg, #dfe6ef, #eef1f5);
	transition: filter .2s ease;
}

.my-map__facade:hover { filter: brightness(1.03); }
.my-map__facade:focus-visible { outline: 3px solid var(--map-accent); outline-offset: -3px; }

.my-map__facade-in {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 20px;
	border-radius: 999px;
	background: var(--map-card-bg);
	box-shadow: 0 6px 18px rgb(19 32 58 / .16);
	font-weight: 600;
}

.my-map__facade-in i { color: var(--map-accent); font-size: 1.15em; }

/* ---------------------------------------------------------------- the pin -- */
/*
 * A decoration drawn at the middle of the frame, which is where the map opens.
 * It cannot follow the map once a visitor drags it - nothing inside someone
 * else's frame can be read from out here - so it never takes the pointer.
 */
.my-map__pin {
	position: absolute; left: 50%; top: 50%; z-index: 1;
	transform: translate(-50%, -100%);
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	pointer-events: none;
}

.my-map__pin-mark {
	width: var(--map-pin-size); height: auto;
	fill: var(--map-pin);
	filter: drop-shadow(0 3px 5px rgb(0 0 0 / .35));
}

.my-map__pin-eye { fill: #fff; }

.my-map__pin-label {
	max-width: min(260px, 60vw);
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--map-card-bg);
	color: var(--map-org);
	font-size: .82rem; font-weight: 700; line-height: 1.35;
	text-align: center;
	box-shadow: 0 4px 12px rgb(0 0 0 / .2);
}

/* The ring sits on the point of the pin, not around the whole of it. */
.my-map__pin-ring {
	position: absolute; left: 50%; bottom: 0;
	width: var(--map-pin-size); height: var(--map-pin-size);
	margin: 0 0 calc(var(--map-pin-size) / -2) calc(var(--map-pin-size) / -2);
	border-radius: 50%;
	background: var(--map-pin);
	opacity: 0;
}

.my-map.pinfx-pulse .my-map__pin-ring { animation: my-map-pulse 2.2s ease-out infinite; }
.my-map.pinfx-bounce .my-map__pin-mark { animation: my-map-bounce 1.8s ease-in-out infinite; }
.my-map.pinfx-drop .my-map__pin { animation: my-map-drop .7s cubic-bezier(.3, 1.4, .5, 1) both; }

@keyframes my-map-pulse {
	0%   { opacity: .45; transform: scale(.35); }
	70%  { opacity: 0;   transform: scale(1.6); }
	100% { opacity: 0;   transform: scale(1.6); }
}

@keyframes my-map-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-9px); }
}

@keyframes my-map-drop {
	from { transform: translate(-50%, -100%) translateY(-90px); opacity: 0; }
	to   { transform: translate(-50%, -100%) translateY(0); opacity: 1; }
}

/* --------------------------------------------------------------- the card -- */
.my-map__card {
	min-width: 0;
	padding: 16px 18px;
	border-radius: var(--my-radius, 14px);
	background: var(--map-card-bg);
	border: 1px solid var(--map-card-line);
	color: var(--map-text);
	font-size: .93rem; line-height: 1.6;
}

.my-map__org {
	display: flex; align-items: flex-start; gap: 8px;
	margin: 0 0 8px;
	color: var(--map-org);
	font-size: var(--map-org-size); font-weight: 700; line-height: 1.45;
}

.my-map__org i { color: var(--map-accent); margin-top: .18em; }

.my-map__line { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; }
.my-map__line:last-of-type { margin-bottom: 0; }
.my-map__line i { flex: 0 0 1.1em; color: var(--map-accent); margin-top: .22em; text-align: center; }
.my-map__line a { color: inherit; text-decoration: none; }
.my-map__line a:hover { color: var(--map-accent); text-decoration: underline; }

.my-map__address { white-space: normal; }

/* ------------------------------------------------------------ the buttons -- */
.my-map__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.my-map__btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--map-card-line);
	background: transparent;
	color: var(--map-org);
	font: inherit; font-size: .88rem; font-weight: 600;
	text-decoration: none; cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.my-map__btn:hover { transform: translateY(-1px); border-color: var(--map-accent); color: var(--map-accent); }
.my-map__btn:focus-visible { outline: 3px solid var(--map-accent); outline-offset: 2px; }

.my-map__btn.is-primary {
	background: var(--map-accent);
	border-color: var(--map-accent);
	color: #fff;
}

.my-map__btn.is-primary:hover { color: #fff; filter: brightness(1.08); }

.my-map__btn.is-done { border-color: #16a34a; color: #16a34a; }

/* ----------------------------------------------------------------- phones -- */
@media (max-width: 767px) {
	.my-map__frame { height: var(--map-h-sm); }

	/* A card laid over a small map hides the map. Put it underneath instead. */
	.my-map.pos-left .my-map__wrap,
	.my-map.pos-right .my-map__wrap { grid-template-columns: minmax(0, 1fr); }
	.my-map.pos-left .my-map__card { order: 0; }

	.my-map.pos-over-bl .my-map__wrap,
	.my-map.pos-over-tl .my-map__wrap { gap: 14px; }

	.my-map.pos-over-bl .my-map__card,
	.my-map.pos-over-tl .my-map__card {
		position: static; width: auto; max-height: none;
		box-shadow: none; backdrop-filter: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.my-map .my-map__pin,
	.my-map .my-map__pin-mark,
	.my-map .my-map__pin-ring { animation: none; }

	.my-map.pinfx-pulse .my-map__pin-ring { opacity: 0; }
	.my-map__btn:hover { transform: none; }
}

/*
 * The heading settings every Gov module shares. Written on the module's own
 * element only when an editor changed one, so an untouched module keeps the
 * look it always had.
 */
.my-map__head {
	font-weight: var(--my-head-weight, 700);
	font-style: var(--my-head-style, inherit);
	background: var(--my-head-bg, transparent);
	padding: var(--my-head-pad, 0);
	border-radius: var(--my-head-round, 0);
	width: var(--my-head-w, auto);
}
.my-map__head[class] { font-size: var(--my-head-size, var(--map-head-size, 1.35rem)); }
.my-map__head { color: var(--my-head-colour, var(--map-head, var(--my-dark, #13203a))); }
.my-map__head span { color: inherit; }
.my-map__head .my-heading__icon { color: var(--my-head-icon, var(--my-primary, #1b5fa8)); margin-inline-end: 8px; }