/**
 * Lawfirm Manager — directory display.
 * Scoped custom properties on .lfm-directory so a theme can override
 * colors/spacing without editing plugin files.
 */
.lfm-directory {
	--lfm-gap: 24px;
	--lfm-card-bg: #fff;
	--lfm-card-border: #e2e2e2;
	--lfm-ink: #1a1a1a;
	--lfm-ink-soft: #666;
	--lfm-ink-faint: #999;
	--lfm-accent: #1a1a1a;
	--lfm-radius: 6px;
	--lfm-filter-bg: #f7f7f5;
	--lfm-filter-border: #e6e4df;
	--lfm-cols-mobile: 1;
	--lfm-cols-tablet: 3;
	--lfm-cols-desktop: 5;
	--lfm-photo-radius: 4px;
	box-sizing: border-box;
}

.lfm-directory[data-photo-shape="round"] {
	--lfm-photo-radius: 50%;
}
.lfm-directory *,
.lfm-directory *::before,
.lfm-directory *::after {
	box-sizing: inherit;
}

/* ---- A-Z last name nav ---- */

.lfm-az-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 20px;
}

.lfm-az-letter {
	min-width: 26px;
	height: 26px;
	padding: 0 4px;
	border: 1px solid transparent;
	border-radius: 4px;
	background: none;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lfm-ink-soft);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lfm-az-letter.lfm-az-reset {
	font-weight: 700;
	padding: 0 10px;
	border-color: var(--lfm-filter-border);
}

.lfm-az-letter:hover:not(:disabled) {
	background: var(--lfm-filter-bg);
	color: var(--lfm-ink);
}

.lfm-az-letter.is-active {
	background: var(--lfm-ink);
	border-color: var(--lfm-ink);
	color: #fff;
}

.lfm-az-letter:disabled {
	color: var(--lfm-ink-faint);
	opacity: 0.4;
	cursor: default;
}

/* ---- controls / mega-menu filters ---- */

.lfm-directory-controls {
	position: relative;
	margin-bottom: 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.lfm-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	position: relative;
}

/* ---- view switcher: sits to the right of the filters, same row ---- */

.lfm-view-switcher {
	display: flex;
	gap: 6px;
	flex: 0 0 auto;
	margin-left: auto;
}

.lfm-view-switcher-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--lfm-filter-border);
	border-radius: 7px;
	background: var(--lfm-filter-bg);
	color: var(--lfm-ink-soft);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lfm-view-switcher-btn:hover {
	border-color: #d5d2ca;
	background-color: #f1f0eb;
}

.lfm-view-switcher-btn.is-active {
	background: var(--lfm-ink);
	border-color: var(--lfm-ink);
	color: #fff;
}

.lfm-view-switcher-btn:focus-visible {
	outline: 2px solid var(--lfm-accent);
	outline-offset: 2px;
}

.lfm-filter {
	position: relative;
}

.lfm-filter-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-family: inherit;
	padding: 9px 16px;
	border: 1px solid var(--lfm-filter-border);
	border-radius: 8px;
	background-color: var(--lfm-filter-bg);
	color: var(--lfm-ink-soft);
	cursor: pointer;
	min-width: 150px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lfm-filter-trigger:hover {
	border-color: #d5d2ca;
	background-color: #f1f0eb;
}

.lfm-filter-trigger:focus-visible {
	outline: none;
	border-color: #b7b2a4;
	box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.08);
}

.lfm-filter-caret {
	margin-left: auto;
	flex: 0 0 auto;
	transition: transform 0.15s ease;
}

.lfm-filter[data-open="true"] .lfm-filter-caret {
	transform: rotate(180deg);
}

.lfm-filter[data-open="true"] .lfm-filter-trigger {
	border-color: #b7b2a4;
	background-color: #f1f0eb;
}

.lfm-filter.has-selection .lfm-filter-trigger {
	border-color: var(--lfm-ink);
	color: var(--lfm-ink);
}

/* Mega-menu panel: a short multi-column list instead of a long <select>,
   but capped at 2-3 columns and hangs off its own trigger button rather
   than stretching the whole directory width. */
.lfm-filter-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 20;
	width: max-content;
	min-width: 100%;
	max-width: min(520px, 90vw);
	max-height: 225px;
	overflow-y: auto;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--lfm-filter-border);
	border-radius: 8px;
	box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.25);
	display: grid;
	grid-template-columns: repeat(var(--lfm-filter-cols, 3), minmax(140px, 1fr));
	gap: 0 20px;
	align-content: start;
}

.lfm-filter-panel[hidden] {
	display: none;
}

/* A plain text list, not a stack of buttons — tight line-height so a
   20-item taxonomy still reads as a menu, not a form. */
.lfm-filter-option {
	display: block;
	width: 100%;
	text-align: left;
	font-size: 13px;
	line-height: 1.9;
	padding: 0;
	border: none;
	background: none;
	color: var(--lfm-ink-soft);
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lfm-filter-option:hover {
	color: var(--lfm-ink);
	text-decoration: underline;
}

.lfm-filter-option.is-selected {
	color: var(--lfm-ink);
	font-weight: 600;
}

.lfm-filter-option:focus-visible {
	outline: 2px solid var(--lfm-accent);
	outline-offset: 1px;
}

/* ---- items container (grid) — explicit column counts driven by
   --lfm-cols-*, either the layout's own defaults or a chosen fixed count,
   rather than auto-fit (which let cards balloon in width with few per row) ---- */

.lfm-directory-items {
	display: grid;
	gap: var(--lfm-gap);
	grid-template-columns: repeat(var(--lfm-cols-mobile), 1fr);
}

@media (min-width: 641px) {
	.lfm-directory-items {
		grid-template-columns: repeat(var(--lfm-cols-tablet), 1fr);
	}
}

@media (min-width: 981px) {
	.lfm-directory-items {
		grid-template-columns: repeat(var(--lfm-cols-desktop), 1fr);
	}
}

/* Horizontal defaults to 2-up rather than the base 3/5 — it's a roomier
   card, not meant to run as many-up as the other grids — but only when
   the user hasn't explicitly picked a column count. Scoped to
   [data-columns="auto"] so an explicit Columns choice (including "1
   column") isn't silently overridden: without that scoping this custom
   property, redeclared on a descendant of .lfm-directory, would always
   win over the ancestor's data-columns-driven value regardless of what
   the user picked. */
.lfm-directory[data-columns="auto"] .lfm-directory-view[data-view-layout="grid-horizontal"] {
	--lfm-cols-tablet: 2;
	--lfm-cols-desktop: 2;
}

.lfm-directory-view[hidden] {
	display: none;
}

.lfm-directory[data-columns="1"] { --lfm-cols-tablet: 1; --lfm-cols-desktop: 1; }
.lfm-directory[data-columns="2"] { --lfm-cols-tablet: 2; --lfm-cols-desktop: 2; }
.lfm-directory[data-columns="3"] { --lfm-cols-tablet: 3; --lfm-cols-desktop: 3; }
.lfm-directory[data-columns="4"] { --lfm-cols-tablet: 4; --lfm-cols-desktop: 4; }
.lfm-directory[data-columns="5"] { --lfm-cols-tablet: 4; --lfm-cols-desktop: 5; }
.lfm-directory[data-columns="6"] { --lfm-cols-tablet: 4; --lfm-cols-desktop: 6; }

/* ---- card: shared ---- */

.lfm-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
	border-radius: var(--lfm-radius);
}

.lfm-card-photo {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}

/* Several card templates make the name its own link instead of wrapping
   the whole card in one <a> — see the comment at the top of card-grid.php
   for why. */
.lfm-card-name-link {
	color: inherit;
	text-decoration: none;
}

.lfm-card-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lfm-card-photo-placeholder {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #ececec, #e0e0e0);
}

/* .lfm-directory prefix + !important on purpose: the active theme's own
   compound selectors can carry higher specificity than a bare class and
   were winning the cascade here even though this stylesheet loads last —
   forcing dark, visible text regardless of what the theme does elsewhere.
   line-height explicitly set for the same reason: left unset it inherited
   the theme's own (much larger) typography line-height, which stacked up
   across several fields until the total content height overflowed past
   the card's overflow:hidden boundary and got clipped — text that was
   technically still there, just pushed below the visible card. */
.lfm-directory .lfm-card-name {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3 !important;
	color: var(--lfm-ink) !important;
}

.lfm-directory .lfm-card-field {
	margin: 4px 0 0;
	font-size: 13.5px;
	line-height: 1.4 !important;
	color: var(--lfm-ink-soft) !important;
}

/* Location/practice-area links carry no class of their own, so without
   this they'd fall back to the browser's default blue underline instead
   of matching the rest of the field's ink color. */
.lfm-directory .lfm-card-field a {
	color: inherit !important;
	text-decoration: none;
}

.lfm-directory .lfm-card-field a:hover {
	text-decoration: underline;
}

/* ---- position label: plain text, no color fill — a law firm roster
   reads more credible without a rainbow of per-title badge colors ---- */

.lfm-directory .lfm-position-label {
	margin: 2px 0 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3 !important;
	color: var(--lfm-ink-soft) !important;
}

h3 + .lfm-position-label {
	margin-top: 1px;
}

/* ---- card: classic grid ---- */

.lfm-card-grid {
	background: var(--lfm-card-bg);
	border: 1px solid var(--lfm-card-border);
	border-radius: var(--lfm-radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.lfm-card-grid:hover {
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.22);
	transform: translateY(-2px);
}

.lfm-card-grid .lfm-card-photo {
	aspect-ratio: 1 / 1;
}

.lfm-card-grid .lfm-card-body {
	padding: 12px 14px 14px;
}

/* ---- card: photo overlay ----
   Two hard-won rules govern this whole section and the horizontal one
   below: (1) never animate opacity on an ancestor of this text — opacity
   multiplies down the DOM tree, so no !important on a child can undo a
   parent sitting at anything less than 1 (this is what caused text to
   render invisible after adding fields — see the transform-only
   .lfm-card-fade-in keyframes further down, which deliberately do not
   touch opacity anymore); (2) the active theme can carry higher-
   specificity selectors than a plain class even though this stylesheet
   loads last, so every rule that MUST win — text color, visibility — is
   written as `.lfm-directory <target>` plus !important, everywhere,
   consistently, rather than case-by-case. */

.lfm-card-overlay {
	border-radius: var(--lfm-radius);
	overflow: hidden;
	background: var(--lfm-card-bg);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.lfm-card-overlay:hover {
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}

.lfm-card-overlay-photo {
	position: relative;
	aspect-ratio: 3 / 4;
}

.lfm-card-overlay-photo-link {
	position: absolute;
	inset: 0;
	display: block;
}

.lfm-card-overlay-photo img,
.lfm-card-overlay-photo .lfm-card-photo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lfm-card-overlay-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px;
	/* No gradient/panel of any kind — legibility comes from the shadow
	   alone, straight on top of the photo. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 1px 10px rgba(0, 0, 0, 0.6);
}

.lfm-directory .lfm-card-overlay-text,
.lfm-directory .lfm-card-overlay-text * {
	opacity: 1 !important;
	visibility: visible !important;
}

.lfm-directory .lfm-card-overlay-text .lfm-card-name {
	color: #fff !important;
}

.lfm-directory .lfm-card-overlay-text .lfm-position-label {
	color: rgba(255, 255, 255, 0.9) !important;
}

/* Everything else selected (phone, location, practice area, ...) gets the
   same plain white-over-photo treatment as name/position — nothing drops
   into a separate panel or strip. */
.lfm-directory .lfm-card-overlay-text .lfm-card-field {
	margin: 4px 0 0;
	color: rgba(255, 255, 255, 0.9) !important;
}

.lfm-directory .lfm-card-overlay-text .lfm-card-field a {
	color: inherit !important;
	text-decoration: none;
}

.lfm-directory .lfm-card-overlay-text .lfm-card-field a:hover {
	text-decoration: underline;
}

.lfm-directory .lfm-card-overlay-text .lfm-field-icon {
	color: #fff !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
}

/* Email/LinkedIn are styled as circular icon buttons everywhere else in
   the plugin, but here that reads as its own little background chip —
   strip it back down to a bare icon so every field registers the same
   plain way, straight over the photo, no box behind any of them. */
.lfm-directory .lfm-card-overlay-text .lfm-icon-button {
	width: auto !important;
	height: auto !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	color: #fff !important;
}

.lfm-directory .lfm-card-overlay-text .lfm-icon-button:hover {
	background: none !important;
	color: rgba(255, 255, 255, 0.7) !important;
}

/* ---- card: horizontal split ----
   Photo hard-left at a fixed width, text fills the rest of the row — always,
   never stacked, regardless of how narrow the card's container is (a WP
   admin preview panel, a sidebar, a 2-column grid track). Two things make
   that safe: (1) the photo is a fixed pixel width with flex-shrink:0, so it
   never shrinks toward zero and stays visually consistent; (2) the text
   column is flex:1 with min-width:0 and normal word-wrapping, so however
   little width it's given, text wraps onto more lines and the card grows
   taller — it can get cramped, but it can never disappear. (An earlier
   version used a fixed *percentage* photo width, which meant a narrow
   container squeezed the text column toward zero instead of the card
   simply growing taller; a version after that flipped to a stacked layout
   below a width threshold, which the fixed left/right split here replaces.) */

.lfm-card-horizontal {
	display: flex;
	align-items: stretch;
	background: var(--lfm-card-bg);
	border: 1px solid var(--lfm-card-border);
	border-radius: var(--lfm-radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease;
}

.lfm-card-horizontal:hover {
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.22);
}

.lfm-card-horizontal-photo {
	flex: 0 0 180px;
	width: 180px;
}

.lfm-directory[data-horizontal-photo-size="small"] .lfm-card-horizontal-photo {
	flex-basis: 120px;
	width: 120px;
}

.lfm-directory[data-horizontal-photo-size="large"] .lfm-card-horizontal-photo {
	flex-basis: 240px;
	width: 240px;
}

.lfm-directory[data-horizontal-photo-size="xlarge"] .lfm-card-horizontal-photo {
	flex-basis: 300px;
	width: 300px;
}

.lfm-card-horizontal-body {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow-wrap: break-word;
	word-break: break-word;
	padding: 22px 24px;
}

.lfm-directory .lfm-card-horizontal-body,
.lfm-directory .lfm-card-horizontal-body * {
	opacity: 1 !important;
	visibility: visible !important;
	text-indent: 0 !important;
	clip: auto !important;
	clip-path: none !important;
}

.lfm-directory .lfm-card-horizontal-body .lfm-card-name {
	color: var(--lfm-ink) !important;
}

.lfm-directory .lfm-card-horizontal-body .lfm-position-label,
.lfm-directory .lfm-card-horizontal-body .lfm-card-field {
	color: var(--lfm-ink-soft) !important;
	margin-top: 10px !important;
}

.lfm-directory .lfm-card-horizontal-body .lfm-card-name {
	margin-bottom: 4px;
}

@media (max-width: 380px) {
	/* !important: at this width the card stays cramped no matter which
	   size the shortcode picked (attribute-selector rules above have
	   higher specificity than this plain class, so without !important a
	   "large"/"xlarge" choice would still win here). */
	.lfm-card-horizontal-photo {
		flex-basis: 100px !important;
		width: 100px !important;
	}
}

/* ---- card: minimal ---- */

.lfm-card-minimal-photo {
	width: 68%;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--lfm-photo-radius);
	overflow: hidden;
}

.lfm-card-minimal-photo img,
.lfm-card-minimal-photo .lfm-card-photo-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lfm-card-minimal-body {
	padding: 14px 6px 4px;
	text-align: center;
}

/* ---- waterfall entrance ---- */

/* Deliberately transform-only, no opacity. Opacity multiplies down the
   DOM tree — a card animating from opacity:0 makes every child's text
   unreadable for the animation's duration no matter what color/opacity
   is forced on the child, and any interruption (JS re-toggling the
   [hidden] attribute during filtering, a slow paint under load, etc.)
   can leave a card visibly stuck at a low opacity. A slide-only entrance
   gets the same "waterfall" motion with zero risk of invisible text. */
@keyframes lfm-card-fade-in {
	from {
		transform: translateY(16px);
	}
	to {
		transform: translateY(0);
	}
}

.lfm-directory-items .lfm-card {
	animation: lfm-card-fade-in 0.25s ease both;
	animation-delay: calc(var(--i, 0) * 20ms);
}

/* ---- load more / infinite scroll ---- */

.lfm-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.lfm-load-more-sentinel {
	position: absolute;
	width: 1px;
	height: 1px;
}

.lfm-load-more {
	font-size: 13.5px;
	font-weight: 600;
	padding: 11px 28px;
	border: 1px solid var(--lfm-ink);
	border-radius: 8px;
	background: #fff;
	color: var(--lfm-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lfm-load-more:hover {
	background: var(--lfm-ink);
	color: #fff;
}

/* ---- table (list + compact layouts) ---- */

.lfm-table-wrap {
	overflow-x: auto;
}

.lfm-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

/* Strip any theme default cell borders (page-builder themes commonly put
   a border on every <td>/<th> side) — this table only ever wants a
   horizontal line between rows, never vertical lines between columns. */
.lfm-table th,
.lfm-table td {
	border: none !important;
	border-bottom: 1px solid var(--lfm-card-border) !important;
}

.lfm-table thead th {
	text-align: left;
	font-size: 11.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lfm-ink-soft);
	font-weight: 600;
	padding: 0 14px 10px 0;
}

.lfm-table tbody tr:last-child td {
	border-bottom: none !important;
}

.lfm-table tbody tr:hover {
	background: #fafaf8;
}

.lfm-table td {
	padding: 12px 14px 12px 0;
	vertical-align: middle;
	color: var(--lfm-ink-soft);
}

.lfm-table-photo-col {
	width: 1%;
}

.lfm-table-photo {
	width: 1%;
	padding-right: 16px !important;
}

.lfm-table-photo a {
	display: block;
	border-radius: var(--lfm-photo-radius);
	overflow: hidden;
}

.lfm-table-photo img,
.lfm-table-photo .lfm-card-photo-placeholder {
	display: block;
	object-fit: cover;
	border-radius: var(--lfm-photo-radius);
}

.lfm-directory-view[data-view-layout="list"] .lfm-table-photo img,
.lfm-directory-view[data-view-layout="list"] .lfm-table-photo .lfm-card-photo-placeholder {
	width: 150px;
	height: 150px;
}

.lfm-directory-view[data-view-layout="compact"] .lfm-table-photo img,
.lfm-directory-view[data-view-layout="compact"] .lfm-table-photo .lfm-card-photo-placeholder {
	width: 40px;
	height: 40px;
}

.lfm-directory-view[data-view-layout="compact"] .lfm-table {
	font-size: 13px;
}

.lfm-directory-view[data-view-layout="compact"] .lfm-table td {
	padding-top: 8px;
	padding-bottom: 8px;
}

.lfm-table-name-link {
	font-weight: 600;
	color: var(--lfm-ink);
	text-decoration: none;
}

.lfm-table-name-link:hover {
	text-decoration: underline;
}

/* Deliberately NOT flexbox: an inline-flex row was still getting knocked
   onto two lines (icon above text) by the active theme's own higher-
   specificity rules on page-builder themes like TheGem, even with
   !important. Plain inline flow can't stack like that — the icon is just
   an inline-block glyph sitting on the same line as the text next to it,
   full stop. .lfm-directory prefix + !important is belt-and-suspenders
   against the same kind of override. */
.lfm-directory .lfm-field-phone,
.lfm-directory .lfm-field-location {
	display: inline !important;
	color: var(--lfm-ink-soft) !important;
	text-decoration: none;
	white-space: nowrap;
}

.lfm-directory .lfm-field-phone:hover {
	text-decoration: underline;
}

/* Icon buttons (email/LinkedIn) are always icon-only now — see
   LFM_Fields::render_value(). */
.lfm-directory .lfm-field-email,
.lfm-directory .lfm-field-linkedin {
	color: var(--lfm-ink-soft) !important;
	text-decoration: none;
}

/* Email and LinkedIn are grouped by LFM_Fields::render_fields_html() into
   one shared <p class="lfm-card-icon-row"> instead of two separate <p>
   tags — a real flex row, not an inline-block trick, because a card body
   that's itself a flex container (horizontal, carousel) forces every
   direct-child <p> to blockify to full-width regardless of its own
   `display` value (a flex item's outer display is always block per the
   CSS Display spec — no amount of !important can override that). Wrapping
   them together sidesteps it entirely: the wrapper is the flex/grid item,
   the icon buttons inside it are free to lay out horizontally. */
.lfm-directory .lfm-card-icon-row {
	display: flex !important;
	align-items: center;
	gap: 8px;
}

.lfm-directory .lfm-field-icon {
	display: inline-block !important;
	vertical-align: middle !important;
	margin-right: 5px;
	color: var(--lfm-ink-faint);
}

/* ---- icon buttons: email + LinkedIn ---- */

.lfm-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid var(--lfm-card-border);
	border-radius: 50%;
	color: var(--lfm-ink-soft);
	background: #fff;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.lfm-icon-button:hover {
	background: var(--lfm-ink);
	border-color: var(--lfm-ink);
	color: #fff;
}

.lfm-icon-button .lfm-field-icon {
	color: inherit;
	margin-right: 0;
}

/* ---- empty states ---- */

.lfm-no-attorneys,
.lfm-no-results {
	padding: 40px 0;
	text-align: center;
	color: var(--lfm-ink-soft);
}

.lfm-card[hidden] {
	display: none;
}

/* ---- accessibility ---- */

.lfm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.lfm-filter-trigger:focus-visible,
.lfm-card-link:focus-visible,
.lfm-table-name-link:focus-visible,
.lfm-load-more:focus-visible,
.lfm-az-letter:focus-visible {
	outline: 2px solid var(--lfm-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.lfm-card-grid,
	.lfm-card-grid:hover,
	.lfm-card-overlay,
	.lfm-card-overlay:hover,
	.lfm-card-horizontal {
		transition: none;
		transform: none;
	}
	.lfm-directory-items .lfm-card {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ---- responsive ---- */

@media (max-width: 640px) {
	.lfm-filters {
		flex-direction: column;
		width: 100%;
	}
	.lfm-filter,
	.lfm-filter-trigger {
		width: 100%;
	}
	.lfm-filter-panel {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	}
	.lfm-directory {
		--lfm-gap: 14px;
	}
	.lfm-directory-view[data-view-layout="list"] .lfm-table-photo img,
	.lfm-directory-view[data-view-layout="list"] .lfm-table-photo .lfm-card-photo-placeholder {
		width: 64px;
		height: 64px;
	}
}

/* ---- carousel (sidebar + wide) ---- */

.lfm-carousel {
	position: relative;
	max-width: 100%;
}

.lfm-carousel-viewport {
	overflow: hidden;
	border-radius: var(--lfm-photo-radius, 4px);
}

.lfm-carousel-track {
	display: flex;
	transition: transform 0.4s ease;
}

.lfm-carousel-slide {
	flex: 0 0 100%;
	min-width: 100%;
}

.lfm-carousel-slide-inner {
	display: block;
}

.lfm-carousel-photo {
	display: block;
	color: inherit;
	text-decoration: none;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f2f2f2;
}

.lfm-carousel-photo img,
.lfm-carousel-photo .lfm-card-photo-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lfm-carousel-body {
	padding: 16px 4px 4px;
	text-align: center;
}

.lfm-carousel .lfm-card-name {
	margin: 0 0 4px;
	font-size: 1.05em;
}

.lfm-carousel .lfm-position-label {
	margin: 0 0 6px;
}

.lfm-carousel .lfm-card-field {
	justify-content: center;
}

.lfm-carousel-arrow {
	position: absolute;
	top: calc(50% - 20px);
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--lfm-card-border);
	background: #fff;
	color: var(--lfm-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.lfm-carousel-arrow:hover,
.lfm-carousel-arrow:focus-visible {
	background: var(--lfm-ink);
	color: #fff;
	border-color: var(--lfm-ink);
}

.lfm-carousel-prev {
	left: -6px;
}

.lfm-carousel-next {
	right: -6px;
}

.lfm-carousel-sidebar .lfm-carousel-arrow {
	top: calc(50% - 60px);
}

.lfm-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.lfm-carousel-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--lfm-card-border);
	cursor: pointer;
}

.lfm-carousel-dot.is-active {
	background: var(--lfm-ink);
}

/* Wide variant: photo and text side by side, arrows out past the edges. */
.lfm-carousel-wide .lfm-carousel-slide-inner {
	display: flex;
	align-items: stretch;
	gap: 32px;
}

.lfm-carousel-wide .lfm-carousel-photo {
	flex: 0 0 42%;
	aspect-ratio: 4 / 3;
}

.lfm-carousel-wide .lfm-carousel-body {
	flex: 1;
	padding: 8px 4px;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.lfm-carousel-wide .lfm-card-name {
	font-size: 1.3em;
}

.lfm-carousel-wide .lfm-card-field {
	justify-content: flex-start;
}

.lfm-carousel-wide .lfm-carousel-prev {
	left: -17px;
}

.lfm-carousel-wide .lfm-carousel-next {
	right: -17px;
}

@media (max-width: 640px) {
	.lfm-carousel-wide .lfm-carousel-slide-inner {
		flex-direction: column;
	}
	.lfm-carousel-wide .lfm-carousel-photo {
		flex-basis: auto;
		aspect-ratio: 3 / 4;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lfm-carousel-track {
		transition: none;
	}
}

/* ---- multi-image carousel: 3-4 larger photos scrolling as a page at a time ---- */

.lfm-carousel-multi {
	padding: 0 40px;
}

.lfm-carousel-multi-track {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.lfm-carousel-multi-track::-webkit-scrollbar {
	display: none;
}

.lfm-carousel-multi-item {
	flex: 0 0 calc(25% - 15px);
	scroll-snap-align: start;
	display: block;
	color: inherit;
	text-decoration: none;
}

.lfm-carousel-multi .lfm-carousel-photo {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #f2f2f2;
	border-radius: var(--lfm-photo-radius, 4px);
}

.lfm-carousel-multi .lfm-carousel-photo img,
.lfm-carousel-multi .lfm-carousel-photo .lfm-card-photo-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lfm-carousel-multi .lfm-carousel-body {
	padding: 12px 2px 0;
	text-align: center;
}

.lfm-carousel-multi .lfm-card-name {
	margin: 0 0 4px;
	font-size: 1em;
}

.lfm-carousel-multi .lfm-position-label {
	margin: 0;
}

.lfm-carousel-multi .lfm-carousel-arrow {
	top: calc(50% - 40px);
}

@media (max-width: 900px) {
	.lfm-carousel-multi-item {
		flex-basis: calc(33.333% - 14px);
	}
}

@media (max-width: 640px) {
	.lfm-carousel-multi {
		padding: 0 32px;
	}
	.lfm-carousel-multi-item {
		flex-basis: calc(50% - 10px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lfm-carousel-multi-track {
		scroll-behavior: auto;
	}
}