/* -------------------------------------------------------------------------- */
/* Product Tabs                                                               */
/* -------------------------------------------------------------------------- */

/**
 * Product Tabs.
 *
 * The complete tab interface is presented as one cohesive component:
 *
 * - Tab navigation.
 * - Active tab panel.
 * - Audience benefit content.
 * - Supporting product visual.
 *
 * One subtle outer shell is used rather than placing cards or borders around
 * the individual panel elements.
 */
.thula-product-tabs {
	box-sizing: border-box;

	width: 100%;

	padding-block:
		clamp(
			var(--wp--preset--spacing--30),
			2.5vw,
			var(--wp--preset--spacing--40)
		);

	padding-inline:
		clamp(
			var(--wp--preset--spacing--30),
			3vw,
			var(--wp--preset--spacing--50)
		);

	border: 1px solid var(--wp--preset--color--medium-grey);
	border-radius: 1rem;

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


/* -------------------------------------------------------------------------- */
/* Tab Navigation                                                             */
/* -------------------------------------------------------------------------- */

/**
 * Keep the Product Tabs navigation centred across the full available width.
 */
.thula-product-tabs .wp-block-tab-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

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

	width: 100%;

	margin-inline: auto;
	margin-block-end: 0;
}


/**
 * Individual audience tabs.
 */
.thula-product-tabs .wp-block-tab-list button {
	appearance: none;

	position: relative;

	padding: 0.75rem 1.25rem;

	border: 1px solid var(--wp--preset--color--light-grey);
	border-radius: 999px;

	box-shadow: none;

	background-color: transparent;
	background-image: none;

	color: var(--wp--preset--color--thula-blue);

	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: 1.3;

	text-decoration: none;

	cursor: pointer;

	transition:
		background-color 150ms ease,
		border-color 150ms ease,
		color 150ms ease;
}


/**
 * Active audience tab.
 */
.thula-product-tabs .wp-block-tab-list button[aria-selected="true"] {
	border-color: var(--wp--preset--color--thula-blue);

	box-shadow: none;

	background-color: var(--wp--preset--color--thula-blue);

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


/**
 * Core Tabs supplies its own selected-tab indicator.
 *
 * Product Tabs use a filled active state instead, so remove the Core
 * pseudo-element to avoid an additional line appearing inside the active tab.
 */
.thula-product-tabs
	.wp-block-tab-list
	button[aria-selected="true"]::before {
	content: none !important;

	display: none !important;

	border: 0 !important;
}


/**
 * Hover state for inactive tabs.
 */
.thula-product-tabs
	.wp-block-tab-list
	button:not([aria-selected="true"]):hover {
	border-color: var(--wp--preset--color--light-teal);

	background-color: var(--wp--preset--color--lightest-teal);

	color: var(--wp--preset--color--thula-blue);
}


/**
 * Keep keyboard focus clearly visible and distinct from the selected state.
 */
.thula-product-tabs .wp-block-tab-list button:focus-visible {
	outline: 3px solid var(--wp--preset--color--thula-blue);
	outline-offset: 3px;
}


/* -------------------------------------------------------------------------- */
/* Tab Panels                                                                 */
/* -------------------------------------------------------------------------- */

/**
 * Keep the panel presentation deliberately light.
 *
 * The new Product Tabs outer shell provides the component boundary, so the
 * active panel itself remains borderless and transparent.
 */
.thula-product-tabs .wp-block-tab-panels {
	overflow: visible;

	padding-block-start: var(--wp--preset--spacing--40);

	border: 0;
	border-radius: 0;

	background: transparent;
}


.thula-product-tabs .wp-block-tab-panel {
	padding: 0;
}


/* -------------------------------------------------------------------------- */
/* Panel Layout                                                               */
/* -------------------------------------------------------------------------- */

/**
 * Each panel uses Core Columns:
 *
 * Audience benefits | Supporting visual
 *
 * The editor order is now also the desired responsive reading order:
 *
 * 1. Audience benefits.
 * 2. Supporting visual.
 *
 * Align both Columns from the top while leaving Core Columns responsible for
 * the underlying responsive structure.
 */
.thula-product-tabs__panel-layout {
	align-items: flex-start;

	margin-block: 0;
}


/**
 * Progressively balance the visual and benefit Columns as the viewport narrows.
 *
 * At 1440px and above:
 *
 * Benefits = approximately 45%
 * Visual   = approximately 55%
 *
 * At 782px:
 *
 * Benefits = approximately 50%
 * Visual   = approximately 50%
 *
 * Below 782px the dedicated stacked rules later in this stylesheet take over.
 *
 * Flex ratios are used instead of percentage widths so the existing Core
 * Columns gap is accounted for before remaining space is distributed.
 *
 * These classes must be applied directly to the relevant Core Column blocks.
 */
@media (min-width: 782px) {

	.thula-product-tabs__panel-layout {
		--thula-product-tabs-progress:
			clamp(0, calc((1440px - 100vw) / 658px), 1);
	}


	/**
	 * Supporting visual - right-hand Column.
	 */
	.thula-product-tabs__panel-layout
		> .wp-block-column.thula-product-tabs__visual {
		flex:
			calc(11 - var(--thula-product-tabs-progress))
			1
			0 !important;

		min-width: 0;
	}


	/**
	 * Audience benefits - left-hand Column.
	 */
	.thula-product-tabs__panel-layout
		> .wp-block-column.thula-product-tabs__benefit-column {
		flex:
			calc(9 + var(--thula-product-tabs-progress))
			1
			0 !important;

		min-width: 0;
	}
}


/* -------------------------------------------------------------------------- */
/* Supporting Visual                                                          */
/* -------------------------------------------------------------------------- */

/**
 * Allow the visual Column to shrink safely within the Core Columns layout.
 *
 * The visual remains aligned to the top of the neighbouring benefit content.
 */
.thula-product-tabs__visual {
	min-width: 0;
}


/**
 * Make the Core Image block fill the complete visual Column.
 *
 * Product Tabs normally use SVG/software visuals, so preserve their original
 * proportions rather than forcing a cropped aspect ratio.
 */
.thula-product-tabs__visual > .wp-block-image {
	align-self: stretch;

	width: 100% !important;
	max-width: 100%;

	margin: 0;
}


/**
 * Fill the complete Image block width while preserving the artwork's natural
 * aspect ratio.
 *
 * Software visuals should remain fully visible and readable rather than being
 * cropped to match the height of the neighbouring benefit content.
 */
.thula-product-tabs__visual > .wp-block-image img {
	display: block;

	width: 100% !important;
	max-width: 100%;
	height: auto;

	margin: 0;

	border-radius: 1rem;

	object-fit: contain;
}


/* -------------------------------------------------------------------------- */
/* Benefits                                                                   */
/* -------------------------------------------------------------------------- */

/**
 * Each benefit consists of a small icon followed by its heading and body text.
 *
 * Provide enough horizontal separation that the icon reads as a supporting
 * marker rather than becoming visually attached to the heading.
 */
.thula-product-tabs__benefit {
	align-items: flex-start;

	gap: var(--wp--preset--spacing--20);
}


/**
 * Give each benefit enough vertical separation to read as its own idea.
 */
.thula-product-tabs__benefit + .thula-product-tabs__benefit {
	margin-block-start: var(--wp--preset--spacing--50);
}


/**
 * Keep the Core Icon at its editor-selected size.
 *
 * The small vertical translation visually aligns the icon with the first line
 * of the benefit heading without overriding the SVG dimensions.
 */
.thula-product-tabs__benefit > .thula-product-tabs__benefit-icon {
	flex: 0 0 auto;
	align-self: flex-start;

	margin: 0;

	transform: translateY(-0.7em);
}


/**
 * Allow the benefit text to shrink safely beside its icon.
 */
.thula-product-tabs__benefit-content {
	flex: 1 1 auto;

	min-width: 0;
}


.thula-product-tabs__benefit-content h3 {
	margin-block-start: 0;
	margin-block-end: 0.3em;

	color: var(--wp--preset--color--thula-blue);

	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	line-height: 1.3;
}


/**
 * Use the site's normal body-text colour.
 */
.thula-product-tabs__benefit-content p {
	margin: 0;

	color: inherit;
}


/* -------------------------------------------------------------------------- */
/* Stacked Layout                                                             */
/* -------------------------------------------------------------------------- */

@media (max-width: 781px) {

	/**
	 * Slightly tighten the complete Tabs shell as horizontal space reduces.
	 */
	.thula-product-tabs {
		padding-block: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--preset--spacing--30);

		border-radius: 0.875rem;
	}


	/**
	 * Do not allow an editor-defined Core Columns gap to interfere with the
	 * deliberate stacked spacing below.
	 */
	.thula-product-tabs__panel-layout {
		gap: 0 !important;
	}


	/**
	 * Remove the Desktop flex ratios once the Columns stack.
	 *
	 * Both Columns now occupy the complete available width.
	 */
	.thula-product-tabs__panel-layout
		> .wp-block-column {
		flex: 1 1 100% !important;

		width: 100% !important;
		min-width: 0;
	}


	/**
	 * The editor order is now:
	 *
	 * 1. Audience benefits.
	 * 2. Supporting visual.
	 *
	 * Add one deliberate vertical gap between those stacked Columns.
	 */
	.thula-product-tabs__panel-layout
		> .wp-block-column
		+ .wp-block-column {
		margin-block-start: var(--wp--preset--spacing--50);
	}
}


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

@media (max-width: 480px) {

	/**
	 * Keep the rounded component shell while reducing its internal padding on
	 * smaller screens.
	 */
	.thula-product-tabs {
		padding-block: var(--wp--preset--spacing--30);
		padding-inline: var(--wp--preset--spacing--20);

		border-radius: 0.75rem;
	}


	/**
	 * Reduce the navigation-to-panel gap slightly on Mobile.
	 */
	.thula-product-tabs .wp-block-tab-panels {
		padding-block-start: var(--wp--preset--spacing--30);
	}


	/**
	 * Stack audience tabs vertically so each remains comfortably readable and
	 * provides a generous touch target.
	 */
	.thula-product-tabs .wp-block-tab-list {
		flex-direction: column;
		align-items: stretch;
	}


	.thula-product-tabs .wp-block-tab-list button {
		width: 100%;

		text-align: center;
	}


	/**
	 * Keep the writing-to-visual stack comfortably separated.
	 */
	.thula-product-tabs__panel-layout
		> .wp-block-column
		+ .wp-block-column {
		margin-block-start: var(--wp--preset--spacing--40);
	}


	/**
	 * Keep benefit items clearly separated on Mobile without adding additional
	 * internal padding between them.
	 */
	.thula-product-tabs__benefit + .thula-product-tabs__benefit {
		margin-block-start: var(--wp--preset--spacing--40);
	}
}