/* ==========================================================================
   Widget — Logo Section
   Built from "Current Tenants" (59:66): a centred heading over a row of
   tenant logos, closed by a "View Full Tenant Directory ⟶" text link.

   Every logo is fitted inside the same box - full cell width, one height -
   with object-fit: contain, so a wide wordmark meets the sides while a round
   badge meets the top and bottom. Mobile-first: two per row, three on
   tablets, four on desktop, and a short last row centres.
   ========================================================================== */

/*
 * The comp sets the heading and its supporting line in navy on white, not the
 * near-black body ink the light scheme uses for running copy.
 */
.o-section--logo-section.o-scheme-light {
	--o-text: var(--o-navy);
	--o-text-soft: var(--o-navy);
}

/* --------------------------------------------------------------------------
   Heading
   -------------------------------------------------------------------------- */
.o-section--logo-section .o-section-heading__title {
	font-size: var(--o-fs-h1); /* 32 -> 48, the comp's 48 */
	font-weight: var(--o-fw-semibold);
	line-height: 1.083;
	text-transform: uppercase;
	text-wrap: balance;
}

/* The top margin is there to clear an eyebrow. With none, it is dead space. */
.o-section--logo-section .o-section-heading__title:first-child {
	margin-top: 0;
}

.o-section--logo-section .o-section-heading__intro {
	margin-top: 1rem; /* 16 */
	text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The logos
   -------------------------------------------------------------------------- */
.o-logos {
	/*
	 * Fallbacks only. Elementor writes --o-logos-columns and --o-logos-height
	 * from the "Logos per row" and "Logo height" controls.
	 */
	--o-logos-columns: 2;
	--o-logos-height: 56px;
	--o-logos-gap: var(--o-space-lg);

	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--o-space-xl) var(--o-logos-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.o-logos {
		--o-logos-columns: 3;
		--o-logos-height: 72px;
	}
}

@media (min-width: 1025px) {
	.o-logos {
		--o-logos-columns: 4;
		--o-logos-height: 96px;
	}
}

.o-logos__item {
	--o-logo-scale: 1;

	display: flex;
	align-items: center;
	justify-content: center;
	/* A fraction of the row, so a short last row keeps the same cell width and centres. */
	flex: 0 0 calc((100% - (var(--o-logos-columns) - 1) * var(--o-logos-gap)) / var(--o-logos-columns));
	min-width: 0;
	margin: 0;
}

.o-logos__link {
	display: block;
	width: 100%;
}

.o-logos__img {
	display: block;
	/* Scale shrinks a wide wordmark too, which meets the sides before the top. */
	width: min(100%, 100% * var(--o-logo-scale));
	height: calc(var(--o-logos-height) * var(--o-logo-scale));
	margin-inline: auto;
	object-fit: contain;
	transition: filter var(--o-transition), opacity var(--o-transition), transform var(--o-transition);
}

.o-logos__link:hover .o-logos__img,
.o-logos__link:focus-visible .o-logos__img {
	transform: scale(1.04);
}

/*
 * White tiles, as the comp draws each cell. Mostly for navy and pale blue
 * sections, where a logo saved on a white background would otherwise show as
 * a white box. Tiles in a row stretch to the tallest, so they stay level.
 */
.o-logos--tiles .o-logos__item {
	align-self: stretch;
	padding: var(--o-space-md) var(--o-space-lg);
	background-color: var(--o-white);
}

/* Greyscale option: quiet until a linked logo is pointed at. */
.o-logos--mono .o-logos__img {
	filter: grayscale(1);
	opacity: 0.7;
}

.o-logos--mono .o-logos__link:hover .o-logos__img,
.o-logos--mono .o-logos__link:focus-visible .o-logos__img {
	filter: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.o-logos__img {
		transition: none;
	}

	.o-logos__link:hover .o-logos__img,
	.o-logos__link:focus-visible .o-logos__img {
		transform: none;
	}
}

/* Editor-only prompt while the repeater is empty. */
.o-logos__empty {
	margin: 0;
	padding: var(--o-space-lg);
	border: 2px dashed var(--o-rule);
	color: var(--o-text-soft);
	font-family: var(--o-font-ui);
	font-size: var(--o-fs-small);
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   "View Full Tenant Directory ⟶"
   The comp draws the whole link orange, but orange text is 2.3:1 on white.
   The words take the text colour and the chevrons keep the orange - they are
   decorative, so they carry the accent without carrying the meaning.
   -------------------------------------------------------------------------- */
.o-logos__more {
	margin: var(--o-space-xl) 0 0;
	text-align: center;
}

.o-logos__more-link .o-textlink__chevrons {
	color: var(--o-accent);
}

/* On navy the accent is legible, so the link can be orange as drawn. */
.o-scheme-dark .o-logos__more-link {
	color: var(--o-accent);
}

.o-scheme-dark .o-logos__more-link:hover,
.o-scheme-dark .o-logos__more-link:focus-visible {
	color: var(--o-white);
}