/* Tabbed Media Panel — image beside a tabbed panel.
   Below the collapse breakpoint the tab strip is hidden and the per-panel
   accordion headers take over; the handler swaps the ARIA roles to match, so
   the two presentations never both claim the same panel. */

.tmpanel-27704 {
	--tmp-media: 48%;
	--tmp-panel-bg: #ffffff;
	--tmp-tab-bar-bg: #f2f2f2;
	--tmp-tab-color: #6b6b6b;
	--tmp-tab-active-color: #1a1a1a;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
	background-color: #f2f2f2;
	padding: 60px;
}

.tmpanel-27704 .tmpanel-27704__media {
	flex: 1 1 var(--tmp-media);
	min-width: 0;
}

.tmpanel-27704.tmpanel-27704--media-right .tmpanel-27704__media {
	order: 1;
}

.tmpanel-27704 .tmpanel-27704__figure {
	margin: 0;
}

.tmpanel-27704 .tmpanel-27704__image {
	display: block;
	width: 100%;
	height: auto;
}

.tmpanel-27704 .tmpanel-27704__panel {
	flex: 1 1 calc(100% - var(--tmp-media) - 48px);
	min-width: 0;
}

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

.tmpanel-27704 .tmpanel-27704__tablist {
	display: flex;
	flex-wrap: wrap;
	background-color: var(--tmp-tab-bar-bg);
}

.tmpanel-27704 .tmpanel-27704__tab {
	margin: 0;
	padding: 18px 30px;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	color: var(--tmp-tab-color);
	cursor: pointer;
	appearance: none;
	transition: background-color 200ms ease, color 200ms ease;
}

.tmpanel-27704 .tmpanel-27704__tab:hover {
	color: var(--tmp-tab-active-color);
}

/* The active tab shares the panel's background, which is what visually joins
   it to the content below. */
.tmpanel-27704 .tmpanel-27704__tab.is-active {
	background-color: var(--tmp-panel-bg);
	color: var(--tmp-tab-active-color);
	font-weight: 700;
}

.tmpanel-27704 .tmpanel-27704__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

/* --------------------------------------------------------------- The panel */

.tmpanel-27704 .tmpanel-27704__body {
	background-color: var(--tmp-panel-bg);
	padding: 48px;
}

.tmpanel-27704 .tmpanel-27704__heading {
	margin: 0 0 24px;
	font-size: var(--tw-h2-size, clamp(28px, 3.4vw, 42px));
	line-height: 1.2;
	font-weight: 700;
}

.tmpanel-27704 .tmpanel-27704__heading[hidden] {
	display: none;
}

.tmpanel-27704 .tmpanel-27704__content > *:first-child { margin-top: 0; }
.tmpanel-27704 .tmpanel-27704__content > *:last-child { margin-bottom: 0; }

.tmpanel-27704 .tmpanel-27704__panel-item[hidden] {
	display: none;
}

/* Accordion headers exist in the markup at every width and are revealed by the
   collapse media queries below. */
.tmpanel-27704 .tmpanel-27704__acc-head {
	display: none;
	margin: 0;
	font: inherit;
}

/* ---------------------------------------------------------------- Actions */

.tmpanel-27704 .tmpanel-27704__actions {
	display: flex;
	flex-wrap: wrap;
	margin-top: 32px;
}

/* Button appearance comes from the shared sitewide tfw-btn system (see
   site-mu-plugins/tfw-buttons.css); this class is layout-only. */
.tmpanel-27704 .tmpanel-27704__button {
	display: inline-flex;
}

/* -------------------------------------------------------------- Collapsing */

/* Shared accordion presentation, applied by whichever breakpoint is active. */
.tmpanel-27704.is-collapsed {
	flex-direction: column;
	align-items: stretch;
}

.tmpanel-27704.is-collapsed .tmpanel-27704__media,
.tmpanel-27704.is-collapsed .tmpanel-27704__panel {
	flex: 1 1 auto;
	width: 100%;
	order: 0;
}

.tmpanel-27704.is-collapsed .tmpanel-27704__tablist {
	display: none;
}

.tmpanel-27704.is-collapsed .tmpanel-27704__acc-head {
	display: block;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tmpanel-27704.is-collapsed .tmpanel-27704__acc-head:first-of-type {
	border-top: 0;
}

.tmpanel-27704.is-collapsed .tmpanel-27704__acc-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 0;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 700;
	color: var(--tmp-tab-active-color);
	text-align: left;
	cursor: pointer;
	appearance: none;
}

.tmpanel-27704.is-collapsed .tmpanel-27704__acc-trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

/* One glyph rotated rather than two assets, as in faq-section. */
.tmpanel-27704.is-collapsed .tmpanel-27704__acc-icon {
	position: relative;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	transition: transform 200ms ease;
}

.tmpanel-27704.is-collapsed .tmpanel-27704__acc-icon::before,
.tmpanel-27704.is-collapsed .tmpanel-27704__acc-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: translateY(-50%);
}

.tmpanel-27704.is-collapsed .tmpanel-27704__acc-icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.tmpanel-27704.is-collapsed .tmpanel-27704__acc-trigger[aria-expanded="true"] .tmpanel-27704__acc-icon {
	transform: rotate(45deg);
}

.tmpanel-27704.is-collapsed .tmpanel-27704__panel-item {
	padding-bottom: 8px;
}

.tmpanel-27704.is-collapsed .tmpanel-27704__heading {
	margin-bottom: 16px;
}

@media (prefers-reduced-motion: reduce) {
	.tmpanel-27704 .tmpanel-27704__tab,
	.tmpanel-27704 .tmpanel-27704__acc-icon {
		transition: none;
	}
}

/* The handler adds .is-collapsed, but it has to hold with JS disabled too —
   these mirror the breakpoints script.js watches. */
@media (max-width: 1024px) {
	.tmpanel-27704--stack-tablet {
		flex-direction: column;
		align-items: stretch;
	}

	.tmpanel-27704.tmpanel-27704--stack-tablet .tmpanel-27704__media,
	.tmpanel-27704.tmpanel-27704--stack-tablet .tmpanel-27704__panel {
		flex: 1 1 auto;
		width: 100%;
		order: 0;
	}
}

@media (max-width: 767px) {
	.tmpanel-27704--stack-mobile {
		flex-direction: column;
		align-items: stretch;
	}

	.tmpanel-27704.tmpanel-27704--stack-mobile .tmpanel-27704__media,
	.tmpanel-27704.tmpanel-27704--stack-mobile .tmpanel-27704__panel {
		flex: 1 1 auto;
		width: 100%;
		order: 0;
	}

	.tmpanel-27704 {
		padding: 24px;
		gap: 24px;
	}

	.tmpanel-27704 .tmpanel-27704__body {
		padding: 24px;
	}
}