/*
 * Integrity Staff Bios
 *
 * Every value that could differ between sites is a custom property declared on
 * .imbios-list. To restyle for a new site, redeclare the vars in that site's
 * custom CSS. Do not fork this file, and do not add site-specific rules to it.
 *
 *   .imbios-list {
 *     --imbios-name-font: "Your Serif", serif;
 *     --imbios-role-color: #123456;
 *   }
 *
 * Defaults below are measured from parkerpropertyllc.com/our-agents so the
 * shortcode drops in as a pixel match for the hand-built Elementor rows.
 */

/* Own our own box model. Elementor forces border-box on its subtree, most
   classic themes and WPBakery do not, and the padded text cell overflows
   without it. */
.imbios-list,
.imbios-list *,
.imbios-list *::before,
.imbios-list *::after {
	box-sizing: border-box;
}


.imbios-list {
	/* Layout */
	--imbios-photo-width: 35.278%;
	--imbios-photo-min-height: 420px;
	--imbios-photo-position: center center;
	--imbios-row-gap: 50px;
	--imbios-stack-gap: 0px;
	--imbios-body-padding: 35px;
	--imbios-body-bg: #f9f9f9;
	--imbios-block-gap: 20px;

	/* Name */
	--imbios-name-font: "Playfair Display", Georgia, serif;
	--imbios-name-size: 35px;
	--imbios-name-weight: 600;
	--imbios-name-line: 1;
	--imbios-name-spacing: 1px;
	--imbios-name-transform: none;
	--imbios-name-color: #040531;

	/* Position */
	--imbios-role-font: "Playfair Display", Georgia, serif;
	--imbios-role-size: 22px;
	--imbios-role-weight: 600;
	--imbios-role-line: 1;
	--imbios-role-spacing: 1px;
	--imbios-role-transform: uppercase;
	--imbios-role-color: #736126;

	/* Bio copy */
	--imbios-bio-font: "Poppins", Helvetica, Arial, sans-serif;
	--imbios-bio-size: 15px;
	--imbios-bio-weight: 400;
	--imbios-bio-line: 26px;
	--imbios-bio-color: #696969;

	display: flex;
	flex-direction: column;
	gap: var(--imbios-row-gap);
}

.imbios-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--imbios-stack-gap);
}

/* Photo cell */

.imbios-list .imbios-photo {
	flex: 0 0 var(--imbios-photo-width);
	max-width: var(--imbios-photo-width);
	min-height: var(--imbios-photo-min-height);
	position: relative;
	overflow: hidden;
	background-color: #e9e9e9;
}

/* Three classes deep on purpose. Elementor ships `.elementor img{height:auto}`
   and most themes ship something like `.content img{max-width:100%}`, both of
   which outrank a single class and leave the photo at its natural aspect,
   overflowing the cell. This has to win everywhere the plugin lands. */
.imbios-list .imbios-photo .imbios-photo__img {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border-radius: 0;
	object-fit: cover;
	object-position: var(--imbios-photo-position, center center);
}

.imbios-photo__placeholder {
	display: block;
	width: 100%;
	height: 100%;
}

/* Text cell */

.imbios-body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--imbios-block-gap);
	padding: var(--imbios-body-padding);
	background-color: var(--imbios-body-bg);
	text-align: left;
}

.imbios-list .imbios-name {
	margin: 0;
	padding: 0;
	font-family: var(--imbios-name-font);
	font-size: var(--imbios-name-size);
	font-weight: var(--imbios-name-weight);
	line-height: var(--imbios-name-line);
	letter-spacing: var(--imbios-name-spacing);
	text-transform: var(--imbios-name-transform);
	color: var(--imbios-name-color);
}

.imbios-list .imbios-role {
	margin: 0;
	padding: 0;
	font-family: var(--imbios-role-font);
	font-size: var(--imbios-role-size);
	font-weight: var(--imbios-role-weight);
	line-height: var(--imbios-role-line);
	letter-spacing: var(--imbios-role-spacing);
	text-transform: var(--imbios-role-transform);
	color: var(--imbios-role-color);
}

.imbios-list .imbios-bio {
	font-family: var(--imbios-bio-font);
	font-size: var(--imbios-bio-size);
	font-weight: var(--imbios-bio-weight);
	line-height: var(--imbios-bio-line);
	color: var(--imbios-bio-color);
}

.imbios-list .imbios-bio p,
.imbios-list .imbios-bio li {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

.imbios-list .imbios-bio > :first-child {
	margin-top: 0;
}

.imbios-list .imbios-bio > :last-child {
	margin-bottom: 0;
}

/* Optional: flip the photo to the right on every second row. */

.imbios-list--alternate .imbios-row--even {
	flex-direction: row-reverse;
}

/* Stacked. Matches the Elementor tablet/mobile breakpoint so a page that mixes
   hand-built rows with the shortcode still breaks at the same width. */

@media (max-width: 767px) {
	.imbios-list--rows .imbios-row,
	.imbios-list--alternate .imbios-row--even {
		flex-direction: column;
	}

	.imbios-list--rows .imbios-photo {
		flex-basis: auto;
		max-width: none;
		width: 100%;
	}

	.imbios-list--rows .imbios-body {
		flex: 0 1 auto;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Grid layout: [staff_bios layout="grid"]
 *
 * Cards, photo above text. Same markup as rows, so a site can switch layouts
 * without touching content. Everything below only overrides what the card
 * shape actually needs, which is why the name, position and bio variables from
 * the block above still apply.
 * ------------------------------------------------------------------------ */

.imbios-list--grid {
	--imbios-columns: 3;
	--imbios-grid-gap: 30px;
	--imbios-card-ratio: 4 / 5;
	--imbios-card-bg: transparent;
	--imbios-card-padding: 30px 0 0;

	display: grid;
	grid-template-columns: repeat(var(--imbios-columns), minmax(0, 1fr));
	gap: var(--imbios-grid-gap);
}

.imbios-list--grid .imbios-row {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

/* aspect-ratio does the work here, so the row-layout min-height has to go or it
   wins and the card photos all render 420px tall regardless of column width. */
.imbios-list--grid .imbios-photo {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	min-height: 0;
	aspect-ratio: var(--imbios-card-ratio);
}

.imbios-list--grid .imbios-body {
	flex: 1 1 auto;
	width: 100%;
	justify-content: flex-start;
	padding: var(--imbios-card-padding);
	background-color: var(--imbios-card-bg);
}

@media (max-width: 1024px) {
	.imbios-list--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.imbios-list--grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
 * Linked cards: [staff_bios layout="grid" link="yes"]
 *
 * The anchor wraps only the name, so the card's accessible name is the person
 * and there is exactly one link per card. ::after then spreads its hit area
 * across the whole card, which is what makes the photo clickable without a
 * second, nameless anchor sitting on top of it.
 * ------------------------------------------------------------------------ */

.imbios-list--linked .imbios-row {
	position: relative;
}

.imbios-list .imbios-name__link {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	border-bottom: var(--imbios-link-underline, 1px solid transparent);
	transition: border-color 0.25s ease;
}

.imbios-list--linked .imbios-name__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.imbios-list .imbios-name__link:hover,
.imbios-list .imbios-name__link:focus-visible {
	color: var(--imbios-link-hover-color, inherit);
	border-bottom-color: var(--imbios-link-hover-underline, currentColor);
}

.imbios-list--linked .imbios-photo .imbios-photo__img {
	transition: transform 0.5s ease;
}

.imbios-list--linked .imbios-row:hover .imbios-photo .imbios-photo__img {
	transform: scale(var(--imbios-photo-hover-scale, 1));
}

/* ---------------------------------------------------------------------------
 * Bio page (templates/single-staff-bio.php)
 *
 * Reuses the same variables as the grid so a site skin is written once.
 * ------------------------------------------------------------------------ */

.imbios-single-wrap {
	max-width: var(--imbios-single-max-width, 1100px);
	margin: 0 auto;
	padding: var(--imbios-single-padding, 60px 20px);
}

.imbios-single-bio {
	display: grid;
	grid-template-columns: var(--imbios-single-columns, minmax(0, 5fr) minmax(0, 7fr));
	gap: var(--imbios-single-gap, 50px);
	align-items: start;
}

.imbios-single-bio .imbios-photo {
	flex: 0 0 auto;
	width: 100%;
	max-width: none;
	min-height: 0;
	aspect-ratio: var(--imbios-single-ratio, 4 / 5);
}

.imbios-single-body {
	display: flex;
	flex-direction: column;
	gap: var(--imbios-block-gap);
}

.imbios-single-body .imbios-back {
	margin: var(--imbios-back-margin, 20px 0 0);
	font-family: var(--imbios-bio-font);
	font-size: var(--imbios-bio-size);
	line-height: var(--imbios-bio-line);
}

@media (max-width: 767px) {
	.imbios-single-bio {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Page mode: the theme already supplies the page container and prints the
   title, so this variant drops the plugin's own wrapper and starts at the
   two-column split. */
.imbios-single-bio--page {
	margin: var(--imbios-single-page-margin, 30px 0 0);
}