/* ============================================================
   Accreditation (trust) strip - homepage brief 4.2
   White band under the hero, 1px Grey Light line along the bottom:
   three logo + label items with 1 x 50 Grey Light dividers.
   - Phones (< 768): one row that scrolls sideways (the design's
     "Scrolling on mobile"), manual swipe with scroll-snap, no
     auto-scroll (QH3); 122px tall; logo 50px, label Bold 16.
   - Tablet (768-1023): three equal columns, each logo stacked above
     its centred label (side-by-side pairs do not fit at 768).
   - Desktop (>= 1024): 142px tall, three equal columns with the
     logo 19px before its label, content centred in each column.
   ============================================================ */

.accreditation-strip {
	background-color: var(--color-surface);
	border-bottom: var(--border-hairline) solid var(--color-divider);
	color: var(--color-text);
}

/* Phones: the scroller runs edge to edge, so the container's side
   padding moves onto the list (and its scroll padding). */
.accreditation-strip__inner {
	padding-inline: 0;
}

.accreditation-strip__list {
	display: flex;
	align-items: center;
	min-height: 121px; /* 122 with the bottom line */
	margin: 0;
	padding: 0 var(--gutter);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}

.accreditation-strip__list::-webkit-scrollbar {
	display: none;
}

.accreditation-strip__item {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 20px;
	scroll-snap-align: start;
}

.accreditation-strip__item:first-child {
	padding-left: 0;
}

/* 1 x 50 divider before items 2 and 3. */
.accreditation-strip__item + .accreditation-strip__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--border-hairline);
	height: 50px;
	background-color: var(--color-divider);
	transform: translateY(-50%);
}

.accreditation-strip__link {
	display: flex;
	align-items: center;
	gap: 9px;
	color: inherit;
	text-decoration: none;
}

.accreditation-strip__logo {
	flex: none;
	width: auto;
	height: 50px;
}

.accreditation-strip__label {
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	line-height: var(--lh-body);
	white-space: nowrap;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color var(--transition);
}

/* Hover: the label underlines (colour of the decoration only - nothing
   moves). Navy stays on the label for contrast on white. */
a.accreditation-strip__link:hover .accreditation-strip__label,
a.accreditation-strip__link:focus-visible .accreditation-strip__label {
	text-decoration-color: currentColor;
}

a.accreditation-strip__link:focus-visible {
	outline-color: var(--color-focus-light);
}

/* ============================================================
   Tablet: three columns, logo above label
   ============================================================ */

@media (min-width: 768px) {
	.accreditation-strip__inner {
		padding-inline: var(--gutter);
	}

	.accreditation-strip__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		min-height: 141px; /* 142 with the bottom line */
		padding: 20px 0;
		overflow: visible;
		scroll-snap-type: none;
	}

	.accreditation-strip__item,
	.accreditation-strip__item:first-child {
		padding-inline: 16px;
	}

	.accreditation-strip__link {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.accreditation-strip__label {
		white-space: normal;
	}
}

/* ============================================================
   Desktop: logo beside label, 142px band
   ============================================================ */

@media (min-width: 1024px) {
	.accreditation-strip__list {
		padding-block: 0;
	}

	.accreditation-strip__link {
		flex-direction: row;
		gap: 19px;
		text-align: left;
	}

	.accreditation-strip__logo {
		height: 51px;
	}
}