/*
 * Mobile layout for single directory listings (business, worship, community).
 * Loaded only on those pages. Desktop is unchanged: everything below is inside
 * a max-width media query, and .lm is hidden by default.
 */

.lm { display: none; }

@media (max-width: 780px) {

	/* Swap the two-column desktop layout for the mobile one. */
	.lm ~ .listing-single,
	.lm ~ .listing-back {
		display: none;
	}

	.lm {
		--lm-ink: #1b2430;
		--lm-muted: #5b6673;
		--lm-hair: #ddd8ce;
		--lm-accent: #1d6fb5;
		--lm-tint: #e3effa;
		--lm-dir: #2b8fe0;
		--lm-map: #e8590c;
		--lm-back: #1f2937;

		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		/* Full width of the screen, even inside the padded .container. */
		width: 100vw;
		max-width: 100vw;
		margin: 0 0 0 calc(50% - 50vw);
		padding: 0;
		background: var(--color-bg, #f4f6f5);
		color: var(--lm-ink);
		font-family: var(--font-body, system-ui, sans-serif);
		font-size: 16px;
		line-height: 1.4;
	}

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

	/* Header */
	.lm .lm__head {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 28px 20px 18px;
	}

	.lm .lm__chip {
		display: inline-block;
		padding: 5px 12px;
		border: 1px solid var(--lm-accent);
		border-radius: 999px;
		color: var(--lm-accent);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1.3;
		text-transform: uppercase;
	}

	.lm .lm__name {
		margin: 0;
		padding: 0;
		color: var(--lm-ink);
		font-family: var(--font-heading, Georgia, serif);
		font-size: 28px;
		font-weight: 700;
		line-height: 1.15;
		letter-spacing: -0.01em;
	}

	.lm .lm__desc {
		margin: 0;
		padding: 0 20px 22px;
		color: #2e3743;
		font-size: 16px;
		line-height: 1.55;
	}

	/* Contact rows */
	.lm .lm__contact { padding: 0 20px 22px; }

	.lm .lm__heading {
		margin: 0 0 8px;
		color: var(--lm-muted);
		font-family: var(--font-body, system-ui, sans-serif);
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.08em;
		line-height: 1.3;
		text-transform: uppercase;
	}

	.lm .lm__row,
	.lm a.lm__row,
	.lm a.lm__row:visited,
	.lm a.lm__row:hover {
		display: flex;
		align-items: center;
		gap: 16px;
		min-height: 64px;
		margin: 0;
		padding: 8px 0;
		border-top: 1px solid var(--lm-hair);
		color: var(--lm-ink);
		text-decoration: none;
	}

	.lm .lm__row:last-child { border-bottom: 1px solid var(--lm-hair); }

	.lm .lm__circle {
		flex: 0 0 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 999px;
		background: var(--lm-tint);
		color: var(--lm-accent);
	}

	.lm .lm__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
	.lm .lm__label { color: var(--lm-muted); font-size: 12px; }
	.lm .lm__value { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
	.lm .lm__icon { display: block; flex: none; max-width: none; }

	/* Map (same embed the desktop template uses) */
	.lm .lm__map {
		margin: 0 0 22px;
		line-height: 0;
		background: #e8ecea;
	}
	.lm .lm__map iframe { display: block; width: 100%; height: 260px; border: 0; }

	/* Full-width buttons */
	.lm .lm__actions {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin: 0 0 24px;
	}

	.lm a.lm__btn,
	.lm a.lm__btn:visited,
	.lm a.lm__btn:hover,
	.lm a.lm__btn:focus {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
		width: 100%;
		min-height: 64px;
		margin: 0;
		padding: 0 20px;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		color: #ffffff !important;
		font-family: var(--font-body, system-ui, sans-serif);
		font-size: 19px;
		font-weight: 700;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
	}

	.lm a.lm__btn--dir { background: var(--lm-dir); }
	.lm a.lm__btn--map { background: var(--lm-map); }
	.lm a.lm__btn--back { background: var(--lm-back); font-size: 17px; gap: 10px; }
	.lm a.lm__btn:hover, .lm a.lm__btn:focus { filter: brightness(0.92); }
	.lm .lm__btn .lm__icon { stroke: #ffffff; }

	.lm a:focus-visible { outline: 3px solid var(--lm-ink); outline-offset: -3px; }
	.lm a.lm__btn:focus-visible { outline-color: #ffffff; }
}