/*
 * Talents Chrétiens — how a professional's logo is displayed, everywhere.
 *
 * A logo arrives in any shape: square, round, a wide horizontal wordmark, or a tall
 * vertical one. The validated mockups drew a small square in each slot and filled it with
 * `object-fit: cover`, which crops whatever does not fit — a wide logo lost both ends, a
 * tall one lost its top and bottom. Only the directory card was doing it correctly.
 *
 * The rule used from here on, in every slot:
 *
 *   - the slot itself keeps a FIXED size, so no uploaded file can change the page layout;
 *   - the image is never given both a width and a height, so it is never stretched;
 *   - it is bounded by max-width / max-height and uses `object-fit: contain`, so the whole
 *     logo is always visible and its proportions are kept exactly;
 *   - the leftover space is padding inside a white rounded box, which suits a transparent
 *     PNG and a photographic JPEG equally well.
 *
 * Loaded after the page stylesheets so it is the last word on these five slots.
 */

/* The shared contract. New slots only need this class. */
.tc-logo-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #fff;
	flex-shrink: 0;
}
.tc-logo-slot > img,
.tc-page-fiche .hero-logo img,
.tc-page-fiche .cc-logo img,
.tc-page-fiche .sim-logo img,
.tc-page-dirigeant .cc-logo img,
.tc-page-annuaire .company-logo img,
.tc-page-home .rec-logo img {
	width: auto !important;
	height: auto !important;
	max-width: 86% !important;
	max-height: 86% !important;
	object-fit: contain !important;
	display: block;
	border-radius: 0;
}

/* The five slots the design already had: same white box, same centring. */
.tc-page-fiche .hero-logo,
.tc-page-fiche .cc-logo,
.tc-page-fiche .sim-logo,
.tc-page-dirigeant .cc-logo,
.tc-page-annuaire .company-logo,
.tc-page-home .rec-logo {
	background: #fff;
	overflow: hidden;
}

/*
 * The hero slot is the one that has to cope with the widest range, so it is a fixed-height
 * band rather than a small square: a horizontal wordmark can use the width it needs while
 * the height — and therefore the hero — never moves.
 */
.tc-page-fiche .hero-logo {
	width: auto;
	min-width: 56px;
	max-width: 180px;
	height: 56px;
	padding: 0 10px;
}
@media (max-width: 900px) {
	.tc-page-fiche .hero-logo {
		min-width: 48px;
		max-width: 132px;
		height: 48px;
		padding: 0 8px;
	}
}
/*
 * A very tall logo is the hardest case: constrained to a short band it would be only a few
 * pixels wide. It is allowed the full height of the slot so it stays as legible as the
 * geometry permits — still never cropped, never distorted, and the band does not grow.
 */
.tc-page-fiche .hero-logo img { max-height: 100% !important; }

/* The initial-letter fallback, when a professional has not uploaded a logo. */
.tc-page-fiche .hero-logo .lf,
.tc-page-fiche .cc-logo .cf,
.tc-page-fiche .sim-logo .sim-initial,
.tc-page-annuaire .company-logo .logo-fallback,
.tc-page-home .rec-logo .rec-logo-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-weight: 700;
	line-height: 1;
}