/* =========================================================================
   Case Study Grid (TOA) — block styles
   Colours from Figma: section bg #fff, heading/ink #410064,
   row 1 (and every odd row) darker pink #FF3F8F, row 2 (even rows) lighter
   pink #FD5B9F, "Browse all" button dark purple #410064 with pink text.
   ========================================================================= */

.toa-csg {
	--toa-purple:      var(--wp--preset--color--brand-purple, #410064);
	--toa-pink-dark:   var(--wp--preset--color--brand-pink, #ff3f8f);
	--toa-pink-light:  #fd5b9f;

	background: #fff;
	color: var(--toa-purple);
	padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 7vw, 6rem);
	padding-inline: clamp(1.25rem, 5vw, 4rem);
}

.toa-csg__inner {
	max-width: 1200px;
	margin-inline: auto;
}

.toa-csg__heading {
	margin: 0;
	color: var(--primary-purple-purple-900, var(--toa-purple, #410064));
	font-family: var(--Typography-family-display, var(--wp--preset--font-family--heading, "Sora", system-ui, sans-serif));
	font-size: var(--Typography-size-h2, 46px);
	font-style: normal;
	font-weight: 800;
	line-height: 110%;
}

.toa-csg__description {
	margin: 0.5rem 0 0;
	max-width: none;
	white-space: nowrap;
	color: var(--primary-purple-purple-900, var(--toa-purple, #410064));
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-size: clamp(0.9375rem, 1.1vw, 1rem);
}

/* Filter bar — chips start active (filled pink + check); click to toggle
   off (outline only). "Clear all filters" resets every chip to active. */
.toa-csg__filters {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
}

.toa-csg__filters-label {
	margin-right: 0.25rem;
	color: var(--primary-purple-purple-900, var(--toa-purple, #410064));
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-size: var(--Typography-size-md, 16px);
	font-style: normal;
	font-weight: 700;
}

.toa-csg__chip {
	display: flex;
	min-width: 100px;
	padding: 12px 24px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 22px;
	border: 1px solid var(--primary-pink-pink-200, #ffc5de);
	background: transparent;
	color: var(--primary-purple-purple-900, var(--toa-purple, #410064));
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-size: var(--Typography-size-md, 16px);
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.toa-csg__chip .toa-csg__chip-icon {
	display: none;
	flex: none;
	width: 20px;
	height: 20px;
}
.toa-csg__chip.is-active {
	padding: 12px 24px 12px 12px;
	border-color: transparent;
	background: var(--primary-pink-pink-100, #fff2f8);
}
.toa-csg__chip.is-active .toa-csg__chip-icon {
	display: block;
}
.toa-csg__chip:focus-visible {
	outline: 2px solid var(--toa-purple);
	outline-offset: 2px;
}

.toa-csg__clear {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-left: 0.25rem;
	padding: 0.5rem 0.25rem;
	border: none;
	background: none;
	color: var(--primary-purple-purple-900, var(--toa-purple, #410064));
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-size: var(--Typography-size-md, 16px);
	font-style: normal;
	font-weight: 400;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.toa-csg__clear-icon {
	width: 12px;
	height: 12px;
}
.toa-csg__clear:focus-visible {
	outline: 2px solid var(--toa-purple);
	outline-offset: 2px;
}

/* Grid of cards, 3 up on desktop, collapsing down on smaller screens. */
.toa-csg__grid {
	margin-top: clamp(2rem, 4vw, 3rem);
	display: grid;
	grid-template-columns: repeat(var(--toa-csg-columns, 3), 1fr);
	gap: 0;
	align-items: stretch;
}

.toa-csg__card {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 1 / 1;
	padding: 1.5rem;
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	overflow: hidden;
}

/* Cards with a featured image (e.g. Webinars) drop the fixed square and
   grow to fit an image-on-top / colored-panel-below layout instead. */
.toa-csg__card--has-image {
	aspect-ratio: auto;
	padding: 0;
}
.toa-csg__card-image {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
	

.toa-csg__card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.toa-csg__card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.75rem 1.5rem 2rem;
}

.toa-csg__card--dark {
	background: var(--toa-csg-dark, var(--toa-pink-dark));
}
.toa-csg__card--light {
	background: var(--toa-csg-light, var(--toa-pink-light));
}
.toa-csg__card--yellow {
	background: var(--primary-yellow-yellow-500, #fecd50);
}
.toa-csg__card--purple {
	background: var(--primary-purple-purple-900, #410064);
}
.toa-csg__card--pink {
	background: var(--primary-pink-pink-500, #ff3f8f);
}
/* Purple cards need light text for contrast — yellow/pink cards already
   read fine with the default dark-purple text set below. */
.toa-csg__card--purple .toa-csg__meta,
.toa-csg__card--purple .toa-csg__title,
.toa-csg__card--purple .toa-csg__link {
	color: var(--primary-yellow-yellow-500, #fecd50);
}
.toa-csg__card--purple .toa-csg__link svg rect:first-child {
	fill: var(--primary-pink-pink-500, #ff3f8f);
}
.toa-csg__card--purple .toa-csg__link svg rect:not(:first-child) {
	fill: var(--primary-purple-purple-900, #410064);
}

/* Events archive only — swap the default pink dark/light card colours
   for pink-100 / white. Scoped via .toa-csg--event so Work (which shares
   the same --dark/--light classes) is unaffected. */
.toa-csg--event {
	--toa-pink-dark:  var(--primary-pink-pink-100, #FFF2F8);
	--toa-pink-light: var(--neutral-white, #FFF);
}

/* Only cards that actually have a "Read case study" link get the
   interactive treatment — a card with no link entered stays static, so
   hovering it doesn't imply it's clickable when it isn't. */
.toa-csg__card--link {
	cursor: pointer;
}
.toa-csg__card--link:hover,
.toa-csg__card--link:focus-within {
	transform: translateY(-6px);
	box-shadow: 0 16px 28px -12px rgba(65, 0, 100, 0.4);
	z-index: 1;
}
.toa-csg__card--dark.toa-csg__card--link:hover,
.toa-csg__card--dark.toa-csg__card--link:focus-within {
	filter: brightness(0.93);
}
.toa-csg__card--light.toa-csg__card--link:hover,
.toa-csg__card--light.toa-csg__card--link:focus-within {
	filter: brightness(0.95);
}

/* Work archive only — hover-flip reveal instead of the usual lift.
   Front face keeps the exact same colour/meta/title/link look as every
   other card; back face reveals the post's real featured image. Scoped
   entirely to .toa-csg__card--flip, so Events/Insights/Webinar/News and
   the homepage/Market Map dynamic grids keep their normal translateY
   hover completely unchanged. */
.toa-csg__card--flip {
	padding: 0;
	perspective: 1200px;
}
.toa-csg__card--flip.toa-csg__card--link:hover,
.toa-csg__card--flip.toa-csg__card--link:focus-within {
	transform: none;
	box-shadow: 0 16px 28px -12px rgba(65, 0, 100, 0.4);
	z-index: 1;
}
.toa-csg__card--flip.toa-csg__card--dark:hover,
.toa-csg__card--flip.toa-csg__card--light:hover {
	filter: none;
}
.toa-csg__card-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s ease;
	transform-style: preserve-3d;
}
.toa-csg__card--flip:hover .toa-csg__card-flip-inner,
.toa-csg__card--flip:focus-within .toa-csg__card-flip-inner {
	transform: rotateY(180deg);
}
.toa-csg__card-face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.toa-csg__card-face--front {
	display: flex;
	flex-direction: column;
}
.toa-csg__card-face--back {
	transform: rotateY(180deg);
	overflow: hidden;
	background: var(--primary-purple-purple-900, #410064);
}
.toa-csg__card-face--back img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.toa-csg__card-back-overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.5rem 1.5rem 1.5rem;
	background: linear-gradient(to top, rgba(65, 0, 100, 0.9) 0%, rgba(65, 0, 100, 0.55) 55%, rgba(65, 0, 100, 0) 100%);
}
.toa-csg__card-back-title {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--heading, "Poppins", system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(1.1rem, 1.6vw, 1.375rem);
	line-height: 1.3;
}

.toa-csg__meta {
	margin: 0;
	color: var(--primary-purple-purple-900, var(--toa-purple, #410064));
	font-family: var(--Typography-family-body, var(--wp--preset--font-family--body, "Sora", system-ui, sans-serif));
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.toa-csg__title {
	margin: 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--heading, "Poppins", system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(1.375rem, 2vw, 1.625rem);
	line-height: 1.3;
}

.toa-csg__link {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin-top: auto;
	padding-top: 1.5rem;
	color: var(--toa-purple);
	font-weight: 700;
	font-size: 0.9375rem;
	text-decoration: none;
}
.toa-csg__link:hover {
	text-decoration: underline;
}
.toa-csg__link:focus-visible {
	outline: 3px solid var(--toa-purple);
	outline-offset: 2px;
}
.toa-csg__link svg {
	flex: none;
	width: 30px;
	height: 30px;
	transition: transform 0.2s ease;
}
.toa-csg__card--link:hover .toa-csg__link svg,
.toa-csg__card--link:focus-within .toa-csg__link svg {
	transform: translateX(5px);
}

/* "Browse all case studies" pill — dark purple bg, pink text/arrow-circle */
.toa-csg__cta-wrap {
	display: flex;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.toa-csg__cta {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 0.5rem 0.5rem 0.5rem 1.75rem;
	border-radius: 999px;
	background: var(--toa-purple);
	color: var(--toa-pink-dark);
	font-weight: 700;
	font-size: 1.0625rem;
	text-decoration: none;
	transition: transform 0.15s ease, filter 0.15s ease;
}
.toa-csg__cta:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
}
.toa-csg__cta:focus-visible {
	outline: 3px solid var(--toa-purple);
	outline-offset: 2px;
}
.toa-csg__cta svg {
	flex: none;
	width: 36px;
	height: 36px;
}

@media (prefers-reduced-motion: reduce) {
	.toa-csg__card,
	.toa-csg__link svg {
		transition: none;
	}
	.toa-csg__card--link:hover,
	.toa-csg__card--link:focus-within {
		transform: none;
	}
	.toa-csg__card--link:hover .toa-csg__link svg,
	.toa-csg__card--link:focus-within .toa-csg__link svg {
		transform: none;
	}
	.toa-csg__card-flip-inner {
		transition: none;
	}
	.toa-csg__card--flip:hover .toa-csg__card-flip-inner,
	.toa-csg__card--flip:focus-within .toa-csg__card-flip-inner {
		transform: none;
	}
}

/* Tablet: 2 columns */
@media (max-width: 900px) {
	.toa-csg__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: 1 column, cards keep their row-based colour banding */
@media (max-width: 560px) {
	.toa-csg__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.toa-csg__description {
		white-space: normal;
	}
}

/* Mobile: centered "Filter by sector:" label on its own line, with
   smaller chips below so two can sit side by side per row. */
@media (max-width: 480px) {
	.toa-csg__filters {
		justify-content: center;
		gap: 0.5rem;
	}
	.toa-csg__filters-label {
		flex: 1 0 100%;
		margin: 0 0 0.5rem;
		text-align: center;
	}
	.toa-csg__chip {
		min-width: 0;
		padding: 8px 14px;
		font-size: 13px;
	}
	.toa-csg__chip.is-active {
		padding: 8px 14px 8px 8px;
	}
.toa-csg__chip .toa-csg__chip-icon {
		width: 16px;
		height: 16px;
	}
	.toa-csg__clear {
		flex: 1 0 100%;
		justify-content: center;
		margin: 0.5rem 0 0;
	}
}