/**
 * Block: Logos — partners strip (acf/ll-logos-strip)
 *
 * Self-contained, scoped palette declared on .block-ll-logos-strip. A DARK
 * full-width band: small uppercase left label + a single horizontal row of
 * partner names (text wordmarks), evenly spaced, wrapping when narrow.
 * 1:1 with the Travel & Hospitality hero bottom strip. Text logos only.
 */

.block-ll-logos-strip {
	--lgs-bg: #010005;      /* Figma Dark */
	--lgs-label: #768297;   /* Figma Grey_2 — muted blue-grey label */
	--lgs-word: #768297;    /* Figma Grey_2 — wordmarks match the label (not white) */
	--lgs-word-hover: #fff;

	background: var(--lgs-bg);
	padding: 34px 0;
	font-family: var(--ll-font, 'Montserrat', -apple-system, sans-serif);
}

.block-ll-logos-strip__inner {
	/* Match the hero block's content box (ll-hero-dark-split __inner: max-width
	   1380 + 40px gutters) so the strip spans the SAME width as the hero and the
	   label / last wordmark line up with the hero's left / right content edges.
	   space-between spreads label + wordmarks evenly across that width. */
	max-width: 1380px;
	margin: 0 auto;
	padding: 0 40px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 22px 12px;
}

/* ================================================================== label -- */
.block-ll-logos-strip__label {
	flex: 0 0 auto;
	margin: 0;
	font: 700 12px/18px var(--ll-font, 'Montserrat', -apple-system, sans-serif);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--lgs-label);
}

/* ==================================================================== row -- */
.block-ll-logos-strip__row {
	/* Desktop: dissolve the <ul> box (display:contents) so the wordmarks become
	   direct flex items of __inner and space-between distributes ALL of them
	   (label + wordmarks) evenly across the hero-width band. Restored to a real
	   flex row ≤1024 / mobile (see media queries below). */
	display: contents;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px 44px;
}
.block-ll-logos-strip__item {
	display: inline-flex;
	align-items: center;
}

/* ============================================================== wordmarks -- */
.block-ll-logos-strip__word {
	font: 600 19px/26px var(--ll-font, 'Montserrat', -apple-system, sans-serif);
	letter-spacing: -0.2px;
	color: var(--lgs-word);
	text-decoration: none;
	transition: color .18s ease;
}
a.block-ll-logos-strip__word:hover,
a.block-ll-logos-strip__word:focus-visible {
	color: var(--lgs-word-hover);
}

/* ============================================================= responsive -- */
@media (max-width: 1024px) {
	/* Below desktop there's no hero to match — restore the <ul> as a centred flex
	   row so the group wraps cleanly instead of space-between across two rows. */
	.block-ll-logos-strip__inner { padding: 0 40px; justify-content: center; }
	.block-ll-logos-strip__row { display: flex; }
}
@media (max-width: 767px) {
	.block-ll-logos-strip { padding: 28px 0; }
	.block-ll-logos-strip__inner {
		padding: 0 20px;
		flex-direction: column;
		align-items: center;
		gap: 18px;
		text-align: center;
	}
	.block-ll-logos-strip__row {
		justify-content: center;
		gap: 8px;
	}
	/* Figma mobile: each partner name becomes an outlined rounded pill, wrapping
	   and centered under the label. */
	.block-ll-logos-strip__word {
		display: inline-flex;
		align-items: center;
		padding: 6px 13px;
		font-size: 12px;
		border: 1px solid rgba(118, 130, 151, .45);
		border-radius: 999px;
		color: var(--lgs-word);
	}
	a.block-ll-logos-strip__word:hover,
	a.block-ll-logos-strip__word:focus-visible {
		border-color: var(--lgs-word-hover);
	}
}