/* ================================================================================================
 * BASELINE — KMA CSS MODULE 02 — PERSON CARDS (Elementor Loop Items)
 * ================================================================================================
 *
 * FILE: 02-person-cards.css
 * VERSION: 1.1
 * Last Updated: 2026-03-21
 *
 * OWNERSHIP
 * ---------
 * Owns visual + interaction styling for:
 *   - .person-card
 *   - .e-loop-item .person-card
 *   - .e-loop-item.role-open .person-card
 *   - .role-open .person-card
 *   - Flip system (.km-person-inner / .km-person-front / .km-person-back)
 *
 * PURPOSE
 * -------
 * - Visual styling for People / Committee “person-card” loop items.
 * - Hover lift + shadow interaction.
 * - Role state coloring (filled vs open).
 * - 3D flip interaction (front ↔ back) driven by JS.
 *
 * SCOPING RULE
 * ------------
 * - Selectors are intentionally scoped to Elementor Loop Items.
 * - No header, footer, popup, or unrelated layout rules in this file.
 * - This module is self-contained for Person Card behavior only.
 *
 * IMPORTANT
 * ---------
 * - NO LOGIC OR STRUCTURAL CHANGES HAVE BEEN MADE.
 * - Duplicate declarations remain intentionally preserved as part of baseline.
 * - This snapshot reflects the working production version.
 *
 * ================================================================================================ */


/* ================================================================================================
 * MODULE 01 — BASE CARD STYLING (DEFAULT STATE)
 * ================================================================================================ */

.e-loop-item .person-card {

	/**** Default background for filled committee roles (with fallback). ****/
	background-color: var(--e-global-color-committee-filled, #cfeecf) !important;

	/**** Smooth transitions for hover and state changes. ****/
	transition:
		background-color 180ms ease,
		transform 180ms ease,
		box-shadow 180ms ease;
}


/* ================================================================================================
 * MODULE 02 — ROLE STATE: OPEN POSITIONS
 * ================================================================================================ */

.e-loop-item.role-open .person-card,
.role-open .person-card {

	/**** Background for open roles (overrides default). ****/
	background-color: var(--e-global-color-committee-open, #f2c2c2) !important;
}


/* ================================================================================================
 * MODULE 03 — HOVER EFFECT: LIFT + SHADOW
 * ================================================================================================ */

.e-loop-item .person-card:hover {

	/**** Subtle upward lift on hover. ****/
	transform: translateY(-12px);

	/**** Soft drop shadow to reinforce elevation. ****/
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}


/* ================================================================================================
 * MODULE 04 — HIDDEN META FIELDS (JS DATA SOURCES)
 * ================================================================================================ */

.person-card .km-meta-focus,
.person-card .km-meta-email,
.person-card .km-meta-bio,
.person-card .km-meta-phone {

	/**** Hidden fields used by JS for flip/back content population. ****/
	display: none !important;
}


/* ================================================================================================
 * MODULE 05 — 3D FLIP SYSTEM: CORE STRUCTURE
 * ================================================================================================ */

.e-loop-item {

	/**** Establish 3D perspective context for flip effect. ****/
	perspective: 1200px;
}

.e-loop-item .km-person-inner {

	/**** Container that rotates to create flip effect. ****/
	position: relative;
	transform-style: preserve-3d;
	transition: transform 420ms ease;
}

.e-loop-item.km-flipped .km-person-inner {

	/**** Rotate entire card to reveal back face. ****/
	transform: rotateY(180deg);
}

.e-loop-item .person-card {

	/**** Hide backface when rotated away from viewer. ****/
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}


/* ================================================================================================
 * MODULE 06 — BACK FACE (INJECTED BY JS)
 * ================================================================================================ */

.e-loop-item .km-person-back {

	/**** Full overlay positioned over front face. ****/
	position: absolute;
	inset: 0;

	/**** Internal spacing for readable layout. ****/
	padding: 14px 14px 12px;

	/**** Match card rounding. ****/
	border-radius: inherit;

	/**** Slightly translucent white background. ****/
	background: rgba(255,255,255,.96);

	/**** Rotate so it appears correctly after flip. ****/
	transform: rotateY(180deg);

	/**** Hide when facing away. ****/
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	/**** Scroll if content exceeds height. ****/
	overflow: auto;

	/**** Vertical layout for content. ****/
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.km-person-back .km-back-name {

	/**** Prominent name styling. ****/
	font-weight: 800;
	font-size: 16px;
	margin: 0;
}

.km-person-back .km-row {

	/**** Body text styling. ****/
	font-size: 13.5px;
	line-height: 1.35;
}

.km-person-back .km-label {

	/**** Label emphasis. ****/
	font-weight: 800;
}


/* ================================================================================================
 * MODULE 07 — REDUCED MOTION SUPPORT
 * ================================================================================================ */

@media (prefers-reduced-motion: reduce){

	/**** Disable flip animation for accessibility. ****/
	.e-loop-item .km-person-inner {
		transition: none;
	}
}


/* ================================================================================================
 * MODULE 08 — FLIP FIX (DUPLICATE STRUCTURE — PRESERVED)
 * ================================================================================================ */

.e-loop-item { perspective: 1200px; }

.e-loop-item .km-person-inner{
	position: relative;
	transform-style: preserve-3d;
	transition: transform 420ms ease;
}

.e-loop-item.km-flipped .km-person-inner{
	transform: rotateY(180deg);
}

.e-loop-item .km-person-front{
	position: relative;
	z-index: 1;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.e-loop-item .km-person-back{
	position: absolute;
	inset: 0;
	padding: 14px 14px 12px;
	background: rgba(255,255,255,.96);
	transform: rotateY(180deg);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: auto;
	box-sizing: border-box;
}

.km-person-back .km-back-name{ font-weight: 800; font-size: 16px; margin: 0; }
.km-person-back .km-row{ font-size: 13.5px; line-height: 1.35; }
.km-person-back .km-label{ font-weight: 800; }

@media (prefers-reduced-motion: reduce){
	.e-loop-item .km-person-inner{ transition:none; }
}


/* ================================================================================================
 * MODULE 09 — WRAPPER POLISH
 * ================================================================================================ */

.e-loop-item .km-person-inner{

	/**** Rounded outer container. ****/
	border-radius: 16px;

	/**** Allow shadow to extend beyond bounds. ****/
	overflow: visible;
}

.e-loop-item .km-person-back{

	/**** Inner border effect for back face. ****/
	box-shadow: inset 0 0 0 2px rgba(0,0,0,.50);
}


/* ================================================================================================
 * MODULE 10 — OFFICER PHOTO NORMALIZATION
 * ================================================================================================ */

/* Officers: force WP/Elementor image to a fixed square, then circle-crop */
.km-card-photo img.attachment-medium.size-medium {

	/**** Force fixed square dimensions. ****/
	width: 150px !important;
	height: 150px !important;

	/**** Ensure proper cropping. ****/
	object-fit: cover !important;

	/**** Circular crop. ****/
	border-radius: 50% !important;

	/**** Center image. ****/
	display: block !important;
	margin: 0 auto !important;
}


/* ================================================================================================
 * MODULE 11 — MOBILE: HIDE BIO
 * ================================================================================================ */

@media (max-width: 1024px){

	/**** Hide bio content on smaller screens to reduce clutter. ****/
	.km-person-back .km-person-bio { 
		display: none !important;
	}
}


/* ================================================================================================
 * END OF MODULE 02 — BASELINE
 * ================================================================================================ */