/**
 * mod_gd_showcase — GeniusDesign
 * Product-style showcase (text + item list + large media panel) on UIkit 3.
 * Colours come from the gd_stratos tokens (--gds-*) with fallbacks, and flip
 * inside .uk-light sections.
 */

.gd-showcase {
	--gd-sc-accent: var(--gds-accent, #009999);
	--gd-sc-strong: var(--gds-heading, #16324f);
	--gd-sc-muted: var(--gds-text, #5c5c5c);
	--gd-sc-line: rgba(22, 50, 79, 0.12);
	--gd-sc-panel-bg: rgba(22, 50, 79, 0.06);
	--gd-sc-link-bg: #fff;
	--gd-sc-radius: 32px;
	--gd-sc-text-col: 1fr;
	--gd-sc-media-col: 1fr;
	color: var(--gd-sc-muted);
}

.uk-light .gd-showcase,
.gd-showcase.uk-light {
	--gd-sc-accent: var(--gds-accent-2, #64c7ab);
	--gd-sc-strong: #fff;
	--gd-sc-muted: rgba(255, 255, 255, 0.72);
	--gd-sc-line: rgba(255, 255, 255, 0.18);
	--gd-sc-panel-bg: rgba(255, 255, 255, 0.07);
	--gd-sc-link-bg: transparent;
}

/* Consecutive showcases in one position (each wrapped by the module chrome). */
.gd-showcase + .gd-showcase,
:has(> .gd-showcase) + :has(> .gd-showcase) {
	margin-top: clamp(72px, 9vw, 140px);
}

.gd-showcase--split-45-55 { --gd-sc-text-col: 45fr; --gd-sc-media-col: 55fr; }
.gd-showcase--split-40-60 { --gd-sc-text-col: 40fr; --gd-sc-media-col: 60fr; }

/* ===== Grid ============================================================== */

.gd-showcase__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	align-items: center;
}

.gd-showcase__content,
.gd-showcase__media {
	min-width: 0;
}

@media (min-width: 960px) {
	.gd-showcase__grid {
		grid-template-columns: minmax(0, var(--gd-sc-text-col)) minmax(0, var(--gd-sc-media-col));
		gap: clamp(48px, 6vw, 96px);
	}

	.gd-showcase--media-left .gd-showcase__grid {
		grid-template-columns: minmax(0, var(--gd-sc-media-col)) minmax(0, var(--gd-sc-text-col));
	}

	.gd-showcase--media-left .gd-showcase__media {
		order: -1;
	}
}

/* ===== Badge ============================================================= */

.gd-showcase__badge {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-bottom: 20px;
}

.gd-showcase__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--gd-sc-badge, var(--gds-accent, #009999));
	color: #fff;
}

.gd-showcase__badge-icon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.gd-showcase__badge-text {
	font-family: var(--gds-font-heading, inherit);
	font-weight: 700;
	font-size: 1rem;
	color: var(--gd-sc-strong);
}

.gd-showcase__tag {
	display: inline-block;
	padding: 3px 12px;
	border-radius: var(--gds-radius-pill, 999px);
	border: 1px solid currentColor;
	color: var(--gd-sc-accent);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/* ===== Heading =========================================================== */

.gd-showcase .gd-showcase__heading {
	margin: 0 0 16px;
	font-family: var(--gds-font-heading, inherit);
	font-size: clamp(2rem, 1.2rem + 2.6vw, 3.25rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--gd-sc-strong);
}

.gd-showcase--serif .gd-showcase__heading {
	font-family: 'IBM Plex Serif', Georgia, serif;
	font-weight: 500;
	letter-spacing: -0.015em;
}

.gd-showcase__intro {
	margin: 0 0 8px;
	font-size: 1.0625rem;
	line-height: 1.6;
}

/* ===== Items ============================================================= */

.gd-showcase__list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.gd-showcase__item {
	position: relative;
	margin: 0;
	padding: 18px 0 20px;
}

.gd-showcase__toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	margin: 0;
	padding: 4px 0;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--gd-sc-strong);
	font: inherit;
	text-align: left;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.gd-showcase__item.uk-active > .gd-showcase__toggle,
.gd-showcase__toggle:hover,
.gd-showcase__toggle:focus-visible {
	opacity: 1;
}

.gd-showcase__toggle:focus-visible,
.gd-showcase__link:focus-visible {
	outline: 2px solid var(--gd-sc-accent);
	outline-offset: 4px;
}

.gd-showcase__icon {
	display: inline-flex;
	flex: none;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
}

.gd-showcase__icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.gd-showcase__title {
	font-family: var(--gds-font-heading, inherit);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Description: collapsed unless the item is open (grid-rows reveal). The
   <noscript> rule in the layout opens every item when JS is off. */
.gd-showcase__body {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows 0.35s ease, visibility 0s linear 0.35s;
}

.gd-showcase__item.uk-active > .gd-showcase__body {
	grid-template-rows: 1fr;
	visibility: visible;
	transition: grid-template-rows 0.35s ease, visibility 0s;
}

.gd-showcase__body-inner {
	min-height: 0;
	overflow: hidden;
}

.gd-showcase__item--icon .gd-showcase__body-inner {
	padding-left: 38px;
}

.gd-showcase__row {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	padding-top: 8px;
}

.gd-showcase__text {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--gd-sc-muted);
}

.gd-showcase .gd-showcase__link {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	border: 1px solid var(--gd-sc-line);
	border-radius: 12px;
	background: var(--gd-sc-link-bg);
	color: var(--gd-sc-strong);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Arrow shown until (or without) UIkit injecting the SVG icon. */
.gd-showcase__link > span:empty::before {
	content: "\2197";
	font-size: 1.125rem;
	line-height: 1;
}

.gd-showcase .gd-showcase__link:hover {
	background: var(--gd-sc-accent);
	border-color: var(--gd-sc-accent);
	color: #fff;
}

/* Divider = progress track; the active one fills while autoplay runs. */
.gd-showcase__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	overflow: hidden;
	background: var(--gd-sc-line);
}

.gd-showcase__progress {
	display: block;
	height: 100%;
	background: var(--gd-sc-accent);
	transform: scaleX(0);
	transform-origin: left center;
}

.gd-showcase:not(.is-autoplay) .uk-active > .gd-showcase__bar > .gd-showcase__progress {
	transform: scaleX(1);
}

.gd-showcase.is-autoplay .is-playing > .gd-showcase__bar > .gd-showcase__progress {
	animation: gd-sc-progress var(--gd-sc-interval, 6s) linear forwards;
}

/* Must outrank the rule above: its "animation" shorthand resets play-state. */
.gd-showcase.is-autoplay.is-paused .is-playing > .gd-showcase__bar > .gd-showcase__progress {
	animation-play-state: paused;
}

@keyframes gd-sc-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* ===== Media panel ======================================================= */

.gd-showcase__media {
	position: relative;
	aspect-ratio: var(--gd-sc-ratio, 1 / 1);
	border-radius: var(--gd-sc-radius);
	overflow: hidden;
	background: var(--gd-sc-panel-bg);
	isolation: isolate;
}

.gd-showcase__panels,
.gd-showcase__panel {
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gd-showcase__img,
.gd-showcase__video {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.gd-showcase__placeholder {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	color: var(--gd-sc-accent);
	opacity: 0.5;
}

.gd-showcase__placeholder-icon svg,
.gd-showcase__placeholder-icon img {
	width: 96px;
	height: 96px;
}

.gd-showcase__inline-media {
	display: none;
}

/* ===== Mobile ============================================================ */

@media (max-width: 959.98px) {
	.gd-showcase {
		--gd-sc-radius: 24px;
	}

	.gd-showcase--mobile-inline .gd-showcase__media,
	.gd-showcase--mobile-hidden .gd-showcase__media {
		display: none;
	}

	.gd-showcase--mobile-inline .gd-showcase__inline-media {
		display: block;
		position: relative;
		aspect-ratio: var(--gd-sc-ratio, 1 / 1);
		margin-top: 16px;
		border-radius: 20px;
		overflow: hidden;
		background: var(--gd-sc-panel-bg);
	}
}

/* ===== Reduced motion ==================================================== */

@media (prefers-reduced-motion: reduce) {
	.gd-showcase *,
	.gd-showcase *::before,
	.gd-showcase *::after {
		transition: none !important;
	}

	.gd-showcase .gd-showcase__progress,
	.gd-showcase [class*='uk-animation-'] {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
	}
}