/**
 * Tabs — a heading over a vertical tab list, with the selected tab's panel beside it.
 *
 * Every panel sits in the same grid cell; JazzyTabs hides all but the selected one. A hidden panel
 * stays rendered but invisible so switching can crossfade, which also sizes the cell to the tallest
 * panel — the list doesn't jump as tabs change. `visibility` keeps hidden panels out of the
 * accessibility tree and the tab order. Below 950 the list stacks above the panel rather than
 * turning into an accordion or a scrolling strip, so the markup and the vertical arrow keys the
 * tablist announces stay true at every width.
 */

/*** Module: Tabs ***/

.module.tabs {
	--texture-fade: 90%;
	--texture-opacity: 0.08;
}

.module.tabs.textured {
	padding-bottom: var(--module-spacing-large);
}

.module.tabs .container {
	row-gap: 0;
}

.module.tabs .container > :is(h1, h2, h3, h4, h5, h6) {
	grid-column: 1 / span 11;
}

.module.tabs .interface {
	align-items: start;
	grid-column: 1 / -1;
}

.module.tabs .container > * + .interface {
	margin-top: var(--module-spacing-medium);
}

/** Tab list **/

.module.tabs .list {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	gap: var(--text-spacing-small);
	grid-column: 1 / span 4;
	grid-row: 1;
}

.module.tabs .tab {
	background: none;
	border: 0;
	color: var(--slate);
	padding: 0;
	position: relative;
	text-align: left;
}

.module.tabs .tab:hover {
	color: var(--white);
}

.module.tabs .tab.is-active {
	color: var(--white);
	font-weight: 700;
}

.module.tabs .tab::before {
	background: var(--cyan);
	content: '';
	height: 8px;
	opacity: 0;
	position: absolute;
	right: calc(100% + 12px);
	top: calc((1lh - 8px) / 2);
	transition: opacity .25s ease;
	width: 8px;
}

.module.tabs .tab.is-active::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

	.module.tabs .tab::before {
		transition: none;
	}

}

/** Panel **/

.module.tabs .panel {
	grid-column: 6 / span 6;
	grid-row: 1;
	margin-left: calc(var(--gap) * -1);
}

.module.tabs .panel[hidden] {
	display: block;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {

	.module.tabs .panel {
		transition: opacity .35s ease .15s, visibility 0s linear 0s;
	}

	.module.tabs .panel[hidden] {
		transition: opacity .25s ease, visibility 0s linear .25s;
	}

}

.module.tabs .panel > * + * {
	margin-top: var(--text-spacing-xsmall);
}

.module.tabs .panel > * + .logos {
	margin-top: var(--text-spacing-large);
}

.module.tabs .description,
.module.tabs .description p {
	color: var(--white);
	font-weight: 400;
}

.module.tabs .description :is(strong, b) {
	font-weight: 500;
}

.module.tabs .description > :first-child {
	margin-top: 0;
}

.module.tabs .description > :last-child {
	margin-bottom: 0;
}

.module.tabs .logos {
	align-items: center;
	gap: var(--text-spacing-small) var(--gap);
	justify-content: flex-start;
}

.module.tabs .logos > li {
	min-width: 0;
}

.module.tabs .logos img {
	display: block;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 1200 - Smaller Desktop Sizes / Larger Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(1200rem / 16)) {

	.module.tabs .container > :is(h1, h2, h3, h4, h5, h6) {
		grid-column: 1 / -1;
	}

	.module.tabs .list {
		grid-column: 1 / span 5;
	}

	.module.tabs .panel {
		grid-column: 6 / -1;
		margin-left: 0;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem / 16)) {

	.module.tabs .interface {
		row-gap: var(--text-spacing-xlarge);
	}

	.module.tabs .container > * + .interface {
		margin-top: var(--text-spacing-xlarge);
	}

	.module.tabs .list {
		gap: var(--text-spacing-xsmall);
		grid-column: 1 / -1;
	}

	.module.tabs .panel {
		grid-column: 1 / -1;
		grid-row: 2;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem / 16)) {

	.module.tabs .list {
		padding-left: 20px;
	}

}