/* -------------------------------------------------------------------------- */
/* Accreditations & Assurance                                                 */
/* -------------------------------------------------------------------------- */

/**
 * Reusable accreditation and organisational assurance section.
 *
 * External accreditation marks retain their official supplied branding.
 * Thula assurance items use a deliberately quieter icon + label treatment.
 */
.thula-assurance {
	--thula-assurance-bg: #09183c;

	--thula-assurance-inline-space:
		clamp(
			var(--wp--preset--spacing--40),
			4.5vw,
			var(--wp--preset--spacing--60)
		);

	position: relative;

	margin-block: 0;

	background-color: var(--thula-assurance-bg);
}


/**
 * The Site Container controls the overall page width.
 *
 * Keep generous separation from the CTA divider above, while keeping the
 * heading relatively close to the assurance row below.
 */
.thula-assurance > .is-style-site-container {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--40);
}


.thula-assurance::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;

	height: 1px;

	background:
		linear-gradient(
			90deg,
			rgba(255, 255, 255, 0) 0%,
			rgba(255, 255, 255, 0.06) 15%,
			rgba(255, 255, 255, 0.12) 50%,
			rgba(255, 255, 255, 0.06) 85%,
			rgba(255, 255, 255, 0) 100%
		);

	pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* Section Label                                                              */
/* -------------------------------------------------------------------------- */

.thula-assurance__label {
	margin-top: 0;
	margin-right: var(--thula-assurance-inline-space);
	margin-bottom: 1.3rem;
	margin-left: var(--thula-assurance-inline-space);

	color: var(--wp--preset--color--white);

	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: 0.03rem;
	text-transform: uppercase;
	text-align: center;
}


/* -------------------------------------------------------------------------- */
/* Main Assurance Row                                                         */
/* -------------------------------------------------------------------------- */

/**
 * Keep the two logical groups compact rather than stretching them across the
 * complete Content Container.
 *
 * Each group sizes itself from its contents and the complete composition is
 * centred as one visual unit.
 */
.thula-assurance__groups {
	display: grid;

	grid-template-columns: auto auto;

	align-items: center;
	justify-content: center;

	width: fit-content;
	max-width:
		calc(
			100% -
			var(--thula-assurance-inline-space) -
			var(--thula-assurance-inline-space)
		);

	margin-inline: auto;
}


/**
 * Sets are compact flex rows rather than equal-width three-column grids.
 *
 * This prevents small marks from being unnecessarily distributed across large
 * grid cells.
 */
.thula-assurance__set {
	display: flex;

	align-items: center;
	justify-content: center;

	min-width: 0;
}


.thula-assurance__groups,
.thula-assurance__set,
.thula-assurance__item {
	overflow: visible;
}


/* -------------------------------------------------------------------------- */
/* External Accreditations                                                    */
/* -------------------------------------------------------------------------- */

/**
 * Keep the official accreditations prominent and reasonably close together.
 */
.thula-assurance__set--external {
	gap: 2.25rem;

	padding-inline-end: 1.75rem;

	overflow: visible;
}


/**
 * Official marks use their natural dimensions rather than sharing equal-width
 * columns.
 */
.thula-assurance__set--external
	.thula-assurance__item {
	flex: 0 0 auto;
}


/* -------------------------------------------------------------------------- */
/* Internal Thula Assurance                                                   */
/* -------------------------------------------------------------------------- */

/**
 * The divider separates independently awarded external marks from Thula's own
 * assurance statements.
 *
 * Internal items are slightly more tightly grouped than the official marks.
 */
.thula-assurance__set--internal {
	gap: 0.875rem;

	padding-inline-start: 1.5rem;

	border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}


/* -------------------------------------------------------------------------- */
/* Shared Assurance Items                                                     */
/* -------------------------------------------------------------------------- */

.thula-assurance__item {
	display: flex;

	align-items: center;
	justify-content: center;

	box-sizing: border-box;

	min-width: 0;
	min-height: 5.5rem;

	margin: 0;
	padding: 0;
}


/* -------------------------------------------------------------------------- */
/* Official Accreditation Images                                              */
/* -------------------------------------------------------------------------- */

.thula-assurance__item .wp-block-image {
	width: auto;

	margin: 0;
}


.thula-assurance__item .wp-block-image img {
	display: block;

	width: auto;
	max-width: 100%;

	height: auto;
	max-height: 5.5rem;

	margin-inline: auto;

	border: 0;
	border-radius: 0;

	object-fit: contain;
}


/**
 * Prevent linked Image blocks from introducing baseline space.
 */
.thula-assurance__item .wp-block-image a {
	display: block;

	line-height: 0;
}


/* -------------------------------------------------------------------------- */
/* Cyber Essentials Widget                                                    */
/* -------------------------------------------------------------------------- */

.thula-assurance__item iframe {
	display: block;

	max-width: 100%;

	margin-inline: auto;

	border: 0;
}


/* -------------------------------------------------------------------------- */
/* Internal Assurance Items                                                   */
/* -------------------------------------------------------------------------- */

/**
 * Keep internal items deliberately smaller and quieter than the official
 * accreditation marks.
 */
.thula-assurance__item--internal {
	display: grid;

	grid-template-rows: 3rem 2.5em;

	align-items: start;
	justify-items: center;

	flex: 0 0 7.75rem;

	row-gap: 0.45rem;

	min-height: auto;
}


/**
 * The icon roundel gives different SVGs a consistent footprint without making
 * them resemble formal accreditation badges.
 */
.thula-assurance__icon {
	display: flex;

	align-items: center;
	justify-content: center;

	box-sizing: border-box;

	width: 3rem;
	height: 3rem;

	margin: 0;

	padding: 0.6rem;

	color: var(--wp--preset--color--white);

	border: 1px solid rgba(255, 255, 255, 0.20);
	border-radius: 50%;

	background-color: rgba(255, 255, 255, 0.025);
}


/**
 * Normalise the SVG itself independently from the roundel.
 */
.thula-assurance__icon svg {
	display: block;

	width: 1.65rem;
	height: 1.65rem;
}


/**
 * Short supporting labels should visually relate to the small typography
 * contained within the official marks rather than normal body copy.
 */
.thula-assurance__item-label {
	display: flex;

	align-items: flex-start;
	justify-content: center;

	width: 100%;
	max-width: 7.75rem;
	min-height: 2.5em;

	margin: 0;

	color: var(--wp--preset--color--white);

	font-size: 0.75rem;
	font-weight: 300;
	line-height: 1.25;

	text-align: center;
}


/* -------------------------------------------------------------------------- */
/* Medium Screens                                                             */
/* -------------------------------------------------------------------------- */

@media (max-width: 1100px) {

	.thula-assurance__set--external {
		gap: 1.25rem;

		padding-inline-end: 1.25rem;
	}


	.thula-assurance__set--internal {
		gap: 0.75rem;

		padding-inline-start: 1.25rem;
	}


	.thula-assurance__item--internal {
		flex-basis: 7.25rem;
	}


	.thula-assurance__icon {
		width: 2.875rem;
		height: 2.875rem;

		padding: 0.575rem;
	}


	.thula-assurance__icon svg {
		width: 1.6rem;
		height: 1.6rem;
	}


	.thula-assurance__item-label {
		max-width: 7.25rem;
	}


	.thula-assurance__item .wp-block-image img {
		max-height: 5rem;
	}
}


/* -------------------------------------------------------------------------- */
/* Tablet                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 781px) {

	.thula-assurance {
		--thula-assurance-inline-space:
			var(--wp--preset--spacing--40);
	}


	.thula-assurance > .is-style-site-container {
		padding-top: var(--wp--preset--spacing--30);
		padding-bottom: var(--wp--preset--spacing--40);
	}


	.thula-assurance__label {
		margin-right: var(--thula-assurance-inline-space);
		margin-bottom: var(--wp--preset--spacing--30);
		margin-left: var(--thula-assurance-inline-space);
	}


	/**
	 * Stack the external and internal groups as two rows.
	 *
	 * Each individual group still keeps its three items side-by-side.
	 */
	.thula-assurance__groups {
		grid-template-columns: 1fr;

		row-gap: var(--wp--preset--spacing--30);

		width: auto;
		max-width: none;

		margin-inline: var(--thula-assurance-inline-space);
	}


	/**
	 * Keep all three external accreditations together in one row.
	 */
	.thula-assurance__set--external {
		gap:
			clamp(
				0.875rem,
				3vw,
				1.5rem
			);

		padding-inline-end: 0;
	}


	/**
	 * Keep all three internal assurance items together in one row.
	 *
	 * The vertical desktop divider becomes a horizontal separator.
	 */
	.thula-assurance__set--internal {
		gap: 0.75rem;

		padding-block-start: var(--wp--preset--spacing--30);
		padding-inline-start: 0;

		border-inline-start: 0;
		border-block-start: 1px solid rgba(255, 255, 255, 0.18);
	}


	.thula-assurance__item--internal {
		flex-basis: 7rem;
	}


	.thula-assurance__icon {
		width: 2.75rem;
		height: 2.75rem;

		padding: 0.55rem;
	}


	.thula-assurance__icon svg {
		width: 1.5rem;
		height: 1.5rem;
	}


	.thula-assurance__item-label {
		max-width: 7rem;
	}


	.thula-assurance__item .wp-block-image img {
		max-height: 5rem;
	}
}


/* -------------------------------------------------------------------------- */
/* Mobile                                                                     */
/* -------------------------------------------------------------------------- */

@media (max-width: 480px) {

	.thula-assurance {
		--thula-assurance-inline-space:
			var(--wp--preset--spacing--20);
	}


	.thula-assurance > .is-style-site-container {
		padding-top: var(--wp--preset--spacing--30);
		padding-bottom: var(--wp--preset--spacing--30);
	}


	.thula-assurance__label {
		margin-right: var(--thula-assurance-inline-space);
		margin-bottom: var(--wp--preset--spacing--30);
		margin-left: var(--thula-assurance-inline-space);
	}


	/**
	 * Keep the two logical groups stacked as separate rows:
	 *
	 * Row 1: Cyber Essentials / ISO 27001 / ORCHA
	 * Row 2: Governance / Quality / Secure Development
	 */
	.thula-assurance__groups {
		display: grid;

		grid-template-columns: 1fr;

		gap: var(--wp--preset--spacing--30);

		width: auto;
		max-width: none;

		margin-inline: var(--thula-assurance-inline-space);
	}


	/**
	 * On phones, each group becomes an equal three-column grid.
	 *
	 * This keeps all three accreditation marks together and all three
	 * organisational assurance items together rather than stacking them.
	 */
	.thula-assurance__set {
		display: grid;

		grid-template-columns: repeat(3, minmax(0, 1fr));

		align-items: center;
		justify-content: stretch;

		width: 100%;
		min-width: 0;

		gap: 0.5rem;
	}


	/* ---------------------------------------------------------------------- */
	/* External accreditations                                                */
	/* ---------------------------------------------------------------------- */

	.thula-assurance__set--external {
		padding-inline-end: 0;
	}


	.thula-assurance__set--external
		.thula-assurance__item {
		min-width: 0;
		min-height: 4rem;
	}


	.thula-assurance__set--external
		.thula-assurance__item
		.wp-block-image {
		max-width: 100%;
	}


	.thula-assurance__set--external
		.thula-assurance__item
		.wp-block-image
		img {
		width: auto;
		max-width: 100%;

		height: auto;
		max-height: 4rem;
	}


	/**
	 * Cyber Essentials is an iframe rather than an Image block.
	 */
	.thula-assurance__set--external
		.thula-assurance__item
		iframe {
		width: 64px !important;
		max-width: 100%;

		height: 64px !important;
	}


	/* ---------------------------------------------------------------------- */
	/* Internal assurance                                                     */
	/* ---------------------------------------------------------------------- */

	.thula-assurance__set--internal {
		padding-block-start: var(--wp--preset--spacing--30);
		padding-inline-start: 0;

		border-inline-start: 0;
		border-block-start: 1px solid rgba(255, 255, 255, 0.18);
	}


	/**
	 * Each internal assurance item remains icon-above-label, but the three
	 * complete items sit side-by-side across the phone width.
	 */
	.thula-assurance__item--internal {
		display: grid;

		grid-template-rows: 2.75rem auto;

		align-items: start;
		justify-items: center;

		width: 100%;
		max-width: 7rem;
		min-width: 0;
		min-height: auto;

		margin-inline: auto;

		row-gap: 0.4rem;
	}


	.thula-assurance__icon {
		width: 2.75rem;
		height: 2.75rem;

		padding: 0.55rem;
	}


	.thula-assurance__icon svg {
		width: 1.5rem;
		height: 1.5rem;
	}


	.thula-assurance__item-label {
		width: 100%;
		max-width: 7rem;
		min-height: 0;

		font-size: 0.75rem;
		line-height: 1.2;
	}
}