/*
 * Employee Directory Plugin — Front-end Stylesheet
 * Version: 2.2.1
 * Author:  James Dorondo
 *
 * Layout system uses data attributes set by PHP on the wrapper and panel elements.
 * This ensures inline-CSS generated values match CSS selector state exactly.
 *
 * Thumbnail position (parent wrapper):
 *   data-thumb-pos="left|right|top|bottom"           → desktop
 *   data-thumb-pos-tablet="left|right|top|bottom"    → applied via @media ≤980px
 *   data-thumb-pos-mobile="left|right|top|bottom"    → applied via @media ≤767px
 *
 * Profile panel layout (each panel, driven by parent global setting):
 *   data-panel-layout="stacked|side-by-side"         → desktop
 *   data-panel-layout-tablet="stacked|side-by-side"  → applied via @media ≤980px
 *   data-panel-layout-mobile="stacked|side-by-side"  → applied via @media ≤767px
 *
 * Photo width (side-by-side only, written as CSS custom props on wrapper by PHP):
 *   --empdir-photo-width-desktop: 40%;
 *   --empdir-photo-width-tablet:  40%;
 *   --empdir-photo-width-mobile:  100%;
 *
 * Thumbnail display mode (parent wrapper):
 *   data-thumb-display="photo-only|name-only|both"         → desktop
 *   data-thumb-display-tablet="photo-only|name-only|both"  → applied via @media ≤980px
 *   data-thumb-display-mobile="photo-only|name-only|both"  → applied via @media ≤767px
 *
 * Table of Contents:
 *  1.  Base / Reset
 *  2.  Wrapper — default (right, side by side columns)
 *  3.  Wrapper — thumbnail LEFT
 *  4.  Wrapper — thumbnail TOP
 *  5.  Wrapper — thumbnail BOTTOM
 *  6.  Profile Panel — stacked (default)
 *  7.  Profile Panel — side-by-side (desktop)
 *  8.  Profile Image
 *  9.  Profile Name
 * 10.  Profile Title
 * 11.  Divider
 * 12.  Profile Body
 * 13.  Social Links
 * 14.  Thumbnail Selector (shared)
 * 15.  Thumbnail Button
 * 16.  Thumbnail Display Mode — Desktop (photo-only / name-only / both)
 * 17.  Placeholder States
 * 18.  Empty State
 * 19.  Builder Preview (edit mode)
 * 20.  Tablet ≤ 980px — wrapper layout variants
 * 21.  Tablet ≤ 980px — profile panel layout variants
 * 22.  Tablet ≤ 980px — thumbnail display mode
 * 23.  Mobile ≤ 767px — wrapper layout variants
 * 24.  Mobile ≤ 767px — horizontal scroll selector (top/bottom)
 * 25.  Mobile ≤ 767px — profile panel layout variants
 * 26.  Mobile ≤ 767px — thumbnail display mode
 * 27.  Focus / Accessibility
 * 28.  Divi module overrides
 */

/* ─── 1. Base / Reset ───────────────────────────────────────────────────────── */

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

.empdir-wrapper {
	width:    100%;
	position: relative;
}

/* ─── 2. Wrapper — Default (thumbnail RIGHT) ────────────────────────────────── */

.empdir-wrapper,
.empdir-wrapper[data-thumb-pos="right"] {
	display:        flex;
	flex-direction: row;
	align-items:    flex-start;
	gap:            30px;
}

/* Profile area fills remaining space */
.empdir-wrapper[data-thumb-pos="right"] .empdir-profiles,
.empdir-wrapper:not([data-thumb-pos]) .empdir-profiles {
	flex:      1 1 0;
	min-width: 0;
	order:     1;
}

/* Selector on the right */
.empdir-wrapper[data-thumb-pos="right"] .empdir-selector,
.empdir-wrapper:not([data-thumb-pos]) .empdir-selector {
	flex:     0 0 auto;
	width:    clamp(160px, 36%, 290px);
	order:    2;
}

/* ─── 3. Wrapper — thumbnail LEFT ───────────────────────────────────────────── */

.empdir-wrapper[data-thumb-pos="left"] {
	display:        flex;
	flex-direction: row;
	align-items:    flex-start;
	gap:            30px;
}

.empdir-wrapper[data-thumb-pos="left"] .empdir-selector {
	flex:     0 0 auto;
	width:    clamp(160px, 36%, 290px);
	order:    1;
}

.empdir-wrapper[data-thumb-pos="left"] .empdir-profiles {
	flex:      1 1 0;
	min-width: 0;
	order:     2;
}

/* ─── 4. Wrapper — thumbnail TOP ────────────────────────────────────────────── */

.empdir-wrapper[data-thumb-pos="top"] {
	display:        flex;
	flex-direction: column;
	gap:            30px;
}

.empdir-wrapper[data-thumb-pos="top"] .empdir-selector {
	width:  100%;
	order:  1;
}

.empdir-wrapper[data-thumb-pos="top"] .empdir-profiles {
	width:    100%;
	order:    2;
	flex:     1 1 auto;
}

.empdir-wrapper[data-thumb-pos="top"] .empdir-selector-scroll {
	height:     auto;
	max-height: 300px;
	overflow-y: auto;
}

/* ─── 5. Wrapper — thumbnail BOTTOM ─────────────────────────────────────────── */

.empdir-wrapper[data-thumb-pos="bottom"] {
	display:        flex;
	flex-direction: column;
	gap:            30px;
}

.empdir-wrapper[data-thumb-pos="bottom"] .empdir-profiles {
	width:  100%;
	order:  1;
	flex:   1 1 auto;
}

.empdir-wrapper[data-thumb-pos="bottom"] .empdir-selector {
	width:  100%;
	order:  2;
}

.empdir-wrapper[data-thumb-pos="bottom"] .empdir-selector-scroll {
	height:     auto;
	max-height: 300px;
	overflow-y: auto;
}

/* ─── 6. Profile Panel — Stacked (photo above text) ─────────────────────────── */

.empdir-profile-panel {
	display: none; /* hidden by default; JS adds .is-active */
}

.empdir-profile-panel.is-active {
	display:        flex;
	flex-direction: column;
	gap:            16px;
}

/* Stacked: image full width above text */
.empdir-profile-panel[data-panel-layout="stacked"].is-active .empdir-profile-image-wrap {
	width:     100%;
	max-width: none;
	flex:      none;
}

/* ─── 7. Profile Panel — Side by Side (desktop) ─────────────────────────────── */

.empdir-profile-panel[data-panel-layout="side-by-side"].is-active {
	display:        flex;
	flex-direction: row;
	align-items:    flex-start;
	gap:            24px;
}

.empdir-profile-panel[data-panel-layout="side-by-side"].is-active .empdir-profile-image-wrap {
	flex:      0 0 var(--empdir-photo-width-desktop, 40%);
	width:     var(--empdir-photo-width-desktop, 40%);
	max-width: var(--empdir-photo-width-desktop, 40%);
}

.empdir-profile-panel[data-panel-layout="side-by-side"].is-active .empdir-profile-text-wrap {
	flex:      1 1 0;
	min-width: 0;
}

/* ─── 8. Profile Image ──────────────────────────────────────────────────────── */

.empdir-profile-image-wrap {
	line-height: 0;
}

.empdir-profile-image {
	width:         100%;
	height:        auto;
	display:       block;
	object-fit:    cover;
	border-radius: 4px;
}

.empdir-profile-image-placeholder {
	width:            100%;
	padding-top:      75%;
	background-color: #2a2a2a;
	border-radius:    4px;
}

/* ─── 9. Profile Name ───────────────────────────────────────────────────────── */

/* Targets any tag (.empdir-profile-name applied to h1–h6 or p) */
.empdir-profile-name {
	margin:         0;
	padding:        0;
	font-size:      28px;
	font-weight:    700;
	line-height:    1.15;
	color:          inherit;
	letter-spacing: -0.01em;
}

/* ─── 10. Profile Title ─────────────────────────────────────────────────────── */

.empdir-profile-title {
	margin:      0;
	padding:     0;
	font-size:   18px;
	font-weight: 400;
	line-height: 1.3;
	color:       inherit;
	opacity:     0.82;
}

/* ─── 11. Divider ───────────────────────────────────────────────────────────── */

.empdir-divider {
	display:          block;
	width:            100%;
	height:           3px;
	background-color: #cc0000;
	border:           none;
	margin:           4px 0;
	padding:          0;
	flex-shrink:      0;
}

/* ─── 12. Profile Body ──────────────────────────────────────────────────────── */

.empdir-profile-text-wrap {
	display:        flex;
	flex-direction: column;
	gap:            12px;
	min-width:      0;
}

.empdir-profile-body {
	font-size:   15px;
	line-height: 1.65;
	color:       inherit;
}

.empdir-profile-body p:first-child { margin-top:    0; }
.empdir-profile-body p:last-child  { margin-bottom: 0; }

.empdir-profile-body strong,
.empdir-profile-body b { font-weight: 700; }

.empdir-profile-body ul,
.empdir-profile-body ol { margin: 0 0 10px 20px; padding: 0; }

.empdir-profile-body h1,
.empdir-profile-body h2,
.empdir-profile-body h3,
.empdir-profile-body h4,
.empdir-profile-body h5,
.empdir-profile-body h6 { margin: 8px 0 4px; font-weight: 700; line-height: 1.2; }

.empdir-profile-body a  { color: inherit; text-decoration: underline; }

/* ─── 13. Social Links ──────────────────────────────────────────────────────── */

.empdir-social-links {
	display:    flex;
	flex-wrap:  wrap;
	gap:        10px;
	list-style: none;
	margin:     0;
	padding:    0;
}

.empdir-social-link {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	border-radius:   50%;
	background:      rgba(128,128,128,0.15);
	color:           inherit;
	text-decoration: none;
	transition:      background 0.15s ease;
}

.empdir-social-link:hover {
	background: rgba(128,128,128,0.30);
}

.empdir-social-link svg { display: block; }

/* ─── 14. Thumbnail Selector (shared) ──────────────────────────────────────── */

.empdir-selector-scroll {
	height:          580px; /* overridden by inline CSS from PHP */
	overflow-y:      auto;
	overflow-x:      hidden;
	scrollbar-width: thin;
	scrollbar-color: #666 transparent;
}

.empdir-selector-scroll::-webkit-scrollbar       { width: 5px; }
.empdir-selector-scroll::-webkit-scrollbar-track { background: transparent; }
.empdir-selector-scroll::-webkit-scrollbar-thumb { background-color: #666; border-radius: 3px; }

.empdir-selector-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr); /* overridden by inline CSS from PHP */
	gap:                   10px;
	padding:               4px;
}

/* ─── 15. Thumbnail Button ──────────────────────────────────────────────────── */

.empdir-thumbnail-btn {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	background:     transparent;
	border:         3px solid transparent;
	border-radius:  4px;
	padding:        4px;
	cursor:         pointer;
	gap:            5px;
	transition:     border-color 0.1s ease;
	width:          100%;
	color:          inherit;
	font-family:    inherit;
}

.empdir-thumbnail-btn.is-active {
	border-color: #cc0000; /* overridden by inline CSS from PHP */
}

.empdir-thumbnail-img {
	width:         100%;
	height:        auto;
	display:       block;
	aspect-ratio:  3 / 4;
	object-fit:    cover;
	border-radius: 2px;
}

.empdir-thumbnail-placeholder {
	width:            100%;
	aspect-ratio:     3 / 4;
	background-color: #2a2a2a;
	border-radius:    2px;
}

.empdir-thumbnail-name {
	display:     block;
	font-size:   12px;
	font-weight: 600;
	line-height: 1.3;
	color:       inherit;
}

.empdir-thumbnail-title {
	display:     block;
	font-size:   10px;
	opacity:     0.60;
	line-height: 1.2;
	color:       inherit;
}

/* ─── 16. Thumbnail Display Mode — Desktop ──────────────────────────────────── */
/*
 * photo-only  → hide name + title spans
 * name-only   → hide the photo/placeholder img
 * both        → show everything (default, no override needed)
 */

/* photo-only: hide name and title */
.empdir-wrapper[data-thumb-display="photo-only"] .empdir-thumbnail-name,
.empdir-wrapper[data-thumb-display="photo-only"] .empdir-thumbnail-title {
	display: none;
}

/* name-only: hide photo and placeholder */
.empdir-wrapper[data-thumb-display="name-only"] .empdir-thumbnail-img,
.empdir-wrapper[data-thumb-display="name-only"] .empdir-thumbnail-placeholder {
	display: none;
}

/* ─── 17. Placeholder States ────────────────────────────────────────────────── */

.empdir-profile-image-wrap--placeholder { background: #1a1a1a; }

/* ─── 18. Empty State ───────────────────────────────────────────────────────── */

.empdir-no-results {
	padding:    20px;
	color:      #888;
	font-style: italic;
}

/* ─── 19. Builder Preview (edit mode) ───────────────────────────────────────── */

/*
 * In the Divi Visual Builder, only the default employee card is rendered
 * (no thumbnail selector). This class is added by PHP on the wrapper.
 */
.empdir-builder-preview {
	display: block; /* single column, no flex row splitting */
}

.empdir-builder-preview .empdir-profiles {
	width: 100%;
}

/* ─── 20. Tablet ≤ 980px — Wrapper Layout Variants ─────────────────────────── */

@media (max-width: 980px) {

	.empdir-wrapper[data-thumb-pos-tablet="top"],
	.empdir-wrapper[data-thumb-pos-tablet="bottom"] {
		flex-direction: column;
		gap:            30px;
	}

	.empdir-wrapper[data-thumb-pos-tablet="top"] .empdir-selector,
	.empdir-wrapper[data-thumb-pos-tablet="bottom"] .empdir-selector {
		width: 100%;
	}

	.empdir-wrapper[data-thumb-pos-tablet="top"] .empdir-selector    { order: 1; }
	.empdir-wrapper[data-thumb-pos-tablet="top"] .empdir-profiles    { order: 2; width: 100%; flex: 1 1 auto; }

	.empdir-wrapper[data-thumb-pos-tablet="bottom"] .empdir-profiles { order: 1; width: 100%; flex: 1 1 auto; }
	.empdir-wrapper[data-thumb-pos-tablet="bottom"] .empdir-selector { order: 2; }

	.empdir-wrapper[data-thumb-pos-tablet="top"] .empdir-selector-scroll,
	.empdir-wrapper[data-thumb-pos-tablet="bottom"] .empdir-selector-scroll {
		height:     auto;
		max-height: 300px;
	}

	.empdir-wrapper[data-thumb-pos-tablet="left"],
	.empdir-wrapper[data-thumb-pos-tablet="right"] {
		flex-direction: row;
		gap:            28px;
	}

	.empdir-wrapper[data-thumb-pos-tablet="left"] .empdir-selector  { order: 1; flex: 0 0 auto; width: clamp(140px, 36%, 260px); }
	.empdir-wrapper[data-thumb-pos-tablet="left"] .empdir-profiles  { order: 2; flex: 1 1 0; min-width: 0; }

	.empdir-wrapper[data-thumb-pos-tablet="right"] .empdir-profiles { order: 1; flex: 1 1 0; min-width: 0; }
	.empdir-wrapper[data-thumb-pos-tablet="right"] .empdir-selector { order: 2; flex: 0 0 auto; width: clamp(140px, 36%, 260px); }
}

/* ─── 21. Tablet ≤ 980px — Profile Panel Layout Variants ───────────────────── */

@media (max-width: 980px) {

	.empdir-profile-panel[data-panel-layout-tablet="stacked"].is-active {
		flex-direction: column;
	}

	.empdir-profile-panel[data-panel-layout-tablet="stacked"].is-active .empdir-profile-image-wrap {
		width:     100%;
		max-width: none;
		flex:      none;
	}

	.empdir-profile-panel[data-panel-layout-tablet="side-by-side"].is-active {
		flex-direction: row;
		align-items:    flex-start;
		gap:            20px;
	}

	.empdir-profile-panel[data-panel-layout-tablet="side-by-side"].is-active .empdir-profile-image-wrap {
		flex:      0 0 var(--empdir-photo-width-tablet, 40%);
		width:     var(--empdir-photo-width-tablet, 40%);
		max-width: var(--empdir-photo-width-tablet, 40%);
	}

	.empdir-profile-panel[data-panel-layout-tablet="side-by-side"].is-active .empdir-profile-text-wrap {
		flex:      1 1 0;
		min-width: 0;
	}
}

/* ─── 22. Tablet ≤ 980px — Thumbnail Display Mode ──────────────────────────── */

@media (max-width: 980px) {

	.empdir-wrapper[data-thumb-display-tablet="photo-only"] .empdir-thumbnail-name,
	.empdir-wrapper[data-thumb-display-tablet="photo-only"] .empdir-thumbnail-title {
		display: none;
	}

	.empdir-wrapper[data-thumb-display-tablet="name-only"] .empdir-thumbnail-img,
	.empdir-wrapper[data-thumb-display-tablet="name-only"] .empdir-thumbnail-placeholder {
		display: none;
	}

	/* "both" at tablet: ensure photo-only desktop override is cancelled */
	.empdir-wrapper[data-thumb-display-tablet="both"] .empdir-thumbnail-name,
	.empdir-wrapper[data-thumb-display-tablet="both"] .empdir-thumbnail-title {
		display: block;
	}

	.empdir-wrapper[data-thumb-display-tablet="both"] .empdir-thumbnail-img,
	.empdir-wrapper[data-thumb-display-tablet="both"] .empdir-thumbnail-placeholder {
		display: block;
	}
}

/* ─── 23. Mobile ≤ 767px — Wrapper Layout Variants ─────────────────────────── */

@media (max-width: 767px) {

	.empdir-wrapper[data-thumb-pos-mobile="top"],
	.empdir-wrapper[data-thumb-pos-mobile="bottom"] {
		flex-direction: column;
		gap:            30px;
	}

	.empdir-wrapper[data-thumb-pos-mobile="top"] .empdir-profiles    { order: 2; width: 100%; flex: 1 1 auto; }
	.empdir-wrapper[data-thumb-pos-mobile="top"] .empdir-selector    { order: 1; width: 100%; }

	.empdir-wrapper[data-thumb-pos-mobile="bottom"] .empdir-profiles { order: 1; width: 100%; flex: 1 1 auto; }
	.empdir-wrapper[data-thumb-pos-mobile="bottom"] .empdir-selector { order: 2; width: 100%; }

	.empdir-wrapper[data-thumb-pos-mobile="left"],
	.empdir-wrapper[data-thumb-pos-mobile="right"] {
		flex-direction: row;
		gap:            16px;
	}

	.empdir-wrapper[data-thumb-pos-mobile="left"] .empdir-selector  { order: 1; flex: 0 0 auto; width: clamp(80px, 30%, 130px); }
	.empdir-wrapper[data-thumb-pos-mobile="left"] .empdir-profiles  { order: 2; flex: 1 1 0; min-width: 0; }

	.empdir-wrapper[data-thumb-pos-mobile="right"] .empdir-profiles { order: 1; flex: 1 1 0; min-width: 0; }
	.empdir-wrapper[data-thumb-pos-mobile="right"] .empdir-selector { order: 2; flex: 0 0 auto; width: clamp(80px, 30%, 130px); }

	/* Reset selector-scroll height on all mobile layouts — prevents 580px default from leaking */
	.empdir-wrapper .empdir-selector-scroll {
		height: auto;
	}
}

/* ─── 24. Mobile ≤ 767px — Horizontal scroll selector (top / bottom) ────────── */

@media (max-width: 767px) {

	.empdir-wrapper[data-thumb-pos-mobile="top"] .empdir-selector-scroll,
	.empdir-wrapper[data-thumb-pos-mobile="bottom"] .empdir-selector-scroll {
		height:          auto;
		overflow-x:      auto;
		overflow-y:      hidden;
		scrollbar-width: thin;
		scrollbar-color: #666 transparent;
	}

	.empdir-wrapper[data-thumb-pos-mobile="top"] .empdir-selector-scroll::-webkit-scrollbar,
	.empdir-wrapper[data-thumb-pos-mobile="bottom"] .empdir-selector-scroll::-webkit-scrollbar {
		height: 4px;
	}

	.empdir-wrapper[data-thumb-pos-mobile="top"] .empdir-selector-grid,
	.empdir-wrapper[data-thumb-pos-mobile="bottom"] .empdir-selector-grid {
		display:        flex;
		flex-direction: row;
		flex-wrap:      nowrap;
		padding-bottom: 6px;
	}

	.empdir-wrapper[data-thumb-pos-mobile="top"] .empdir-thumbnail-btn,
	.empdir-wrapper[data-thumb-pos-mobile="bottom"] .empdir-thumbnail-btn {
		flex-shrink: 0;
		width:       80px;
	}

	.empdir-wrapper[data-thumb-pos-mobile="top"] .empdir-thumbnail-img,
	.empdir-wrapper[data-thumb-pos-mobile="top"] .empdir-thumbnail-placeholder,
	.empdir-wrapper[data-thumb-pos-mobile="bottom"] .empdir-thumbnail-img,
	.empdir-wrapper[data-thumb-pos-mobile="bottom"] .empdir-thumbnail-placeholder {
		width:        72px;
		height:       90px;
		aspect-ratio: auto;
	}
}

/* ─── 25. Mobile ≤ 767px — Profile Panel Layout Variants ───────────────────── */

@media (max-width: 767px) {

	.empdir-profile-panel[data-panel-layout-mobile="stacked"].is-active {
		flex-direction: column;
	}

	.empdir-profile-panel[data-panel-layout-mobile="stacked"].is-active .empdir-profile-image-wrap {
		width:     100%;
		max-width: none;
		flex:      none;
	}

	.empdir-profile-panel[data-panel-layout-mobile="side-by-side"].is-active {
		flex-direction: row;
		align-items:    flex-start;
		gap:            14px;
	}

	.empdir-profile-panel[data-panel-layout-mobile="side-by-side"].is-active .empdir-profile-image-wrap {
		flex:      0 0 var(--empdir-photo-width-mobile, 40%);
		width:     var(--empdir-photo-width-mobile, 40%);
		max-width: var(--empdir-photo-width-mobile, 40%);
	}

	.empdir-profile-panel[data-panel-layout-mobile="side-by-side"].is-active .empdir-profile-text-wrap {
		flex:      1 1 0;
		min-width: 0;
	}
}

/* ─── 26. Mobile ≤ 767px — Thumbnail Display Mode ──────────────────────────── */

@media (max-width: 767px) {

	.empdir-wrapper[data-thumb-display-mobile="photo-only"] .empdir-thumbnail-name,
	.empdir-wrapper[data-thumb-display-mobile="photo-only"] .empdir-thumbnail-title {
		display: none;
	}

	.empdir-wrapper[data-thumb-display-mobile="name-only"] .empdir-thumbnail-img,
	.empdir-wrapper[data-thumb-display-mobile="name-only"] .empdir-thumbnail-placeholder {
		display: none;
	}

	/* "both" at mobile: cancel any desktop/tablet photo-only overrides */
	.empdir-wrapper[data-thumb-display-mobile="both"] .empdir-thumbnail-name,
	.empdir-wrapper[data-thumb-display-mobile="both"] .empdir-thumbnail-title {
		display: block;
	}

	.empdir-wrapper[data-thumb-display-mobile="both"] .empdir-thumbnail-img,
	.empdir-wrapper[data-thumb-display-mobile="both"] .empdir-thumbnail-placeholder {
		display: block;
	}
}

/* ─── 27. Focus / Accessibility ─────────────────────────────────────────────── */

.empdir-thumbnail-btn:focus-visible {
	outline:        2px solid #cc0000;
	outline-offset: 2px;
}

.empdir-profile-panel:focus-visible {
	outline:        2px solid #cc0000;
	outline-offset: 2px;
}

.empdir-profile-panel:focus:not(:focus-visible) {
	outline: none;
}

/* ─── 28. Divi Module Overrides ──────────────────────────────────────────────── */

/* Divi wraps modules in .et_pb_module which can reset display */
.et_pb_module.empdir-wrapper,
.et_pb_module .empdir-wrapper {
	display: flex;
}