/*
 * Consistent team / doctor cards
 *
 * Applies to the cards on Our Team, the Small Animal services and Equine
 * sections: .leaderSingleDiv, .smallAnimalSingleDocDiv and .eqSingleDocDiv.
 *
 * Before this file, a card's width followed the length of its text (the card
 * only had a max-width, no fixed size), and the gold name bar was only as tall
 * as its own text, so cards with more copy came out bigger than their
 * neighbours.
 *
 * Loaded after style.css. !important is used on purpose, only for the few
 * properties below, because style.css sets the same properties through very
 * long per-breakpoint selector chains. Remove this file once these sections
 * move to the page-builder blocks.
 */

/* Every card in a row gets the same width, whatever its copy (side-by-side layout only). */
@media (min-width: 901px) {
	.smallAnimalSingleDocDiv,
	.eqSingleDocDiv {
		flex: 0 1 24.25% !important;
		min-width: 0;
	}

	.leaderSingleDiv {
		flex: 0 1 28% !important;
		min-width: 0;
	}
}

/* The row stretches cards to the same height; let the gold bar fill the rest. */
.smallAnimalDocNameDiv,
.eqDocNameDiv,
.leaderNameDiv {
	flex: 1 1 auto !important;
}

/* Cards in a row are as tall as the tallest one. Photos are left exactly as they were. */
@media (min-width: 901px) {
	.smallAnimalSingleDocDiv,
	.eqSingleDocDiv,
	.leaderSingleDiv {
		align-self: stretch;
	}
}

/* Tablet and phone keep their own stacked layout, unchanged. */