/*
* CozyStay — Team Member photo sizing
*
* Companion to CozyStay_Team_Member_Enhance, which injects the ratio and
* focal point controls into the CozyStay Core team member widget.
*
* The widget ships the photo with only `display: block`, so portraits of
* different proportions produce a ragged row. These rules let the photo fill
* a fixed box instead — but only once a ratio has been chosen, which is what
* --cs-tm-img-h signals. With "Original" selected the variable is never set,
* height stays auto, object-fit has no constrained box to act on, and the
* widget behaves exactly as it always did.
*/

.cs-team .cs-team-photo {
	position: relative;
	overflow: hidden;
}

.cs-team .cs-team-photo img {
	display: block;
	width: 100%;
	height: var(--cs-tm-img-h, auto);
	object-fit: cover;
	object-position: var(--cs-tm-img-pos, center top);
	/*
	* Inheriting the radius means the corners round correctly whether the
	* parent clips via overflow or not — the overlay layout needs overflow
	* visible, so it cannot rely on clipping alone.
	*/
	border-radius: inherit;
}

/*
* The theme centres / floats the photo by margin for the three text
* alignments. Those rules assume an auto-width image; with the photo now
* filling its box, the box itself has to do the aligning.
*/
.cs-team.text-left .cs-team-photo {
	margin-right: auto;
	margin-left: 0;
}

.cs-team.text-center .cs-team-photo {
	margin-right: auto;
	margin-left: auto;
}

.cs-team.text-right .cs-team-photo {
	margin-right: 0;
	margin-left: auto;
}

/* Overlay layout stacks the info over the photo; it must not be clipped by
* the overflow rule above. */
.cs-team.style-overlay .cs-team-photo {
	overflow: visible;
}

@media only screen and (max-width: 1024px) {
	.cs-team.text-left-tablet .cs-team-photo {
		margin-right: auto;
		margin-left: 0;
	}

	.cs-team.text-center-tablet .cs-team-photo {
		margin-right: auto;
		margin-left: auto;
	}

	.cs-team.text-right-tablet .cs-team-photo {
		margin-right: 0;
		margin-left: auto;
	}
}

@media only screen and (max-width: 767px) {
	.cs-team.text-left-mobile .cs-team-photo {
		margin-right: auto;
		margin-left: 0;
	}

	.cs-team.text-center-mobile .cs-team-photo {
		margin-right: auto;
		margin-left: auto;
	}

	.cs-team.text-right-mobile .cs-team-photo {
		margin-right: 0;
		margin-left: auto;
	}
}

.rtl .cs-team.text-left .cs-team-photo {
	margin-right: 0;
	margin-left: auto;
}

.rtl .cs-team.text-right .cs-team-photo {
	margin-right: auto;
	margin-left: 0;
}