/**
 * Thameside Content Blocks — front + editor styles.
 * Derived from Thameside theme tokens and block partials (hero, media-text, buttons, grid).
 */

:root {
	--thameside-primary: #041c49;
	--thameside-secondary: #e22f2b;
	--thameside-accent: #01ffc5;
	--thameside-light-blue: #ebebed;
	--thameside-light-grey: #f2f2f2;
	--thameside-lightest: #ffffff;
	--thameside-dark: #4a4a4a;
	--thameside-dark-grey: #aeaeae;
	--thameside-text: rgba(4, 28, 73, 0.8);
	--thameside-text-light: rgba(255, 255, 255, 0.6);
	--thameside-font-body: "Inter Tight", sans-serif;
	--thameside-font-heading: "DM Serif Display", serif;
	/*
	 * Uniform vertical rhythm for content bands (matches classic Thameside block padding scale).
	 * Use clamp so tablet sits between phone and desktop without harsh jumps.
	 */
	/* Classic Thameside `_settings.scss`: $block-padding-small 40px 0, desktop $block-padding 100px 0 — slightly tighter clamps vs doubling with WP groups */
	--thameside-section-y-sm: clamp(2.25rem, 4.25vw, 3rem);
	--thameside-section-y-md: clamp(3rem, 5.25vw, 4rem);
	--thameside-section-y-lg: clamp(4rem, 7vw, 6rem);
	--thameside-block-pad-sm: var(--thameside-section-y-sm) 0;
	--thameside-block-pad-md: var(--thameside-section-y-md) 0;
	--thameside-block-pad: var(--thameside-section-y-lg) 0;
	--thameside-radius: 4px;
	--thameside-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
}

/* --- Services (legacy parity: block__services) --- */

.thameside-content-blocks.block__services .block__services__content {
	margin-bottom: 4rem;
	max-width: 600px;
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__services .block__services__content {
		max-width: 1000px;
	}
}

.thameside-content-blocks.block__services .block__services__slider {
	width: 100%;
	padding-left: 2rem;
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__services .block__services__slider {
		padding-left: 6rem;
	}
}

.thameside-content-blocks.block__services .services-wrapper {
	position: relative;
}

.thameside-content-blocks.block__services .glide__arrows {
	position: absolute;
	display: flex;
	right: 6rem;
	top: -12rem;
	z-index: 3;
}

.thameside-content-blocks.block__services .glide__arrow {
	display: none;
	position: relative;
	border: none;
	box-shadow: none;
	background: transparent;
	padding: 0;
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__services .glide__arrow {
		display: block;
	}
}

.thameside-content-blocks.block__services .glide__track {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.thameside-content-blocks.block__services .glide__track::-webkit-scrollbar {
	display: none;
}

.thameside-content-blocks.block__services .glide__slides {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: 30px;
	padding-right: 2rem;
}

@media (min-width: 992px) {
	.thameside-content-blocks.block__services .glide__slides {
		gap: 60px;
	}
}

.thameside-content-blocks.block__services .glide__slide {
	scroll-snap-align: start;
}

.thameside-content-blocks.block__services .service__item {
	position: relative;
	transition: 300ms var(--thameside-cubic);
	overflow: hidden;
	border-radius: 24px;
	isolation: isolate;
}

.thameside-content-blocks.block__services.block__services--default .service__item {
	/*
	 * In the legacy theme, Glide gave the slide a height.
	 * Here both `.service__item__inner` and `__image` are absolutely positioned,
	 * so the parent can collapse to 0 height unless we set one.
	 */
	aspect-ratio: 4 / 3;
	min-height: 340px;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__services.block__services--default .service__item {
		min-height: 380px;
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__services.block__services--default .service__item {
		min-height: 420px;
	}
}

.thameside-content-blocks.block__services .service__item h3 {
	font-size: clamp(2rem, 1.6vw, 2.4rem);
	margin-bottom: 2rem;
}

.thameside-content-blocks.block__services .service__item:hover .service__item__inner,
.thameside-content-blocks.block__services .service__item:focus-within .service__item__inner {
	transform: translateY(0);
}

.thameside-content-blocks.block__services .service__item__inner {
	position: absolute;
	height: 100%;
	width: 100%;
	padding: 3rem;
	background: var(--thameside-primary);
	right: 0;
	transform: translateY(calc(100% - 80px));
	transition: transform 0.3s ease;
	z-index: 1;
}

.thameside-content-blocks.block__services .service__item__inner :where(h1, h2, h3, h4, h5, h6, p, a) {
	color: var(--thameside-lightest);
}

.thameside-content-blocks.block__services .service__item__inner a {
	text-decoration: none;
}

.thameside-content-blocks.block__services .service__item__inner .button {
	margin-bottom: 0;
}

.thameside-content-blocks.block__services .service__item__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.thameside-content-blocks.block__services .service__item__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Services hub cards (post-style) --- */

.thameside-content-blocks.block__services .th-service-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__services .th-service-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (min-width: 1024px) {
	.thameside-content-blocks.block__services .th-service-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__services .th-service-cards {
		gap: 30px;
	}
}

.thameside-content-blocks.block__services .th-service-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(4, 28, 73, 0.12);
	border-radius: 24px;
	overflow: hidden;
	min-width: 0;
}

.thameside-content-blocks.block__services .th-service-card__image {
	display: block;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 5 / 3;
	background: rgba(255, 255, 255, 0.75);
	width: 100%;
}

.thameside-content-blocks.block__services .th-service-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.thameside-content-blocks.block__services .th-service-card__content {
	padding: 1rem 1.25rem 1.25rem;
	display: flex;
	flex-direction: column;
	/* Match News cards rhythm; we keep a real excerpt visible. */
	gap: 0.35rem;
	flex: 1 1 auto;
	min-width: 0;
}

.thameside-content-blocks.block__services .th-service-card__title {
	margin: 0.25rem 0 0;
	line-height: 1.2;
	font-family: var(--thameside-font-heading);
	font-size: clamp(1.9rem, 1.25vw, 2.2rem);
	/* clamp to 2 lines like blog cards */
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.thameside-content-blocks.block__services .th-service-card__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.thameside-content-blocks.block__services .th-service-card__excerpt {
	margin: 0.35rem 0 0;
	color: rgba(4, 28, 73, 0.7);
	font-size: 1.5rem;
	line-height: 1.55;
	/* keep the cards tidy; show a real description (unlike blog cards) */
	display: -webkit-box;
	line-clamp: 3;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.thameside-content-blocks.block__services .th-service-card__cta {
	margin-top: auto;
	padding-top: 0.9rem; /* match News: space between content and CTA */
}

/* Keep CTA style consistent but avoid extra whitespace inside the cards. */
.thameside-content-blocks.block__services .th-service-card__cta .wp-block-buttons {
	margin: 0;
}

.thameside-content-blocks.block__services .th-service-card__cta .wp-block-button {
	margin: 0;
}

.thameside-content-blocks.block__services .th-service-card__cta .wp-block-button__link {
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 0;
}

/* Icon layout */
.thameside-content-blocks.block__services.block__services--icon .service__item__inner {
	position: relative;
	transform: none;
	background: color-mix(in srgb, var(--thameside-light-blue) 95%, #000 5%);
}

.thameside-content-blocks.block__services.block__services--icon .service__item__inner :where(h1, h2, h3, h4, h5, h6) {
	color: var(--thameside-primary);
}

.thameside-content-blocks.block__services.block__services--icon .service__item__inner p,
.thameside-content-blocks.block__services.block__services--icon .service__item__inner a {
	color: var(--thameside-text);
}

/* --- Grid (subset compatible with legacy Thameside markup) --- */

.thameside-content-blocks .container {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

@media (min-width: 1200px) {
	.thameside-content-blocks .container {
		max-width: 90%;
	}
}

.thameside-content-blocks .row {
	position: relative;
	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
	width: 100%;
}

.thameside-content-blocks .row--justified {
	justify-content: space-between;
}

.thameside-content-blocks .row--middle {
	align-items: center;
}

.thameside-content-blocks .column {
	margin: 0;
	min-width: 0;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: auto;
	width: 100%;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.thameside-content-blocks .column.column-t-5 {
		max-width: 41.666667%;
		flex: 0 0 41.666667%;
	}

	.thameside-content-blocks .column.column-t-6 {
		max-width: 50%;
		flex: 0 0 50%;
	}

	.thameside-content-blocks .column.column-t-7 {
		max-width: 58.333333%;
		flex: 0 0 58.333333%;
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks .container--float .row--justified .block__media-text__media {
		left: -1vw;
		margin-left: -50vw;
		max-width: 50vw;
		position: relative;
		width: 100vw;
		padding: 0;
	}

	.thameside-content-blocks .container--float .row--justified {
		justify-content: flex-end;
	}

	.thameside-content-blocks .container--float .block__media-text__content {
		margin: 0;
		padding: 4rem;
	}

	.thameside-content-blocks.block__media-text--flipped .container--float .row--justified {
		justify-content: flex-start;
	}

	.thameside-content-blocks.block__media-text--flipped .container--float .block__media-text__media {
		right: -1vw;
		left: unset;
		margin-left: unset;
		margin-right: -50vw;
	}

	.thameside-content-blocks.block__media-text--flipped .container--float .block__media-text__content {
		padding: 4rem 4rem 4rem 3rem;
	}
}

/* --- Block shell + backgrounds --- */

.thameside-content-blocks.block.block__bg--white + .thameside-content-blocks.block.block__bg--white,
.thameside-content-blocks.block.block__bg--grey + .thameside-content-blocks.block.block__bg--grey,
.thameside-content-blocks.block.block__bg--light-blue + .thameside-content-blocks.block.block__bg--light-blue,
.thameside-content-blocks.block.block__bg--dark-blue + .thameside-content-blocks.block.block__bg--dark-blue {
	padding-top: 0;
}

.thameside-content-blocks.block.block__bg--white {
	background-color: var(--thameside-lightest);
}

.thameside-content-blocks.block.block__bg--grey {
	background-color: var(--thameside-light-grey);
}

.thameside-content-blocks.block.block__bg--light-blue {
	background-color: var(--thameside-light-blue);
}

.thameside-content-blocks.block.block__bg--dark-blue {
	background-color: var(--thameside-primary);
}

.thameside-content-blocks.block.block__bg--dark-blue h1,
.thameside-content-blocks.block.block__bg--dark-blue h2,
.thameside-content-blocks.block.block__bg--dark-blue h3,
.thameside-content-blocks.block.block__bg--dark-blue h4,
.thameside-content-blocks.block.block__bg--dark-blue h5,
.thameside-content-blocks.block.block__bg--dark-blue h6,
.thameside-content-blocks.block.block__bg--dark-blue h1,
.thameside-content-blocks.block.block__bg--dark-blue h2,
.thameside-content-blocks.block.block__bg--dark-blue h3 {
	color: var(--thameside-lightest);
}

.thameside-content-blocks.block.block__bg--dark-blue p,
.thameside-content-blocks.block.block__bg--dark-blue li,
.thameside-content-blocks.block.block__bg--dark-blue a,
.thameside-content-blocks.block.block__bg--dark-blue p {
	color: var(--thameside-text-light);
}

.thameside-content-blocks.block.block__bg--dark-blue .button {
	background: var(--thameside-secondary);
	color: var(--thameside-lightest);
}

.thameside-content-blocks.block.block__bg--dark-blue .button::after {
	background: url("../images/arrow-white.svg") no-repeat center center;
	background-size: contain;
}

/* --- Hero --- */

.thameside-content-blocks.block__hero {
	min-height: 100vh;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: #000;
}

.thameside-content-blocks.block__hero .block__hero__content {
	position: relative;
	margin: 0 auto;
	z-index: 2;
}

.thameside-content-blocks.block__hero .block__hero__content h1 {
	will-change: transform;
	animation: thameside-fade-in-up 1s ease forwards;
	color: var(--thameside-lightest);
	font-size: clamp(2.4rem, 3.5vw, 4.2rem);
	font-family: var(--thameside-font-heading);
}

body.home .thameside-content-blocks.block__hero .block__hero__content h1 {
	font-size: clamp(3.2rem, 4.5vw, 6.8rem);
}

.thameside-content-blocks.block__hero .block__hero__content p {
	font-size: 2.4rem;
	color: var(--thameside-lightest);
	font-weight: 400;
	margin: 20px 0;
	will-change: opacity;
	animation: thameside-fade-in 1s ease forwards;
	animation-delay: 600ms;
}

.thameside-content-blocks.block__hero .block__hero__content a {
	color: var(--thameside-lightest);
}

.thameside-content-blocks.block__hero .block__hero__content .button {
	will-change: opacity;
	animation: thameside-fade-in 1s ease forwards;
	animation-delay: 1s;
}

body.home .thameside-content-blocks.block__hero .block__hero__content .button {
	color: var(--thameside-primary);
}

.thameside-content-blocks.block__hero .block__hero__video,
.thameside-content-blocks.block__hero .block__hero__image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.thameside-content-blocks.block__hero .block__hero__video video,
.thameside-content-blocks.block__hero .block__hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.thameside-content-blocks.block__hero--simple {
	height: 400px;
	min-height: unset;
	background: var(--thameside-primary);
}

.thameside-content-blocks.block__hero--video {
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.thameside-content-blocks.block__hero--video .overlay {
	background: rgba(4, 28, 73, 0.6);
}

.thameside-content-blocks.block__hero--image {
	min-height: 700px;
}

.thameside-content-blocks.block__hero--image .button {
	background: var(--thameside-secondary);
	color: var(--thameside-lightest);
}

.thameside-content-blocks.block__hero--image .button::after {
	background: url("../images/arrow-white.svg") no-repeat center center;
	background-size: contain;
}

.thameside-content-blocks.block__hero--image .block__hero__content p {
	font-size: 1.6rem;
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__hero--image .block__hero__content p {
		font-size: 1.8rem;
	}
}

/*
 * Block theme + Thameside compat both set generic p/h1 colours. Default hero copy should stay light,
 * but palette / custom text colours on blocks must win — avoid !important on .has-text-color targets.
 */
.wp-site-blocks .thameside-content-blocks.block__hero .block__hero__content {
	color: var(--thameside-lightest);
}
.wp-site-blocks .thameside-content-blocks.block__hero .block__hero__content h1:not(.has-text-color),
.wp-site-blocks .thameside-content-blocks.block__hero .block__hero__content p:not(.has-text-color) {
	color: var(--thameside-lightest);
}
.wp-site-blocks .thameside-content-blocks.block__hero .block__hero__content a:not(.button) {
	color: var(--thameside-lightest);
}

/* --- Media + text --- */

.thameside-content-blocks.block.block__media-text {
	padding: var(--thameside-block-pad-sm);
}

@media (min-width: 768px) {
	.thameside-content-blocks.block.block__media-text {
		padding: var(--thameside-block-pad-md);
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block.block__media-text {
		padding: var(--thameside-block-pad);
	}
}

.thameside-content-blocks.block__media-text .block__media-text__media {
	position: relative;
	width: 100%;
	order: 1;
	margin-bottom: 3rem;
	aspect-ratio: 4 / 3;
}

.thameside-content-blocks.block__media-text .block__media-text__media picture,
.thameside-content-blocks.block__media-text .block__media-text__media img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Contain variant — for logos or square/portrait graphics that should not be cropped.
 * The aspect-ratio box is removed so the image keeps its natural proportions and is
 * vertically centred inside the column, leaving consistent breathing room above and below.
 */
.thameside-content-blocks.block__media-text--contain .block__media-text__media {
	aspect-ratio: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.thameside-content-blocks.block__media-text--contain .block__media-text__media picture,
.thameside-content-blocks.block__media-text--contain .block__media-text__media img {
	height: auto;
	max-width: 100%;
	max-height: 480px;
	object-fit: contain;
}

.thameside-content-blocks.block__media-text .block__media-text__content {
	width: 100%;
	order: 2;
	font-family: var(--thameside-font-body);
}

/* --- Base block spacing (classic Thameside parity) --- */

/*
 * Most legacy blocks were wrapped in `.block` with 40px/100px vertical padding.
 * Only apply this to blocks that rely on that wrapper (exclude hero which is height-driven).
 */
.thameside-content-blocks.block:not(.block__hero) {
	padding: var(--thameside-block-pad-sm);
}

/* Breadcrumbs should be tight to hero/content (override classic block padding). */
.thameside-content-blocks.block.block__breadcrumbs {
	/* Match Services hub breadcrumb band across all pages */
	background-color: var(--thameside-light-blue) !important;
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}

.thameside-content-blocks.block.block__breadcrumbs :where(p) {
	margin: 0;
}

/* Breadcrumbs typography/links should look identical everywhere. */
.thameside-content-blocks.block.block__breadcrumbs .breadcrumbs-list p {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	line-height: 1.2;
}

.thameside-content-blocks.block.block__breadcrumbs .breadcrumbs-list a {
	color: inherit;
	text-decoration: none;
}

.thameside-content-blocks.block.block__breadcrumbs .breadcrumbs-list a:hover,
.thameside-content-blocks.block.block__breadcrumbs .breadcrumbs-list a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.thameside-content-blocks.block.block__breadcrumbs .breadcrumbs-list .separator {
	opacity: 0.65;
}

/* --- Testimonials (legacy Thameside centered slider) --- */

.thameside-content-blocks.block.block__testimonials .centered-slider-row {
	width: 100%;
	margin-top: 1.5em;
	margin-bottom: 2.5em;
	padding-top: 1em;
	padding-bottom: 1em;
	display: flex;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block.block__testimonials .centered-slider-row {
		margin-top: 2em;
		margin-bottom: 3em;
	}
}

.thameside-content-blocks.block.block__testimonials .centered-slider-row::-webkit-scrollbar {
	display: none;
}

.thameside-content-blocks.block.block__testimonials .centered-slider-list {
	flex-flow: row;
	justify-content: flex-start;
	align-items: flex-start;
	width: max-content;
	display: flex;
}

.thameside-content-blocks.block.block__testimonials .centered-slider-slide {
	flex: none;
	padding: 0.75em;
	margin: 0 2rem;
	transition: opacity 0.25s cubic-bezier(0.77, 0, 0.175, 1);
	position: relative;
	background: var(--thameside-light-blue, #e6f5ff);
	scroll-snap-align: center;
}

.thameside-content-blocks.block.block__testimonials .centered-slider-slide__inner {
	position: relative;
	display: flex;
	width: 21em;
	padding: 1.25em;
	flex-direction: column;
	justify-content: flex-start;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 1em;
}

.thameside-content-blocks.block.block__testimonials .slide__stars {
	display: block;
	height: auto;
	max-width: 165px;
}

.thameside-content-blocks.block.block__testimonials .slide__description {
	margin: 0;
	max-width: 80%;
	font-family: var(--thameside-font-body);
	color: var(--thameside-primary, #0b1f3a);
}

@media (min-width: 1024px) {
	.thameside-content-blocks.block.block__testimonials .slide__description {
		max-width: 100%;
		font-size: 1.6rem;
	}
}

.thameside-content-blocks.block.block__testimonials
	.centered-slider-row:has(.centered-slider-slide.active)
	.centered-slider-slide:not(.active) {
	opacity: 0.45;
}

.thameside-content-blocks.block.block__testimonials .centered-slider-content {
	justify-content: center;
	align-items: flex-start;
	margin-left: auto;
	margin-right: auto;
	display: flex;
}

.thameside-content-blocks.block.block__testimonials .centered-slider-buttons {
	gap: 1em;
	justify-content: center;
	align-items: center;
	display: flex;
}

.thameside-content-blocks.block.block__testimonials .centered-slider-button {
	background-color: rgba(239, 238, 236, 0.1);
	border: 1px solid rgba(239, 238, 236, 0.1);
	border-radius: 0.25em;
	justify-content: center;
	align-items: center;
	width: 3em;
	height: 3em;
	padding: 0;
	transition: border-color 0.2s, background-color 0.2s;
	display: flex;
	color: var(--thameside-primary, #0b1f3a);
}

.thameside-content-blocks.block.block__testimonials .centered-slider-button:hover {
	background-color: rgba(239, 238, 236, 0.2);
	border-color: rgba(239, 238, 236, 0.25);
}

.thameside-content-blocks.block.block__testimonials .centered-slider-button.is--prev {
	transform: rotate(-180deg);
}

.thameside-content-blocks.block.block__testimonials .slider-button-arrow {
	justify-content: center;
	align-items: center;
	width: 1.25em;
}

.thameside-content-blocks.block.block__testimonials .slide__author-name {
	color: var(--thameside-primary, #0b1f3a);
	font-size: 1.6rem;
	font-family: var(--thameside-font-heading);
}

.thameside-content-blocks.block.block__testimonials .slide__author-company {
	display: block;
	color: rgba(11, 31, 58, 0.3);
}

@media screen and (max-width: 479px) {
	.thameside-content-blocks.block.block__testimonials .centered-slider-slide__inner {
		width: 85vw;
	}
}

/* --- Process slider (legacy Thameside structure: `.block__process` + `.glide--process`) --- */

.thameside-content-blocks.block.block__process {
	position: relative;
	overflow: hidden;
	padding: 0 !important;
}

/* --- Why Choose cards (`thameside/why-choose`) --- */

.thameside-content-blocks.block.block__why-choose {
	padding: var(--thameside-block-pad-sm);
}

@media (min-width: 768px) {
	.thameside-content-blocks.block.block__why-choose {
		padding: var(--thameside-block-pad-md);
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block.block__why-choose {
		padding: var(--thameside-block-pad);
	}
}

.thameside-content-blocks.block.block__why-choose .th-why-choose__intro {
	max-width: 960px;
	margin: 0 auto 1.75rem;
	text-align: left;
}

.thameside-content-blocks.block.block__why-choose .th-why-choose__intro .wp-block-thameside-why-choose-card {
	margin-top: 1rem;
}

.thameside-content-blocks.block.block__why-choose .th-why-choose__intro em {
	display: block;
	margin-top: 0.75rem;
	opacity: 0.9;
}

.thameside-content-blocks.block.block__why-choose .th-why-choose__cards {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 0 2rem;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	scrollbar-width: none;
}

.thameside-content-blocks.block.block__why-choose .th-why-choose__cards::-webkit-scrollbar {
	display: none;
}

.thameside-content-blocks.block.block__why-choose .th-why-choose-card {
	flex: 0 0 86%;
	max-width: 520px;
	scroll-snap-align: start;
}

@media (min-width: 768px) {
	/* Parent renders InnerBlocks inside `.th-why-choose__intro` — make it a clean 2x2 card grid. */
	.thameside-content-blocks.block.block__why-choose .th-why-choose__intro {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
		align-items: start;
	}
	.thameside-content-blocks.block.block__why-choose .th-why-choose__intro > :where(h2, p) {
		grid-column: 1 / -1;
		margin: 0;
	}
	.thameside-content-blocks.block.block__why-choose .th-why-choose__intro > p {
		margin-top: 0.75rem;
		margin-bottom: 0.5rem;
	}
	.thameside-content-blocks.block.block__why-choose .th-why-choose__intro .wp-block-thameside-why-choose-card {
		margin-top: 0;
	}

	.thameside-content-blocks.block.block__why-choose .th-why-choose__cards {
		/* 2x2 grid on tablet+ */
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
		overflow: visible;
		scroll-snap-type: none;
		padding: 0;
		margin-left: 0;
		margin-right: 0;
	}
	.thameside-content-blocks.block.block__why-choose .th-why-choose-card {
		flex: initial;
		max-width: none;
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block.block__why-choose .th-why-choose__cards {
		/* Keep 2x2 grid, just give it a touch more room */
		gap: 1.5rem;
	}
}

.thameside-content-blocks.block.block__why-choose .th-why-choose-card__inner {
	height: 100%;
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(11, 31, 58, 0.09);
	border-radius: 14px;
	padding: 1.5rem;
	box-sizing: border-box;
	box-shadow: 0 10px 30px rgba(11, 31, 58, 0.08);
	transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.thameside-content-blocks.block.block__why-choose .th-why-choose-card__inner:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 38px rgba(11, 31, 58, 0.12);
}

.thameside-content-blocks.block.block__why-choose .th-why-choose-card__icon {
	width: 72px;
	height: 72px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(11, 31, 58, 0.09);
	margin-bottom: 1.25rem;
}

.thameside-content-blocks.block.block__why-choose .th-why-choose-card__icon img {
	width: 80%;
	height: 80%;
	object-fit: contain;
}

.thameside-content-blocks.block.block__why-choose .th-why-choose-card__content .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0.75rem;
	color: var(--thameside-primary, #0b1f3a);
	font-size: 2rem;
	line-height: 1.15;
}

.thameside-content-blocks.block.block__why-choose .th-why-choose-card__content p {
	margin: 0;
	color: rgba(11, 31, 58, 0.85);
}

.thameside-content-blocks.block.block__process .glide {
	width: 100%;
}

.thameside-content-blocks.block.block__process .glide__track {
	overflow: visible;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	width: 100%;
	display: block;
}

.thameside-content-blocks.block.block__process .glide__track::-webkit-scrollbar {
	display: none;
}

.thameside-content-blocks.block.block__process .glide__slides {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
}

.thameside-content-blocks.block.block__process .glide__slide {
	position: relative;
	display: flex;
	margin: 0;
	padding: 0;
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.thameside-content-blocks.block.block__process .process-slide .slide__image {
	width: 50%;
	flex-shrink: 0;
	aspect-ratio: 4 / 3;
}

.thameside-content-blocks.block.block__process .process-slide .slide__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.thameside-content-blocks.block.block__process .process-slide .slide__content {
	width: 50%;
	flex-shrink: 0;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.thameside-content-blocks.block.block__process .process-slide .slide__content__inner {
	max-width: 600px;
}

.thameside-content-blocks.block.block__process .process-slide .slide__content__inner :where(h1, h2, h3, h4, h5, h6, p, li, a) {
	color: rgba(255, 255, 255, 0.92);
}

.thameside-content-blocks.block.block__process .process-slide .wp-block-heading {
	margin: 0;
	font-family: var(--thameside-font-heading);
	font-size: clamp(2rem, 1.6vw, 2.4rem);
	line-height: 1.2;
}

.thameside-content-blocks.block.block__process .process-slide p {
	margin: 1.25rem 0 0;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.55;
}

.thameside-content-blocks.block.block__process .glide__bullets {
	display: flex;
	justify-content: center;
	position: absolute;
	width: 50%;
	right: 0;
	bottom: 0;
	gap: 0.5rem;
	padding: 0;
}

.thameside-content-blocks.block.block__process .glide__bullet {
	position: relative;
	width: 33.333%;
	height: 4px;
	background: #ddd;
	border: none;
	padding: 0;
	cursor: pointer;
	overflow: hidden;
}

.thameside-content-blocks.block.block__process .glide__bullet .progress-bar {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: var(--thameside-secondary);
	transition: none;
}

.thameside-content-blocks.block.block__process .glide__bullet.is-complete .progress-bar {
	width: 100%;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block:not(.block__hero) {
		padding: var(--thameside-block-pad-md);
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block:not(.block__hero) {
		padding: var(--thameside-block-pad);
	}
}

/* Global-ish spacing parity with classic Thameside typography. */
.thameside-content-blocks :where(h1, h2, h3, h4, h5, h6) {
	margin-top: 0;
	margin-bottom: 2rem;
	font-weight: 400;
}
.thameside-content-blocks :where(p) {
	margin-top: 0;
	margin-bottom: 2rem;
}
.thameside-content-blocks :where(p:last-child) {
	margin-bottom: 0;
}

/* --- Map (`thameside/map`) --- */

.thameside-content-blocks.block__map .block__map__map {
	width: 100%;
	margin: 20px 0 0;
}

.thameside-content-blocks.block__map .block__map__map iframe {
	width: 100%;
	height: 400px;
	display: block;
	border: 0;
	border-radius: var(--thameside-radius);
}

.thameside-content-blocks.block__map .block__map__address {
	margin-top: 1.5rem;
}

.thameside-content-blocks.block__map .block__map__contact {
	margin-top: 1.5rem;
}

.thameside-content-blocks.block__map .block__map__contact p {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.thameside-content-blocks.block__map .block__map__contact p:last-child {
	margin-bottom: 0;
}

/* --- Contact + Gravity Forms (`thameside/contact`) --- */

.thameside-content-blocks.block__contact {
	position: relative;
	overflow: hidden;
}

.thameside-content-blocks.block__contact .block__contact__content {
	order: 1;
}

.thameside-content-blocks.block__contact .block__contact__form {
	order: 2;
	padding: 3rem;
	background: #280a31;
	--text-color: #ffffff;
	border-radius: var(--thameside-radius);
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__contact .block__contact__form {
		padding: 5rem;
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__contact .block__contact__form {
		padding: 8rem;
	}
}

.thameside-content-blocks.block__contact .block__contact__form :where(h1, h2, h3, h4, h5, h6, a, li, label, ::placeholder, .gf_progressbar_title) {
	color: var(--thameside-lightest);
}

.thameside-content-blocks.block__contact .block__contact__form :where(p) {
	color: var(--thameside-text-light);
}

.thameside-content-blocks.block__contact .block__contact__form .gform_confirmation_wrapper {
	color: var(--thameside-lightest);
	background: transparent;
	padding: 2rem;
	border-radius: 0.5rem;
	line-height: 1.5;
	border-left: 4px solid var(--thameside-secondary);
	margin-top: 2rem;
	display: block;
}

.thameside-content-blocks.block__contact .block__contact__form .gform_confirmation_message,
.thameside-content-blocks.block__contact .block__contact__form .gform_confirmation_message *,
.thameside-content-blocks.block__contact .block__contact__form .gform_confirmation_wrapper * {
	color: var(--thameside-lightest);
	background: transparent;
}

.thameside-content-blocks.block__contact.block__contact--flipped .block__contact__content {
	order: 1;
}

.thameside-content-blocks.block__contact.block__contact--flipped .block__contact__form {
	order: 2;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__contact.block__contact--flipped .block__contact__content {
		order: 2;
	}

	.thameside-content-blocks.block__contact.block__contact--flipped .block__contact__form {
		order: 1;
	}
}

.thameside-content-blocks.block__contact .block__contact__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.thameside-content-blocks.block__contact .block__contact__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.thameside-content-blocks.block__contact--image {
	padding-top: 6rem;
	padding-bottom: 0;
}

.thameside-content-blocks.block__contact--image :where(h1, h2, h3, h4, h5, h6, a, li, label, ::placeholder, .gf_progressbar_title) {
	color: var(--thameside-lightest);
}

.thameside-content-blocks.block__contact--image :where(p) {
	color: var(--thameside-text-light);
}

.thameside-content-blocks.block__contact--image .block__contact__form :where(h1, h2, h3, h4, h5, h6, a, li, label, ::placeholder, .gf_progressbar_title) {
	color: var(--thameside-lightest);
}

.thameside-content-blocks.block__contact :where(
	[type="color"],
	[type="date"],
	[type="datetime-local"],
	[type="datetime"],
	[type="email"],
	[type="month"],
	[type="number"],
	[type="password"],
	[type="search"],
	[type="tel"],
	[type="text"],
	[type="time"],
	[type="url"],
	[type="week"],
	select,
	textarea
) {
	width: 100%;
	box-sizing: border-box;
	border-radius: 0;
}

.thameside-content-blocks.block__contact .block__contact__form :where(
	[type="color"],
	[type="date"],
	[type="datetime-local"],
	[type="datetime"],
	[type="email"],
	[type="month"],
	[type="number"],
	[type="password"],
	[type="search"],
	[type="tel"],
	[type="text"],
	[type="time"],
	[type="url"],
	[type="week"],
	select,
	textarea
) {
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	color: var(--thameside-lightest);
}

/* Gravity Forms theme sets placeholders via more specific selectors; force white in this dark panel. */
.thameside-content-blocks.block__contact .block__contact__form .gform_wrapper :is(input, textarea)::placeholder {
	color: #ffffff !important;
	opacity: 1 !important;
}
.thameside-content-blocks.block__contact .block__contact__form .gform_wrapper :is(input, textarea)::-webkit-input-placeholder {
	color: #ffffff !important;
	opacity: 1 !important;
}
.thameside-content-blocks.block__contact .block__contact__form .gform_wrapper :is(input, textarea):-ms-input-placeholder {
	color: #ffffff !important;
	opacity: 1 !important;
}
.thameside-content-blocks.block__contact .block__contact__form .gform_wrapper :is(input, textarea)::-ms-input-placeholder {
	color: #ffffff !important;
	opacity: 1 !important;
}

.thameside-content-blocks.block__contact .block__contact__form :where(.gfield_label, legend) {
	color: var(--thameside-lightest);
}

.thameside-content-blocks.block__contact .block__contact__form :where(.gform_title, .gform_description, .gfield_description) {
	color: rgba(255, 255, 255, 0.85);
}

.thameside-content-blocks.block__contact .block__contact__form :where(.gform_footer input[type="submit"], .gform_footer button, .gform_page_footer input[type="submit"], .gform_page_footer input[type="button"]) {
	background: var(--thameside-secondary);
	color: var(--thameside-lightest);
	border: 0;
	border-radius: 0;
	padding: 1.25rem 2rem;
	font-size: 2rem;
	font-family: var(--thameside-font-heading);
	line-height: 1.7;
	cursor: pointer;
}

.thameside-content-blocks.block__contact .block__contact__form :where(.gform_footer input[type="submit"], .gform_footer button, .gform_page_footer input[type="submit"], .gform_page_footer input[type="button"])::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url("../images/arrow-white.svg") no-repeat center center;
	background-size: contain;
	margin-left: 10px;
	transition: transform 300ms var(--thameside-cubic);
	vertical-align: middle;
	transform: translateY(-2px);
	opacity: 0.85;
}

.thameside-content-blocks.block__contact .block__contact__form :where(.gform_footer input[type="submit"], .gform_footer button, .gform_page_footer input[type="submit"], .gform_page_footer input[type="button"]):hover::after {
	transform: translateY(-2px) rotate(-45deg);
	opacity: 1;
}

.thameside-content-blocks.block__contact .block__contact__form .gform_wrapper {
	margin: 0;
}

.thameside-content-blocks.block__contact .block__contact__form .gform_heading {
	margin-bottom: 2rem;
}

.thameside-content-blocks.block__contact .block__contact__form .gform_title {
	margin: 0 0 1rem;
	font-family: var(--thameside-font-heading);
	font-weight: 400;
}

/* Gravity Forms layout parity (live): half-width fields sit side-by-side on tablet+. */
.thameside-content-blocks.block__contact .block__contact__form .gform_fields {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

.thameside-content-blocks.block__contact .block__contact__form .gfield {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__contact .block__contact__form .gfield.gfield--width-half {
		flex: 0 0 calc(50% - 0.75rem);
	}
}

.thameside-content-blocks.block__contact .block__contact__form .gfield_label {
	display: block;
	margin-bottom: 10px;
}

.thameside-content-blocks.block__contact .block__contact__form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], select) {
	min-height: 54px;
	padding: 1rem;
	font-weight: 300;
}

.thameside-content-blocks.block__contact .block__contact__form textarea {
	padding: 1rem;
	font-weight: 300;
	min-height: 140px;
}

.thameside-content-blocks.block__contact .block__contact__form :where(input, select, textarea):focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.6);
}

.thameside-content-blocks.block__contact .block__contact__form .gform_footer {
	margin-top: 2rem;
	padding: 0;
}

/* --- Logos / Accreditations (`thameside/logos`) --- */

.thameside-content-blocks.block__logos {
	padding: var(--thameside-block-pad-sm);
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__logos {
		padding: var(--thameside-block-pad-md);
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__logos {
		padding: var(--thameside-block-pad);
	}
}

.thameside-content-blocks.block__logos .block__intro {
	text-align: center;
	max-width: 960px;
	margin: 0 auto 1.5rem;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__logos .block__intro {
		margin-bottom: 2rem;
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__logos .block__intro {
		margin-bottom: 2.5rem;
	}
}

.thameside-content-blocks.block__logos .section-resource {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	margin: 1.5rem 0 0;
}

/*
 * WP core adds vertical rhythm for flow layouts via:
 * `:root :where(.is-layout-flow) > * { margin-block-start: var(--wp--preset--spacing--30); }`
 * On logos (especially no-intro) this creates too much space above the marquee strip.
 */
.wp-block-thameside-logos.is-layout-flow > * {
	margin-block-start: 0;
}

/* Global: remove Gutenberg flow stack top margins site-wide. */
:root :where(.is-layout-flow) > * {
	margin-block-start: 0 !important;
}

/* When there's no intro content, don't add extra separation above the strip. */
.thameside-content-blocks.block__logos--no-intro .section-resource {
	margin-top: 0;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__logos .section-resource {
		margin-top: 2rem;
	}
	.thameside-content-blocks.block__logos--no-intro .section-resource {
		margin-top: 0;
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__logos .section-resource {
		margin-top: 2.5rem;
	}
	.thameside-content-blocks.block__logos--no-intro .section-resource {
		margin-top: 0;
	}
}

/*
 * No-intro logos strip: instead of adding a top margin (which visually detaches it from the
 * previous content band), keep it flush on top and give the strip breathing room at the bottom.
 * (Applied to `.section-resource` so it’s obvious in DevTools.)
 */
.thameside-content-blocks.block__logos--no-intro .section-resource {
	margin-top: 0;
	padding-bottom: 0;
}

/* Tighten the transition from Testimonials -> Logos strip (services pages). */
.thameside-content-blocks.block.block__testimonials + .thameside-content-blocks.block__logos--no-intro {
	padding-top: 0 !important;
}

/*
 * Full-bleed logo strip (edge-to-edge).
 * Avoid `left: 50%; margin-left: -50vw` here: `.section-resource` uses flex column +
 * align-items:center, which shifts the static position — combined with `%`/`vw` hacks the
 * visible clip rect can drift so logos vanish toward one side of the viewport.
 */
.thameside-content-blocks.block__logos .marquee-advanced {
	width: 100vw;
	max-width: none;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
	align-self: stretch;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.thameside-content-blocks.block__logos .marquee-advanced__scroll {
	will-change: transform;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	position: relative;
	width: max-content;
	min-width: 100%;
}

.thameside-content-blocks.block__logos .marquee-advanced__collection {
	will-change: transform;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	align-items: center;
	position: relative;
}

.thameside-content-blocks.block__logos .marquee-advanced__collection--dup {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	align-items: center;
}

.thameside-content-blocks.block__logos .marquee-advanced__item-width {
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35vw;
	height: 35vw;
	margin: 2vw;
	flex: 0 0 auto;
	background: rgba(255, 255, 255, 0.02);
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__logos .marquee-advanced__item-width {
		width: 16vw;
		height: 16vw;
		margin: 0.5vw;
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__logos .marquee-advanced__item-width {
		width: 18vw;
		height: 7vw;
		margin: 0.5vw;
	}
}

.thameside-content-blocks.block__logos .marquee-advanced__item-width img {
	width: 100%;
	max-width: 120px;
	height: auto;
	object-fit: contain;
}

/* --- FAQ / Accordion (`thameside/accordion`) — native `<details>`; matches legacy `_accordion.scss` --- */

.thameside-content-blocks.block.block__accordion {
	padding: var(--thameside-block-pad-sm);
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block.block__accordion {
		padding: var(--thameside-block-pad-md);
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block.block__accordion {
		padding: var(--thameside-block-pad);
	}
}

.thameside-content-blocks.block__accordion .container--narrow {
	width: 100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__accordion .container--narrow {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

@media (min-width: 1200px) {
	.thameside-content-blocks.block__accordion .container--narrow {
		padding-left: 4rem;
		padding-right: 4rem;
	}
}

.thameside-content-blocks.block__accordion .block__accordion__heading {
	text-align: center;
	margin-bottom: 3rem;
}

.thameside-content-blocks.block__accordion .block__accordion__heading h2 {
	margin-top: 0;
	margin-bottom: 0;
}

.thameside-content-blocks.block__accordion .block__accordion__content {
	width: 100%;
}

.thameside-content-blocks.block__accordion .th-accordion-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.thameside-content-blocks.block__accordion .accordion-question.th-accordion-details {
	padding: 2rem;
	border: 1px solid #ebebed;
	margin-bottom: 2rem;
	background: #fff;
}

.thameside-content-blocks.block__accordion .th-accordion-summary {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	list-style: none;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	font-size: clamp(1.8rem, 2.5vw, 2.2rem);
	box-sizing: border-box;
}

.thameside-content-blocks.block__accordion .th-accordion-summary::-webkit-details-marker {
	display: none;
}

.thameside-content-blocks.block__accordion .th-accordion-title {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	line-height: 1.25;
	flex: 1;
}

.thameside-content-blocks.block__accordion .th-accordion-icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}

.thameside-content-blocks.block__accordion .th-accordion-details[open] .th-accordion-icon--collapsed,
.thameside-content-blocks.block__accordion .th-accordion-details:not([open]) .th-accordion-icon--expanded {
	display: none;
}

.thameside-content-blocks.block__accordion .th-accordion-panel {
	padding-top: 1.25rem;
}

.thameside-content-blocks.block__accordion .th-accordion-panel > :first-child {
	margin-top: 0;
}

.thameside-content-blocks.block__accordion .th-accordion-panel > :last-child {
	margin-bottom: 0;
}

.thameside-content-blocks.block__accordion .accordion-content,
.thameside-content-blocks.block__accordion .th-accordion-panel {
	font-family: var(--thameside-font-body);
	font-size: 1.6rem;
	line-height: 1.6;
	font-weight: 400;
}

@media (max-width: 1023px) {
	.thameside-content-blocks.block__accordion .accordion-content,
	.thameside-content-blocks.block__accordion .th-accordion-panel {
		font-size: 16px;
	}
}

/* Body copy: Inter Tight like classic _typography.scss (paragraphs in media/text columns). */
.thameside-content-blocks.block__media-text .block__media-text__content p,
.thameside-content-blocks.block__media-text .block__media-text__content li {
	font-family: var(--thameside-font-body);
	font-size: 1.6rem;
	line-height: 1.6;
	font-weight: 400;
}

@media (max-width: 1023px) {
	.thameside-content-blocks.block__media-text .block__media-text__content p,
	.thameside-content-blocks.block__media-text .block__media-text__content li {
		font-size: 16px;
	}
}

.wp-site-blocks .thameside-content-blocks.block.block__bg--dark-blue .block__media-text__content,
.wp-site-blocks .thameside-content-blocks.block__media-text--bg .block__media-text__content {
	color: var(--thameside-text-light);
}
.wp-site-blocks .thameside-content-blocks.block.block__bg--dark-blue .block__media-text__content :where(p, li):not(.has-text-color),
.wp-site-blocks .thameside-content-blocks.block__media-text--bg .block__media-text__content :where(p, li):not(.has-text-color) {
	color: var(--thameside-text-light);
}

.thameside-content-blocks.block__media-text .block__media-text__content h2,
.thameside-content-blocks.block__media-text .block__media-text__content h3 {
	font-family: var(--thameside-font-heading);
	color: var(--thameside-primary);
}

/*
 * Flipped row: text left / image right from tablet up. On narrow viewports the column stack
 * should lead with the image (same as non-flipped blocks) for a consistent mobile pattern.
 */
.thameside-content-blocks.block__media-text--flipped .block__media-text__media {
	order: 1;
}

.thameside-content-blocks.block__media-text--flipped .block__media-text__content {
	order: 2;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__media-text--flipped .block__media-text__media {
		order: 2;
	}

	.thameside-content-blocks.block__media-text--flipped .block__media-text__content {
		order: 1;
	}
}

/*
 * Background image covers the full section (not half of the grid). Markup: image layer is a
 * direct child of the block section; copy sits in a full-width column above it (z-index).
 */
.thameside-content-blocks.block__media-text--bg {
	position: relative;
	overflow: hidden;
	background: transparent !important;
	isolation: isolate;
	min-height: 280px;
	padding-top: var(--thameside-section-y-md);
	padding-bottom: var(--thameside-section-y-md);
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__media-text--bg {
		min-height: 360px;
		padding-top: var(--thameside-section-y-lg);
		padding-bottom: var(--thameside-section-y-lg);
	}
}

.thameside-content-blocks.block__media-text--bg .block__media-text__media--bgcover {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.thameside-content-blocks.block__media-text--bg .block__media-text__media--bgcover picture,
.thameside-content-blocks.block__media-text--bg .block__media-text__media--bgcover img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thameside-content-blocks.block__media-text--bg .block__media-text__media--bgcover .overlay {
	z-index: 1;
}

.thameside-content-blocks.block__media-text--bg > .container {
	position: relative;
	z-index: 2;
}

/* Vertically center the copy within the min-height band (matches classic CTA feel). */
.thameside-content-blocks.block__media-text--bg > .container > .row {
	min-height: 280px;
}
@media (min-width: 768px) {
	.thameside-content-blocks.block__media-text--bg > .container > .row {
		min-height: 360px;
	}
}
.thameside-content-blocks.block__media-text--bg .block__media-text__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.thameside-content-blocks.block__media-text--bg .block__media-text__content h1,
.thameside-content-blocks.block__media-text--bg .block__media-text__content h2,
.thameside-content-blocks.block__media-text--bg .block__media-text__content h3,
.thameside-content-blocks.block__media-text--bg .block__media-text__content h4 {
	color: var(--thameside-lightest);
}

.thameside-content-blocks.block__media-text--bg .block__media-text__content p,
.thameside-content-blocks.block__media-text--bg .block__media-text__content li,
.thameside-content-blocks.block__media-text--bg .block__media-text__content div {
	color: var(--thameside-text-light);
}

/* List module (simplified) */

.thameside-content-blocks.block__media-text--list .block__media-text__media {
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__media-text--list .block__media-text__media {
		flex-direction: row;
	}
}

.thameside-content-blocks.block__media-text .block-list {
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

.thameside-content-blocks.block__media-text .block-list li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 10px;
}

.thameside-content-blocks.block__media-text .block-list li:last-child {
	margin-bottom: 0;
}

.thameside-content-blocks.block__media-text .block-list div:last-child {
	margin-left: 20px;
}

.thameside-content-blocks.block__media-text .block-list div:last-child p {
	margin-top: 0;
	font-family: var(--thameside-font-heading);
	font-size: 2.2rem;
	line-height: 1.4;
}

/* oEmbed wrapper */

.thameside-content-blocks .embed {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.thameside-content-blocks .embed iframe,
.thameside-content-blocks .embed object,
.thameside-content-blocks .embed video,
.thameside-content-blocks .embed embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Overlay */

.thameside-content-blocks .overlay {
	display: block;
	position: absolute;
	background: rgba(4, 28, 73, 0.8);
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

/* Buttons */

.thameside-content-blocks .block-buttons .button {
	display: inline-block;
	margin-top: 20px;
	margin-bottom: 2rem;
	margin-right: 20px;
	background: var(--thameside-lightest);
	line-height: 1.7;
	padding: 1.25rem 2rem;
	color: var(--thameside-primary);
	font-size: 2rem;
	font-family: var(--thameside-font-heading);
	border: none;
	transition: 600ms var(--thameside-cubic);
	text-decoration: none;
	cursor: pointer;
}

.thameside-content-blocks .block-buttons .button:last-child {
	margin-right: 0;
}

.thameside-content-blocks .block-buttons .button::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url("../images/arrow-red.svg") no-repeat center center;
	background-size: contain;
	margin-left: 10px;
	transition: transform 300ms var(--thameside-cubic);
	vertical-align: middle;
	transform: translateY(-2px);
	opacity: 0.8;
}

.thameside-content-blocks .block-buttons .button:hover::after {
	transform: translateY(-2px) rotate(-45deg);
	opacity: 1;
}

/* --- Careers --- */

.thameside-content-blocks.block__careers {
	position: relative;
}

.thameside-content-blocks.block__careers .block__careers__intro {
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

.thameside-content-blocks.block__careers .block__careers__intro :where(h1, h2, h3) {
	letter-spacing: -0.02em;
}

.thameside-content-blocks.block__careers .blog-posts__posts {
	/* Use a simple vertical stack to avoid any third-party grid/layout collisions. */
	display: flex !important;
	flex-direction: column;
	width: 100%;
	gap: 2.5rem;
}

/* Vacancies should list one per line (all breakpoints). */

.thameside-content-blocks.block__careers .blog-posts {
	width: 100%;
	max-width: 1100px;
	margin: 3rem auto;
}

.thameside-content-blocks.block__careers .blog-posts__post {
	background: var(--thameside-lightest);
	padding: 2rem 3rem;
	height: 100%;
	border: 1px solid rgba(4, 28, 73, 0.12);
	box-shadow: 0 12px 30px rgba(4, 28, 73, 0.06);
	border-radius: 18px;
	transition: transform 250ms var(--thameside-cubic), box-shadow 250ms var(--thameside-cubic), border-color 250ms var(--thameside-cubic);
	position: relative !important;
	display: block;
	width: 100%;
	margin: 0;
}

.thameside-content-blocks.block__careers .blog-posts__post:hover,
.thameside-content-blocks.block__careers .blog-posts__post:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 18px 44px rgba(4, 28, 73, 0.09);
	border-color: rgba(4, 28, 73, 0.18);
}

.thameside-content-blocks.block__careers .blog-posts__post__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
	height: 100%;
}

@media (min-width: 768px) {
	.thameside-content-blocks.block__careers .blog-posts__post__content {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
	}
}

.thameside-content-blocks.block__careers .blog-posts__post__content h1,
.thameside-content-blocks.block__careers .blog-posts__post__content h2,
.thameside-content-blocks.block__careers .blog-posts__post__content h3,
.thameside-content-blocks.block__careers .blog-posts__post__content h4,
.thameside-content-blocks.block__careers .blog-posts__post__content h5,
.thameside-content-blocks.block__careers .blog-posts__post__content h6 {
	margin: 0;
}

.thameside-content-blocks.block__careers .blog-posts__post__content .title {
	flex: 1 1 auto;
	min-width: 0;
}

.thameside-content-blocks.block__careers .blog-posts__post__content .title a {
	display: inline;
	overflow-wrap: anywhere;
}

.thameside-content-blocks.block__careers .blog-posts__post__content a {
	text-decoration: none;
}

/* Legacy `.button` styling for the careers list CTA (matches classic theme). */
.thameside-content-blocks.block__careers .blog-posts__post .button {
	display: inline-block;
	margin: 0;
	background: var(--thameside-secondary);
	line-height: 1.7;
	padding: 1.25rem 2rem;
	color: var(--thameside-lightest);
	font-size: 2rem;
	font-family: var(--thameside-font-heading);
	border: none;
	transition: 600ms var(--thameside-cubic);
	cursor: pointer;
	white-space: normal;
	text-align: left;
}

@media (max-width: 767px) {
	.thameside-content-blocks.block__careers .blog-posts__post .button {
		width: 100%;
		display: inline-flex;
		justify-content: space-between;
		align-items: center;
	}
}

.thameside-content-blocks.block__careers .blog-posts__post .button::after {
	content: "";
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url("../images/arrow-white.svg") no-repeat center center;
	background-size: contain;
	margin-left: 10px;
	transition: transform 300ms var(--thameside-cubic);
	vertical-align: middle;
	transform: translateY(-2px);
	opacity: 0.85;
}

.thameside-content-blocks.block__careers .blog-posts__post .button:hover::after {
	transform: translateY(-2px) rotate(-45deg);
	opacity: 1;
}

/* Animations */

@keyframes thameside-fade-in-up {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes thameside-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Editor preview frame */

.thameside-block-preview {
	min-height: 120px;
}

.thameside-block-preview--hero {
	min-height: 240px;
}

.thameside-block-preview--media-text {
	min-height: 200px;
}

/* --- Hero media (`thameside/hero-media`) — Vimeo / MP4 / image + inner blocks --- */

/*
 * Legacy Thameside (`Thameside/assets/scss/blocks/_hero.scss`): `.block__hero` flex + min-height;
 * `.block__hero__video` + native `<video>` use `object-fit: cover`. Vimeo uses a clipped iframe.
 * WordPress: enable `useRootPaddingAwareAlignments` in theme.json for alignfull (Theme Handbook).
 * Heights: layer `vh` → `svh` → `dvh` (mobile safe); `--th-hero-min-vh` scales. Motion heroes also
 * get the same stack inline from PHP. Narrow Vimeo cover: `hero-vimeo-cover.js` (iframe px + clip).
 */
.th-hero-media {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
	min-height: calc(var(--th-hero-min-vh, 100) * 1vh);
	min-height: calc(var(--th-hero-min-vh, 100) * 1svh);
	min-height: calc(var(--th-hero-min-vh, 100) * 1dvh);
	/* Do not set `color` here — it inherits onto InnerBlocks and overrides the block
	   colour picker / `has-text-color` when global styles use :where() (low specificity). */
}

.th-hero-media--motion {
	min-height: calc(var(--th-hero-min-vh, 100) * 1vh);
	min-height: calc(var(--th-hero-min-vh, 100) * 1svh);
	min-height: calc(var(--th-hero-min-vh, 100) * 1dvh);
	height: calc(var(--th-hero-min-vh, 100) * 1vh);
	height: calc(var(--th-hero-min-vh, 100) * 1svh);
	height: calc(var(--th-hero-min-vh, 100) * 1dvh);
}

.th-hero-media__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: var(--thameside-primary);
}

/*
 * When `%` height fails to resolve against the hero (min-height / WebKit quirks), the bg layer can
 * collapse to the iframe’s intrinsic 16:9 band — full width, short height. Mirror the motion hero’s
 * viewport height on the absolute layers so the clip rect always matches the intended hero.
 */
.th-hero-media--motion .th-hero-media__bg {
	min-height: calc(var(--th-hero-min-vh, 100) * 1vh);
	min-height: calc(var(--th-hero-min-vh, 100) * 1svh);
	min-height: calc(var(--th-hero-min-vh, 100) * 1dvh);
	height: calc(var(--th-hero-min-vh, 100) * 1vh);
	height: calc(var(--th-hero-min-vh, 100) * 1svh);
	height: calc(var(--th-hero-min-vh, 100) * 1dvh);
}

/* Same geometry as legacy `.block__hero__video` */
.th-hero-media__iframe-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.th-hero-media--motion .th-hero-media__iframe-wrap {
	min-height: calc(var(--th-hero-min-vh, 100) * 1vh);
	min-height: calc(var(--th-hero-min-vh, 100) * 1svh);
	min-height: calc(var(--th-hero-min-vh, 100) * 1dvh);
	height: calc(var(--th-hero-min-vh, 100) * 1vh);
	height: calc(var(--th-hero-min-vh, 100) * 1svh);
	height: calc(var(--th-hero-min-vh, 100) * 1dvh);
}

/*
 * Thameside classic `dist/js/main.min.js` (compat) wraps Vimeo/YouTube iframes in `.embed`:
 * `padding-bottom: 56.25%; height: 0` — a responsive 16:9 box. That overrides our full-height clip
 * and produces a short video band on mobile. Undo inside the hero when compat runs or is cached.
 */
.th-hero-media__iframe-wrap .embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100% !important;
	padding-bottom: 0 !important;
	max-width: none;
	overflow: hidden;
	pointer-events: none;
}

/* Baseline iframe box; cover scaling comes from @supports rules below + hero-vimeo-cover.js. */
.th-hero-media__iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * All viewports: Vimeo background fills the hero like object-fit:cover (no-JS fallback).
 * JS `hero-vimeo-cover.js` sets pixel dimensions with ResizeObserver for parity across browsers.
 */
@supports (width: 1cqw) {
	.th-hero-media__iframe-wrap {
		container-type: size;
		container-name: th-hero-vimeo;
	}

	.th-hero-media__iframe-wrap .th-hero-media__iframe {
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		width: max(100cqw, calc(100cqh * 16 / 9));
		height: max(100cqh, calc(100cqw * 9 / 16));
		transform: translate(-50%, -50%);
		max-width: none;
	}
}

@supports not (width: 1cqw) {
	.th-hero-media__iframe-wrap .th-hero-media__iframe {
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		width: auto;
		height: auto;
		aspect-ratio: 16 / 9;
		min-width: 100%;
		min-height: 100%;
		transform: translate(-50%, -50%);
		max-width: none;
		border: 0;
	}
}

.th-hero-media__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.th-hero-media__image {
	position: absolute;
	inset: 0;
}

.th-hero-media__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.th-hero-media__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.th-hero-media__inner {
	position: relative;
	z-index: 2;
	display: flex;
	justify-content: center;
	flex: 0 1 auto;
	width: 100%;
	min-height: inherit;
	/* Legacy `.block__hero` centred copy with flex only — lighter vertical padding so mobile matches the old theme. */
	padding: clamp(4rem, 9vh, 8rem) 1.5rem clamp(2.5rem, 6vh, 5rem);
	box-sizing: border-box;
}

@media (max-width: 1023px) {
	.th-hero-media__inner {
		padding: clamp(5rem, 12vh, 7rem) 1.25rem clamp(2rem, 5vh, 4rem);
	}
}

.th-hero-media__inner-constrained {
	width: 100%;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
}

/* Hero copy width parity with classic Thameside grid (column-t-7). */
@media (min-width: 768px) {
	.th-hero-media .thameside-content-blocks .column.column-t-7 {
		max-width: 58.333333%;
		flex: 0 0 58.333333%;
	}
}

/*
 * Inner blocks — parity with legacy Thameside `.block__hero .block__hero__content` (old `_hero.scss`).
 * Defaults apply only when no explicit font size is set on the block (classes or inline).
 */
.wp-site-blocks .wp-block-thameside-hero-media .th-hero-media__inner-constrained .wp-block-heading:not([class*="font-size"]):not([style*="font-size"]),
.editor-styles-wrapper .wp-block-thameside-hero-media .th-hero-media__inner-constrained .wp-block-heading:not([class*="font-size"]):not([style*="font-size"]) {
	will-change: transform;
	animation: thameside-fade-in-up 1s ease forwards;
	font-family: var(--thameside-font-heading);
	font-weight: 400;
	font-size: clamp(2.4rem, 3.5vw, 4.2rem);
	line-height: 1.2;
	text-wrap: balance;
}

body.home .wp-site-blocks .wp-block-thameside-hero-media .th-hero-media__inner-constrained .wp-block-heading:not([class*="font-size"]):not([style*="font-size"]),
body.home .editor-styles-wrapper .wp-block-thameside-hero-media .th-hero-media__inner-constrained .wp-block-heading:not([class*="font-size"]):not([style*="font-size"]) {
	font-size: clamp(3.2rem, 4.5vw, 6.8rem);
}

.wp-site-blocks .wp-block-thameside-hero-media .th-hero-media__inner-constrained .wp-block-paragraph:not([class*="font-size"]):not([style*="font-size"]),
.editor-styles-wrapper .wp-block-thameside-hero-media .th-hero-media__inner-constrained .wp-block-paragraph:not([class*="font-size"]):not([style*="font-size"]) {
	font-size: 2.4rem;
	font-weight: 400;
	margin: 20px 0;
	will-change: opacity;
	animation: thameside-fade-in 1s ease forwards;
	animation-delay: 600ms;
	line-height: 1.4;
}

.wp-site-blocks .wp-block-thameside-hero-media.th-hero-media--image .th-hero-media__inner-constrained .wp-block-paragraph:not([class*="font-size"]):not([style*="font-size"]),
.editor-styles-wrapper .wp-block-thameside-hero-media.th-hero-media--image .th-hero-media__inner-constrained .wp-block-paragraph:not([class*="font-size"]):not([style*="font-size"]) {
	font-size: 1.6rem;
}

@media (min-width: 1200px) {
	.wp-site-blocks .wp-block-thameside-hero-media.th-hero-media--image .th-hero-media__inner-constrained .wp-block-paragraph:not([class*="font-size"]):not([style*="font-size"]),
	.editor-styles-wrapper .wp-block-thameside-hero-media.th-hero-media--image .th-hero-media__inner-constrained .wp-block-paragraph:not([class*="font-size"]):not([style*="font-size"]) {
		font-size: 1.8rem;
	}
}


/* Editor canvas */
.block-editor-block-list__layout .th-hero-media.th-hero-media-editor {
	border: 1px dashed rgba(148, 163, 184, 0.9);
	border-radius: 4px;
	padding: 0;
}

.block-editor-block-list__layout .th-hero-media.th-hero-media-editor--no-bg {
	background: linear-gradient(160deg, #0e2a5a 0%, #041c49 100%);
}

.th-hero-media-editor .th-hero-media__inner-constrained {
	max-width: 90%;
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
}

.th-hero-media-editor .th-hero-media__image.th-hero-media-editor__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.25);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
}

/* --- Card group + card (services carousel replacement) --- */

.th-card-group {
	position: relative;
	--th-card-peek: 80px;
	/* Effective slide width — desktop/tablet only; phones override to 100% (see below). */
	--th-card-slide-w: min(86vw, 520px);
	max-width: 100%;
	/*
	 * Do not use overflow-x: hidden — it clips the abs-positioned prev/next (top: -12rem) on desktop.
	 * Horizontal overflow is contained by .th-card-group__track (overflow-x: auto).
	 */
	overflow: visible;
	width: 100%;
	box-sizing: border-box;
}

.th-card-group__track {
	display: flex;
	gap: 30px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 2rem;
	scroll-padding-right: 2rem;
	padding: 0 2rem;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	box-sizing: border-box;
	min-width: 0;
	width: 100%;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE/Edge legacy */
}

.th-card-group__track::-webkit-scrollbar {
	display: none; /* WebKit */
}

/*
 * Phone: one card per view, width = track content (same horizontal inset as base padding).
 * Avoid vw + 50vw “centering” — it fights constrained layouts and misaligns with section headings.
 */
@media (max-width: 767px) {
	.th-card-group {
		--th-card-slide-w: 100%;
	}

	.th-card {
		flex: 0 0 100%;
		max-width: 100%;
		scroll-snap-align: start;
	}
}

@media (min-width: 1200px) {
	.th-card-group__track {
		gap: 60px;
		scroll-padding-left: 6rem;
		scroll-padding-right: 6rem;
		padding: 0 6rem;
	}
}

/*
 * Constrained groups (e.g. Our Services pattern) already align blocks to the content column.
 * Extra horizontal padding on the track doubled that inset so slides started right of the heading.
 */
.is-layout-constrained > .wp-block-thameside-card-group .th-card-group__track {
	padding-left: 0;
	padding-right: 0;
	scroll-padding-left: 0;
	scroll-padding-right: 0;
}

@media (min-width: 1024px) {
	.is-layout-constrained > .wp-block-thameside-card-group .th-card-group__controls {
		right: 0;
	}
}

@media (max-width: 1023px) {
	.is-layout-constrained > .wp-block-thameside-card-group .th-card-group__controls {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Save output puts controls before the track; desktop pulls them up with negative top. */
.th-card-group__controls {
	position: relative;
	right: auto;
	top: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	z-index: 5;
	margin-top: 1.25rem;
	padding: 0 2rem;
	box-sizing: border-box;
}

@media (min-width: 1024px) {
	.th-card-group__controls {
		position: absolute;
		right: 6rem;
		top: -12rem;
		margin-top: 0;
		padding: 0;
		justify-content: flex-end;
	}
}

/* Stack track above controls when controls are in-flow (mobile / tablet). */
@media (max-width: 1023px) {
	.th-card-group {
		display: flex;
		flex-direction: column;
	}

	.th-card-group__track {
		order: 1;
	}

	.th-card-group__controls {
		order: 2;
	}

	.th-card-group__btn svg {
		width: 56px;
		height: 56px;
	}
}

.th-card-group__btn {
	appearance: none;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}

.th-card-group__btn svg {
	display: block;
	width: 91px;
	height: 91px;
}

.th-card-group__btn:hover svg path {
	stroke: var(--thameside-secondary);
}

.th-card-group__btn:focus-visible {
	outline: 2px solid var(--thameside-secondary);
	outline-offset: 4px;
	border-radius: 999px;
}

.th-card {
	position: relative;
	flex: 0 0 min(86vw, 520px);
	min-height: 320px;
	overflow: hidden;
	background: var(--thameside-primary);
	min-width: 0;
}

/* Match classic services cards proportions closer (before JS equalizes heights). */
@media (min-width: 768px) {
	.th-card {
		min-height: 360px;
		flex-basis: min(55vw, 520px);
		scroll-snap-align: start;
	}

	.th-card-group {
		--th-card-slide-w: min(55vw, 520px);
	}
}

@media (min-width: 1200px) {
	.th-card {
		min-height: 390px;
		/*
		 * Legacy Thameside services carousel (Glide): perView 3.5, gap 60.
		 * A slightly narrower card helps replicate the “peek” at common viewport widths.
		 */
		flex-basis: 460px;
	}

	.th-card-group {
		--th-card-slide-w: 460px;
	}
}

.th-card__media,
.th-card__panel {
	position: absolute;
	inset: 0;
}

.th-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.editor-styles-wrapper .th-card,
.block-editor-block-list__layout .th-card {
	height: auto !important;
	min-height: 420px;
}

.editor-styles-wrapper .th-card__media,
.block-editor-block-list__layout .th-card__media {
	position: relative;
	inset: auto;
	height: 260px;
}

.editor-styles-wrapper .th-card__panel,
.block-editor-block-list__layout .th-card__panel {
	position: relative;
	inset: auto;
	transform: none !important;
	height: auto;
}

.th-card__panel {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 3rem;
	background: #041c49;
	transform: translateY(calc(100% - var(--th-card-peek)));
	transition: transform 300ms var(--thameside-cubic);
	z-index: 2;
	overflow: hidden;
}

.th-card:hover .th-card__panel,
.th-card:focus-within .th-card__panel {
	transform: translateY(0);
}

.th-card__panel :where(h1, h2, h3, h4, h5, h6, p, li, a) {
	color: var(--thameside-lightest);
}

.th-card__panel .wp-block-heading {
	margin: 0;
	font-size: 2.4rem;
}

.th-card__panel .wp-block-paragraph,
.th-card__panel .wp-block-buttons {
	transition: opacity 200ms var(--thameside-cubic), transform 200ms var(--thameside-cubic);
}

/* Paragraph spacing inside panel (CTA sits below). */
.th-card__panel p {
	margin-bottom: 0;
}

/* Match live: default shows only title bar; reveal body/CTA on hover/focus. */
.th-card:not(:hover):not(:focus-within) .th-card__panel .wp-block-paragraph,
.th-card:not(:hover):not(:focus-within) .th-card__panel .wp-block-buttons {
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}

.th-card:hover .th-card__panel .wp-block-paragraph,
.th-card:hover .th-card__panel .wp-block-buttons,
.th-card:focus-within .th-card__panel .wp-block-paragraph,
.th-card:focus-within .th-card__panel .wp-block-buttons {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.th-card__panel .wp-block-buttons {
	margin-top: auto;
}

.th-card__panel .wp-block-button__link,
.th-card__panel .button {
	margin-bottom: 0;
}

.th-card__icon {
	width: 80px;
	height: 80px;
	background: rgba(235, 235, 237, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
}

.th-card__icon img {
	width: 80%;
	height: 80%;
	object-fit: contain;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.th-card__panel {
		transition: none;
	}
}