/**
 * Expanding Cards widget ("five core subsectors").
 *
 * Specificity note: base rules use two class levels (e.g. `.tmt-fcore .x`) so
 * they beat theme/kit rules like `.container button` or `.elementor-kit-N h2`,
 * while staying below the three-class selectors Elementor generates from the
 * panel controls - those must keep winning.
 *
 * Anything a control also writes is routed through a custom property so the two
 * never fight over specificity.
 */

/* Card row ---------------------------------------------------------------- */

/*
 * Variable defaults live on single-class selectors on purpose: panel controls
 * and per-card inline styles must be able to override them, and so should any
 * custom CSS the client writes against a card's "Extra CSS Class".
 */
.tmt-fcore__cards {
	--tmt-fcore-height: 430px;
	--tmt-fcore-collapsed: 165px;
	/* Overwritten inline per instance with the real card count. */
	--tmt-fcore-count: 5;
	--tmt-fcore-gap: 24px;
	--tmt-fcore-speed: 450ms;
	--tmt-fcore-open-bg: #17546b;
	--tmt-fcore-closed-bg: #0f2a3a;
	--tmt-fcore-overlay: rgba(10, 32, 45, 0.75);
	--tmt-fcore-overlay-height: 45%;
	--tmt-fcore-stack-closed: 72px;
	--tmt-fcore-stack-open: 320px;
}

.tmt-fcore__card {
	--tmt-fcore-pad-top: 28px;
	--tmt-fcore-pad-right: 20px;
	--tmt-fcore-pad-bottom: 20px;
	--tmt-fcore-pad-left: 20px;
	--tmt-fcore-open-extra: 0px;
	--tmt-fcore-title-gap: 0px;
	--tmt-fcore-card-bg: none;
	--tmt-fcore-card-bg-open: none;
}

.tmt-fcore__card.is-active {
	--tmt-fcore-title-gap: 20px;
}

.tmt-fcore .tmt-fcore__cards {
	display: flex;
	align-items: stretch;
	gap: var(--tmt-fcore-gap);
	height: var(--tmt-fcore-height);
}

.tmt-fcore .tmt-fcore__card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 1 var(--tmt-fcore-collapsed);
	box-sizing: border-box;
	min-width: 0;
	overflow: hidden;
	padding:
		calc(var(--tmt-fcore-pad-top) + var(--tmt-fcore-open-extra))
		calc(var(--tmt-fcore-pad-right) + var(--tmt-fcore-open-extra))
		calc(var(--tmt-fcore-pad-bottom) + var(--tmt-fcore-open-extra))
		calc(var(--tmt-fcore-pad-left) + var(--tmt-fcore-open-extra));
	border-radius: 4px;
	background-color: var(--tmt-fcore-closed-bg);
	background-image: var(--tmt-fcore-card-bg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	cursor: pointer;
	/*
	 * flex-basis, not flex-grow. Interpolating flex-grow from 0 to 1 makes the
	 * width move along a hyperbolic curve - fast at the start, crawling at the
	 * end - which reads as stuttery. Animating the basis between two real
	 * lengths gives a width that follows the easing curve exactly.
	 */
	transition:
		flex-basis var(--tmt-fcore-speed) cubic-bezier(0.33, 0, 0.2, 1),
		background-color var(--tmt-fcore-speed) ease;
}

.tmt-fcore .tmt-fcore__card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--tmt-fcore-overlay-height);
	background-image: linear-gradient(to bottom, var(--tmt-fcore-overlay), transparent);
	opacity: 1;
	transition: opacity var(--tmt-fcore-speed) ease;
	pointer-events: none;
}

/*
 * The open card takes the row minus every closed card and every gap, so all the
 * bases add up to exactly 100% and nothing has to shrink mid-animation.
 */
.tmt-fcore .tmt-fcore__card.is-active {
	flex-basis: calc(
		100% - (var(--tmt-fcore-count) - 1) *
		(var(--tmt-fcore-collapsed) + var(--tmt-fcore-gap))
	);
	background-color: var(--tmt-fcore-open-bg);
	background-image: var(--tmt-fcore-card-bg-open);
}

.tmt-fcore .tmt-fcore__card.is-active::before {
	opacity: 0;
}

/* Toggle / title ---------------------------------------------------------- */

/*
 * The toggle is a plain <button>, so themes and Elementor kits love to give it
 * a pill background, centred text and a shrink-wrapped width. Everything below
 * is a reset - keep it free of properties that panel controls also write.
 */
.tmt-fcore button.tmt-fcore__toggle,
.tmt-fcore button.tmt-fcore__toggle:hover,
.tmt-fcore button.tmt-fcore__toggle:focus,
.tmt-fcore button.tmt-fcore__toggle:active {
	width: 100%;
	min-width: 0;
	min-height: 0;
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}

.tmt-fcore button.tmt-fcore__toggle {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	/* Wraps the icon onto its own line instead of colliding with a long title. */
	flex-wrap: wrap;
	gap: 5px;
	margin: 0 0 var(--tmt-fcore-title-gap);
	cursor: pointer;
	transition: margin var(--tmt-fcore-speed) ease;
}

.tmt-fcore button.tmt-fcore__toggle:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 6px;
}

.tmt-fcore .tmt-fcore__card-title {
	flex: 1 1 auto;
	min-width: min-content;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: normal;
	color: #fff;
	transition: font-size var(--tmt-fcore-speed) ease;
}

.tmt-fcore .tmt-fcore__card.is-active .tmt-fcore__card-title {
	font-size: 34px;
}

.tmt-fcore .tmt-fcore__plus {
	flex: 0 0 auto;
	margin-inline-start: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: #fff;
}

.tmt-fcore .tmt-fcore__card.is-active .tmt-fcore__plus {
	display: none;
}

.tmt-fcore .tmt-fcore__plus svg,
.tmt-fcore .tmt-fcore__arrow svg {
	width: 1em;
	height: 1em;
	display: block;
}

.tmt-fcore .tmt-fcore__plus i,
.tmt-fcore .tmt-fcore__arrow i {
	font-size: inherit;
	line-height: 1;
}

/* Body ------------------------------------------------------------------- */

.tmt-fcore .tmt-fcore__body {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	min-height: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition:
		opacity calc(var(--tmt-fcore-speed) * 0.6) ease,
		transform calc(var(--tmt-fcore-speed) * 0.6) ease,
		visibility 0s linear var(--tmt-fcore-speed);
}

.tmt-fcore .tmt-fcore__card.is-active .tmt-fcore__body {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: calc(var(--tmt-fcore-speed) * 0.35), calc(var(--tmt-fcore-speed) * 0.35), 0s;
}

.tmt-fcore__list {
	--tmt-fcore-bullet: #8fb6c9;
}

.tmt-fcore .tmt-fcore__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tmt-fcore .tmt-fcore__item {
	position: relative;
	margin: 0;
	padding-left: 18px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.45;
	color: #e4edf3;
	list-style: none;
}

.tmt-fcore .tmt-fcore__item::before {
	content: "";
	position: absolute;
	inset-inline-start: 2px;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background-color: #fff;
}

.tmt-fcore .tmt-fcore__item-highlight {
	font-weight: 700;
	color: #fff;
}

/* Open card: image + text ------------------------------------------------- */

.tmt-fcore__split {
	--tmt-fcore-split-media: 45%;
	--tmt-fcore-split-gap: 35px;
}

/*
 * Takes the height the card has left between the title and the arrow, so a
 * portrait photo cannot push past the bottom of the card.
 */
.tmt-fcore .tmt-fcore__split {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	gap: var(--tmt-fcore-split-gap);
	min-width: 0;
	min-height: 0;
}

.tmt-fcore .tmt-fcore__split-media {
	/*
	 * Always the configured width. Letting it shrink traded away image size even
	 * when there was room to spare, so the text column absorbs the difference
	 * instead - and scrolls in the rare case a quote still will not fit.
	 */
	flex: 0 0 var(--tmt-fcore-split-media);
	max-width: var(--tmt-fcore-split-media);
	min-width: 0;
	overflow: hidden;
}

.tmt-fcore .tmt-fcore__split-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * The card height is fixed, so a long quote used to run past the bottom and get
 * clipped. min-height:0 lets this column be shorter than its content and the
 * scroll keeps every line reachable - nothing the client typed is ever lost.
 */
.tmt-fcore .tmt-fcore__split-body {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.tmt-fcore .tmt-fcore__split-heading {
	margin: 0 0 14px;
	padding: 0;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: normal;
	overflow-wrap: break-word;
	color: #fff;
}

.tmt-fcore .tmt-fcore__split-text {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 14px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	overflow-wrap: break-word;
	color: #e4edf3;
}

/* Arrow ------------------------------------------------------------------ */

.tmt-fcore .tmt-fcore__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 24px;
}

/*
 * Same reset story as the toggle: strip inherited button/link styling.
 *
 * The default arrow icon is a single filled shape that draws its own disc with
 * the arrow knocked out, so the button itself stays transparent - a background
 * colour here would sit behind the disc and show as a ring. Icon size matches
 * the button size so the disc fills it.
 */
.tmt-fcore a.tmt-fcore__arrow,
.tmt-fcore button.tmt-fcore__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	min-width: 0;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: normal;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.tmt-fcore .tmt-fcore__arrow:hover,
.tmt-fcore .tmt-fcore__arrow:focus-visible {
	transform: translateX(2px);
}

.tmt-fcore .tmt-fcore__arrow:focus {
	outline: none;
}

.tmt-fcore .tmt-fcore__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.tmt-fcore .tmt-fcore__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.tmt-fcore .tmt-fcore__card,
	.tmt-fcore .tmt-fcore__card::before,
	.tmt-fcore .tmt-fcore__body,
	.tmt-fcore .tmt-fcore__card-title,
	.tmt-fcore button.tmt-fcore__toggle,
	.tmt-fcore .tmt-fcore__arrow {
		transition-duration: 1ms !important;
	}

	.tmt-fcore .tmt-fcore__arrow:hover {
		transform: none;
	}
}

/* Stacked layouts -------------------------------------------------------- */

@media (max-width: 1024px) {
	.tmt-fcore .tmt-fcore__split {
		display: block;
	}

	.tmt-fcore .tmt-fcore__split-media {
		max-width: none;
		margin-bottom: 20px;
	}

	.tmt-fcore .tmt-fcore__split-media img {
		height: auto;
	}

	.tmt-fcore-stack-tablet .tmt-fcore__cards {
		flex-direction: column;
		height: auto;
	}

	.tmt-fcore-stack-tablet .tmt-fcore__card {
		flex: 0 0 auto;
		min-height: var(--tmt-fcore-stack-closed);
		transition: min-height var(--tmt-fcore-speed) cubic-bezier(0.4, 0, 0.2, 1);
	}

	.tmt-fcore-stack-tablet .tmt-fcore__card.is-active {
		/* Beats the desktop basis rule, which would otherwise set a height here. */
		flex-basis: auto;
		min-height: var(--tmt-fcore-stack-open);
	}

	.tmt-fcore-stack-tablet .tmt-fcore__card:not(.is-active) .tmt-fcore__body {
		display: none;
	}
}

@media (max-width: 767px) {
	.tmt-fcore .tmt-fcore__split {
		display: block;
	}

	.tmt-fcore .tmt-fcore__split-media {
		max-width: none;
		margin-bottom: 20px;
	}

	.tmt-fcore .tmt-fcore__split-media img {
		height: auto;
	}

	.tmt-fcore-stack-mobile .tmt-fcore__cards,
	.tmt-fcore-stack-tablet .tmt-fcore__cards {
		flex-direction: column;
		height: auto;
	}

	.tmt-fcore-stack-mobile .tmt-fcore__card,
	.tmt-fcore-stack-tablet .tmt-fcore__card {
		flex: 0 0 auto;
		min-height: var(--tmt-fcore-stack-closed);
		transition: min-height var(--tmt-fcore-speed) cubic-bezier(0.4, 0, 0.2, 1);
	}

	.tmt-fcore-stack-mobile .tmt-fcore__card.is-active,
	.tmt-fcore-stack-tablet .tmt-fcore__card.is-active {
		/* Beats the desktop basis rule, which would otherwise set a height here. */
		flex-basis: auto;
		min-height: var(--tmt-fcore-stack-open);
	}

	.tmt-fcore-stack-mobile .tmt-fcore__card:not(.is-active) .tmt-fcore__body,
	.tmt-fcore-stack-tablet .tmt-fcore__card:not(.is-active) .tmt-fcore__body {
		display: none;
	}

	.tmt-fcore-stack-mobile .tmt-fcore__card.is-active .tmt-fcore__card-title,
	.tmt-fcore-stack-tablet .tmt-fcore__card.is-active .tmt-fcore__card-title {
		font-size: 26px;
	}
}