/* TCC Group - Layout & Spacing Overrides */

/* Zero the top blockGap margin on the main element so it sits flush with the header/footer */
.tcc-main {
	margin-block-start: 0;
	min-width: 0;

	/*
	 * Canonical layout tokens for every template.
	 *
	 * They live here, on the shell every page shares, because the same values
	 * were previously re-derived per template and drifted: the indexes and
	 * page models centred on 75rem while the Solution Pillar and Sector pages
	 * centred on 80rem, and band padding was a fixed 5rem rather than the
	 * design's rhythm.
	 *
	 * Measured from the approved design at an effective 1771px viewport:
	 * the content column settles at 1200px, standard bands use 56px of block
	 * padding, the hero uses 64px over 80px, quieter strips use 40px, and the
	 * byline rule uses 24px.
	 */
	--tcc-shell: 75rem;
	--tcc-gutter: clamp(1.25rem, 4vw, 3rem);
	--tcc-band-gap: clamp(2rem, 5vw, 3.5rem);
	--tcc-band-gap-tight: clamp(1.5rem, 3vw, 2.5rem);
	--tcc-band-gap-quiet: 1.5rem;
	--tcc-hero-gap-top: clamp(2.5rem, 5vw, 4rem);
	--tcc-hero-gap-bottom: clamp(3rem, 6vw, 5rem);
}

/*
 * The footer template part is a top-level child of .wp-site-blocks, so WordPress
 * flow layout injects the default block gap as margin-block-start on it. That
 * opens a gap between the last section of a page (e.g. the teal CTA strip) and
 * the green footer. Zero it so the footer always sits flush against the page.
 */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

.tcc-delivery-pillar__image-frame {
	overflow: hidden;
	position: relative;
}

.tcc-main > .wp-block-group.is-layout-constrained {
	box-sizing: border-box;
	padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.tcc-main :where(.wp-block-post-title, .wp-block-query-title) {
	max-width: 19ch;
}

.tcc-main .wp-block-post-content {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
}

.tcc-main .wp-block-post-content :where(p, ul, ol) {
	max-width: 46rem;
}

.tcc-template-shell,
.tcc-not-found {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size);
	padding-block: clamp(3.5rem, 7vw, 7rem);
	padding-inline: clamp(1.5rem, 4vw, 3rem);
	width: 100%;
}

.tcc-template-shell > :first-child,
.tcc-not-found .wp-block-group > :first-child {
	margin-block-start: 0;
}

.tcc-template-shell > :where(.wp-block-post-title, .wp-block-query-title, h1),
.tcc-not-found h1 {
	font-size: clamp(2.53rem, 5vw, 4.37rem);
	line-height: 1.02;
}

.tcc-template-shell--page .wp-block-post-featured-image,
.tcc-template-shell--single .wp-block-post-featured-image {
	margin-top: var(--wp--preset--spacing--10);
}

.tcc-search-form {
	margin-block: var(--wp--preset--spacing--8) var(--wp--preset--spacing--10);
	max-width: 46rem;
}

.tcc-search-form .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--line);
	box-sizing: border-box;
	min-height: 3.25rem;
	padding: 0.25rem;
}

.tcc-search-form .wp-block-search__input {
	border: 0;
	min-width: 0;
}

.tcc-search-form .wp-block-search__button {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	margin: 0;
	min-height: 2.75rem;
}

.tcc-not-found .wp-block-search {
	margin-top: var(--wp--preset--spacing--8);
	max-width: 42rem;
}

.tcc-main .wp-block-post-featured-image img {
	display: block;
	width: 100%;
}

.tcc-post-meta {
	align-items: center;
	color: var(--wp--preset--color--muted);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--sm);
	gap: 0.5rem 1.5rem;
}

.tcc-post-meta > * {
	margin: 0;
}

.tcc-archive-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin-top: var(--wp--preset--spacing--10);
	padding: 0;
}

.tcc-card {
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: var(--wp--preset--spacing--6);
	position: relative;
	transition: border-color 150ms ease, transform 180ms var(--tcc-ease-out, ease-out);
}

.tcc-card .wp-block-post-title a::before,
.tcc-card .tcc-card__link a::before {
	content: "";
	inset: 0;
	position: absolute;
}

@media (hover: hover) and (pointer: fine) {
	.tcc-card:hover,
	.tcc-card:has(.wp-block-post-title a:focus-visible, .tcc-card__link a:focus-visible) {
		border-color: var(--wp--preset--color--teal);
		transform: translateY(-0.25rem);
	}

	.tcc-card:has(.wp-block-post-title a:focus-visible, .tcc-card__link a:focus-visible) {
		transition: none;
	}
}

.tcc-card .wp-block-post-featured-image {
	margin: calc(var(--wp--preset--spacing--6) * -1);
	margin-bottom: var(--wp--preset--spacing--6);
}

.tcc-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.3;
}

.tcc-card .wp-block-post-title a,
.tcc-search-result .wp-block-post-title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.tcc-card .wp-block-post-excerpt,
.tcc-card .wp-block-post-date,
.tcc-search-result .wp-block-post-excerpt,
.tcc-search-result .wp-block-post-date {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.tcc-card .wp-block-post-date {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--4);
}

.tcc-search-result {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-block: var(--wp--preset--spacing--8);
}

.tcc-search-result:first-child {
	border-top: 1px solid var(--wp--preset--color--line);
}

.tcc-search-result .wp-block-post-title {
	font-size: var(--wp--preset--font-size--xl);
}

.tcc-main .wp-block-query-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	justify-content: center;
	margin-top: var(--wp--preset--spacing--12);
}

.tcc-main .wp-block-query-pagination a,
.tcc-main .wp-block-query-pagination .current {
	align-items: center;
	border: 1px solid var(--wp--preset--color--line);
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	min-height: 2.75rem;
	min-width: 2.75rem;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
}

.tcc-main .wp-block-query-pagination .current {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}

.tcc-main :where(a, button, summary, input, textarea, select):focus-visible {
	outline: 3px solid var(--wp--preset--color--teal);
	outline-offset: 3px;
	transition: none;
}

@media (max-width: 64rem) {
	.tcc-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 38rem) {
	.tcc-archive-grid {
		grid-template-columns: 1fr;
	}

	.tcc-post-meta {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcc-card {
		transition: border-color 150ms ease;
	}

	.tcc-card:hover {
		transform: none;
	}
}

/* ─── Sector card grid ──────────────────────────────────────────────── */
/* Shared by the homepage sectors band and every Solution Pillar's relevant
   sectors band, so both stay identical. The list item is the grid item and
   already stretches to the tallest card in its row; the anchor inside it must
   take that full height, or a card whose label wraps to two lines leaves its
   single-line neighbours visibly short. */
.tcc-sector-card-grid {
	display: grid;
	gap: 0.5rem 1rem;
	/* `1fr` rather than `auto` as the maximum: every row then resolves to the
	   tallest card in the grid, so a two-line label no longer leaves the
	   single-line rows beneath it visibly shorter. */
	grid-auto-rows: minmax(5.0625rem, 1fr);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.tcc-sector-card-grid > li {
	display: flex;
}

.tcc-sector-card-grid a {
	align-items: center;
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--wp--preset--color--ink);
	display: flex;
	font-weight: 650;
	gap: 0.75rem;
	height: 100%;
	justify-content: space-between;
	padding: 1.25rem;
	text-decoration: none;
	width: 100%;
	transition:
		background-color var(--tcc-duration-fast) var(--tcc-ease-color),
		border-color var(--tcc-duration-fast) var(--tcc-ease-color),
		color        var(--tcc-duration-fast) var(--tcc-ease-color);
}

.tcc-sector-card-grid a::after {
	color: var(--wp--preset--color--cyan);
	content: "\2192";
	flex: 0 0 auto;
}

/* An unmistakable filled state rather than a tint change: the whole card
   inverts to the brand navy with paper text (13.4:1) and a cyan-light arrow
   (10.6:1), so the affordance reads at a glance and both focus and hover
   land on the same, clearly non-default surface. */
.tcc-sector-card-grid a:hover,
.tcc-sector-card-grid a:focus-visible {
	background: var(--wp--preset--color--navy);
	border-color: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}

.tcc-sector-card-grid a:hover::after,
.tcc-sector-card-grid a:focus-visible::after {
	color: var(--wp--preset--color--cyan-lt);
}

@media (prefers-reduced-motion: reduce) {
	.tcc-sector-card-grid a {
		transition: none;
	}
}

@media (max-width: 61.1875rem) {
	.tcc-sector-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 37.5rem) {
	.tcc-sector-card-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The closing call to action is a band like any other, so it takes the shared
   column and rhythm rather than WordPress's own content size and its former
   inline padding. */
.tcc-cta-strip {
	box-sizing: border-box;
	padding-block: var(--tcc-band-gap);
	padding-inline: var(--tcc-gutter);
}

.tcc-cta-strip__inner {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: var(--tcc-shell);
	width: 100%;
}

/* =====================================================================
 * Authored provider embeds.
 * Inserted by the "Embed video or media" editor button as a figure with a
 * single iframe. aspect-ratio keeps the frame responsive without the old
 * padding-top hack, and the reduced-motion rule is inherited from the
 * provider's own player rather than being forced here.
 * ===================================================================== */

.tcc-embed {
	margin: var(--wp--preset--spacing--6, 1.5rem) 0;
	max-width: 100%;
}

.tcc-embed iframe {
	display: block;
	width: 100%;
	border: 0;
	border-radius: 8px;
}

.tcc-embed--video iframe {
	aspect-ratio: 16 / 9;
	height: auto;
}

/* A provider that supplies no intrinsic ratio still needs a sensible floor. */
@supports not (aspect-ratio: 16 / 9) {

	.tcc-embed--video iframe {
		min-height: 22rem;
	}
}

/* ─── Named section anchors ─────────────────────────────────────────────── */
/* Any section given an ID by `tcc_section_anchor_attr()` can be linked to
   in-page. The site header is sticky, so an anchored section must reserve
   room for it or the heading lands underneath the header and the reader sees
   the middle of the section. This is applied to every anchor target rather
   than to `:target` alone, because the offset has to be in effect at the
   moment the browser performs the scroll, not only once the fragment has
   become active. */
.tcc-main [id] {
	scroll-margin-top: 6.5rem;
}

/* Smooth in-page movement, but never for a reader who has asked for reduced
   motion: a long jump-scroll is exactly the kind of motion that setting
   exists to suppress. */
@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}