/**
 * EFLL Site Design - V2 piece #7: office finder (replaces the raw "OFFICE LOCATIONS" carousel).
 * Markup: includes/v2-offices.php (.eo-finder > .eo-map + ul.eo-list > li.eo-item).
 * Phones (<768): map on top (4:3), compact rows below. Tablet (768-1023): map 16:9, rows in two columns.
 * Desktop (>=1024): list left, map right, one framed panel.
 * List-only mode (.eo-offices > ul.eo-cards > li.eo-card) when the page already has its own map:
 * a grid of office cards, 1 column on phones (compact rows), 2 at >=560, 3 at >=900, 4 at >=1200,
 * last row centred. Every rule is scoped to body.efll-sd.efll-v2.
 */

body.efll-sd.efll-v2 .efll-inner :is(.eo-finder, .eo-offices) {
	--eo-panel: #ffffff;
	--eo-line: #dfe4eb;
	--eo-firm: #5d6f86;
	--eo-city: #1b304b;
	--eo-addr: #4b5d74;
	--eo-link: #7a5a0c;
	--eo-hover: #f5f7fa;
	--eo-on-bg: #0e1a2b;
	--eo-on-firm: #e6c25a;
	--eo-on-city: #ffffff;
	--eo-on-addr: #d9e0ea;
	--eo-on-link: #e6c25a;
	--eo-gold: #d4a72c;
}
body.efll-sd.efll-v2 .efll-inner .eo-finder {
	position: relative;
	display: flex;
	flex-direction: column;
	max-width: none;
	margin-inline: 0;
	background: var(--eo-panel);
	border: 1px solid var(--eo-line);
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(8, 17, 29, .04), 0 28px 60px -42px rgba(8, 17, 29, .55);
	overflow: hidden;
	font-family: var(--ei-body);
}
/* a thin gold rule across the top of the panel, like the site's section rules */
body.efll-sd.efll-v2 .efll-inner .eo-finder::before {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0 0 auto 0;
	height: 2px;
	background: linear-gradient(90deg, var(--eo-gold), #e6c25a 55%, rgba(212, 167, 44, 0));
	pointer-events: none;
}

/* on a dark band the panel goes navy too */
body.efll-sd.efll-v2 .efll-inner :is(.ei-sec--dark, .ei-cta, .ei-consult) :is(.eo-finder, .eo-offices) {
	--eo-panel: #0b1626;
	--eo-line: #24364f;
	--eo-firm: #9fb0c6;
	--eo-city: #ffffff;
	--eo-addr: #d9e0ea;
	--eo-link: #e6c25a;
	--eo-hover: #10203a;
	--eo-on-bg: #050b14;
	box-shadow: none;
}

/* ---------------------------------------------------------------- map */
body.efll-sd.efll-v2 .efll-inner .eo-map {
	position: relative;
	aspect-ratio: 4 / 3;
	margin: 0;
	background-color: #e7ebf0;
	/* neutral, quiet "street map" placeholder while the embed loads (or if it is blocked) */
	background-image:
		radial-gradient(ellipse at 50% 48%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 58%),
		linear-gradient(121deg, transparent 46.8%, rgba(255, 255, 255, .95) 46.8%, rgba(255, 255, 255, .95) 48.1%, transparent 48.1%),
		linear-gradient(32deg, transparent 64%, rgba(255, 255, 255, .8) 64%, rgba(255, 255, 255, .8) 64.7%, transparent 64.7%),
		repeating-linear-gradient(0deg, transparent 0 84px, rgba(255, 255, 255, .55) 84px 86px, transparent 86px 131px, rgba(255, 255, 255, .4) 131px 132px),
		repeating-linear-gradient(90deg, transparent 0 112px, rgba(255, 255, 255, .55) 112px 114px, transparent 114px 171px, rgba(255, 255, 255, .4) 171px 172px);
	scroll-margin-top: 96px;
}
body.efll-sd.efll-v2 .efll-inner .eo-map-ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
}
body.efll-sd.efll-v2 .efll-inner .eo-map-ph-pin {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #0e1a2b;
	color: var(--eo-gold);
	box-shadow: 0 0 0 8px rgba(14, 26, 43, .08), 0 10px 24px -8px rgba(8, 17, 29, .5);
}
body.efll-sd.efll-v2 .efll-inner .eo-map-ph-pin .eo-pin { width: 24px; height: 24px; }
body.efll-sd.efll-v2 .efll-inner .eo-map-frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
}
/* label of the office on show: bottom-left, clear of Google's place card (top-left) and controls (right) */
body.efll-sd.efll-v2 .efll-inner .eo-map-tag {
	position: absolute;
	z-index: 2;
	left: 12px;
	bottom: 28px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 80px);
	margin: 0;
	padding: 8px 14px 8px 11px;
	background: #0e1a2b;
	border-left: 2px solid var(--eo-gold);
	border-radius: 2px;
	box-shadow: 0 8px 22px -10px rgba(5, 11, 20, .7);
	color: #ffffff;
	font-family: var(--ei-cond);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .2em;
	text-transform: uppercase;
	pointer-events: none;
}
body.efll-sd.efll-v2 .efll-inner .eo-map-tag .eo-pin { flex: none; color: var(--eo-gold); }

/* ---------------------------------------------------------------- list */
body.efll-sd.efll-v2 .efll-inner .eo-list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.efll-sd.efll-v2 .efll-inner .eo-item {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "name open" "addr addr" "line line";
	column-gap: 14px;
	align-items: start;
	align-content: start;
	margin: 0;
	padding: 13px 14px 13px 18px;
	border-top: 1px solid var(--eo-line);
	background: transparent;
	color: var(--eo-addr);
	transition: background-color .2s var(--ei-ease, ease);
}
body.efll-sd.efll-v2 .efll-inner .eo-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: transparent;
	transition: background-color .2s var(--ei-ease, ease);
}
body.efll-sd.efll-v2 .efll-inner .eo-item::marker { content: none; }

body.efll-sd.efll-v2 .efll-inner .eo-name {
	grid-area: name;
	margin: 0;
	padding: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}
/* the office title is a toggle button (reset every theme / Elementor-kit button style) */
body.efll-sd.efll-v2 .efll-inner .eo-item .eo-pick,
body.efll-sd.efll-v2 .efll-inner .eo-item .eo-pick:is(:hover, :focus, :active) {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	cursor: default;
}
body.efll-sd.efll-v2 .efll-inner .eo-finder.eo-js .eo-pick { cursor: pointer; }
/* whole row selects (stretched hit area); the "Open Map" link sits above it */
body.efll-sd.efll-v2 .efll-inner .eo-finder.eo-js .eo-pick::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
body.efll-sd.efll-v2 .efll-inner .eo-item .eo-pick:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}
body.efll-sd.efll-v2 .efll-inner .eo-item .eo-pick:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	outline: 2px solid var(--eo-gold);
	outline-offset: -4px;
}

body.efll-sd.efll-v2 .efll-inner .eo-firm {
	display: block;
	color: var(--eo-firm);
	font-family: var(--ei-cond);
	font-weight: 600;
	font-size: 10.5px;
	line-height: 1.3;
	letter-spacing: .2em;
	text-transform: uppercase;
}
body.efll-sd.efll-v2 .efll-inner .eo-sep {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
body.efll-sd.efll-v2 .efll-inner .eo-city {
	display: block;
	margin-top: 3px;
	color: var(--eo-city);
	font-family: var(--ei-display);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase; /* source mixes "PASADENA" and "Bakersfield" */
}
body.efll-sd.efll-v2 .efll-inner :is(.eo-addr, .eo-line) {
	margin: 4px 0 0;
	color: var(--eo-addr);
	font-family: var(--ei-body);
	font-size: 14px;
	line-height: 1.45;
}
body.efll-sd.efll-v2 .efll-inner .eo-addr { grid-area: addr; }
body.efll-sd.efll-v2 .efll-inner .eo-line { grid-area: line; margin-top: 2px; }

body.efll-sd.efll-v2 .efll-inner .eo-open {
	grid-area: open;
	position: relative;
	z-index: 2;
	margin: 0;
	align-self: center;
}
body.efll-sd.efll-v2 .efll-inner .eo-open a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 4px;
	color: var(--eo-link);
	font-family: var(--ei-cond);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s var(--ei-ease, ease);
}
body.efll-sd.efll-v2 .efll-inner .eo-open a :is(strong, b) { font-weight: inherit; color: inherit; }
body.efll-sd.efll-v2 .efll-inner .eo-open a::after {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	margin-left: 1px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s var(--ei-ease, ease);
}
body.efll-sd.efll-v2 .efll-inner .eo-open a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
body.efll-sd.efll-v2 .efll-inner .eo-open a:hover::after { transform: translateX(2px) rotate(45deg); }
body.efll-sd.efll-v2 .efll-inner .eo-open a:focus-visible { outline: 2px solid var(--eo-gold); outline-offset: 2px; }

/* hover (only once the script is live, otherwise rows are not interactive) */
body.efll-sd.efll-v2 .efll-inner .eo-finder.eo-js .eo-item:not(.is-active):hover { background: var(--eo-hover); }
body.efll-sd.efll-v2 .efll-inner .eo-finder.eo-js .eo-item:not(.is-active):hover::before { background: rgba(212, 167, 44, .45); }

/* selected office */
body.efll-sd.efll-v2 .efll-inner .eo-item.is-active { background: var(--eo-on-bg); border-top-color: var(--eo-on-bg); }
body.efll-sd.efll-v2 .efll-inner .eo-item.is-active + .eo-item { border-top-color: var(--eo-on-bg); }
body.efll-sd.efll-v2 .efll-inner .eo-item.is-active::before { background: var(--eo-gold); }
body.efll-sd.efll-v2 .efll-inner .eo-item.is-active .eo-firm { color: var(--eo-on-firm); }
body.efll-sd.efll-v2 .efll-inner .eo-item.is-active .eo-city { color: var(--eo-on-city); }
body.efll-sd.efll-v2 .efll-inner .eo-item.is-active :is(.eo-addr, .eo-line) { color: var(--eo-on-addr); }
body.efll-sd.efll-v2 .efll-inner .eo-item.is-active .eo-open a { color: var(--eo-on-link); }

/* ---------------------------------------------------------------- tablet: map 16:9, rows in 2 columns */
@media (min-width: 768px) {
	body.efll-sd.efll-v2 .efll-inner .eo-map { aspect-ratio: 16 / 9; }
	body.efll-sd.efll-v2 .efll-inner .eo-list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.efll-sd.efll-v2 .efll-inner .eo-item { padding: 16px 16px 16px 22px; }
	body.efll-sd.efll-v2 .efll-inner .eo-list > .eo-item:nth-child(even) { border-left: 1px solid var(--eo-line); }
	body.efll-sd.efll-v2 .efll-inner .eo-list > .eo-item:nth-child(-n+2) { border-top: 0; }
	/* odd count: the last office spans both columns so no empty cell is left */
	body.efll-sd.efll-v2 .efll-inner .eo-list > .eo-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
	body.efll-sd.efll-v2 .efll-inner .eo-item.is-active + .eo-item { border-top-color: var(--eo-line); }
	body.efll-sd.efll-v2 .efll-inner .eo-city { font-size: 18px; }
	body.efll-sd.efll-v2 .efll-inner .eo-firm { font-size: 11px; }
}

/* ---------------------------------------------------------------- desktop: list left, map right */
@media (min-width: 1024px) {
	body.efll-sd.efll-v2 .efll-inner .eo-finder {
		display: grid;
		grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr);
		align-items: stretch;
	}
	body.efll-sd.efll-v2 .efll-inner .eo-list {
		grid-column: 1;
		grid-row: 1;
		display: flex;
		flex-direction: column;
		border-right: 1px solid var(--eo-line);
	}
	body.efll-sd.efll-v2 .efll-inner .eo-map {
		grid-column: 2;
		grid-row: 1;
		aspect-ratio: auto;
		min-height: 480px;
	}
	body.efll-sd.efll-v2 .efll-inner .eo-item {
		flex: 1 1 auto;
		align-content: center;
		padding: 14px 22px 14px 28px;
	}
	body.efll-sd.efll-v2 .efll-inner .eo-list > .eo-item:nth-child(even) { border-left: 0; }
	body.efll-sd.efll-v2 .efll-inner .eo-list > .eo-item:nth-child(2) { border-top: 1px solid var(--eo-line); }
	body.efll-sd.efll-v2 .efll-inner .eo-list > .eo-item.is-active + .eo-item:nth-child(2) { border-top-color: var(--eo-on-bg); }
	body.efll-sd.efll-v2 .efll-inner .eo-list > .eo-item:first-child { border-top: 0; }
	body.efll-sd.efll-v2 .efll-inner .eo-item.is-active + .eo-item { border-top-color: var(--eo-on-bg); }
	body.efll-sd.efll-v2 .efll-inner .eo-city { font-size: 19px; }
	body.efll-sd.efll-v2 .efll-inner .eo-addr { font-size: 15px; }
	body.efll-sd.efll-v2 .efll-inner .eo-map-tag { left: 16px; bottom: 32px; }
}

/* phones: compact rows */
@media (max-width: 767.98px) {
	body.efll-sd.efll-v2 .efll-inner .eo-list > .eo-item:first-child { border-top: 0; }
	body.efll-sd.efll-v2 .efll-inner .eo-open a { padding: 0 2px; font-size: 12.5px; letter-spacing: .14em; }
}

/* ================================================================ list-only mode (page has its own map) */
body.efll-sd.efll-v2 .efll-inner .eo-offices {
	max-width: none;
	margin-inline: 0;
	font-family: var(--ei-body);
}
body.efll-sd.efll-v2 .efll-inner .eo-cards {
	--eo-cols: 1;
	--eo-gap: 0px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--eo-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
body.efll-sd.efll-v2 .efll-inner .eo-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 calc((100% - (var(--eo-cols) - 1) * var(--eo-gap)) / var(--eo-cols));
	min-width: 0;
	margin: 0;
	padding: 22px 22px 14px;
	background: var(--eo-panel);
	border: 1px solid var(--eo-line);
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(8, 17, 29, .04), 0 18px 40px -34px rgba(8, 17, 29, .5);
	color: var(--eo-addr);
	transition: border-color .2s var(--ei-ease, ease), box-shadow .2s var(--ei-ease, ease);
}
body.efll-sd.efll-v2 .efll-inner .eo-card::marker { content: none; }
/* gold hairline across the top of each card */
body.efll-sd.efll-v2 .efll-inner .eo-card::before {
	content: "";
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 2px;
	background: linear-gradient(90deg, var(--eo-gold), #e6c25a 60%, rgba(212, 167, 44, 0));
	pointer-events: none;
}
body.efll-sd.efll-v2 .efll-inner .eo-card:hover {
	border-color: rgba(212, 167, 44, .55);
	box-shadow: 0 1px 2px rgba(8, 17, 29, .04), 0 22px 44px -30px rgba(8, 17, 29, .55);
}
body.efll-sd.efll-v2 .efll-inner .eo-card .eo-name { margin: 0; }
body.efll-sd.efll-v2 .efll-inner .eo-card .eo-city { margin-top: 4px; font-size: 18px; }
/* short gold rule under the city name */
body.efll-sd.efll-v2 .efll-inner .eo-card .eo-city::after {
	content: "";
	display: block;
	width: 28px;
	height: 1px;
	margin-top: 12px;
	background: var(--eo-gold);
}
body.efll-sd.efll-v2 .efll-inner .eo-card .eo-addr { margin-top: 12px; }
body.efll-sd.efll-v2 .efll-inner .eo-card .eo-open {
	margin-top: auto;
	padding-top: 8px;
	align-self: flex-start;
}
body.efll-sd.efll-v2 .efll-inner .eo-card .eo-open a { padding: 0; }
body.efll-sd.efll-v2 .efll-inner .eo-card .eo-firm { letter-spacing: .16em; }

/* the page's own Google map (now the only map on the page): full width of its column, framed like the cards */
body.efll-sd.efll-v2 .efll-inner .ei-raw .elementor-widget-google_maps .elementor-custom-embed {
	position: relative;
	line-height: 0;
	border: 1px solid #dfe4eb;
	border-top: 2px solid #d4a72c;
	border-radius: 2px;
	background: #e7ebf0;
	overflow: hidden;
}
body.efll-sd.efll-v2 .efll-inner .ei-raw .elementor-widget-google_maps iframe {
	display: block;
	width: 100%;
	max-width: none;
	height: clamp(300px, 34vw, 440px);
	margin: 0;
	border: 0;
}

/* phones: one column of compact rows (name + Open Map on one line, address below) */
@media (max-width: 559.98px) {
	body.efll-sd.efll-v2 .efll-inner .eo-cards {
		background: var(--eo-panel);
		border: 1px solid var(--eo-line);
		border-radius: 2px;
		position: relative;
	}
	body.efll-sd.efll-v2 .efll-inner .eo-cards::before {
		content: "";
		position: absolute;
		inset: -1px -1px auto -1px;
		height: 2px;
		background: linear-gradient(90deg, var(--eo-gold), #e6c25a 55%, rgba(212, 167, 44, 0));
	}
	body.efll-sd.efll-v2 .efll-inner .eo-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "name open" "addr addr" "line line";
		column-gap: 12px;
		padding: 13px 14px 14px 16px;
		border: 0;
		border-top: 1px solid var(--eo-line);
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}
	body.efll-sd.efll-v2 .efll-inner .eo-card:first-child { border-top: 0; }
	body.efll-sd.efll-v2 .efll-inner .eo-card::before { content: none; }
	body.efll-sd.efll-v2 .efll-inner .eo-card .eo-city { font-size: 17px; }
	body.efll-sd.efll-v2 .efll-inner .eo-card .eo-city::after { content: none; }
	body.efll-sd.efll-v2 .efll-inner .eo-card .eo-addr { margin-top: 4px; }
	body.efll-sd.efll-v2 .efll-inner .eo-card .eo-open { margin: 0; padding: 0; align-self: center; }
	body.efll-sd.efll-v2 .efll-inner .eo-card .eo-open a { padding: 0 2px; }
}
@media (min-width: 560px) {
	body.efll-sd.efll-v2 .efll-inner .eo-cards { --eo-cols: 2; --eo-gap: 16px; }
}
@media (min-width: 900px) {
	body.efll-sd.efll-v2 .efll-inner .eo-cards { --eo-cols: 3; --eo-gap: 20px; }
}
@media (min-width: 1200px) {
	body.efll-sd.efll-v2 .efll-inner .eo-cards { --eo-cols: 4; --eo-gap: 20px; }
	body.efll-sd.efll-v2 .efll-inner .eo-card { padding: 24px 24px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	body.efll-sd.efll-v2 .efll-inner :is(.eo-item, .eo-item::before, .eo-open a, .eo-open a::after, .eo-card) { transition: none; }
}
