/* =========================================================================
	MON Tools — mon_logos "Logos" WPBakery element (front-end styles)
	========================================================================= */

.mon-logos {
	width: 100%;
}

/* "Extra top whitespace" option: separate the block from the element above it
	when several elements share one column. */
.mon-logos--extra-top {
	padding-top: 30px;
}

.mon-logos__grid {
	--mon-logos-col-gap: 20px;
	display: grid;
	grid-template-columns: repeat(var(--mon-logos-per-row, 3), minmax(0, 1fr));
	gap: 10px var(--mon-logos-col-gap);
	align-items: center;
	justify-items: center;
}

/* Each cell centers its logo both horizontally and vertically.
	container-type makes the cell a size container so the text-only partner
	name can scale with the cell width (cqw units below). */
.mon-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 10px;
	box-sizing: border-box;
	text-decoration: none;
	container-type: inline-size;
}

/* Cancel the site-wide link underline/border so logos don't get an underline
	and don't "jump" on hover (the global `a:hover` adds a 1px bottom border and
	flips padding-bottom, which reflows the centered image). */
.mon-logos__item,
.mon-logos__item:hover,
.mon-logos__item:focus {
	border: 0;
	padding-bottom: 10px;
	text-decoration: none;
}

/* Align the outer logos flush to the row edges: the leftmost logo of a row
	has no left inset, the rightmost no right inset. Only on desktop, where the
	per-row count is fixed (on mobile the grid reflows, so everything centers). */
@media (min-width: 769px) {
	.mon-logos__item--row-start {
		justify-content: flex-start;
		padding-left: 0;
	}
	.mon-logos__item--row-end {
		justify-content: flex-end;
		padding-right: 0;
	}
}

/* Keep the site convention of dimming image links on hover. */
.mon-logos__img {
	transition: opacity 0.2s ease;
}
a.mon-logos__item:hover .mon-logos__img {
	opacity: 0.8;
}

/* The media wrapper clips the logo so a cropped logo never bleeds into
	neighbouring cells. */
.mon-logos__media {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	overflow: hidden;
}

/* "Remove whitespace": the wrapper is sized to the (zoomed) content box and the
	image is absolutely positioned/scaled inside it, so only the content shows. */
.mon-logos__media--crop {
	position: relative;
}
.mon-logos__media--crop .mon-logos__img {
	position: absolute;
	max-width: none;
}

.mon-logos__img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Plain-text partner name (used when a partner has no logo image).
	The font size tracks the cell width (cqw = % of the .mon-logos__item
	container): full inherited size on wide cells, shrinking on narrow ones so
	long names like "Geograafiaõpetajate" still fit. 9.5cqw fits roughly a
	19-character bold word per line; 0.65em is the readability floor.
	overflow-wrap + hyphens are the safety net for even longer words. */
.mon-logos__name {
	display: block;
	text-align: center;
	font-weight: 700;
	line-height: 1.25;
	color: inherit;
	font-size: clamp(0.65em, 9.5cqw, 1em);
	overflow-wrap: break-word;
	hyphens: auto;
}

/* On narrow screens, fit as many logos as comfortably fit per row, but never
	more than the desktop "logos per row" setting. The `100% / per-row` floor
	guarantees the column count can't exceed --mon-logos-per-row (e.g. a 1- or
	2-per-row block stays at 1 or 2 on mobile), while the 110px floor still
	reduces high counts (e.g. 6) down to what fits on a phone. */
@media (max-width: 768px) {
	.mon-logos__grid {
		grid-template-columns: repeat(
			auto-fit,
			minmax(
				max(
					110px,
					calc(
						(100% - (var(--mon-logos-per-row, 3) - 1) * var(--mon-logos-col-gap))
						/ var(--mon-logos-per-row, 3)
					)
				),
				1fr
			)
		);
	}
}

/* EOF */