/**
 * Pop3D Charts landing page (template-diagram-plugin.php)
 * Loaded conditionally — not part of the main style.css bundle.
 */

body.has-anchor-nav {
	--ce-hero-stack-min: 28rem;
}

html:has(body.has-anchor-nav) {
	scroll-behavior: smooth;
}

.description:has(.pop3d-page-title) {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

#contentbox > .description:has(.pop3d-page-title) {
	align-self: center;
}

.pop3d-page-title {
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: nowrap;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto var(--space-lg);
}

.pop3d-page-title__logo {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	flex-shrink: 0;
	display: block;
}

.pop3d-page-title h2 {
	margin: 0;
	padding-bottom: 0 !important;
	line-height: 1.15;
	text-align: center;
	flex: 0 0 auto;
	min-width: min-content;
	max-width: none;
	text-wrap: wrap;
}

@media screen and (min-width: 900px) {
	.pop3d-page-title h2 {
		white-space: nowrap;
		text-wrap: nowrap;
	}
}

@media screen and (max-width: 1280px) {
	.pop3d-page-title__logo {
		width: 48px;
		height: 48px;
	}

	.pop3d-page-title {
		gap: 10px;
	}
}

@media screen and (max-width: 767px) {
	.description:has(.pop3d-page-title) {
		padding-left: 1em;
		padding-right: 1em;
	}

	.pop3d-page-title {
		flex-direction: column;
		align-items: center;
		width: auto;
	}

	.pop3d-page-title h2 {
		white-space: normal;
		text-wrap: wrap;
	}
}

/* Hero annotations */
.hero-guarantee {
	font-size: 65%;
}

.hero-smallprint {
	font-size: 60%;
	opacity: 0.7 !important;
}

/* Spectra/UAGB tabs */
.uagb-tabs__wrap .uagb-tabs__body-container.uagb-tabs-body__active {
	display: flex;
	column-gap: 1em;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}

.uagb-tabs__wrap .uagb-tabs__body-container {
	padding: 0 !important;
}

.uagb-tabs__body-wrap {
	border-style: none !important;
	padding: 0 !important;
}

.uagb-tabs__panel {
	margin-bottom: 2em !important;
}

.pop3d-tabs .uagb-tabs__panel {
	display: flex !important;
	justify-content: center;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap !important;
	padding: 0;
}

.pop3d-tabs .uagb-tab {
	width: auto !important;
	max-width: none !important;
	flex: 0 1 auto;
	margin: 0 !important;
}

.pop3d-tabs .uagb-tabs-list {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 8px 14px;
	border: 2px solid #111827 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #111827 !important;
	text-decoration: none !important;
	line-height: 1.12;
	font-size: 0.9em;
	font-weight: 700;
	white-space: normal;
	text-align: center;
	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		transform 0.18s ease;
}

.pop3d-tabs .uagb-tabs-list div {
	margin: 0;
	color: inherit;
	white-space: normal;
	line-height: 1.12;
}

.pop3d-tabs .uagb-tab.uagb-tabs__active .uagb-tabs-list,
.pop3d-tabs .uagb-tabs-list[aria-selected="true"] {
	background: #2563eb !important;
	border-color: #2563eb !important;
	color: #ffffff !important;
}

.pop3d-tabs .uagb-tab:not(.uagb-tabs__active) .uagb-tabs-list:hover {
	background: rgba(17, 24, 39, 0.06) !important;
}

@media (max-width: 1024px) {
	.pop3d-tabs .uagb-tabs__panel {
		gap: 7px;
	}

	.pop3d-tabs .uagb-tabs-list {
		min-height: 34px;
		padding: 7px 12px;
		font-size: 0.84em;
	}
}

@media (max-width: 767px) {
	.pop3d-tabs.uagb-tabs__stack1-mobile .uagb-tabs__panel {
		flex-direction: row !important;
		overflow: visible !important;
	}

	.pop3d-tabs .uagb-tabs-list {
		min-height: 32px;
		padding: 7px 11px;
		font-size: 0.78em;
		white-space: normal !important;
	}

	.pop3d-tabs .uagb-tabs-list div {
		white-space: normal !important;
	}
}

/* Reusable minimal glass card effect */
.ce-glass-card {
	--ce-glass-bg: 95, 55, 145;

	background:
		rgba(var(--ce-glass-bg), 0.36) !important;

	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	border-radius: 22px;

	-webkit-backdrop-filter: blur(24px) saturate(115%);
	backdrop-filter: blur(24px) saturate(115%);

	box-shadow:
		0 14px 36px rgba(0, 0, 0, 0.16);

	overflow: hidden;
	position: relative;
}

.ce-glass-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;

	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.10),
			rgba(255, 255, 255, 0.02) 42%,
			rgba(255, 255, 255, 0)
		);

	opacity: 0.75;
}

.ce-glass-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;

	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.ce-glass-card > * {
	position: relative;
	z-index: 1;
}

.ce-glass-purple { --ce-glass-bg: 95, 55, 145; }
.ce-glass-blue { --ce-glass-bg: 18, 24, 43; }
.ce-glass-teal { --ce-glass-bg: 20, 120, 135; }

.ce-glass-white {
	--ce-glass-bg: 255, 255, 255;
}

/* Feature section: darker glass pills */
#features .ce-feature-pill {
	background: rgba(18, 24, 43, 0.48) !important;
	border: 1px solid rgba(255, 255, 255, 0.20) !important;

	-webkit-backdrop-filter: blur(14px) saturate(130%);
	backdrop-filter: blur(14px) saturate(130%);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.20),
		0 8px 20px rgba(0, 0, 0, 0.16);
}

.pop3d-playground-button .wp-block-button__link {
	border-radius: 999px !important;
	padding: 12px 28px !important;
	line-height: 1.2;
	background: transparent !important;
	color: #222 !important;
	border: 2px solid #222 !important;
}

/* Hero chart box */
.ce-hero {
	flex-wrap: wrap !important;
}

.ce-hero > .wp-block-uagb-container {
	flex: 1 1 var(--ce-hero-stack-min, 34rem) !important;
	width: auto !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.ce-hero > .ce-hero-chart {
	width: 100% !important;
}

/* === Use Cases === */
#use-cases .ce-usecases-compact-layout {
	display: grid !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	grid-template-columns: 1fr !important;
	gap: 34px;
	width: 100% !important;
}

#use-cases .ce-usecases-compact-copy,
#use-cases .ce-usecases-compact-grid {
	min-width: 0 !important;
}

#use-cases .ce-usecases-compact-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

#use-cases .ce-usecases-compact-grid > .ce-usecases-compact-card {
	width: auto !important;
	max-width: none !important;
	flex: none !important;
	height: auto !important;
}

#use-cases .ce-usecases-compact-card-wide {
	grid-column: 1 / -1;
}

#use-cases .ce-usecases-compact-card p {
	margin-bottom: 0;
}

@media (max-width: 35rem) {
	#use-cases .ce-usecases-compact-grid {
		grid-template-columns: 1fr;
	}
}

/* === Feature-Karten-Grid === */
#features .ce-feature-cards-grid {
	display: grid !important;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 24px;
	width: 100% !important;
}

#features .ce-feature-cards-grid > .ce-feature-card {
	grid-column: span 2;
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	height: auto !important;
}

#features .ce-feature-cards-grid > .ce-feature-card:nth-last-child(-n+2) {
	grid-column: span 3;
}

/* === Chart Types (#chart-types) === */
#chart-types .ce-layouts-intro,
#workflow .ce-workflow-intro,
#data-import .ce-data-import-intro {
	width: 100% !important;
	max-width: 100% !important;
}

#chart-types .ce-layouts-groups > .ce-layout-group,
#workflow .ce-workflow-cards-grid > .ce-workflow-card,
#data-import .ce-data-import-columns > .ce-data-import-card {
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	height: auto !important;
	min-width: 0 !important;
}

#chart-types .ce-layouts-groups {
	display: grid !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	width: 100% !important;
}

/* === Workflow (#workflow) === */
#workflow .ce-workflow-cards-grid {
	display: grid !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	width: 100% !important;
}

/* === Data Import (#data-import) === */
#data-import .ce-data-import-columns {
	display: grid !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	width: 100% !important;
}

@media (max-width: 80rem) {
	#features .ce-feature-cards-grid,
	#chart-types .ce-layouts-groups,
	#workflow .ce-workflow-cards-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#features .ce-feature-cards-grid > .ce-feature-card,
	#features .ce-feature-cards-grid > .ce-feature-card:nth-last-child(-n+2) {
		grid-column: span 1;
	}

	#data-import .ce-data-import-columns {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 44rem) {
	#features .ce-feature-cards-grid,
	#chart-types .ce-layouts-groups,
	#workflow .ce-workflow-cards-grid {
		grid-template-columns: 1fr;
	}
}

/* === Setup & Trust (#setup-and-trust) === */
#setup-and-trust .ce-techtrust-layout {
	display: grid !important;
	flex-direction: unset !important;
	flex-wrap: unset !important;
	grid-template-columns: 1fr !important;
	gap: 36px;
	width: 100% !important;
}

@media (max-width: 104.9875rem) {
	#use-cases .ce-usecases-compact-copy,
	#use-cases .ce-usecases-compact-grid,
	#setup-and-trust .ce-techtrust-copy,
	#setup-and-trust .ce-techtrust-groups {
		width: 100% !important;
		max-width: 100% !important;
	}
}

@media (min-width: 105rem) {
	#use-cases .ce-usecases-compact-layout,
	#setup-and-trust .ce-techtrust-layout {
		grid-template-columns: 37fr 57fr !important;
		align-items: center;
	}

	#use-cases .ce-usecases-compact-layout {
		column-gap: 56px;
	}

	#setup-and-trust .ce-techtrust-layout {
		column-gap: 48px;
	}

	#use-cases .ce-usecases-compact-copy,
	#use-cases .ce-usecases-compact-grid,
	#setup-and-trust .ce-techtrust-copy,
	#setup-and-trust .ce-techtrust-groups {
		width: auto !important;
		max-width: none !important;
	}
}

#setup-and-trust .ce-techtrust-copy,
#setup-and-trust .ce-techtrust-groups {
	min-width: 0 !important;
}

#setup-and-trust .ce-techtrust-groups {
	width: 100% !important;
}

#setup-and-trust .ce-techtrust-pill-row {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px;
	width: 100% !important;
	align-items: stretch;
}

#setup-and-trust .ce-techtrust-pill-row > .ce-techtrust-item {
	width: fit-content !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
	min-width: 0 !important;
}

/* === Changelog (#changelog) === */
#changelog .ce-changelog-intro,
#changelog .ce-changelog-entries {
	width: 100% !important;
	max-width: 100% !important;
	margin-inline: auto !important;
}

#changelog .ce-changelog-entries {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0 !important;
	padding-top: 1.75rem !important;
}

#changelog .ce-changelog-entries > .ce-changelog-section-label {
	width: 100% !important;
	margin-top: 2.25rem !important;
	margin-bottom: 0.65rem !important;
	text-align: center !important;
}

#changelog .ce-changelog-entries > .ce-changelog-section-label:first-child {
	margin-top: 0 !important;
}

#changelog .ce-changelog-entry {
	width: 100% !important;
	max-width: 100% !important;
	flex: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 1rem 0 !important;
	border-bottom: 1px solid rgba(17, 24, 39, 0.1);
	text-align: center !important;
}

#changelog .ce-changelog-entry:last-of-type {
	border-bottom: none;
}

#changelog .ce-changelog-version {
	font-size: 1.05rem !important;
	margin-bottom: 0.5rem !important;
	text-align: center !important;
}

#changelog .ce-changelog-entry .wp-block-list,
#changelog .ce-changelog-entry p {
	text-align: center !important;
	font-size: 0.95rem;
	line-height: 1.6;
	margin-top: 0;
	margin-bottom: 0;
}

#changelog .ce-changelog-entry .wp-block-list {
	display: inline-block;
	margin-inline: auto;
	margin-bottom: 0;
	padding-left: 0;
	list-style-position: inside;
	text-align: center;
}

#changelog .ce-changelog-more {
	width: 100% !important;
	margin-top: 2rem !important;
	margin-bottom: 0 !important;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(17, 24, 39, 0.1);
	text-align: center !important;
}

#changelog .ce-changelog-more a {
	color: #111827;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

#changelog .ce-changelog-more a:hover,
#changelog .ce-changelog-more a:focus-visible {
	color: #374151;
}