/**
 * Custom Team Members - Frontend styles
 *
 * All colors/sizing that Part 3 (Design Settings) will control are exposed
 * as CSS custom properties on .ctm-team-wrapper, with sensible defaults.
 * Class names are all prefixed `ctm-` to avoid collisions with themes /
 * Elementor / other plugins.
 */

.ctm-team-wrapper {
	/* ---- Card ---- */
	--ctm-card-bg: #ffffff;
	--ctm-card-border: 1px solid #e5e7eb;
	--ctm-card-radius: 10px;
	--ctm-card-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
	--ctm-card-shadow-hover: 0 8px 20px rgba(16, 24, 40, 0.12);
	--ctm-card-padding: 20px;
	--ctm-card-width: 230px;

	/* ---- Image ---- */
	--ctm-image-size: 120px;
	--ctm-image-width: var(--ctm-image-size);
	--ctm-image-height: var(--ctm-image-size);
	--ctm-image-radius: 50%;
	--ctm-image-border: 3px solid #f3f4f6;
	--ctm-image-object-fit: cover;

	/* ---- Typography / colors ---- */
	--ctm-name-color: #111827;
	--ctm-name-size: 18px;
	--ctm-name-weight: 600;
	--ctm-name-align: center;
	--ctm-name-margin-bottom: 4px;

	--ctm-designation-color: #6b7280;
	--ctm-designation-size: 14px;
	--ctm-designation-weight: 400;
	--ctm-designation-align: center;
	--ctm-designation-margin-bottom: 16px;

	/* ---- Button ---- */
	--ctm-button-bg: #2563eb;
	--ctm-button-bg-hover: #1d4ed8;
	--ctm-button-text: #ffffff;
	--ctm-button-hover-text: #ffffff;
	--ctm-button-border: none;
	--ctm-button-hover-border: none;
	--ctm-button-radius: 6px;
	--ctm-button-font-size: 14px;
	--ctm-button-weight: 500;
	--ctm-button-padding: 10px 22px;

	/* ---- Popup ---- */
	--ctm-popup-bg: #ffffff;
	--ctm-popup-radius: 12px;
	--ctm-popup-max-width: 860px;
	--ctm-popup-max-height: 85vh;
	--ctm-popup-padding: 32px;
	--ctm-popup-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
	--ctm-overlay-bg: rgba(17, 24, 39, 0.6);

	--ctm-close-color: #111827;
	--ctm-close-bg: rgba(17, 24, 39, 0.06);
	--ctm-close-size: 36px;
	--ctm-close-radius: 50%;

	--ctm-image-col-width: 280px;
	--ctm-modal-image-width: 220px;
	--ctm-modal-image-height: 220px;
	--ctm-modal-image-radius: var(--ctm-image-radius);
	--ctm-modal-image-border: var(--ctm-image-border);
	--ctm-modal-image-object-fit: var(--ctm-image-object-fit);

	/* ---- Table ---- */
	--ctm-table-border: 1px solid #e5e7eb;
	--ctm-table-radius: 0px;
	--ctm-table-width: 100%;
	--ctm-row-height: auto;
	--ctm-cell-padding: 12px;

	--ctm-field-bg: #f9fafb;
	--ctm-field-color: #374151;
	--ctm-field-font-size: 14px;
	--ctm-field-weight: 600;
	--ctm-field-width: 35%;
	--ctm-field-align: left;

	--ctm-value-bg: #ffffff;
	--ctm-value-color: #111827;
	--ctm-value-font-size: 14px;
	--ctm-value-weight: 400;
	--ctm-value-width: 65%;
	--ctm-value-align: left;

	--ctm-row-border: 1px solid #e5e7eb;
	--ctm-row-hover-bg: transparent;

	--ctm-grid-gap: 24px;

	/* ---- Grid Settings (columns per breakpoint) ---- */
	--ctm-desktop-columns: 4;
	--ctm-tablet-columns: 2;
	--ctm-mobile-columns: 1;

	display: block;
	box-sizing: border-box;
}

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

.ctm-team-empty {
	color: #6b7280;
	font-style: italic;
}

/* ==================================================
   GRID / CARD
   ================================================== */

.ctm-team-grid {
	display: grid;
	grid-template-columns: repeat(var(--ctm-desktop-columns), 1fr);
	gap: var(--ctm-grid-gap);
	width: 100%;
}

.ctm-team-card {
	background: var(--ctm-card-bg);
	border: var(--ctm-card-border);
	border-radius: var(--ctm-card-radius);
	box-shadow: var(--ctm-card-shadow);
	padding: var(--ctm-card-padding);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ctm-team-card:hover {
	box-shadow: var(--ctm-card-shadow-hover);
	transform: translateY(-2px);
}

.ctm-team-image-wrap {
	margin-bottom: 16px;
}

.ctm-team-image,
.ctm-team-image--placeholder {
	width: var(--ctm-image-width);
	height: var(--ctm-image-height);
	border-radius: var(--ctm-image-radius);
	border: var(--ctm-image-border);
	object-fit: var(--ctm-image-object-fit);
	display: block;
	margin: 0 auto;
	background-color: #e5e7eb;
}

.ctm-team-image--placeholder {
	background-image: linear-gradient(135deg, #e5e7eb 25%, #f3f4f6 25%, #f3f4f6 50%, #e5e7eb 50%, #e5e7eb 75%, #f3f4f6 75%, #f3f4f6 100%);
	background-size: 16px 16px;
}

.ctm-team-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.ctm-team-name {
	margin: 0 0 var(--ctm-name-margin-bottom);
	font-size: var(--ctm-name-size);
	line-height: 1.3;
	color: var(--ctm-name-color);
	font-weight: var(--ctm-name-weight);
	text-align: var(--ctm-name-align);
	width: 100%;
}

.ctm-team-designation {
	margin: 0 0 var(--ctm-designation-margin-bottom);
	font-size: var(--ctm-designation-size);
	color: var(--ctm-designation-color);
	font-weight: var(--ctm-designation-weight);
	text-align: var(--ctm-designation-align);
	width: 100%;
}

.ctm-view-profile {
	appearance: none;
	cursor: pointer;
	background: var(--ctm-button-bg);
	color: var(--ctm-button-text);
	border: var(--ctm-button-border);
	border-radius: var(--ctm-button-radius);
	padding: var(--ctm-button-padding);
	font-size: var(--ctm-button-font-size);
	font-weight: var(--ctm-button-weight);
	line-height: 1.4;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ctm-view-profile:hover,
.ctm-view-profile:focus {
	background: var(--ctm-button-bg-hover);
	color: var(--ctm-button-hover-text);
	border: var(--ctm-button-hover-border);
}

.ctm-view-profile:focus-visible {
	outline: 2px solid var(--ctm-button-bg-hover);
	outline-offset: 2px;
}

/* ==================================================
   MODAL
   ================================================== */

body.ctm-modal-open {
	overflow: hidden;
}

.ctm-modal-overlay {
	position: fixed;
	inset: 0;
	background: var(--ctm-overlay-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 100000;
}

.ctm-modal-overlay[hidden] {
	display: none;
}

.ctm-modal {
	background: var(--ctm-popup-bg);
	border-radius: var(--ctm-popup-radius);
	width: 100%;
	max-width: var(--ctm-popup-max-width);
	max-height: var(--ctm-popup-max-height);
	position: relative;
	overflow: hidden;
	box-shadow: var(--ctm-popup-shadow);
	display: flex;
	flex-direction: column;
}

.ctm-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: var(--ctm-close-size);
	height: var(--ctm-close-size);
	border: none;
	background: var(--ctm-close-bg);
	color: var(--ctm-close-color);
	border-radius: var(--ctm-close-radius);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: filter 0.2s ease;
}

.ctm-modal-close:hover,
.ctm-modal-close:focus {
	filter: brightness(0.92);
}

.ctm-modal-content {
	display: flex;
	flex-direction: row;
	min-height: 0; /* required so the right column can actually scroll */
	max-height: var(--ctm-popup-max-height);
}

.ctm-modal-image-wrap {
	flex: 0 0 var(--ctm-image-col-width);
	position: sticky;
	top: 0;
	align-self: flex-start;
	max-height: var(--ctm-popup-max-height);
	background: var(--ctm-field-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
}

.ctm-modal-image {
	width: 100%;
	max-width: var(--ctm-modal-image-width);
	height: var(--ctm-modal-image-height);
	object-fit: var(--ctm-modal-image-object-fit);
	border-radius: var(--ctm-modal-image-radius);
	border: var(--ctm-modal-image-border);
	display: block;
}

.ctm-modal-details {
	flex: 1 1 auto;
	min-width: 0;
	overflow-y: auto;
	padding: var(--ctm-popup-padding);
}

.ctm-modal-name {
	margin: 0 0 4px;
	font-size: 22px;
	color: var(--ctm-name-color);
}

.ctm-modal-designation {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--ctm-designation-color);
}

.ctm-profile-table-wrap {
	width: var(--ctm-table-width);
	border: var(--ctm-table-border);
	border-radius: var(--ctm-table-radius);
	overflow: hidden;
}

.ctm-profile-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed; /* keeps Field/Value as real columns at every width; a row grows taller instead of the columns stacking */
}

.ctm-profile-table tr {
	border-bottom: var(--ctm-row-border);
	height: var(--ctm-row-height);
}

.ctm-profile-table tr:last-child {
	border-bottom: none;
}

.ctm-profile-table tr:hover .ctm-field-name,
.ctm-profile-table tr:hover .ctm-field-value {
	background: var(--ctm-row-hover-bg);
}

.ctm-field-name,
.ctm-field-value {
	padding: var(--ctm-cell-padding);
	vertical-align: top;
}

.ctm-field-name {
	width: var(--ctm-field-width);
	background: var(--ctm-field-bg);
	color: var(--ctm-field-color);
	font-size: var(--ctm-field-font-size);
	font-weight: var(--ctm-field-weight);
	text-align: var(--ctm-field-align);
}

.ctm-field-value {
	width: var(--ctm-value-width);
	background: var(--ctm-value-bg);
	color: var(--ctm-value-color);
	font-size: var(--ctm-value-font-size);
	font-weight: var(--ctm-value-weight);
	text-align: var(--ctm-value-align);
	white-space: pre-line;
	word-break: break-word;
	overflow-wrap: anywhere; /* long unbroken strings (URLs, etc.) still wrap inside the cell instead of forcing horizontal overflow */
}

/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 900px) {
	.ctm-modal-image-wrap {
		flex-basis: 220px;
	}
}

@media (max-width: 700px) {
	.ctm-modal-overlay {
		padding: 0;
	}

	.ctm-modal {
		max-width: 100%;
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}

	.ctm-modal-content {
		flex-direction: column;
		max-height: 100vh;
		overflow-y: auto;
	}

	/* Sticky image behaviour is disabled on mobile for usability, per spec. */
	.ctm-modal-image-wrap {
		position: static;
		flex-basis: auto;
		max-height: none;
		padding: 24px;
	}

	.ctm-modal-details {
		overflow-y: visible;
		padding: 8px 20px 28px;
	}

	/* --- Force a REAL two-column table on mobile ---------------------------
	   Field/Value must NEVER stack. Some themes/page builders ship global
	   "responsive table" CSS that forces every <table>/<tr>/<td> on the site
	   to display: block below a breakpoint. That rule can outrank our own
	   .ctm-field-name/.ctm-field-value styles depending on load order, so we
	   explicitly re-assert real table display roles here, scoped only to
	   .ctm-profile-table, so nothing else on the page is affected. */
	.ctm-profile-table-wrap {
		width: 100%;
		overflow-x: hidden;
	}

	.ctm-profile-table {
		display: table !important;
		table-layout: fixed !important;
		width: 100% !important;
	}

	.ctm-profile-table tbody {
		display: table-row-group !important;
	}

	.ctm-profile-table tr {
		display: table-row !important;
	}

	.ctm-field-name,
	.ctm-field-value {
		display: table-cell !important;
		width: var(--ctm-field-width);
		white-space: normal;
	}

	.ctm-field-value {
		width: var(--ctm-value-width);
	}
}

@media (max-width: 480px) {
	.ctm-team-wrapper {
		--ctm-image-size: 90px;
	}

	.ctm-team-card {
		padding: 14px;
	}

	/* Column *count* at this width comes from Grid Settings (--ctm-mobile-columns,
	   applied via the dynamically generated CSS -- see CTM_Settings::build_css()).
	   This just tightens the gap so narrow columns don't feel cramped. */
	.ctm-team-grid {
		gap: 14px;
	}
}