/* TS Panel
 * The arrangement is carried by variables so it can differ per device (1.6.6): the classes below give
 * the saved desktop choice, and the per-device "Arrangement" setting writes the same variables.
 *   --ts-panel-dir / -align / -justify   the panel's flex direction and alignment
 *   --ts-panel-copy-flex / -copy-w       the text block's size (side by side: 320px basis; stacked: its own height)
 *   --ts-panel-btn-self / -btn-justify   where the buttons sit (settings: Buttons left / right, Buttons up / down)
 *   --ts-panel-v                         content up / down when the panel has a minimum height
 */
.ts-panel {
	display: flex;
	flex-wrap: wrap;
	flex-direction: var(--ts-panel-dir, row);
	align-items: var(--ts-panel-align, var(--ts-panel-v, center));
	justify-content: var(--ts-panel-justify, space-between);
	gap: 36px;
	padding: 60px 52px;
	border-radius: 28px;
	background: linear-gradient(135deg, var(--ts-panel-a, var(--ts-terra)), var(--ts-panel-b, var(--ts-terra-d)));
	color: #fff;
}

.ts-panel__copy {
	flex: var(--ts-panel-copy-flex, 1 1 320px);
	width: var(--ts-panel-copy-w, auto);
	min-width: 0;
}

.ts-panel__chip {
	margin-bottom: 12px;
}

.ts-panel .ts-panel__title {
	max-width: 480px;
	--ts-fs: clamp(1.6rem, 2.8vw, 2.1rem);
	--ts-lh: 1.15;
	font-size: var(--ts-fs);
	line-height: var(--ts-lh);
	color: #fff;
}

.ts-panel__text {
	margin-top: 10px;
	--ts-fs: 15.5px;
	font-size: var(--ts-fs);
	color: rgba(255, 255, 255, .85);
}

.ts-panel__actions {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	align-self: var(--ts-panel-btn-self, auto);
	justify-content: var(--ts-panel-btn-justify, flex-start);
	gap: 14px;
}

.ts-panel--row {
	--ts-panel-btn-self: var(--ts-panel-btn-y, auto);
}

/* Light box */
.ts-panel--light {
	padding: 36px 40px;
	background: var(--ts-cream);
	border: 1px solid var(--ts-line);
	color: var(--ts-esp);
}

.ts-panel.ts-panel--light .ts-panel__title {
	max-width: none;
	--ts-fs: 21px;
	--ts-lh: 1.62; /* 1.9.3: drafts' line height (was 1.25). */
	font-size: var(--ts-fs);
	line-height: var(--ts-lh);
	color: var(--ts-esp);
}

.ts-panel--light .ts-panel__text {
	max-width: 440px;
	--ts-fs: 15px;
	font-size: var(--ts-fs);
	color: var(--ts-muted);
}

/* Dark */
.ts-panel--dark {
	background: var(--ts-esp);
}

/* Stacked arrangement. In a column the 320px basis above would become a height (ISSUE-013),
   so the text block takes its own height. */
.ts-panel--stack {
	--ts-panel-dir: column;
	--ts-panel-align: var(--ts-panel-items, flex-start);
	--ts-panel-justify: var(--ts-panel-v, flex-start);
	--ts-panel-copy-flex: none;
	--ts-panel-copy-w: 100%;
	--ts-panel-btn-self: var(--ts-panel-btn-x, var(--ts-panel-items, flex-start));
	--ts-panel-btn-justify: var(--ts-panel-btn-x, var(--ts-panel-items, flex-start));
}

/* Text alignment "Centre" centres the heading and text blocks too (they have a maximum width). */
.ts-panel .ts-panel__title,
.ts-panel .ts-panel__text {
	margin-right: var(--ts-panel-mx, 0);
	margin-left: var(--ts-panel-mx, 0);
}

/* "Automatic" arrangement on small screens: stacked and centred, text block at its own height (ISSUE-013).
   A per-device Arrangement setting overrides this (it is written with the widget's own, stronger selector). */
@media (max-width: 820px) {
	.ts-panel {
		--ts-panel-dir: column;
		--ts-panel-align: var(--ts-panel-items, center);
		--ts-panel-justify: var(--ts-panel-v, flex-start);
		--ts-panel-copy-flex: none;
		--ts-panel-copy-w: 100%;
		--ts-panel-btn-self: var(--ts-panel-btn-x, var(--ts-panel-items, center));
		--ts-panel-btn-justify: var(--ts-panel-btn-x, var(--ts-panel-items, center));
		padding: 44px 28px;
		text-align: center;
	}

	.ts-panel--light {
		padding: 30px 24px;
	}
}

/* 1.9.5: background picture and overlay. Layers, bottom to top:
 *   panel colour (the look) → picture (.ts-panel__bg, z-index 0) → overlay (::before, z-index 1) → text and buttons (z-index 2).
 * The overlay exists only when its Background Type is chosen (the control sets --ts-panel-overlay: ''),
 * as Elementor does for a container's Background Overlay. "isolation" keeps the layers and the
 * overlay's blend mode inside the panel. */
.ts-panel {
	position: relative;
	isolation: isolate;
}

.ts-panel::before {
	content: var(--ts-panel-overlay, none);
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	opacity: var(--ts-panel-ov-opacity, .5);
	mix-blend-mode: var(--ts-panel-ov-blend, normal);
	pointer-events: none;
	transition: background .3s, opacity .3s, filter .3s;
}

.ts-panel__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	border-radius: inherit;
	pointer-events: none;
}

/* Elementor's ".elementor img { height: auto; max-width: 100% }" would leave the picture short. */
.ts-w .ts-panel__bg-img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	border-radius: 0;
	transition: opacity .3s, filter .3s;
}

/* Text, round pictures and buttons: always the top layer. */
.ts-panel > :not(.ts-panel__bg) {
	position: relative;
	z-index: 2;
}

/* 1.9.0: round pictures before the text (controls: Round pictures). */
.ts-panel__avatars {
	display: flex;
	flex: none;
}

.ts-panel__av {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--ts-panel-av, 56px);
	height: var(--ts-panel-av, 56px);
	margin-left: calc(-1 * var(--ts-panel-av-overlap, 14px));
	overflow: hidden;
	border: 3px solid var(--ts-sand);
	border-radius: 50%;
	background: var(--ts-terra);
	font-family: var(--ts-font-head);
	font-size: 16px;
	font-weight: 800;
	line-height: 1;
	color: #fff;
}

.ts-panel__av:first-child {
	margin-left: 0;
}

/* Elementor's ".elementor img { height: auto }" would leave a gap under a portrait. */
.ts-w .ts-panel__av-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}