/* base.css */
/*
 * Breakpoints
 * CSS custom properties cannot be used inside @media queries (browser limitation),
 * so these are documented here as a reference. Use these values consistently.
 * These breakpoints align with WordPress core / Gutenberg.
 *
 * Mobile      : max-width: 600px
 * Small       : max-width: 782px
 * Medium      : max-width: 1080px
 * Large       : max-width: 1280px
 */

:root {
	--page-background-color: var(--wp--preset--color--neutral-500);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body.page-template-page-landing,
body.single-workshops,
body.single-post {
	--page-background-color: var(--wp--preset--color--white);
}

.wp-block-template-part {
	margin-block-start: 0;
}

.wp-block-group.has-background {
	padding: 0;
}

.main--flush-top {
	margin-block-start: 0;
}

/* blog-listing.css */
/*
 * Blog-specific additions to .sec-card (base styles in workshop-listing.css,
 * shared with torii/workshops and torii/skills-boosters). Scoped to
 * .torii-blog-listing / .sec-card--has-image so nothing here touches the
 * other two blocks that reuse .sec-card.
 */

.torii-blog-listing .sec-card__description {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sec-card--has-image .sec-card__image {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--sec-card-radius, 15px);
	overflow: hidden;
}

.sec-card--has-image .sec-card__image a {
	display: block;
	width: 100%;
	height: 100%;
}

.sec-card--has-image .sec-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sec-card--has-image .sec-card__tags {
	position: absolute;
	left: 16px;
	bottom: 16px;
	z-index: 1;
}

/* book-a-call.css */
.book-a-call {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 100;
	width: 408px;
	border-radius: 24px 24px 0 24px;
	padding: 28px 24px 24px;
	overflow: hidden;
}

.book-a-call::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--wp--preset--color--brand-primary);
	border-radius: 24px 24px 0 24px;
	-webkit-mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath d='M88 24H128V128H24V88A64 64 0 0 1 88 24Z' fill='%23fff'/%3E%3Cpath d='M 0 0 L 24 0 A 24 24 0 0 0 0 24 Z' fill='%23fff' transform='translate(0,104) rotate(180 12 12)'/%3E%3Cpath d='M 0 0 L 24 0 A 24 24 0 0 0 0 24 Z' fill='%23fff' transform='translate(104,0) rotate(180 12 12)'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size:
		100% 100%,
		128px 128px;
	-webkit-mask-position:
		0 0,
		100% 100%;
	-webkit-mask-composite: destination-out;
	mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath d='M88 24H128V128H24V88A64 64 0 0 1 88 24Z' fill='%23fff'/%3E%3Cpath d='M 0 0 L 24 0 A 24 24 0 0 0 0 24 Z' fill='%23fff' transform='translate(0,104) rotate(180 12 12)'/%3E%3Cpath d='M 0 0 L 24 0 A 24 24 0 0 0 0 24 Z' fill='%23fff' transform='translate(104,0) rotate(180 12 12)'/%3E%3C/svg%3E");
	mask-repeat: no-repeat, no-repeat;
	mask-size:
		100% 100%,
		128px 128px;
	mask-position:
		0 0,
		100% 100%;
	mask-composite: subtract;
}

.book-a-call--dismissed {
	display: none;
}

.book-a-call__dismiss {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 50%;
	background: none;
	color: var(--wp--preset--color--neutral-900);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.book-a-call__dismiss:hover,
.book-a-call__dismiss:focus-visible {
	background: rgba(255, 255, 255, 0.15);
}

.book-a-call h4,
.book-a-call p,
.book-a-call .wp-block-button {
	position: relative;
	z-index: 1;
}

.book-a-call h4 {
	font-size: 24px;
	line-height: 1.2;
	margin-bottom: 12px;
}

.book-a-call p {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 20px;
}

.book-a-call__text {
	max-width: 312px;
}

.book-a-call__overlay {
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 104px;
	height: 104px;
	z-index: 1;
}

.book-a-call__photo {
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	overflow: hidden;
}

.book-a-call__photo figure {
	margin: 0;
	width: 100%;
	height: 100%;
}

.book-a-call__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-color: var(--wp--preset--color--brand-primary);
}

@media (max-width: 480px) {
	.book-a-call {
		right: 16px;
		bottom: 16px;
		left: 16px;
		width: auto;
	}

	.book-a-call__text {
		max-width: none;
	}
}

/* breadcrumbs.css */
.breadcrumbs__list {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.breadcrumbs__item {
	display: flex;
	align-items: center;
}

.breadcrumbs__separator {
	display: flex;
	align-items: center;
}

.breadcrumbs__link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	line-height: 18px;
	color: var(--wp--preset--color--neutral-900);
	text-decoration: none;
	white-space: nowrap;
}

a.breadcrumbs__link:hover {
	text-decoration: underline;
}

.breadcrumbs__link--current {
	font-weight: 500;
}

/* buttons.css */
/* ==========================================================================
   Button block style variations
   Selectors follow the FSE pattern:
   .wp-block-button.is-style-{name} .wp-block-button__link
   ========================================================================== */

/* ---------------------------------------------------------------------------
   Shared base styles — applied to all button types
   --------------------------------------------------------------------------- */

.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-primary-small .wp-block-button__link,
.wp-block-button.is-style-primary-large .wp-block-button__link,
.wp-block-button.is-style-arrow .wp-block-button__link,
.wp-block-button.is-style-secondary .wp-block-button__link,
.wp-block-button.is-style-primary-accent .wp-block-button__link {
	display: flex;
	height: 40px;
	padding: 0 24px;
	justify-content: flex-start;
	align-items: center;
	transition: padding-right 0.3s ease;
	border-radius: 50px;
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
	border: none;
	text-decoration: none;
	outline: none;
}

/* Per-style base overrides — must precede the shared :hover/:has() rules below,
   since stylelint's no-descending-specificity expects lower-specificity
   selectors targeting the same element to come first */

.wp-block-button.is-style-arrow .wp-block-button__link {
	gap: 0;
	padding: 0 8px;
	font-size: 0;
	transition: padding-left 0.3s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: none;
	padding: 0 22px;
	color: var(--wp--preset--color--neutral-900);
	border: 2px solid var(--wp--preset--color--neutral-900);
}

.wp-block-button.is-style-primary-large .wp-block-button__link {
	height: 48px;
	font-size: 22px;
}

.wp-block-button.is-style-primary-accent .wp-block-button__link {
	background: var(--wp--preset--color--brand-accent);
	color: var(--wp--preset--color--neutral-900);
}

/* primary-small & primary-large — compound button container with adjacent arrow circle.
   Must precede the compound :has() focus rule below for the same reason as above */

.wp-block-button.is-style-fill,
.wp-block-button.is-style-outline,
.wp-block-button.is-style-primary-small,
.wp-block-button.is-style-primary-large,
.wp-block-button.is-style-primary-accent {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* The [hidden] attribute is otherwise overridden by the display: inline-flex
   above, since both selectors have equal specificity and this one comes later. */
.wp-block-button.is-style-fill[hidden],
.wp-block-button.is-style-outline[hidden],
.wp-block-button.is-style-primary-small[hidden],
.wp-block-button.is-style-primary-large[hidden],
.wp-block-button.is-style-primary-accent[hidden] {
	display: none;
}

/* Shared hover — expand right padding only, text stays left-anchored */

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-primary-small .wp-block-button__link:hover,
.wp-block-button.is-style-primary-large .wp-block-button__link:hover,
.wp-block-button.is-style-arrow .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-primary-accent .wp-block-button__link:hover {
	padding-right: 32px;
}

/* TODO: active state — add :active ruleset once designs arrive */

/* Focus state — simple buttons (link only): outline on the link */

.wp-block-button.is-style-arrow .wp-block-button__link:focus-visible,
.wp-block-button.is-style-secondary .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-grey);
	outline-offset: 2px;
	border-radius: 40px;
}

/* Focus state — compound buttons (pill + arrow circle): outline on the wrapper so both are enclosed */

.wp-block-button.is-style-fill:has(.wp-block-button__link:focus-visible),
.wp-block-button.is-style-outline:has(.wp-block-button__link:focus-visible),
.wp-block-button.is-style-primary-small:has(.wp-block-button__link:focus-visible),
.wp-block-button.is-style-primary-large:has(.wp-block-button__link:focus-visible),
.wp-block-button.is-style-primary-accent:has(.wp-block-button__link:focus-visible) {
	outline: 2px solid var(--wp--preset--color--neutral-grey);
	outline-offset: 2px;
	border-radius: 40px;
}

/* Shared disabled state */

.wp-block-button.is-style-fill .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-fill .wp-block-button__link.is-disabled,
.wp-block-button.is-style-outline .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-outline .wp-block-button__link.is-disabled,
.wp-block-button.is-style-primary-small .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-primary-small .wp-block-button__link.is-disabled,
.wp-block-button.is-style-primary-large .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-primary-large .wp-block-button__link.is-disabled,
.wp-block-button.is-style-arrow .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-arrow .wp-block-button__link.is-disabled,
.wp-block-button.is-style-secondary .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-secondary .wp-block-button__link.is-disabled,
.wp-block-button.is-style-primary-accent .wp-block-button__link[aria-disabled='true'],
.wp-block-button.is-style-primary-accent .wp-block-button__link.is-disabled {

	/* TODO: disabled state */
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Arrow — icon via ::after pseudo-element
   --------------------------------------------------------------------------- */

.wp-block-button.is-style-arrow .wp-block-button__link:hover {
	padding: 0 8px 0 48px; /* overrides shared padding-right: 32px */
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
	content: '';
	display: inline-block;
	width: 26px;
	height: 23px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' fill='none' viewBox='0 0 26 23'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* ---------------------------------------------------------------------------
   Per-style overrides — fill these in as designs arrive
   --------------------------------------------------------------------------- */

/* primary-small */

.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-primary-small .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-primary-accent .wp-block-button__link:hover {
	padding: 0 56px 0 24px;
}

/* outline */

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	padding: 0 54px 0 22px;
}

/* secondary:     TODO */

.wp-block-button.is-style-fill::after,
.wp-block-button.is-style-outline::after,
.wp-block-button.is-style-primary-small::after,
.wp-block-button.is-style-primary-large::after {
	content: '';
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--neutral-900);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' fill='none' viewBox='0 0 26 23'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.wp-block-button.is-style-primary-accent::after {
	content: '';
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' fill='none' viewBox='0 0 26 23'%3E%3Cpath stroke='%232A2637' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%232A2637' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* outline arrow circle — transparent background, bordered, neutral-900 arrow */

.wp-block-button.is-style-outline::after {
	width: 38px;
	height: 36px;
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--neutral-900);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' fill='none' viewBox='0 0 26 23'%3E%3Cpath stroke='%232A2637' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%232A2637' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/svg%3E");
}

/* primary-large arrow circle — overrides the shared 40px after the shared rule */

.wp-block-button.is-style-primary-large::after {
	width: 48px;
	height: 48px;
}

/* comment-table.css */
.post-comments-break-out {
	padding-bottom: 1rem;
}

.comments-layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
}

.comments-layout__list {
	flex: 1 1 400px;
	min-width: 0;
}

.comments-layout__form {
	flex: 0 1 532px;
	max-width: 532px;
	margin-left: auto;
}

@media (max-width: 900px) {
	.comments-layout__form {
		flex-basis: 100%;
		max-width: 100%;
		margin-left: 0;
	}
}

.comment-table {
	margin-top: 16px;
	border-top: 1px solid rgba(42, 38, 55, 0.15);
}

.comment-table__row {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 0;
	border-bottom: 1px solid rgba(42, 38, 55, 0.15);
}

/* Beat core's .is-layout-constrained > :where(...) margin-left/right: auto !important,
   which otherwise centres any child narrower than the content-size — auto margins on a
   flex item win over align-items regardless of what's set above. */
.comment-table__row.is-layout-constrained
	> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.comment-table__meta {
	row-gap: 8px;
}

.comment-table__values {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.comment-table__values p {
	margin: 0;
}

/* comments-accordion.css */
/*
 * Reuses the FAQ accordion's rounded-panel-with-a-circular-notch technique
 * (assets/css/components/faq.css) for the "View comments (x)" trigger,
 * recoloured to neutral-200. See patterns/post-comments.php.
 *
 * The rounding/background/clipping lives on the outer .comments-accordion
 * wrapper (not the header or panel individually) and never changes — only
 * .comments-accordion__panel's max-height animates. That way opening it
 * reads as the card growing taller, not as the header's corners flattening.
 */

.comments-accordion {
	border-radius: 24px;
	overflow: hidden;
	background-color: var(--wp--preset--color--neutral-200);
}

.comments-accordion__header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.5rem 88px 1.5rem 1.5rem;
	border: none;
	background: none;
	background-image: radial-gradient(
		circle 30px at calc(100% - 26px) calc(100% - 26px),
		transparent 30px,
		var(--wp--preset--color--neutral-200) 30px
	);
	text-align: left;
	cursor: pointer;
}

.comments-accordion__label {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1.125rem;
	color: var(--wp--preset--color--neutral-900);
}

.comments-accordion__arrow {
	position: absolute;
	bottom: 2px;
	right: 2px;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	display: flex;
}

.comments-accordion__arrow-icon {
	display: block;
	width: 48px;
	height: 48px;
	transition: transform 0.2s ease;
}

.comments-accordion__arrow-icon--active {
	display: none;
}

.comments-accordion--active .comments-accordion__arrow-icon--inactive {
	display: none;
}

.comments-accordion--active .comments-accordion__arrow-icon--active {
	display: block;
}

.comments-accordion__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.comments-accordion__content {
	padding: 24px 1.5rem;
}

@media (max-width: 600px) {
	.comments-accordion__header {
		padding-right: 72px;
	}

	.comments-accordion__arrow,
	.comments-accordion__arrow-icon {
		width: 40px;
		height: 40px;
	}
}

/* contact-cta-panel.css */
.contact-cta {
	position: relative;
	margin-block-start: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--wp--preset--color--brand-primary);
	padding: 160px 64px 64px;
	overflow: hidden;
	border-bottom-left-radius: 20px;
}

.contact-cta::before {
	content: '';
	position: absolute;
	top: var(--header-height, 80px);
	left: 0;
	width: 24px;
	height: 24px;
	background: var(--page-background-color);
	clip-path: path('M 0 0 L 24 0 A 24 24 0 0 0 0 24 Z');
	z-index: 1;
}

.contact-cta__text {
	position: relative;
	z-index: 1;
	max-width: 393px;
}

.contact-cta__text h1 {
	margin-bottom: 24px;
}

.contact-cta__text p {
	margin-bottom: 32px;
}

.contact-cta__text a {
	color: var(--wp--preset--color--neutral-900);
}

.contact-cta__details {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: calc(100% - 190px);
	margin-top: auto;
	padding-top: 120px;
}

.contact-cta__detail {
	display: flex;
	align-items: center;
	gap: 12px;
}

.contact-cta__detail svg {
	flex-shrink: 0;
}

.contact-cta__detail a {
	color: var(--wp--preset--color--neutral-900);
	text-decoration: none;
}

.contact-cta__detail a:hover {
	text-decoration: underline;
}

/*
 * Overlay + photo reuse the shared .call-to-action__overlay/__photo classes
 * from cta-photo-overlay.css, but the blob and its two connector fillets are
 * consolidated into one combined SVG (per the CLAUDE.md fillet workflow)
 * instead of three separately positioned painted shapes, matching the
 * approach used in book-a-call.css. Scoped under .contact-cta so the shared
 * cta-photo-overlay.css pattern is untouched.
 */
.contact-cta .call-to-action__overlay {
	right: -130px;
	bottom: -120px;
	width: 328px;
	height: 293px;
	background-color: var(--wp--preset--color--neutral-500);
	background-image: none;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='328' height='293' viewBox='0 0 328 293'%3E%3Crect x='28' y='28' width='300' height='265' rx='80' ry='80' fill='%23fff'/%3E%3Cpath d='M170 0 L198 0 A28 28 0 0 0 170 28 Z' fill='%23fff' transform='rotate(180 184 14)'/%3E%3Cpath d='M0 145 L28 145 A28 28 0 0 0 0 173 Z' fill='%23fff' transform='rotate(180 14 159)'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='328' height='293' viewBox='0 0 328 293'%3E%3Crect x='28' y='28' width='300' height='265' rx='80' ry='80' fill='%23fff'/%3E%3Cpath d='M170 0 L198 0 A28 28 0 0 0 170 28 Z' fill='%23fff' transform='rotate(180 184 14)'/%3E%3Cpath d='M0 145 L28 145 A28 28 0 0 0 0 173 Z' fill='%23fff' transform='rotate(180 14 159)'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	border-radius: 0;
}

.contact-cta .call-to-action__overlay::before,
.contact-cta .call-to-action__overlay::after {
	content: none;
}

.contact-cta .call-to-action__photo {
	top: 43px;
	left: 43px;
}

@media (max-width: 600px) {
	.contact-cta {
		padding: 140px 24px 200px;
	}

	.contact-cta__details {
		max-width: 60%;
	}
}

/* contact-form.css */
.contact-form-panel {
	padding: 48px;
	background-color: var(--wp--preset--color--neutral-200);
	border-radius: 24px;
}

.contact-form-panel h2 {
	margin-bottom: 24px;
}

@media (max-width: 700px) {
	.contact-form-panel {
		padding: 24px;
	}
}

/* "Contact page panel" block style — the full-bleed panel used on the
   Contact page itself, rather than the default rounded workshop-options
   treatment used elsewhere. */
.contact-form-panel.is-style-contact-page-panel {
	padding: 160px 64px 64px;
	background-color: var(--wp--preset--color--neutral-500);
	border-radius: 0;
}

.contact-form-panel.is-style-contact-page-panel h2 {
	margin-bottom: 32px;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 614px;
}

/* Full-width layout for forms using .form-field-row (side-by-side fields) —
   a single-column-sized max-width would leave each column cramped. Detected
   from the markup itself so no block setting is needed. */
.contact-form:has(.form-field-row) {
	max-width: none;
}

.contact-form .wp-block-button {
	position: relative;
	margin-top: 8px;
}

/* Fields placed side by side in a two-column grid. Plain fields stack down
   the first column in source order; a field marked .form-field--stretch
   (e.g. Message) is pulled into the second column and spans every row so
   its height matches the full first column. .form-field keeps its own
   margin-bottom, so zero it out here — spacing between rows comes from the
   .contact-form flex gap instead. */
.contact-form .form-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(4, auto);
	grid-auto-flow: column;
	gap: 24px;
	margin-bottom: 15px;
}

.contact-form .form-field-row .form-field {
	margin-bottom: 0;
}

/* Percentage heights won't work here — CF7 wraps the textarea in its own
   <span class="wpcf7-form-control-wrap">, which defaults to display:inline
   and so has no definite height for a child's height:100% to resolve
   against. Chain flex-grow down through every level instead, which fills
   the remaining space regardless of each ancestor's computed height. */
.contact-form .form-field-row .form-field--stretch {
	grid-row: 1 / -1;
	display: flex;
	flex-direction: column;
}

.contact-form .form-field-row .form-field--stretch .form-field__input-wrap {
	display: flex;
	flex: 1;
}

/* wpautop wraps the CF7 shortcode's output in a <p> (see the unscoped
   .form-field__input-wrap p rule below) — a plain block box that isn't a
   flex item and would otherwise break the flex-grow chain right here. */
.contact-form .form-field-row .form-field--stretch .form-field__input-wrap > p {
	display: flex;
	flex: 1;
	margin: 0;
}

.contact-form
	.form-field-row
	.form-field--stretch
	.form-field__input-wrap
	.wpcf7-form-control-wrap {
	display: flex;
	flex: 1;
}

.contact-form .form-field-row .form-field--stretch .form-field__input {
	flex: 1;
	height: auto;
}

.contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 4px;
	color: #d32f2f;
	font-size: var(--wp--preset--font-size--sm, 14px);
}

.contact-form .wpcf7-response-output {
	margin: 0;
	padding: 12px 16px;
	border-radius: 8px;
	border: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
}

.contact-form form.sent .wpcf7-response-output {
	background-color: #e6f4ea;
	color: #1e7e34;
}

.contact-form form.invalid .wpcf7-response-output,
.contact-form form.failed .wpcf7-response-output,
.contact-form form.aborted .wpcf7-response-output,
.contact-form form.spam .wpcf7-response-output,
.contact-form form.unaccepted .wpcf7-response-output {
	background-color: #fdecea;
	color: #d32f2f;
}

/* position: absolute takes the spinner out of flex flow — CF7 injects it as a
   sibling of the submit button inside .wp-block-button (is-style-primary-small,
   display: inline-flex), which would otherwise push the button's ::after arrow
   circle out of place even though the spinner itself is invisible until submit. */
.contact-form .wpcf7-spinner {
	position: absolute;
	left: 100%;
	margin-left: 8px;
}

@media (max-width: 600px) {
	.contact-form-panel.is-style-contact-page-panel {
		padding: 48px 24px 64px;
	}

	.contact-form .form-field-row {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
		margin-bottom: 0;
	}

	.contact-form .form-field-row .form-field--stretch {
		grid-row: auto;
	}

	.contact-form .form-field-row .form-field--stretch .form-field__input-wrap,
	.contact-form .form-field-row .form-field--stretch .form-field__input-wrap > p,
	.contact-form
		.form-field-row
		.form-field--stretch
		.form-field__input-wrap
		.wpcf7-form-control-wrap {
		display: block;
		flex: initial;
	}

	.contact-form .form-field-row .form-field--stretch .form-field__input {
		flex: initial;
		height: 160px;
	}
}

/* contact-page-row.css */
.contact-page-row {
	align-items: stretch;
	gap: 0;
}

.contact-page-row .contact-cta,
.contact-page-row .contact-form-panel {
	box-sizing: border-box;
	flex: 1 1 50%;
	min-width: 320px;
}

@media (max-width: 782px) {
	.contact-page-row .contact-cta,
	.contact-page-row .contact-form-panel {
		flex-basis: 100%;
	}
}

/* content-tabs.css */
.tabs__list {
	display: flex;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0.5rem;
	background-color: var(--wp--preset--color--neutral-200);
	border-radius: 96px;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.tabs__list > li {
	flex: 1;
	min-width: 0;
}

.tabs__tab {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.5rem 1.5rem;
	height: 40px;
	border: none;
	border-radius: 52px;
	background-color: transparent;
	color: var(--wp--preset--color--neutral-900);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.tabs__tab:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--neutral-900) 12%, transparent);
}

.tabs__tab--active,
.tabs__tab[aria-selected='true'] {
	background-color: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
}

.tabs__tab--active:hover,
.tabs__tab[aria-selected='true']:hover {
	background-color: var(--wp--preset--color--neutral-900);
}

@media (max-width: 600px) {
	.tabs__list {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.tabs__list::-webkit-scrollbar {
		display: none;
	}

	.tabs__list > li {
		flex: none;
	}
}

/* Editor-only: visually separate workshop tab sections that no longer have a heading. */
.editor-styles-wrapper .workshop-tab-section {
	margin-block: 1rem;
	padding: 2rem 1rem 1rem;
	border: 1px dashed var(--wp--preset--color--neutral-900, #2a2637);
	border-radius: 8px;
}

/* Editor-only: label wrapper injected by assets/js/editor/label-named-groups.js,
   showing each named Group block's rename (metadata.name). */
.editor-styles-wrapper .named-group-label-wrapper {
	position: relative;
}

.editor-styles-wrapper .named-group-label {
	position: absolute;
	top: 0;
	left: 1rem;
	transform: translateY(-50%);
	z-index: 1;
	padding: 0.125rem 0.5rem;
	background-color: var(--wp--preset--color--brand-primary, #b9bdff);
	color: var(--wp--preset--color--neutral-900, #2a2637);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border-radius: 4px;
}

/* Editor-only: named groups nested inside another named group (e.g. "Overview
   Content" and "Overview Break-Out Section" inside the "Overview" tab
   section) get a different label colour so they're easy to tell apart from
   their parent's label at a glance. */
.editor-styles-wrapper .named-group-label--nested {
	background-color: var(--wp--preset--color--brand-secondary, #d0e995);
	color: var(--wp--preset--color--neutral-900, #2a2637);
}

/* country-select-dropdown.css */
.torii-country-select-dropdown {
	position: relative;
	border: 2px solid transparent;
	border-radius: 20px;
}

.torii-country-select-dropdown:has([aria-expanded='true']) {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border: 2px solid var(--wp--preset--color--neutral-900);
	background: linear-gradient(to bottom, transparent 50%, var(--wp--preset--color--white) 50%);
}

.torii-country-select-dropdown__trigger {
	background: var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--neutral-900);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	padding: 8px 24px;
	border-radius: 20px;
	box-shadow: none;
	outline: none;
	cursor: pointer;
	white-space: nowrap;
	border: none;
}

.torii-country-select-dropdown__trigger:not([aria-expanded='true']):hover,
.torii-country-select-dropdown__trigger:not([aria-expanded='true']):focus {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--neutral-900);
}

.torii-country-select-dropdown__trigger svg {
	margin-left: 8px;
}

.torii-country-select-dropdown__trigger[aria-expanded='true'] {
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
	border-top-right-radius: 16px;
	border-top-left-radius: 16px;
}

.torii-country-select-dropdown__list {
	position: absolute;
	top: 100%;
	right: -2px;
	left: -2px;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--neutral-900);
	border-top: none;
	border-radius: 0 0 20px 20px;
	list-style: none;
	margin: 0;
	padding: 8px 0 16px;
	z-index: 2;
}

.torii-country-select-dropdown__list[hidden] {
	display: none;
}

.torii-country-select-dropdown__option {
	display: block;
	padding: 8px 16px;
	color: var(--wp--preset--color--neutral-900);
	font-size: var(--wp--preset--font-size--md);
	background: none;
	cursor: pointer;
	border: none;
	text-align: left;
}

.torii-country-select-dropdown__option:hover,
.torii-country-select-dropdown__option:focus {
	background: var(--wp--preset--color--neutral-100);
	outline: none;
}

/* country-select.css */
.torii-country-select__heading {
	color: inherit;
	margin: 0;
}

.torii-country-select__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.torii-country-select__item {
	margin: 0;
}

.torii-country-select__link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	color: inherit;
	text-decoration: none;
}

.torii-country-select__link:hover,
.torii-country-select__link:focus {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: underline;
	outline: none;
}

/* cta-photo-overlay.css */
.call-to-action {
	position: relative;
	min-height: 344px;
	max-width: 1079px;
	margin: 0 auto;
	border-radius: 25px;
	padding: 66px 69px;
	background-color: var(--wp--preset--color--brand-primary);
	overflow: hidden;
}

.call-to-action h4,
.call-to-action p,
.call-to-action .wp-block-button {
	position: relative;
	z-index: 1;
}

.call-to-action h4 {
	margin-bottom: 24px;
}

.call-to-action p {
	margin-bottom: 32px;
}

.call-to-action__text {
	max-width: 744px;
}

.call-to-action__overlay {
	position: absolute;
	right: -130px;
	bottom: -120px;
	width: 300px;
	height: 265px;
	background: var(--wp--preset--color--white);
	border-radius: 80px;
}

.call-to-action__overlay::before {
	content: '';
	position: absolute;
	top: -28px;
	right: 130px;
	width: 28px;
	height: 28px;
	background: var(--wp--preset--color--white);
	clip-path: path('M 0 0 L 28 0 A 28 28 0 0 0 0 28 Z');
	transform: rotate(-180deg);
}

.call-to-action__overlay::after {
	content: '';
	position: absolute;
	left: -28px;
	bottom: 120px;
	width: 28px;
	height: 28px;
	background: var(--wp--preset--color--white);
	clip-path: path('M 0 0 L 28 0 A 28 28 0 0 0 0 28 Z');
	transform: rotate(180deg);
}

.call-to-action__photo {
	position: absolute;
	top: 15px;
	left: 15px;
	width: 130px;
	height: 130px;
	background: var(--wp--preset--color--brand-primary);
	border-radius: 50%;
	overflow: hidden;
}

.call-to-action__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* faq.css */
.faq-accordion {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
}

@media (max-width: 781px) {
	.faq-accordion {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.faq-accordion {
		grid-template-columns: 1fr;
	}
}

.faq-accordion__item {
	position: relative;
	border-radius: 24px 24px 0 24px;
}

.faq-accordion__item::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--brand-secondary);
	border-radius: 24px 24px 0 24px;
	-webkit-mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M41 11H60V60H11V41A30 30 0 0 1 41 11Z' fill='%23fff'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(0,49) rotate(180 5.5 5.5)'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(49,0) rotate(180 5.5 5.5)'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size:
		100% 100%,
		60px 60px;
	-webkit-mask-position:
		0 0,
		100% 100%;
	-webkit-mask-composite: destination-out;
	mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M41 11H60V60H11V41A30 30 0 0 1 41 11Z' fill='%23fff'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(0,49) rotate(180 5.5 5.5)'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(49,0) rotate(180 5.5 5.5)'/%3E%3C/svg%3E");
	mask-repeat: no-repeat, no-repeat;
	mask-size:
		100% 100%,
		60px 60px;
	mask-position:
		0 0,
		100% 100%;
	mask-composite: subtract;
	transition: background-color 0.2s ease;
}

.faq-accordion__item--active::before {
	background: var(--wp--preset--color--brand-primary);
}

.faq-accordion__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.5rem 88px 1.5rem 1.5rem;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
}

.faq-accordion__question {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body-large);
	color: var(--wp--preset--color--neutral-900);
}

.faq-accordion__arrow {
	position: absolute;
	bottom: 4px;
	right: 0;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
}

.faq-accordion__arrow-icon {
	display: block;
	width: 48px;
	height: 48px;
	transition: transform 0.2s ease;
}

.faq-accordion__arrow-icon--active {
	display: none;
}

.faq-accordion__item--active .faq-accordion__arrow-icon--inactive {
	display: none;
}

.faq-accordion__item--active .faq-accordion__arrow-icon--active {
	display: block;
}

.faq-accordion__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}

.faq-accordion__answer {
	padding: 0 88px 1.5rem 1.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-copy);
	color: var(--wp--preset--color--neutral-900);
}

.faq-accordion__answer a {
	color: var(--wp--preset--color--neutral-900);
}

.faq-accordion__answer p:first-child {
	margin-top: 0;
}

.faq-accordion__answer p:last-child {
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.faq-accordion__header,
	.faq-accordion__answer {
		padding-right: 72px;
	}

	.faq-accordion__arrow,
	.faq-accordion__arrow-icon {
		width: 40px;
		height: 40px;
	}
}

/* filter-controls.css */
/*
 * Shared filter/listing chrome reused by the card-grid (+ filter, where
 * applicable) layouts: torii/workshops, torii/blog-filter,
 * torii/skills-boosters, and torii/team-members (grid only — it has no
 * filter form). Each block still keeps its own wrapper class (e.g.
 * .torii-workshops) for its JS to hook into, but the *styles* for those
 * wrapper classes live here in one place instead of being redeclared per
 * block. Anything here that's truly block-specific (e.g. the workshops
 * block's 3-column "more filters" panel) stays in that block's own CSS file.
 */

/* Responsive 3/2/1-column results grid. */

.torii-workshop-listing,
.torii-blog-listing,
.torii-skills-boosters__grid,
.torii-team-members {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

@media (max-width: 781px) {
	.torii-workshop-listing,
	.torii-blog-listing,
	.torii-skills-boosters__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.torii-workshop-listing,
	.torii-blog-listing,
	.torii-skills-boosters__grid {
		grid-template-columns: 1fr;
	}
}

/* Filter form chrome — the form wrapper, footer row, clear button, result
   count, and loading state shared by all three filter blocks. */

.torii-workshops__filters,
.torii-blog-filter__filters,
.torii-skills-boosters__filters {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 1rem);
	margin-bottom: var(--wp--preset--spacing--40, 1.5rem);
}

.torii-workshops__footer,
.torii-blog-filter__footer,
.torii-skills-boosters__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 1rem);
	margin-top: 24px;
}

.torii-workshops__clear,
.torii-blog-filter__clear,
.torii-skills-boosters__clear {
	cursor: pointer;
}

.torii-workshops__count,
.torii-blog-filter__count,
.torii-skills-boosters__count {
	font-weight: 600;
	margin-bottom: var(--wp--preset--spacing--20, 1rem);
}

.torii-workshops__results.is-loading,
.torii-blog-filter__results.is-loading,
.torii-skills-boosters__results.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Pagination, styled to sit inside any of the three filter blocks. */

.torii-workshops .pagination,
.torii-blog-filter .pagination,
.torii-skills-boosters .pagination {
	margin-top: var(--wp--preset--spacing--40, 1.5rem);
	display: block;
	width: 100%;
}

.torii-workshops .pagination__track,
.torii-blog-filter .pagination__track,
.torii-skills-boosters .pagination__track {
	width: 100%;
}

.torii-workshops .pagination__pages,
.torii-blog-filter .pagination__pages,
.torii-skills-boosters .pagination__pages {
	flex: 1;
	justify-content: center;
}

/* Topics filter — the "Topic:"/"Tag:"/etc. label + pill row layout, plus
   the "More filters" toggle/panel. */

.topics-filter-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.topics-filter {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
}

.topics-filter--grow {
	flex: 1 1 auto;
}

.topics-filter__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	letter-spacing: -0.2px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.topics-filter__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	width: 100%;
}

.topics-filter__more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 16px 0 14px;
	margin-left: auto;
	border: none;
	cursor: pointer;
	border-radius: 51.504px;
	background-color: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.0075em;
	white-space: nowrap;
}

.topics-filter__more-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.topics-filter__more-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 24px;
}

.topics-filter__more-panel[hidden] {
	display: none;
}

.topics-filter__more-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.topics-filter__divider {
	border: none;
	border-top: 1px solid rgba(42, 38, 55, 0.15);
	margin: 24px 0 0;
}

.topics-filter__sort {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-inline-start: auto;
}

/* Product tag / filter pill — the pill-shaped checkbox/radio/toggle button
   used for every filter option across all three blocks. */

.product-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none;
	cursor: pointer;
	border-radius: 51.504px;
	background-color: var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--neutral-900);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	letter-spacing: -0.0075em;
	white-space: nowrap;
	text-decoration: none;
}

.product-tag--mobile {
	height: 32px;
	padding: 0 16px 0 14px;
	font-size: 0.875rem;
}

.product-tag--purple {
	background-color: var(--wp--preset--color--brand-primary);
}

.product-tag--green {
	background-color: var(--wp--preset--color--brand-secondary);
}

.product-tag--orange {
	background-color: var(--wp--preset--color--brand-accent);
}

.product-tag--white {
	background-color: var(--wp--preset--color--white);
}

.product-tag--off-black {
	background-color: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
}

.product-tag[aria-pressed='true'] {
	background-color: var(--wp--preset--color--brand-primary);
}

.filter-pill {
	position: relative;
}

.filter-pill:focus-within,
.filter-pill:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-grey);
	outline-offset: 2px;
}

.filter-pill:has(.filter-pill-input:checked) {
	background-color: var(--wp--preset--color--brand-primary);
}

.filter-pill.product-tag--off-black:has(.filter-pill-input:checked),
.filter-pill.product-tag--off-black[aria-pressed='true'] {
	color: var(--wp--preset--color--neutral-900);
}

.filter-pill-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.product-tag__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}

.product-tag__label {
	line-height: 24px;
}

.product-tag__label--sm {
	font-size: 0.875rem;
}

/* Sort dropdown, styled to match the country select dropdown component */

.sort-dropdown {
	position: relative;
	display: inline-block;
	border: 2px solid transparent;
	border-radius: 20px;
}

.sort-dropdown:has([aria-expanded='true']) {
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	border: 2px solid var(--wp--preset--color--neutral-900);
	background: linear-gradient(to bottom, transparent 50%, var(--wp--preset--color--white) 50%);
}

.sort-dropdown__trigger {
	background: var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--neutral-900);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	padding: 8px 24px;
	border-radius: 20px;
	box-shadow: none;
	outline: none;
	cursor: pointer;
	white-space: nowrap;
	border: none;
}

.sort-dropdown__trigger:not([aria-expanded='true']):hover,
.sort-dropdown__trigger:not([aria-expanded='true']):focus {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--neutral-900);
}

.sort-dropdown__trigger svg {
	margin-left: 8px;
}

.sort-dropdown__trigger[aria-expanded='true'] {
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
	border-top-right-radius: 16px;
	border-top-left-radius: 16px;
}

.sort-dropdown__list {
	position: absolute;
	top: 100%;
	right: -2px;
	left: -2px;
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--neutral-900);
	border-top: none;
	border-radius: 0 0 20px 20px;
	list-style: none;
	margin: 0;
	padding: 8px 0 16px;
	z-index: 2;
}

.sort-dropdown__list[hidden] {
	display: none;
}

.sort-dropdown__option {
	display: block;
	padding: 8px 16px;
	color: var(--wp--preset--color--neutral-900);
	font-size: var(--wp--preset--font-size--md);
	background: none;
	cursor: pointer;
	border: none;
	text-align: left;
}

.sort-dropdown__option:hover,
.sort-dropdown__option:focus {
	background: var(--wp--preset--color--neutral-100);
	outline: none;
}

/* footer-menu.css */
.torii-footer-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.torii-footer-menu__item {
	margin: 0;
}

.torii-footer-menu__link {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	color: inherit;
	text-decoration: none;
}

.torii-footer-menu__link:hover,
.torii-footer-menu__link:focus {
	color: var(--wp--preset--color--brand-primary);
	text-decoration: underline;
	outline: none;
}

/* footer.css */
.footer {
	padding: 24px 0;
}

/* On workshop pages, the tabs pattern always ends with a beige break-out "Footer" section directly above the site footer — tint the footer to match. On a single blog post with a visible comments panel, do the same. Either way, only the footer is tinted — the rest of the page background is unaffected */
body.has-workshop-footer-breakout .footer,
body.has-comments-panel .footer {
	--page-background-color: var(--wp--preset--color--neutral-500);
	background-color: var(--page-background-color);
}

.wp-block-group.footer__inner {
	position: relative;
	padding-top: 50px;
	padding-right: 35px;
	padding-bottom: 35px;
	padding-left: 35px;
	border-bottom-left-radius: 24px;
	border-top-left-radius: 24px;
}

@media (max-width: 600px) {
	.footer__inner .footer__final-row {
		margin-bottom: 75px;
	}
}

.footer__columns {
	width: 100%;
}

.footer__column {
	width: 100%;
}

@media (min-width: 601px) {
	.footer__column {
		width: 25%;
		max-width: 308px;
		gap: 0;
	}
}

.footer__column .footer__phone {
	margin-bottom: 20px;
}

.footer__logo {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: var(--page-background-color, var(--wp--preset--color--white));
	color: var(--wp--preset--color--neutral-900);
	padding: 24px 24px 0 0;
}

/* Newsletter / CTA band that sits above the dark footer inner */
.wp-block-group.footer__newsletter {
	padding: 40px 35px 0;
	border-top-left-radius: 20px;
}

.footer__newsletter-image {
	flex-shrink: 0;
	padding: 0;
	line-height: 0;
}

.footer__newsletter-image img {
	display: block;
}

.footer__newsletter-image .wp-block-image {
	margin: 0;
}

.footer__newsletter-image .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Remove top-left radius when the newsletter band sits directly above the dark footer inner */
.footer--with-newsletter .footer__inner {
	border-top-left-radius: 0;
}

.footer__logo::before {
	content: '';
	position: absolute;
	left: -49px;
	top: 0;
	width: 50px;
	height: 77px;
	background: var(--page-background-color, var(--wp--preset--color--white));
	clip-path: path('M 50 0 C 42 0 33 7 31 17 L 15 62 C 13 70 6 77 0 77 L 50 77 Z');
}

/* form-fields.css */
.form-field {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 15px;
}

.form-field:last-of-type {
	margin-bottom: 0;
}

.form-field p {
	margin: 0;
}

.form-field__label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -0.2px;
	color: var(--wp--preset--color--neutral-900);
}

.form-field__input-wrap {
	border-radius: 8px;
	overflow: hidden;
}

.form-field__input-wrap p {
	margin: 0;
}

.form-field__input {
	display: block;
	width: 100%;
	height: 48px;
	padding: 12px 16px;
	background-color: var(--wp--preset--color--white);
	border: 2px solid transparent;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-grey);
	outline: none;
	transition:
		border-color 0.15s ease,
		color 0.15s ease;
	box-sizing: border-box;
}

.form-field__input::placeholder {
	color: var(--wp--preset--color--neutral-grey);
	font-weight: 400;
}

.form-field__input--active {
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--neutral-900);
	font-weight: 500;
	caret-color: var(--wp--preset--color--neutral-900);
}

.form-field__input--filled {
	color: var(--wp--preset--color--neutral-grey);
	font-weight: 400;
}

.form-field__input:focus {
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--neutral-900);
}

.form-field__input--textarea {
	height: auto;
	height: 160px;
	padding: 12px 16px;
	line-height: 1.5;
	resize: vertical;
	font-family: var(--wp--preset--font-family--body);
}

/* header.css */
.wp-site-blocks > .wp-block-group > header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	color: var(--wp--preset--color--white);
}

body.admin-bar .wp-site-blocks > .wp-block-group > header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.header__logo {
	background-color: var(--page-background-color, var(--wp--preset--color--white));
	color: var(--wp--preset--color--neutral-900);
	padding: 24px;
	border-bottom-right-radius: 24px;
}

/* hero-text-only.css */
.skills-hero {
	position: relative;
	margin-block-start: 0;
	background-color: var(--wp--preset--color--brand-primary);
	padding: 160px 64px 64px;
	border-bottom-left-radius: 24px;
	overflow: hidden;
}

.skills-hero::before {
	content: '';
	position: absolute;
	top: var(--header-height, 80px);
	left: 0;
	width: 24px;
	height: 24px;
	background: var(--page-background-color);
	clip-path: path('M 0 0 L 24 0 A 24 24 0 0 0 0 24 Z');
	z-index: 1;
}

.skills-hero__text {
	max-width: 700px;
}

.skills-hero__text h1 {
	margin-bottom: 16px;
}

.skills-hero__text p {
	margin-bottom: 32px;
}

.skills-hero--secondary {
	background-color: var(--wp--preset--color--brand-secondary);
}

@media (max-width: 600px) {
	.skills-hero {
		padding: 140px 24px 48px;
	}
}

/* hero.css */
.hero-wrapper {
	margin-block-start: 0;
}

.hero {
	position: relative;
	border-bottom-left-radius: 24px;
	padding: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}

.hero::before {
	content: '';
	position: absolute;
	top: var(--header-height, 80px);
	left: 0;
	width: 24px;
	height: 24px;
	background: var(--page-background-color);
	clip-path: path('M 0 0 L 24 0 A 24 24 0 0 0 0 24 Z');
	z-index: 1;
}

.hero .wp-block-cover__inner-container {
	display: flex;
	justify-content: flex-end;
}

.hero__panel {
	position: relative;
	background: var(--page-background-color);
	border-top-left-radius: 24px;
	padding: 50px;
	color: var(--wp--preset--color--neutral-900);
	z-index: 1;
	width: fit-content;
}

.hero__panel::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: -24px;
	width: 24px;
	height: 24px;
	background: var(--page-background-color);
	clip-path: path('M 0 0 L 24 0 A 24 24 0 0 0 0 24 Z');
	transform: rotate(180deg);
}

.hero__panel h1,
.hero__text h1 {
	max-width: 480px;
}

.webinar-title {
	margin-block-start: 24px;
}

.hero__panel .wp-block-post-featured-image img {
	max-height: 220px;
	width: auto;
}

.hero__panel .wp-block-post-excerpt,
.hero__text .wp-block-post-excerpt {
	max-width: 480px;
	margin-block-start: 16px;
}

.hero__text--workshop h1,
.hero__text--workshop .wp-block-post-excerpt {
	max-width: none;
}

.hero--split {
	min-height: 400px;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	padding: 0;
}

.hero--split .hero__text {
	color: var(--wp--preset--color--neutral-900);
	padding-top: 140px;
	padding-left: 140px;
}

.hero__text--workshop {
	flex: 1 1 auto;
	padding-bottom: 140px;
}

.hero--split .hero__panel {
	align-self: flex-end;
}

.hero__panel--workshop .wp-block-post-featured-image {
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	max-height: 100%;
}

.hero--split .hero__panel .wp-block-post-featured-image {
	position: relative;
	z-index: 1;
}

/*
 * Diagonal notch cut into the panel's top-left corner (replacing its
 * border-top-left-radius there), matching the Figma "Product overview_
 * Desktop" reference where the coloured hero background diagonally cuts
 * across most of the white content area's height. It's a real clip-path
 * cutout (not a filled pseudo-element) so it reveals the hero's own
 * coloured background showing through. Coordinates are normalised to
 * objectBoundingBox (0-1) via an inline <clipPath> in hero-workshops.php,
 * so the shape scales with whatever size the panel actually renders at.
 *
 * To give the diagonal room to be as bold as the Figma reference without
 * biting into the featured photo, the panel is sized well beyond the
 * photo (rather than fit-content around it) and the photo is anchored to
 * its bottom-right corner, echoing how the Figma icon sits inside a much
 * larger white area rather than filling it.
 */
.hero__panel-clip-svg {
	position: absolute;
	width: 0;
	height: 0;
}

.hero__panel--workshop {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	width: 330px;
	height: 200px;
	padding: 24px;
	margin-left: auto;
	clip-path: url(#hero-panel-workshop-clip);
}

.hero__panel--workshop::before {
	display: none;
}

.hero__panel--workshop .wp-block-post-featured-image img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

@media (max-width: 600px) {
	.hero--split {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero--split .hero__text {
		padding-top: 32px;
		padding-left: 32px;
	}

	.hero--split .hero__panel {
		align-self: flex-start;
	}

	.hero__panel--workshop {
		width: 300px;
		height: 300px;
		padding: 32px;
	}

	.hero__panel--workshop .wp-block-post-featured-image img {
		max-height: 150px;
	}
}

.hero--no-overlay {
	min-height: 594px;
}

/*
 * WordPress core's cover block CSS gives .wp-block-cover__background a
 * blanket opacity: .5 (wp-includes/blocks/cover/style.css). Per-block core
 * CSS is enqueued as blocks are discovered during render and can end up
 * printed in wp_footer — after this theme's own stylesheet — so an
 * equal-specificity override here is a coin flip on source order alone.
 * !important guarantees this wins regardless of where core prints its
 * style, since we're deliberately overriding a core default, not fighting
 * our own cascade. Keyed off has-background-dim-0 itself (the cover
 * block's own "no dim" state) rather than a hero-specific class, so it
 * covers both hero.php variants — the overlay hero also uses dimRatio:0
 * now — without touching team-member-hero.php, where dimRatio isn't
 * dimming a photo but is the solid overlayColor's own visible opacity.
 */
.wp-block-cover__background.has-background-dim-0 {
	opacity: 0 !important;
}

@media (max-width: 600px) {
	.hero--no-overlay {
		min-height: 120px;
	}
}

/* home-intro.css */
.home-intro {
	padding: 4rem 0;
}

.home-intro__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

.home-intro__accordion {
	margin-block-start: 0;
}

.home-intro__content h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	line-height: 1.167;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.home-intro__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-large);
	font-weight: 500;
	line-height: 1.455;
	color: var(--wp--preset--color--neutral-900);
	margin: 0 0 1rem;
}

/* Accordion list */
.accordion-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Each item */
.accordion-item {
	position: relative;
	border-radius: 24px 24px 0 24px;
	cursor: pointer;
}

/* Background pseudo-element — same mask technique as .faq-accordion__item */
.accordion-item__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 24px 24px 0 24px;
	background: var(--wp--preset--color--brand-secondary);
	-webkit-mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M41 11H60V60H11V41A30 30 0 0 1 41 11Z' fill='%23fff'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(0,49) rotate(180 5.5 5.5)'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(49,0) rotate(180 5.5 5.5)'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size:
		100% 100%,
		60px 60px;
	-webkit-mask-position:
		0 0,
		100% 100%;
	-webkit-mask-composite: destination-out;
	mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M41 11H60V60H11V41A30 30 0 0 1 41 11Z' fill='%23fff'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(0,49) rotate(180 5.5 5.5)'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(49,0) rotate(180 5.5 5.5)'/%3E%3C/svg%3E");
	mask-repeat: no-repeat, no-repeat;
	mask-size:
		100% 100%,
		60px 60px;
	mask-position:
		0 0,
		100% 100%;
	mask-composite: subtract;
	transition: background-color 0.2s ease;
	pointer-events: none;
}

.accordion-item--active .accordion-item__bg {
	background: var(--wp--preset--color--brand-primary);
}

/* Inner content */
.accordion-item__inner {
	position: relative;
	z-index: 1;
	padding: 1.5rem 4.5rem 1.5rem 1.5rem;
}

.accordion-item__header {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.accordion-item__icon {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.accordion-item__icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* 2-part icon: overlay the detail image on top */
.accordion-item__icon--2part {
	position: relative;
}

.accordion-item__icon-detail {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 24px;
	height: auto;
}

.accordion-item__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--neutral-900);
	line-height: 32px;
}

/* Expandable body */
.accordion-item__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.accordion-item--active .accordion-item__body {
	max-height: 200px;
}

/* Editor only: keep body content visible/editable regardless of active state — .accordion-item__body--editor-preview never appears in front-end markup */
.accordion-item__body--editor-preview {
	max-height: none;
	overflow: visible;
}

.accordion-item__description {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-copy);
	color: var(--wp--preset--color--neutral-900);
	margin: 0.75rem 0 1rem;
}

/* Arrow button — sits in the bottom-right notch */
.accordion-item__arrow {
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.accordion-item__arrow-icon {
	display: block;
	width: 48px;
	height: 48px;
}

.accordion-item__arrow-icon--active {
	display: none;
}

.accordion-item--active .accordion-item__arrow-icon--inactive {
	display: none;
}

.accordion-item--active .accordion-item__arrow-icon--active {
	display: block;
}

/* Responsive */
@media (max-width: 900px) {
	.home-intro__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
}

@media (max-width: 600px) {
	.accordion-item__inner {
		padding: 1.25rem 3.5rem 1.25rem 1.25rem;
	}

	.accordion-item__icon {
		width: 48px;
		height: 48px;
	}

	.accordion-item__title {
		font-size: 1.25rem;
		line-height: 24px;
	}
}

/* image-clip-cta.css */
.supporting-workplaces {
	padding: 80px 0;
}

.supporting-workplaces__inner {
	display: flex;
	align-items: center;
	gap: 80px;
}

.supporting-workplaces__clip-svg {
	position: absolute;
	width: 0;
	height: 0;
}

.supporting-workplaces__image-wrap {
	flex-shrink: 0;
	width: 500px;
}

.supporting-workplaces__image {
	width: 100%;
	aspect-ratio: 641.271 / 485.149;
	clip-path: url(#supporting-workplaces-clip);
	overflow: hidden;
}

.supporting-workplaces__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.supporting-workplaces__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.supporting-workplaces__content h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.17;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

/* image-clip-statement.css */
.what-we-believe {
	padding: 80px 0;
}

.what-we-believe__inner {
	display: flex;
	align-items: center;
	gap: 80px;
}

.what-we-believe__clip-svg {
	position: absolute;
	width: 0;
	height: 0;
}

.what-we-believe__image-wrap {
	flex-shrink: 0;
	width: 500px;
}

.what-we-believe__image {
	width: 100%;
	aspect-ratio: 641.27 / 485.902;
	clip-path: url(#what-we-believe-clip);
	overflow: hidden;
}

.what-we-believe__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.what-we-believe__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.what-we-believe__content h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1.17;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.what-we-believe__content p {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	line-height: 1.56;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

/* listings.css */
.torii-workshop-listing__image img {
	width: 100%;
	height: auto;
}

.torii-workshop-listing__title {
	margin: var(--wp--preset--spacing--10, 0.5rem) 0 0;
}

/* logo-garden.css */
.logo-garden {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	background-color: var(--wp--preset--color--neutral-500);
	border-radius: 8px;
	padding: 1.5rem;
}

.logo-garden__viewport {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	flex: 1 0 0;
	min-width: 0;
	overflow: hidden;
}

.logo-garden__track {
	display: flex;
	width: 100%;
	transition: transform 0.3s ease;
}

.logo-garden__page {
	display: flex;
	flex: 0 0 100%;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: safe center;
	gap: 1rem;
	min-width: 0;
	max-height: 130px;
}

.logo-garden__item {
	flex: 0 0 auto;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1.5rem;
}

.logo-garden__logo {
	display: block;
	max-width: 100%;
	max-height: 40px;
	width: auto;
	height: auto;
}

.logo-garden__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 48px;
	border: none;
	background-color: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

.logo-garden__arrow:hover {
	opacity: 0.8;
}

.logo-garden__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	height: 16px;
}

.logo-garden__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--neutral-200);
	transition:
		width 0.2s ease,
		height 0.2s ease,
		background-color 0.2s ease;
}

.logo-garden__dot--active {
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--neutral-900);
}

@media (max-width: 900px) {
	.logo-garden__item {
		height: 100px;
		padding: 0 1rem;
	}

	.logo-garden__page {
		max-height: 100px;
	}
}

/* logo.css */
.logo__link {
	display: block;
	color: inherit;
}

.logo__link svg {
	display: block;
}

/* main-menu.css */
.torii-main-menu {
	position: relative;
	z-index: 2;
}

.torii-main-menu__bar {
	display: none;
}

@media (min-width: 768px) {
	.torii-main-menu__bar {
		display: flex;
		align-items: center;
		gap: 8px;
		background-color: var(--wp--preset--color--white);
		border-radius: 50px;
		padding: 6px 8px;
		margin-right: 24px;
	}
}

.torii-main-menu__bar .torii-main-menu__list {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.torii-main-menu__bar .torii-main-menu__item {
	position: relative;
}

.torii-main-menu__hamburger {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--neutral-900);
	border: none;
	box-shadow: none;
	cursor: pointer;
	margin-right: 16px;
}

.torii-main-menu__hamburger:hover,
.torii-main-menu__hamburger:focus {
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
	outline: none;
}

@media (min-width: 768px) {
	.torii-main-menu__hamburger {
		display: none;
	}
}

/*
 * Forced mobile mode: applied by JS (assets/js/components/main-menu.js) when
 * the logo + desktop bar don't actually fit side by side, regardless of the
 * 768px breakpoint above. The bar is kept in the layout (display: flex) but
 * pulled out of flow and hidden, rather than display: none, so its natural
 * width stays measurable for the next resize check.
 */
.torii-main-menu--force-mobile .torii-main-menu__bar {
	display: flex !important;
	position: absolute;
	top: 0;
	left: 0;
	visibility: hidden;
	pointer-events: none;
}

.torii-main-menu--force-mobile .torii-main-menu__hamburger {
	display: flex !important;
}

.torii-main-menu__mobile {
	display: none;
}

.torii-main-menu__mobile.torii-main-menu--open {
	display: flex;
	flex-direction: column;
	position: fixed;
	inset: 0;
	z-index: 3;
	background: var(--wp--preset--color--neutral-900);
	overflow-y: auto;
	padding: 16px;
	border-bottom-left-radius: 24px;
}

@media (min-width: 768px) {
	.torii-main-menu:not(.torii-main-menu--force-mobile)
		.torii-main-menu__mobile.torii-main-menu--open {
		display: none;
	}
}

.torii-main-menu__close {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-end;
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--neutral-900);
	border: none;
	box-shadow: none;
	cursor: pointer;
	margin-bottom: 24px;
}

.torii-main-menu__close:hover,
.torii-main-menu__close:focus {
	background: var(--wp--preset--color--neutral-200);
	outline: none;
}

.torii-mobile-nav {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 0 16px;
}

.torii-mobile-nav__section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.torii-mobile-nav__heading {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 30px;
	line-height: 32px;
	color: var(--wp--preset--color--white);
	margin: 0;
	text-decoration: none;
	display: block;
}

a.torii-mobile-nav__heading--link:hover,
a.torii-mobile-nav__heading--link:focus {
	color: var(--wp--preset--color--brand-primary);
	outline: none;
}

.torii-mobile-nav__sub-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.torii-mobile-nav__sub-link {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--wp--preset--color--white);
	text-decoration: none;
	display: block;
}

.torii-mobile-nav__sub-link:hover,
.torii-mobile-nav__sub-link:focus {
	color: var(--wp--preset--color--brand-primary);
	outline: none;
}

.torii-mobile-nav__sub-link--current {
	font-weight: 600;
}

.torii-mobile-nav__divider {
	border: none;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	margin: 0;
}

.torii-mobile-nav__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-top: 8px;
}

.torii-mobile-nav__footer .torii-country-select-dropdown {
	width: 100%;
}

.torii-mobile-nav__footer .torii-country-select-dropdown__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.torii-mobile-nav__footer .torii-country-select-dropdown:has([aria-expanded='true']) {
	border: 2px solid var(--wp--preset--color--brand-primary);
}

.torii-mobile-nav__footer .torii-country-select-dropdown__trigger[aria-expanded='true'] {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--neutral-900);
}

.torii-mobile-nav__footer .torii-country-select-dropdown__list {
	border: 2px solid var(--wp--preset--color--brand-primary);
	border-top: none;
}

.torii-mobile-nav__logo {
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--neutral-900);
	padding: 16px 16px 10px 0;
}

.torii-mobile-nav__logo::before {
	content: '';
	position: absolute;
	left: -49px;
	top: 0;
	width: 50px;
	height: 77px;
	background: var(--wp--preset--color--white);
	clip-path: path('M 50 0 C 42 0 33 7 31 17 L 15 62 C 13 70 6 77 0 77 L 50 77 Z');
}

.torii-main-menu__link {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 24px;
	border-radius: 51.5px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--neutral-900);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	text-decoration: none;
	white-space: nowrap;
}

.torii-main-menu__link:hover,
.torii-main-menu__link:focus {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--neutral-900);
	outline: none;
}

.torii-main-menu__link--current {
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
}

.torii-main-menu__link--current:hover,
.torii-main-menu__link--current:focus {
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
}

.torii-main-menu__bar .torii-main-menu__sub-list {
	position: absolute;
	top: 0;
	left: 0;
	list-style: none;
	margin: 0;
	padding: 58px 0 16px;
	background: linear-gradient(to bottom, transparent 42px, var(--wp--preset--color--white) 42px);
	border-radius: 20px;
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.torii-main-menu__bar .torii-main-menu__item--has-children:hover .torii-main-menu__sub-list,
.torii-main-menu__bar .torii-main-menu__item--has-children:focus-within .torii-main-menu__sub-list {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.torii-main-menu__bar .torii-main-menu__item--has-children:hover > .torii-main-menu__link,
.torii-main-menu__bar .torii-main-menu__item--has-children:focus-within > .torii-main-menu__link {
	background: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--neutral-900);
}

.torii-main-menu__sub-link {
	display: block;
	padding: 8px 16px;
	color: var(--wp--preset--color--neutral-900);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	text-decoration: none;
	white-space: nowrap;
}

.torii-main-menu__sub-link:hover,
.torii-main-menu__sub-link:focus {
	background: var(--wp--preset--color--neutral-500);
	outline: none;
}

.torii-main-menu__sub-link--current {
	font-weight: 600;
}

/* newsletter-form.css */
.newsletter-form-panel {
	padding: 48px;
	background-color: var(--wp--preset--color--neutral-200);
	border-radius: 24px;
}

.newsletter-form-panel h2 {
	margin-bottom: 24px;
}

@media (max-width: 700px) {
	.newsletter-form-panel {
		padding: 24px;
	}
}

.newsletter-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 614px;
}

/* ---------------------------------------------------------------------------
   Zoho Campaigns web-optin embed — the embed's markup/ids are copied
   verbatim from Zoho (see the plugin's `newsletter_embed_code` option), so
   these selectors target Zoho's own classes/structure rather than our own
   BEM markup. The embed's manual `<br>` spacing and empty logo/heading
   placeholders are suppressed in favour of layout driven by this stylesheet.
   --------------------------------------------------------------------------- */

/* stylelint-disable selector-class-pattern, selector-id-pattern -- these
   target Zoho's own class/id names verbatim, not ours to rename */

.newsletter-form #customForm,
.newsletter-form .large_form_1_css {
	width: 100%;
}

.newsletter-form br,
.newsletter-form #imgBlock,
.newsletter-form #SIGNUP_HEADING:empty,
.newsletter-form #SIGNUP_DESCRIPTION:empty {
	display: none;
}

.newsletter-form .zcsffieldsdiv > div {
	margin-bottom: 16px;
}

.newsletter-form .zcsffieldsdiv > div:last-child {
	margin-bottom: 0;
}

.newsletter-form .zcinputbox input {
	display: block;
	width: 100%;
	height: 48px;
	padding: 12px 16px;
	background-color: var(--wp--preset--color--white);
	border: 2px solid transparent;
	border-radius: 8px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 400;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-grey);
	outline: none;
	transition:
		border-color 0.15s ease,
		color 0.15s ease;
	box-sizing: border-box;
}

.newsletter-form .zcinputbox input::placeholder {
	color: var(--wp--preset--color--neutral-grey);
	font-weight: 400;
}

.newsletter-form .zcinputbox input:focus {
	border-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--neutral-900);
}

.newsletter-form input[name='SIGNUP_SUBMIT_BUTTON'] {
	display: flex;
	height: 40px;
	margin-top: 15px;
	padding: 0 24px;
	align-items: center;
	justify-content: flex-start;
	border-radius: 50px;
	background: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 24px;
	border: none;
	cursor: pointer;
	transition: padding-right 0.3s ease;
}

.newsletter-form input[name='SIGNUP_SUBMIT_BUTTON']:hover {
	padding-right: 32px;
}

.newsletter-form input[name='SIGNUP_SUBMIT_BUTTON']:focus-visible {
	outline: 2px solid var(--wp--preset--color--neutral-grey);
	outline-offset: 2px;
}

/* stylelint-enable selector-class-pattern, selector-id-pattern */

/* pagination.css */
.pagination__track {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 56px;
	padding: 8px;
	background-color: var(--wp--preset--color--neutral-200);
	border-radius: 96px;
	width: fit-content;
}

.pagination__pages {
	display: flex;
	align-items: center;
	gap: 8px;
}

.pagination__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 48px;
	border: none;
	background-color: var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--neutral-900);
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
	padding: 0;
	text-decoration: none;
}

.pagination__arrow:hover {
	background-color: var(--wp--preset--color--brand-primary);
}

.pagination__arrow:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.pagination__page {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 52px;
	border: none;
	background-color: var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--neutral-900);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 500;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
	padding: 0 24px;
	line-height: 1;
	text-decoration: none;
}

.pagination__page:hover {
	background-color: var(--wp--preset--color--brand-primary);
	color: var(--wp--preset--color--neutral-900);
}

.pagination__page--active {
	background-color: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
}

.pagination__page--active:hover {
	background-color: var(--wp--preset--color--neutral-900);
}

.wp-block-torii-pagination .pagination {
	display: block;
	width: 100%;
}

.wp-block-torii-pagination .pagination__track {
	width: 100%;
}

.wp-block-torii-pagination .pagination__pages {
	flex: 1;
	justify-content: center;
}

.pagination__ellipsis {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--wp--preset--color--neutral-900);
	padding: 0 24px;
}

/* photo-callout.css */
.photo-callout {
	position: relative;
}

.photo-callout__image {
	width: 100%;
	max-width: none !important;
	height: 538px;
	overflow: hidden;
	border-radius: 0 20px 20px 20px;
	-webkit-mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='518.93' height='193.48'%3E%3Cpath d='M0,0 L518.93,0 C507.83,0 498.83,8.96 498.83,20 L498.83,153.52 C498.83,164.54 489.87,173.53 478.75,173.53 L19.99,173.53 C8.62,173.53 0,182.48 0,193.48 Z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size:
		100% 100%,
		518.93px 193.48px;
	-webkit-mask-position:
		0 0,
		0 0;
	-webkit-mask-composite: destination-out;
	mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='518.93' height='193.48'%3E%3Cpath d='M0,0 L518.93,0 C507.83,0 498.83,8.96 498.83,20 L498.83,153.52 C498.83,164.54 489.87,173.53 478.75,173.53 L19.99,173.53 C8.62,173.53 0,182.48 0,193.48 Z' fill='%23fff'/%3E%3C/svg%3E");
	mask-repeat: no-repeat, no-repeat;
	mask-size:
		100% 100%,
		518.93px 193.48px;
	mask-position:
		0 0,
		0 0;
	mask-composite: subtract;
}

.photo-callout__image .wp-block-image {
	width: 100%;
	height: 100%;
	margin: 0;
}

.photo-callout__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	display: block;
}

.photo-callout__text {
	position: absolute;
	top: 0;
	left: 0;
	width: 518.93px;
	height: 193.48px;
	max-width: calc(100% - 24px);
	padding: 20px 56px 24px 40px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-start;
}

.photo-callout__text p {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 1.45;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

/* Mobile breakpoint (max-width: 600px) per assets/css/components/base.css */
@media (max-width: 600px) {
	.photo-callout__text {
		padding: 12px 24px 16px 20px;
	}
}

/* programme-info.css */
.programme-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
}

.programme-info__label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 32px;
	color: var(--wp--preset--color--neutral-900);
	text-align: left;
	margin: 0;
}

.programme-info__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.programme-info__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 24px;
	background-color: var(--wp--preset--color--brand-secondary);
}

.programme-info__icon--photo {
	background-color: transparent;
	overflow: hidden;
}

.programme-info__icon--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.programme-info__text {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	line-height: 32px;
	color: var(--wp--preset--color--neutral-900);
	text-align: left;
	margin: 0;
}

.programme-info.post-meta {
	margin-block-start: var(--wp--preset--spacing--5);
}

/* skills-boosters.css */
/* Skills Booster cards */

.skills-card {
	border-radius: 15px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.skills-card:hover,
.skills-card:focus-within,
.skills-card.is-selected {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(42, 38, 55, 0.12);
}

.skills-card--white {
	background-color: #fff;
	transition:
		background-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.skills-card--white:hover,
.skills-card--white:focus-within,
.skills-card--white.is-selected {
	background-color: #d0e995;
}

.skills-card__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 14px 0 10px;
	border-radius: 51.5px;
	align-self: flex-start;
	background-color: #b9bdff;
}

.skills-card--white:hover .skills-card__tag,
.skills-card--white:focus-within .skills-card__tag,
.skills-card--white.is-selected .skills-card__tag {
	background-color: #fff;
}

.skills-card__tag--orange {
	background-color: #ff956f;
}

.skills-card__tag--green {
	background-color: #d0e995;
}

.skills-card__tag-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.skills-card__tag-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #2a2637;
}

.skills-card__content {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.skills-card__title-link,
.skills-card__title-link:hover {
	text-decoration: none;
	color: inherit;
}

.skills-card__title {
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 26px;
	color: #2a2637;
	margin: 0;
}

.skills-card__description {
	font-size: 1rem;
	font-weight: 400;
	line-height: 24px;
	color: #2a2637;
	margin: 0;
}

.skills-card__cta {
	display: flex;
	align-items: center;
	gap: 12px;
}

.skills-card__divider {
	border: none;
	border-top: 1px solid rgba(42, 38, 55, 0.15);
	margin: 0;
}

.skills-card__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.skills-card__meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.skills-card__meta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.skills-card__meta-label {
	font-size: 0.875rem;
	font-weight: 700;
	color: #2a2637;
	width: 70px;
	flex-shrink: 0;
}

.skills-card__meta-value {
	font-size: 0.875rem;
	font-weight: 400;
	color: #2a2637;
}

/* Replay video modal — styled to match the skills-card design (white,
   rounded, dark pill/circle accents) rather than a generic dialog box */

/* No position override below — dialog:modal is already position: fixed via
   the UA stylesheet, which is what centers it; that's also a valid
   containing block for the absolutely-positioned close button. */
.skills-card__youtube-modal {
	width: 100%;
	max-width: 700px;
	padding: 24px;
	border: none;
	border-radius: 15px;
	background-color: #fff;
	box-shadow: 0 8px 24px rgba(42, 38, 55, 0.12);

	/* Override the dialog UA default of overflow: auto, which would
	   otherwise turn the negatively-offset close button into scrollable
	   content instead of letting it render visibly outside the box. */
	overflow: visible;
}

.skills-card__youtube-modal::backdrop {
	background: rgba(42, 38, 55, 0.7);
}

.skills-card__youtube-modal-close {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -16px;
	right: -16px;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: none;
	border-radius: 50%;
	background-color: #2a2637;
	color: #fff;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.skills-card__youtube-modal-close:hover {
	opacity: 0.85;
}

.skills-card__youtube-modal-video {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 10px;
}

.skills-card__youtube-modal-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* API configuration error */

.torii-skills-boosters__api-error {
	background: #fff2cd;
	border: 1px solid #ffeaa7;
	border-radius: 4px;
	padding: 20px;
	margin: 20px 0;
	text-align: center;
}

.torii-skills-boosters__api-error p {
	margin: 0;
	color: #856404;
	font-size: 16px;
	line-height: 1.5;
}

.torii-skills-boosters__api-error a {
	color: #0073aa;
	text-decoration: underline;
}

.torii-skills-boosters__api-error a:hover {
	color: #005177;
}

/* Webinar detail */

.torii-webinar-detail__breadcrumb {
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
}

.torii-webinar-detail__meta-bar {
	margin-top: var(--wp--preset--spacing--30, 1.25rem);
}

.torii-webinar-detail__meta-bar .sec-card__tags {
	flex-basis: 100%;
}

.torii-webinar-detail__main {
	margin-top: var(--wp--preset--spacing--30, 1.25rem);
}

.torii-webinar-detail__description {
	font-weight: 600;
}

.torii-webinar-detail__actions {
	margin-top: var(--wp--preset--spacing--30, 1.25rem);
}

/* social-links.css */
.torii-social-links {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.torii-social-links__link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.torii-social-links__link:hover,
.torii-social-links__link:focus {
	color: var(--wp--preset--color--brand-primary);
	outline: none;
}

.torii-social-links__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 32px;
}

.torii-social-links__icon svg {
	width: auto;
	height: 100%;
	fill: currentcolor;
}

/* stat-cards.css */
.stat-card {
	position: relative;
	width: 408px;
	max-width: 100%;
	flex-shrink: 0;
}

.stat-card--v4 {
	height: 204px;
}

.stat-card--v5 {
	height: 220px;
}

.stat-card--v6 {
	height: 236px;
	margin-top: 0;
}

.stat-card__shape {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.stat-pair .stat-card--v4 {
	background-image: url(../../images/stat-card-shape-v4.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.stat-pair .stat-card--v5 {
	background-image: url(../../images/stat-card-shape-v5.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.stat-pair .stat-card--v6 {
	background-image: url(../../images/stat-card-shape-v6.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/*
 * Below the SVG shapes' native 408px width, .stat-card (width:408px;
 * max-width:100%) is being scaled down by its container rather than
 * rendered at full size — the shapes' notches then sit at the wrong
 * proportion of the available space for the fixed-px text on top of them
 * (e.g. .stat-card__logo). Swap to a plain rounded rectangle instead of
 * scaling the notched SVG, which also removes the notch's dead zone so
 * long text (e.g. .stat-card__logo) has the full card width to sit in.
 */
@container (max-width: 407.98px) {
	.stat-pair .stat-card--v4,
	.stat-pair .stat-card--v5,
	.stat-pair .stat-card--v6 {
		background-image: none;
		background-color: var(--wp--preset--color--brand-primary, #b9bdff);
		border-radius: 20px;
	}
}

.stat-pair .stat-card__number-wrap {
	position: absolute;
	left: 16px;
	top: 16px;
	width: 304px;
}

.stat-pair .stat-card__number-wrap--v5 {
	left: 16px;
	top: 16px;
	width: 256px;
}

.stat-card__number {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 3.375rem;
	line-height: 48px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.stat-pair .stat-card__caption {
	position: absolute;
	left: 140px;
	top: 145px;
	width: 268px;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.stat-pair .stat-card__caption--v5 {
	top: 161px;
}

/*
 * .stat-card__number-wrap stays absolute (top:16px/left:16px), so this
 * clears it with a fixed top margin rather than sitting in normal flow
 * right below it. Must come after the base .stat-pair .stat-card__caption
 * rule above — equal specificity, so source order decides the winner and
 * an earlier @container block loses the tie even when it matches.
 */
@container (max-width: 407.98px) {
	.stat-pair .stat-card__caption {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		max-width: calc(100% - 32px);
		margin: 80px 16px 16px;
		text-align: left;
	}
}

.stat-card__logo {
	position: absolute;
	left: 24px;
	top: 22px;
	max-width: calc(100% - 48px);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

/*
 * .stat-card--v5/v6 cut a notch out of the shape's top-right area (see
 * stat-card-shape-v5.svg / stat-card-shape-v6.svg) — the shape's top edge
 * stays flat until x≈162 of its 408-wide viewBox, then angles away. Above
 * that, .stat-card__logo needs a tighter cap so long text stops before the
 * notch instead of running over the angled edge into transparent space.
 * Below it, the shape switches to a plain rectangle (see the
 * @container (max-width: 407.98px) rule above) so the wider fallback
 * max-width applies instead.
 */
@container (min-width: 408px) {
	.stat-pair .stat-card--v5 .stat-card__logo,
	.stat-pair .stat-card--v6 .stat-card__logo {
		max-width: 130px;
	}
}

.stat-card__quote-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 174px;
	box-sizing: border-box;
	padding: 24px 32px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
}

.stat-card__quote {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: 1rem;
	line-height: 26px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.stat-card__attribution {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 1rem;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

/* success-stories.css */
.success-stories {
	padding: 4rem 0;
}

.success-stories__heading {
	margin-bottom: 1.5rem;
	font-size: var(--wp--preset--font-size--heading-4);
	line-height: 32px;
}

.success-stories .success-stories__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2rem;
}

.success-stories__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

/* Overrides core's `.wp-block-separator:not(.is-style-wide):not(.is-style-dots)`
   width restriction (specificity 0,0,3,0), and the `.is-layout-constrained > :where(...)`
   auto-margin/max-width centring below — both need !important since the layout-constrained
   rule itself sets margins with !important. */
.success-stories__item .success-stories__divider {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 0.5rem !important;
	border: none;
	border-top: 1px solid var(--wp--preset--color--neutral-200);
}

/* Core's `.is-layout-constrained > :where(...)` centres every direct child of a
   constrained group (each success-stories__item) with `!important` auto margins and
   a capped max-width — override so the column content stays left-aligned and full-width. */
.success-stories .success-stories__item > * {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.success-stories__logo {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 28px;
	color: var(--wp--preset--color--neutral-900);
}

.success-stories__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-copy);
	line-height: 28px;
	color: var(--wp--preset--color--neutral-900);
}

@media (max-width: 768px) {
	.success-stories .success-stories__grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}
}

.stat-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}

.stat-row__number {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 62px;
	line-height: 64px;
	letter-spacing: -1px;
	color: var(--wp--preset--color--neutral-900);
}

.stat-row__caption {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.3;
	color: var(--wp--preset--color--neutral-900);
}

.stat-row__icon {
	flex-shrink: 0;
	max-width: 48px;
	height: auto;
}

@media (max-width: 768px) {
	.stat-row__number {
		font-size: 48px;
		line-height: 52px;
	}
}

/* team-members.css */
.torii-team-members__position {
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--neutral-900);
}

/* Single team-member page (templates/single-team-members.html) — see patterns/team-member-hero.php. */

.team-member-hero__position {
	margin: 12px 0 0;
	max-width: 480px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 500;
}

/* Matches .torii-webinar-detail__breadcrumb / __main in skills-boosters.css */

.team-member-detail__description {
	font-weight: 600;
}

.team-member-detail__breadcrumb {
	margin-top: var(--wp--preset--spacing--30, 1.25rem);
}

.team-member-detail__main {
	margin-top: var(--wp--preset--spacing--30, 1.25rem);
}

.team-member-detail__website {
	margin-top: 24px;
}

/* testimonials.css */
.testimonial {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
	width: 100%;
	max-width: 680px;
	text-align: center;
	margin: 0 auto;
}

.testimonial__quote-icon {
	display: flex;
}

.testimonial__quote {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 32px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.testimonial__author {
	font-family: var(--wp--preset--font-family--body);
	margin: 0;
}

a.testimonial__author {
	text-decoration: none;
}

.testimonial__name {
	display: block;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-900);
}

.testimonial__role {
	display: block;
	font-size: 1.125rem;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-900);
}

a.testimonial__author .testimonial__name,
a.testimonial__author .testimonial__role {
	color: var(--wp--preset--color--brand-primary);
	transition: color 0.2s ease;
}

a.testimonial__author:hover .testimonial__name,
a.testimonial__author:hover .testimonial__role,
a.testimonial__author:focus .testimonial__name,
a.testimonial__author:focus .testimonial__role {
	color: var(--wp--preset--color--brand-accent);
	outline: none;
}

.testimonial-carousel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
}

.testimonial-carousel__slides {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	flex: 1 0 0;
	min-width: 0;
	position: relative;
}

.testimonial--carousel {
	display: none;
}

.testimonial--carousel.is-active {
	display: flex;
	justify-content: center;
	min-height: var(--testimonial-min-height, auto);
}

/* Temporarily forces every slide to render (off-screen, invisible) so JS can
   measure natural heights, including the hidden ones — see testimonials.js. */
.testimonial-carousel--measuring .testimonial--carousel {
	display: flex !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	visibility: hidden;
	pointer-events: none;
}

.testimonial-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 48px;
	border: none;
	background-color: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

.testimonial-carousel__arrow:hover {
	opacity: 0.8;
}

.testimonial-carousel__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	height: 16px;
}

.testimonial-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--neutral-200);
	transition:
		width 0.2s ease,
		height 0.2s ease,
		background-color 0.2s ease;
}

.testimonial-carousel__dot--active {
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--neutral-900);
}

/* workshop-listing.css */
.sec-card {
	--sec-card-radius: 15px;
	border-radius: var(--sec-card-radius);
	padding: 24px 24px 32px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	background-color: var(--wp--preset--color--white);
	transition:
		background-color 0.2s ease,
		transform 0.2s ease,
		box-shadow 0.2s ease;
	list-style: none;
}

.sec-card:hover,
.sec-card:focus-within,
.sec-card.is-selected {
	background-color: var(--wp--preset--color--brand-secondary);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(42, 38, 55, 0.12);
}

.sec-card__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding: 0 14px 0 10px;
	border-radius: 51.5px;
	align-self: flex-start;
	background-color: var(--wp--preset--color--neutral-200);
	color: var(--wp--preset--color--neutral-900);
}

.sec-card__tag--purple {
	background-color: var(--wp--preset--color--brand-primary);
}

.sec-card__tag--green {
	background-color: var(--wp--preset--color--brand-secondary);
}

.sec-card__tag--orange {
	background-color: var(--wp--preset--color--brand-accent);
}

.sec-card__tag--beige {
	background-color: var(--wp--preset--color--neutral-100);
}

.sec-card__tag--white {
	background-color: var(--wp--preset--color--white);
}

.sec-card__tag--off-black {
	background-color: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
}

.sec-card:hover .sec-card__tag,
.sec-card:focus-within .sec-card__tag,
.sec-card.is-selected .sec-card__tag {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--neutral-900);
}

.sec-card__tag-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	object-fit: contain;
}

.sec-card__tag-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 500;
}

.sec-card__content {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sec-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 26px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.sec-card__title a {
	color: inherit;
	text-decoration: none;
}

.sec-card__description {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.sec-card__divider {
	border: none;
	border-top: 1px solid rgba(42, 38, 55, 0.15);
	margin: 0;
}

.sec-card__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sec-card__meta-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sec-card__meta-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}

.sec-card__meta-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--neutral-900);
	width: 90px;
	flex-shrink: 0;
}

.sec-card__meta-value {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 400;
	color: var(--wp--preset--color--neutral-900);
}

.sec-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* workshop-options.css */
.workshop-options-row {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.workshop-options {
	width: 100%;
	background-color: var(--wp--preset--color--neutral-200);
	border-radius: 24px;
	padding: 48px;
}

.workshop-options__intro h2 {
	margin: 0 0 16px;
}

.workshop-options__intro p {
	margin: 0;
}

.workshop-options__label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--neutral-900);
	margin: 24px 0 0;
}

.workshop-table {
	margin-top: 16px;
	border-top: 1px solid rgba(42, 38, 55, 0.15);
}

.workshop-table__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	padding: 13px 0;
	margin-top: 0;
	border-bottom: 1px solid rgba(42, 38, 55, 0.15);
}

.workshop-table__row:last-of-type {
	padding-bottom: 0;
	border-bottom: none;
}

.workshop-table__label {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 153px;
	flex-shrink: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.workshop-table__values {
	display: flex;
	flex-wrap: wrap;
	flex: 1 1 auto;
	gap: 16px 32px;
}

.workshop-table__value {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

@media (max-width: 700px) {
	.workshop-options {
		padding: 24px;
	}

	.workshop-table__label {
		width: 100%;
	}
}

/* workshop-product-intro.css */
.product-intro__intro {
	align-items: flex-start;
	text-align: left;
}

/* Beat core's .is-layout-constrained > :where(...) margin-left/right: auto !important,
   which otherwise centres any child narrower than the content-size — auto margins on a
   flex item win over align-items regardless of what's set above. */
.product-intro__intro.is-layout-constrained
	> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.product-intro__divider {
	margin: 40px 0;
}

.product-intro__options-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.product-intro__options-row h2 {
	margin: 0;
	text-align: left;
}

.product-intro__see-all {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--neutral-900);
	white-space: nowrap;
	margin: 0;
}

.product-intro__see-all a {
	color: var(--wp--preset--color--neutral-900);
}

/* workshop-quotations.css */
.workshop-quotation {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
	width: 100%;
	max-width: 680px;
	text-align: center;
	margin: 0 auto;
}

.workshop-quotation__text {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 1.375rem;
	line-height: 32px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.workshop-quotation__attribution {
	font-family: var(--wp--preset--font-family--body);
	margin: 0;
}

.workshop-quotation__name {
	display: block;
	font-style: normal;
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-900);
}

.workshop-quotation__role {
	display: block;
	font-size: 1.125rem;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-900);
}

.workshop-quotation-carousel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
}

.workshop-quotation-carousel__slides {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2.5rem;
	flex: 1 0 0;
	min-width: 0;
	position: relative;
}

.workshop-quotation--carousel {
	display: none;
}

.workshop-quotation--carousel.is-active {
	display: flex;
	justify-content: center;
	min-height: var(--workshop-quotation-min-height, auto);
}

/* Temporarily forces every slide to render (off-screen, invisible) so JS can
   measure natural heights, including the hidden ones — see workshop-quotations.js. */
.workshop-quotation-carousel--measuring .workshop-quotation--carousel {
	display: flex !important;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	visibility: hidden;
	pointer-events: none;
}

.workshop-quotation-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 48px;
	border: none;
	background-color: var(--wp--preset--color--neutral-900);
	color: var(--wp--preset--color--white);
	cursor: pointer;
}

.workshop-quotation-carousel__arrow:hover {
	opacity: 0.8;
}

.workshop-quotation-carousel__pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	height: 16px;
}

.workshop-quotation-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--neutral-200);
	transition:
		width 0.2s ease,
		height 0.2s ease,
		background-color 0.2s ease;
}

.workshop-quotation-carousel__dot--active {
	width: 16px;
	height: 16px;
	background-color: var(--wp--preset--color--neutral-900);
}

/* workshop-section-break-out.css */
.wp-block-group.workshop-section-break-out {
	padding-block: 48px;

	/* This section is nested several "layout: constrained" groups deep
	   (main > post-content > workshop-tab-section), each of which clamps
	   and re-centers its non-alignfull children to the content width. WP
	   core's nested-alignfull breakout only cancels one ancestor's padding,
	   it can't escape a max-width clamp several levels up — so the usual
	   alignfull handling leaves this stuck at the content width. Break out
	   to the true viewport edges directly instead. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* workshop-text-component.css */
.text-component {
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--wp--preset--color--neutral-900);
}

.text-component--narrow {
	max-width: 638px;
}

.text-component > p,
.text-component > h2,
.text-component > h3,
.text-component > h4,
.text-component--narrow > p,
.text-component--narrow > h2,
.text-component--narrow > h3,
.text-component--narrow > h4 {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Tick list — core/list block style variation
   --------------------------------------------------------------------------- */

.wp-block-list.is-style-tick {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wp-block-list.is-style-tick > li {
	position: relative;
	padding-left: 32px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	line-height: 32px;
}

.wp-block-list.is-style-tick > li::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 0;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23D0E995'/%3E%3Cpath d='M6 10.3L8.7 13L14 7' stroke='%232A2637' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* ---------------------------------------------------------------------------
   Arrow list — core/list block style variation
   --------------------------------------------------------------------------- */

.wp-block-list.is-style-arrow {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wp-block-list.is-style-arrow > li {
	position: relative;
	padding-left: 32px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	line-height: 32px;
}

/* Same circle-and-arrow artwork as .topic-card__arrow
   (assets/css/components/workshop-topic-card.css), redrawn at marker
   scale — the arrow paths keep their original 26x23 coordinate space,
   translated by the same (8, 9.5) offset that centres them within the
   topic card's 42x42 circle, so shrinking the whole 42x42 viewBox down to
   20x20 here reproduces that exact icon rather than a re-eyeballed one. */
.wp-block-list.is-style-arrow > li::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 0;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 42 42' fill='none'%3E%3Ccircle cx='21' cy='21' r='21' fill='%23B9BDFF'/%3E%3Cg transform='translate(8 9.5)'%3E%3Cpath stroke='%232a2637' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%232a2637' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* ---------------------------------------------------------------------------
   Text component with image — collage (two offset photos) or single image
   --------------------------------------------------------------------------- */

.text-component--with-image {
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 68px;
}

.text-component--with-image .text-component--narrow {
	display: flex;
	flex-direction: column;
	gap: 24px;
	flex-shrink: 0;
	width: 638px;
	max-width: 100%;
}

.text-component__image-collage {
	position: relative;
	width: 452px;
	height: 452px;
	flex-shrink: 0;
}

.text-component__image {
	position: absolute;
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(42, 38, 55, 0.18);
	margin: 0;
}

.text-component__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.text-component__image--back {
	top: 0;
	left: 60px;
	width: 320px;
	height: 380px;
	z-index: 0;
}

.text-component__image--front {
	bottom: 0;
	left: 0;
	width: 320px;
	height: 380px;
	z-index: 1;
}

.text-component__image-collage--single {
	width: 377px;
	height: auto;
}

.text-component__image-collage--single .text-component__image {
	position: static;
	display: flex;
	width: 100%;
	height: auto;
}

.text-component__image-collage--single .text-component__image img {
	height: auto;
	object-fit: initial;
}

@media (max-width: 900px) {
	.text-component--with-image {
		flex-direction: column;
	}

	.text-component__image-collage {
		width: 100%;
		max-width: 452px;
		height: 380px;
		margin: 0 auto;
	}

	.text-component__image-collage--single {
		width: 100%;
		max-width: 452px;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
   Stat pair — a stat-card (see stat-cards.css) alongside a text-component
   --------------------------------------------------------------------------- */

.stat-pair {
	display: flex;
	align-items: flex-start;
	gap: 68px;
	container-type: inline-size;
}

.stat-pair > .text-component {
	flex: 1 1 auto;
	min-width: 0;
	margin-block-start: 0;
}

@media (max-width: 900px) {
	.stat-pair {
		flex-wrap: wrap;
	}
}

/* workshop-topic-card.css */
/*
 * Top-level 'topic' tag cards shown in the torii/workshops grid when no
 * filters are active (see torii_render_workshop_topic_cards() in
 * inc/workshops.php) — a bigger, simpler sibling of .sec-card (the
 * individual workshop card, styled in workshop-listing.css) rendered inside
 * the same .torii-workshop-listing grid.
 */

/* Force 2 columns (2 rows of 2) for the topic-card view specifically,
   overriding the shared 3-column .torii-workshop-listing grid from
   filter-controls.css — this file loads after it, per the alphabetical
   glob() order in functions.php. The shared 781px/599px breakpoints
   already collapse to 2 and 1 columns respectively, so no further
   overrides are needed at smaller widths. */
.torii-workshop-listing--topics {
	grid-template-columns: repeat(2, 1fr);
}

.topic-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 288px;
	padding: 24px;
	border: none;
	border-radius: 24px 24px 0 24px;
	background-color: transparent;
	text-align: left;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.topic-card::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--white);
	border-radius: 24px 24px 0 24px;
	-webkit-mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M41 11H60V60H11V41A30 30 0 0 1 41 11Z' fill='%23fff'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(0,49) rotate(180 5.5 5.5)'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(49,0) rotate(180 5.5 5.5)'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat, no-repeat;
	-webkit-mask-size:
		100% 100%,
		60px 60px;
	-webkit-mask-position:
		0 0,
		100% 100%;
	-webkit-mask-composite: destination-out;
	mask-image:
		linear-gradient(#000, #000),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M41 11H60V60H11V41A30 30 0 0 1 41 11Z' fill='%23fff'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(0,49) rotate(180 5.5 5.5)'/%3E%3Cpath d='M 0 0 L 11 0 A 11 11 0 0 0 0 11 Z' fill='%23fff' transform='translate(49,0) rotate(180 5.5 5.5)'/%3E%3C/svg%3E");
	mask-repeat: no-repeat, no-repeat;
	mask-size:
		100% 100%,
		60px 60px;
	mask-position:
		0 0,
		100% 100%;
	mask-composite: subtract;
	transition: background-color 0.2s ease;
}

.topic-card:hover,
.topic-card:focus-visible {
	transform: translateY(-4px);
}

.topic-card:hover::before,
.topic-card:focus-visible::before {
	background: var(--wp--preset--color--brand-primary);
}

/* Background colour per topic, matching the 'filter-colour' term meta also
   used for the product-tag filter pills (filter-controls.css) and the
   sec-card topic tags (workshop-listing.css). */

.topic-card--purple::before {
	background: var(--wp--preset--color--brand-primary);
}

.topic-card--green::before {
	background: var(--wp--preset--color--brand-secondary);
}

.topic-card--orange::before {
	background: var(--wp--preset--color--brand-accent);
}

.topic-card--off-black::before {
	background: var(--wp--preset--color--neutral-900);
}

.topic-card__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.topic-card__heading {
	display: flex;
	align-items: center;
	gap: 12px;
}

.topic-card__icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.topic-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.875rem;
	font-weight: 700;
	line-height: 32px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.topic-card__description {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 24px;
	color: var(--wp--preset--color--neutral-900);
	margin: 0;
}

.topic-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-right: 40px;
}

.topic-card__count {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--neutral-grey);
}

.topic-card--off-black .topic-card__title,
.topic-card--off-black .topic-card__description,
.topic-card--off-black .topic-card__count {
	color: var(--wp--preset--color--white);
}

.topic-card__arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--brand-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='23' fill='none' viewBox='0 0 26 23'%3E%3Cpath stroke='%232a2637' stroke-linecap='round' stroke-width='2' d='M1 11.032h21.96'/%3E%3Cpath stroke='%232a2637' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m14.062 1 10.095 10.032-10.033 10.095'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* "Not sure what you need help with?" CTA card — always the last item in
   the top-level grid, linking to the site's Book a Call CTA link. */

.topic-card--cta::before {
	background: var(--wp--preset--color--brand-primary);
}

.topic-card--cta:hover::before,
.topic-card--cta:focus-visible::before {
	background: var(--wp--preset--color--brand-primary);
}

/* workshops.css */
/*
 * torii/workshops-specific override — the "More filters" panel here
 * lays its groups out in a 3-column grid, unlike the flex-wrap layout used
 * by torii/skills-boosters (see assets/css/components/filter-controls.css
 * for the shared .topics-filter__more-panel base rules and everything else
 * common to all filter blocks).
 */

.torii-workshops .topics-filter__more-panel:not([hidden]) {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 599px) {
	.torii-workshops .topics-filter__more-panel:not([hidden]) {
		grid-template-columns: 1fr;
	}
}