/*
 * gm/accreditation-bar — the ruled row of accreditation logos.
 *
 * Figma: Accreditation bar, Property 1=Desktop (265:1255). A hairline above, the
 * label, then 48 down to the logos. The band pads 32 at the top and 96 at the
 * bottom, which is asymmetric on purpose: it sits directly under another
 * section.
 *
 * The logos are a ticker rather than a laid-out row, at Aidan's request on
 * 3 September. Every arrangement that fits eight marks of different widths into
 * a fixed line breaks at some screen size: space-between crowds them, wrapping
 * doubles the band's height, and a scrolling row needs a swipe nobody makes.
 * A ticker has no layout to break, so it behaves the same at 320 as at 2560.
 *
 * How the loop is seamless: the list is rendered several times over into one
 * track, and the track slides by exactly one copy, at which point copy 2 is
 * standing where copy 1 was and the animation can start again unseen. The 96
 * between logos is carried as a margin on each item rather than a flex gap,
 * because with a gap the copies are not equal widths and the loop jumps a
 * little every pass. render.php decides how many copies; see the note there.
 *
 * The logos come from the central Accreditations list, not from the page. See
 * inc/accreditations.php.
 */

.gm-accreditation {
	/* Sits flush under the section above it (overrides the flow block-gap). */
	margin-block-start: 0;
	box-sizing: border-box;
	/*
	 * 96 top and bottom. The band used to be 32 above, because on the dark ground
	 * it read as a foot to the section above it. On the pale ground it is a band
	 * of its own, so the light design gives it full padding (929:1578: 342 tall
	 * at 1440, 929:1592: 278 at 390).
	 */
	padding-block: var(--wp--preset--spacing--96);
	padding-inline: var(--gm-grid-margin);
	/*
	 * Aidan, 25 September 2026 (955:1964): the whole section going pale was
	 * never right. The schemes' colour artwork still needs a light ground, so
	 * the light ground shrinks to a bar (see __logos) and the section is dark
	 * again. These are the base rules and not an .is-style- block, because
	 * WordPress does not put the default style's class in the markup: only the
	 * alternatives below get one.
	 */
	background-color: var(--wp--preset--color--blue-1);
	color: var(--wp--preset--color--white);
}

/*
 * Dark blue with no bar: the marks sit straight on the section. The artwork is
 * the schemes' own colour now, and several of them (NICEIC's black type,
 * SafeContractor's navy wordmark) disappear on Blue 1, so this is for a bar
 * with no marks in it rather than a second way to show them.
 */
.is-style-gm-ground-dark .gm-accreditation__logos {
	margin-inline: calc(-1 * var(--gm-grid-margin));
	padding: 0;
	border-radius: 0;
	background-color: transparent;
}


/*
 * The full pale band, which the accreditations table still uses. Kept so the
 * bar can be compared against it, and switched back to in one click.
 */
.gm-accreditation.is-style-gm-ground-pale {
	background-color: var(--wp--preset--color--blue-5);
	color: var(--wp--preset--color--blue-1);
}

.is-style-gm-ground-pale .gm-accreditation__inner {
	border-block-start-color: var(--wp--preset--color--blue-4);
}

.is-style-gm-ground-pale .gm-accreditation__label {
	color: var(--wp--preset--color--blue-1);
}

.is-style-gm-ground-pale .gm-accreditation__logos {
	margin-inline: calc(-1 * var(--gm-grid-margin));
	padding: 0;
	border-radius: 0;
	background-color: transparent;
}

/*
 * The rule now sits on the content rather than on the section, because the light
 * design insets it to the page margins instead of running it edge to edge, with
 * 24 beneath it before the label and 64 from the label down to the marks.
 */
.gm-accreditation__inner {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--64);
	padding-block-start: var(--wp--preset--spacing--24);
	border-block-start: 1px solid var(--wp--custom--color--white-25);
	/* Cap the content on ultra-wide screens (wideSize) and centre it. */
	max-width: 150rem;
	margin-inline: auto;
}

.gm-accreditation__label {
	margin-block: 0;
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.is-style-gm-ground-dark .gm-accreditation__label {
	color: var(--wp--preset--color--blue-4);
}

/*
 * The pale bar the marks sit in, and the window the track runs through.
 *
 * The bar is also what keeps the ticker inside it: `overflow` clips at the
 * padding box, so a mark fades out 48 inside the rounded corner rather than at
 * the screen edge. That is why this does not bleed. The two alternative grounds
 * above put the bleed back, since neither of them has a bar to stay inside.
 */
.gm-accreditation__logos {
	margin-inline: 0;
	padding: var(--wp--preset--spacing--48);
	overflow: hidden;
	border-radius: 8px;
	background-color: var(--wp--preset--color--blue-5);
}

.gm-accreditation__track {
	display: flex;
	align-items: center;
	/* Fits the logos, so a share of it is one full set rather than one screen. */
	inline-size: max-content;
	/*
	 * Paced per logo, not per track, so adding a ninth accreditation slows the
	 * loop instead of speeding every mark up. The count comes from render.php.
	 */
	animation: gm-accreditation-ticker calc(var(--gm-accreditation-count, 8) * 5s) linear infinite;
}

/* The two identical halves the loop is built from. */
.gm-accreditation__set {
	list-style: none;
	margin-block: 0;
	padding-inline: 0;
	display: flex;
	align-items: center;
}

/*
 * One logo box. Every box is 64 tall and free to be whatever width the mark
 * needs (Aidan, 3 September): each PNG carries its own top and bottom space, so
 * a tall badge and a long wordmark sit at the same weight on the line.
 *
 * The space between logos is a margin on the item, not a gap on the list, so
 * every copy in the ticker is exactly the same width and the loop lands. It was
 * 48; Aidan asked for double on 12 September 2026.
 */
.gm-accreditation__item {
	/* So the pending outline's border sits inside the row, not on top of it. */
	box-sizing: border-box;
	/* Never squeezed, so each mark keeps its true width. */
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * 56. The design draws a 44 row; Aidan asked for the marks bigger on
	 * 20 September 2026 and the artwork was rebuilt at this height rather than
	 * scaled up. Each file carries its mark at its own optical height inside the
	 * row (see gm_accreditation_logo()), so the tall badges and the long
	 * wordmarks sit at the same weight without the CSS knowing anything about
	 * them.
	 */
	block-size: 56px;
	margin-inline-end: var(--wp--preset--spacing--96);
}

/* Height-constrained, width free: each mark keeps its own proportions. */
.gm-accreditation__logo {
	block-size: 100%;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
}

/* Artwork still to come: marked rather than hidden. */
.gm-accreditation__item--pending {
	padding-inline: var(--wp--preset--spacing--8);
	border: 1px dashed var(--wp--preset--color--blue-4);
	border-radius: 2px;
}

.gm-accreditation__pending {
	color: var(--wp--preset--color--blue-3);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Editor only: shown when the central list is empty. */
.gm-accreditation__empty {
	margin-block: 0;
	color: var(--wp--preset--color--blue-3);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--base);
}

@keyframes gm-accreditation-ticker {

	from { transform: translate3d(0, 0, 0); }

	to { transform: translate3d(calc(-100% / var(--gm-accreditation-sets, 2)), 0, 0); }
}

/*
 * The editor shows one static set instead. A row moving under the cursor cannot
 * be clicked to select a logo, and the client edits these one at a time.
 */
.gm-accreditation__logos--static {
	margin-inline: 0;
	overflow-x: auto;
}

.gm-accreditation__logos--static .gm-accreditation__track {
	animation: none;
	flex-wrap: wrap;
}

.gm-accreditation__logos--static .gm-accreditation__set {
	flex-wrap: wrap;
}

/*
 * Desktop: a laid-out row, not a ticker.
 *
 * Aidan, 18 September 2026: the spacing looked wrong after a while and each mark
 * should appear once per pass. Measuring found no drift at all (every copy
 * 1678.52 wide, unchanged over 30 seconds on staging), so the fault was not the
 * loop: it was that a set of marks is narrower than a wide screen, so a second
 * copy of the first mark comes into view before the first has left, and the eye
 * reads that as broken spacing. Six marks fit 1440 with room to spare, and the
 * design spaces them across the row, so above the mobile breakpoint they are
 * simply placed. Nothing moves, nothing repeats.
 */
@media (min-width: 901px) {

	.gm-accreditation__logos {
		margin-inline: 0;
		overflow: visible;
	}

	.gm-accreditation__track {
		inline-size: 100%;
		animation: none;
	}

	/* One set, spread across the row exactly as 929:1578 draws it. */
	.gm-accreditation__set {
		inline-size: 100%;
		justify-content: space-between;
	}

	.gm-accreditation__set--clone {
		display: none;
	}

	.gm-accreditation__item {
		margin-inline-end: 0;
	}
}

/*
 * The ticker above the phone breakpoint. view.js adds .is-ticker once the marks
 * would sit closer than 32px, which is the point at which a row stops working.
 * It is the same ticker the phone gets, so it reuses the same pieces: the track
 * runs, the copy is shown, and the space is a margin on each mark.
 */
@media (min-width: 901px) {

	.gm-accreditation__logos.is-ticker {
		overflow: hidden;
	}

	.gm-accreditation__logos.is-ticker .gm-accreditation__track {
		inline-size: max-content;
		animation: gm-accreditation-ticker calc(var(--gm-accreditation-count, 8) * 5s) linear infinite;
	}

	.gm-accreditation__logos.is-ticker .gm-accreditation__set {
		inline-size: auto;
		justify-content: flex-start;
	}

	.gm-accreditation__logos.is-ticker .gm-accreditation__set--clone {
		display: flex;
	}

	.gm-accreditation__logos.is-ticker .gm-accreditation__item {
		margin-inline-end: var(--wp--preset--spacing--48);
	}
}

@media (max-width: 900px) {

	.gm-accreditation {
		/* 64 top and bottom on the phone, as 929:1592 draws it. */
		padding-block: var(--wp--preset--spacing--64);
	}

	/*
	 * The phone row is 1006 wide inside a 342 frame, so it has to travel. The
	 * design sets the marks 48 apart (929:1592).
	 */
	.gm-accreditation__item {
		margin-inline-end: var(--wp--preset--spacing--48);
	}
}

/*
 * Motion off: the track stops, the duplicate half goes away so nothing reads
 * twice, and the window becomes a scroller, so every logo is still reachable
 * rather than the row being clipped at whatever happens to fit.
 */
@media (prefers-reduced-motion: reduce) {

	.gm-accreditation__set--clone,
	.gm-accreditation__logos.is-ticker .gm-accreditation__set--clone {
		display: none;
	}

	.gm-accreditation__logos {
		overflow-x: auto;
		/* Stops a vertical drag being stolen by the horizontal scroller. */
		touch-action: pan-x;
		scrollbar-width: none;
	}

	.gm-accreditation__logos::-webkit-scrollbar {
		display: none;
	}

	.gm-accreditation__track,
	.gm-accreditation__logos.is-ticker .gm-accreditation__track {
		animation: none;
	}
}

@media (max-width: 900px) {

	/* 48 all round is most of a 390 screen. The bar takes the grid margin. */
	.gm-accreditation__logos {
		padding: var(--wp--preset--spacing--24);
	}
}