/**
 * Image Text Widget Styles
 *
 * Two-column layout: media (image or feature list cards) + text content
 * with heading/body/CTA variants. Media position (left/right) flips via
 * CSS order property. Mobile: single column, content always on top.
 *
 * Text colors INHERIT from the parent Elementor Container so the widget
 * works on both light and dark backgrounds without changes.
 *
 * Figma Specs (px values are hard MAXIMUMS — never exceed):
 * - H2 Large: Plus Jakarta Sans Bold, max 40px, lineHeight 1.14, letterSpacing -0.8px, capitalize
 * - Badge: Plus Jakarta Sans Bold, max 22px, lineHeight 1.1, border rgba(19,56,68,0.3)
 * - Body: IBM Plex Sans Medium, max 18px, lineHeight 1.45
 * - Button CTA: #6edad5 bg, #133844 border/text, Plus Jakarta Sans Bold, max 17px
 * - Text Link CTA: #ff5000, Plus Jakarta Sans Bold, max 18px
 * - Feature Card Description: IBM Plex Sans Medium, max 20px, lineHeight 1.45
 * - Feature Card Accent: 12px wide (left side), brand primary color
 * - Feature Card Background: #245868 (--color-container-card-blue)
 * - Feature Card Border: 2px solid brand primary
 * - Feature Card Icon: ~48px, object-fit contain
 *
 * All font-size clamp() values use px (not rem) to prevent Elementor Kit
 * root font-size overrides from scaling text beyond Figma specifications.
 *
 * @package Zededa
 */

/* Container-level spacing (margins, padding) is in container-styles.css */

/* ==========================================================================
   1. Elementor Kit Specificity Overrides
   Elementor Kit sets global h2, a, button, and body typography that
   cascade into the widget. These rules match or exceed kit specificity.
   ========================================================================== */

[class*="elementor-kit-"] .zededa-image-text {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.19vw + 15.28px), 18px);
	line-height: 1.45;
}

[class*="elementor-kit-"] .zededa-image-text__heading--large {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(24px, calc(1.5vw + 21px), 40px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.14;
	letter-spacing: -0.8px;
}

[class*="elementor-kit-"] .zededa-image-text__heading--badge {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(18px, calc(0.38vw + 16.64px), 22px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

[class*="elementor-kit-"] .zededa-image-text__cta--button {
	background-color: var(--color-navigation-cta-background);
	color: var(--color-container-blue);
}

[class*="elementor-kit-"] .zededa-image-text__cta--link {
	color: var(--color-brand-primary);
}

[class*="elementor-kit-"] .zededa-image-text a {
	text-decoration: none;
}

/* Card description override now handled by shared card CSS (.zededa-card__description) */

/* ==========================================================================
   2. Grid Layout
   ========================================================================== */

.zededa-image-text {
	display: grid;
	grid-template-columns: var(--zit-media-width, 50%) 1fr;
	/* Figma: ~239px between media right edge and text left on 1440px canvas.
	   Grid gap accounts for ~half since image doesn't fill full column. */
	column-gap: clamp(48px, 6vw, 120px);
	align-items: center;
	width: 100%;
	/* Vertical spacing handled by parent Elementor container */
	padding: 0;
	/* Text color inherited from parent container — works on light or dark bg */
	color: inherit;
}

/* Media on right: swap column order */
/* Legacy class (existing widgets) */
.zededa-image-text--image-right .zededa-image-text__media,
.zededa-image-text--image-right .zededa-image-text__image,
/* New class */
.zededa-image-text--media-right .zededa-image-text__media {
	order: 2;
}

.zededa-image-text--image-right .zededa-image-text__content,
.zededa-image-text--media-right .zededa-image-text__content {
	order: 1;
}

/* Asymmetric split: when media is on the right, swap which physical column
   receives the configured media width so the proportion stays correct. */
.zededa-image-text--image-right,
.zededa-image-text--media-right {
	grid-template-columns: 1fr var(--zit-media-width, 50%);
}

/* ==========================================================================
   3. Media Column (shared by image and feature list)
   ========================================================================== */

.zededa-image-text__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

.zededa-image-text__media img {
	width: 100%;
	height: auto;
	display: block;
}

/* Image media type (default display): constrain size and add horizontal
   breathing room. Vertical margin is zero so the image height alone
   determines the grid row — prevents dead space below the text column.
   Excluded from cover mode which needs the image to fill the column. */
.zededa-image-text--image:not(.zededa-image-text--image-cover) .zededa-image-text__media img {
	max-width: 350px;
	margin-inline: var(--spacing-3xl);
}

/* Legacy class support for existing widgets */
.zededa-image-text__image {
	display: flex;
	align-items: center;
	justify-content: center;
}

.zededa-image-text__image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   3b. Cover Image Mode (Figma comp 1901:519)
   Image fills the full column height, cropping to maintain aspect ratio.
   ========================================================================== */

/* Remove column-gap; use content padding instead so image bleeds to container edge */
.zededa-image-text--image-cover {
	align-items: stretch;
	column-gap: 0;
}

/* Image LEFT (default): gap on left, outer-edge padding on right keeps text
   aligned to the content area. calc(50vw - max-width/2) = the container's
   original inline padding replicated on the text column's outer edge. */
.zededa-image-text--image-cover .zededa-image-text__content {
	justify-content: center;
	padding-left: clamp(48px, 6vw, 120px);
	padding-right: max(
		var(--container-padding-inline-min),
		calc(50vw - var(--container-content-max-width) / 2)
	);
	padding-top: var(--container-padding-block);
	padding-bottom: var(--container-padding-block);
}

/* Image RIGHT: outer-edge padding on left, gap on right */
.zededa-image-text--image-cover.zededa-image-text--image-right .zededa-image-text__content {
	padding-left: max(
		var(--container-padding-inline-min),
		calc(50vw - var(--container-content-max-width) / 2)
	);
	padding-right: clamp(48px, 6vw, 120px);
}

.zededa-image-text--image-cover .zededa-image-text__media {
	display: block;  /* Override flex centering — img fills via object-fit cover */
	overflow: hidden;
}

.zededa-image-text--image-cover .zededa-image-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;  /* Image left: preserve right edge (near text), crop left */
	display: block;
}

/* Image right: preserve left edge (near text), crop right */
.zededa-image-text--image-cover.zededa-image-text--image-right .zededa-image-text__media img {
	object-position: left center;
}

/* Container overrides: bleed image to the browser edge.
   1. Strip ALL container padding (block + inline)
   2. Expand .e-con-inner past its boxed max-width
   3. Content column's padding keeps text within the content area */
.e-con:has(.zededa-image-text--image-cover) {
	padding: 0 !important;
}

.e-con:has(.zededa-image-text--image-cover) > .e-con-inner {
	max-width: none;
}

/* ==========================================================================
   3c. Contain Image Mode (Figma comp 2060:1318)
   Same full-bleed layout as cover, but image fits entirely within the
   column without cropping (object-fit: contain).
   ========================================================================== */

.zededa-image-text--image-contain .zededa-image-text__media img {
	object-fit: contain;
}

/* ==========================================================================
   4. Content Column
   ========================================================================== */

.zededa-image-text__content {
	display: flex;
	flex-direction: column;
	/* Figma: ~49px between heading bottom and body top */
	gap: var(--spacing-3xl);
}

/* ==========================================================================
   5. Large Heading (Plus Jakarta Sans Bold, 40px)
   Figma: Plus Jakarta Sans Bold, 40px, lineHeight 1.14, letterSpacing -0.8px, capitalize
   ========================================================================== */

.zededa-image-text__heading {
	margin: 0;
	color: inherit;
}

.zededa-image-text__heading--large {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(24px, calc(1.5vw + 21px), 40px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.14;
	letter-spacing: -0.8px;
}

/* Heading + divider group: inherits text-align from Elementor container
   so the divider automatically follows heading alignment (left or center). */
.zededa-image-text__heading-group {
	text-align: inherit;
}

/* Accent divider below large heading.
   inline-block so it responds to inherited text-align for centering.
   Color variants match the native Heading widget's accent divider options. */
.zededa-image-text__divider {
	display: inline-block;
	width: var(--border-divider-width);
	height: var(--border-divider-height);
}

/* Orange */
.zededa-image-text__divider--orange {
	background-color: var(--color-brand-primary);
}

/* Sunrise gold (default) */
.zededa-image-text__divider--sunrise {
	background-color: var(--color-brand-sunrise);
}

/* Aqua */
.zededa-image-text__divider--aqua {
	background-color: var(--color-navigation-cta-background);
}

/* Blush (magenta accent) */
.zededa-image-text__divider--blush {
	background-color: var(--color-brand-blush);
}

/* Spring green */
.zededa-image-text__divider--spring {
	background-color: var(--color-brand-spring);
}

/* Eyebrow text above large heading
   Figma: IBM Plex Sans Bold, 26px, uppercase, opacity 0.8, letter-spacing -0.13px */
.zededa-image-text__eyebrow {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(14px, calc(0.56vw + 11.94px), 22px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.45;
	letter-spacing: -0.13px;
	text-transform: uppercase;
	opacity: 0.8;
	color: inherit;
	margin: 0 0 var(--spacing-sm) 0;
}

[class*="elementor-kit-"] .zededa-image-text__eyebrow {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(14px, calc(0.56vw + 11.94px), 22px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.45;
}

/* ==========================================================================
   6. Badge Heading (icon + text in bordered box)
   Figma: Plus Jakarta Sans Bold, 22px, border: 2.265px solid rgba(19,56,68,0.3)
   ========================================================================== */

.zededa-image-text__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	/* Figma: ~2.265px border, rgba(19,56,68,0.3) */
	border: var(--border-width-base) solid rgba(19, 56, 68, 0.3);
	padding: var(--spacing-md) var(--spacing-lg);
	align-self: flex-start;
}

/* On dark backgrounds: lighter blue fill so badge stands out */
.zededa-image-text--on-dark .zededa-image-text__badge {
	background-color: var(--color-container-card-blue);
}

.zededa-image-text__heading--badge {
	/* Figma: Plus Jakarta Sans Bold, 22px — fluid 18px → 22px (px caps prevent Elementor kit scaling) */
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(18px, calc(0.38vw + 16.64px), 22px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.zededa-image-text__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 53px;
	max-height: 30px;
	flex-shrink: 0;
}

.zededa-image-text__badge-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* ==========================================================================
   7. Body Content
   Figma: IBM Plex Sans Medium, 18px, lineHeight 1.45, letterSpacing -0.09px
   ========================================================================== */

.zededa-image-text__body {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.19vw + 15.28px), 18px);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: inherit;
	margin: 0;
}

/* Paragraph variant */
.zededa-image-text__body--paragraph {
	max-width: 540px;
}

.zededa-image-text__body--paragraph p {
	margin: 0 0 var(--spacing-md) 0;
}

.zededa-image-text__body--paragraph p:last-child {
	margin-bottom: 0;
}

/* Inline links in paragraph (Figma comp 1798:271) */
.zededa-image-text__body--paragraph a {
	color: inherit;
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

.zededa-image-text__body--paragraph a:hover {
	opacity: 0.8;
}

/* WYSIWYG-inserted lists — styled as block-list items (Figma 1901:519)
   Dark semi-transparent background with orange left accent border. */
.zededa-image-text__body--paragraph ul {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xl);
	margin: var(--spacing-xl) 0;
}

.zededa-image-text__body--paragraph li {
	background-color: rgba(19, 56, 68, 0.2);
	border-left: 6px solid var(--color-brand-primary);
	padding: var(--spacing-sm) var(--spacing-md);
	margin: 0;
}

/* Elementor Kit override for block list text */
[class*="elementor-kit-"] .zededa-image-text__body--paragraph li {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.37vw + 14.67px), 20px);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
}

/* ==========================================================================
   8. CTA Variants
   ========================================================================== */

/* Button CTA: aqua background, dark border/text */
/* Figma: #6edad5 bg, #133844 border ~1px, Plus Jakarta Sans Bold ~17px */
.zededa-image-text__cta--button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px var(--spacing-lg);
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-base);
	font-size: clamp(14px, calc(0.19vw + 13.28px), 17px);
	font-weight: var(--typography-font-weight-bold);
	letter-spacing: -0.005em;
	line-height: 1.45;
	text-decoration: none;
	cursor: pointer;
	background-color: var(--color-navigation-cta-background);
	color: var(--color-container-blue);
	border: var(--border-width-thin) solid var(--color-container-blue);
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
	white-space: nowrap;
	align-self: flex-start;
}

.zededa-image-text__cta--button:hover {
	opacity: 0.9;
	box-shadow: var(--shadow-md);
}

/* Text Link CTA: orange bold text */
/* Figma: #ff5000, Plus Jakarta Sans Bold, 18px */
.zededa-image-text__cta--link {
	display: inline-flex;
	align-items: center;
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.19vw + 15.28px), 18px);
	font-weight: var(--typography-font-weight-bold);
	letter-spacing: -0.005em;
	line-height: 1.45;
	text-decoration: none;
	cursor: pointer;
	color: var(--color-brand-primary);
	transition: opacity 0.2s ease;
	align-self: flex-start;
}

.zededa-image-text__cta--link:hover {
	opacity: 0.8;
}

/* ==========================================================================
   9. Feature List Cards
   Stacked horizontal cards with left accent bar.
   Card visual styles are now in the shared card stylesheet
   (assets/css/shared/card.css). This section keeps container layout only.
   ========================================================================== */

/* Feature list column: stack cards vertically */
.zededa-image-text__feature-list {
	flex-direction: column;
	align-items: stretch;
	gap: var(--spacing-xl);
}

/* Legacy class alias — card visuals handled by .zededa-card--horizontal-accent */
.zededa-image-text__card {
	/* Styles provided by shared .zededa-card variant classes */
}

/* ==========================================================================
   10. Accessibility
   ========================================================================== */

.zededa-image-text a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.zededa-image-text *,
	.zededa-image-text *::before,
	.zededa-image-text *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   11. Responsive: Tablet (max-width: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {
	.zededa-image-text {
		column-gap: var(--spacing-2xl);
	}
}

/* ==========================================================================
   12. Responsive: Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {
	.zededa-image-text {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: var(--spacing-xl);
	}

	/* Content always on top in mobile, regardless of position setting */
	.zededa-image-text__content {
		order: -1 !important;
	}

	/* Media (image or feature list) always below content */
	.zededa-image-text__media,
	.zededa-image-text__image {
		order: 1 !important;
	}

	.zededa-image-text__body--paragraph {
		max-width: 100%;
	}

	/* Cover image: revert to contained mode on mobile (restore all padding) */
	.e-con:has(.zededa-image-text--image-cover) {
		padding-top: var(--container-padding-block) !important;
		padding-bottom: var(--container-padding-block) !important;
		padding-left: max(
			var(--container-padding-inline-min),
			calc((100% - var(--container-content-max-width)) / 2)
		) !important;
		padding-right: max(
			var(--container-padding-inline-min),
			calc((100% - var(--container-content-max-width)) / 2)
		) !important;
	}

	.zededa-image-text--image-cover .zededa-image-text__content {
		padding: 0;
	}

	.zededa-image-text--image-cover .zededa-image-text__media {
		max-height: 300px;
	}

	.zededa-image-text__cta--button {
		width: 100%;
		text-align: center;
		justify-content: center;
	}
}

/* ==========================================================================
   13. Responsive: Small Mobile (max-width: 375px)
   ========================================================================== */

@media (max-width: 375px) {
	/* Font sizes handled by clamp() — no overrides needed */
}

/* ==========================================================================
   14. Step Carousel (Figma comp 1914:519)
   Multi-panel step-by-step workflow inside the media column.
   Dark panel with orange accent, step badges, nav arrows, progress bars.
   ========================================================================== */

/* --- Carousel Grid: asymmetric columns (text ~37% / carousel ~63%) --- */
.zededa-image-text--carousel {
	grid-template-columns: 2fr 3fr;
}

/* --- Carousel Container --- */
.zededa-image-text__carousel {
	background-color: var(--color-container-blue);
	border: var(--border-width-thick) solid var(--color-brand-primary);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

/* Left accent strip */
.zededa-image-text__carousel::before {
	content: '';
	display: block;
	width: 12px;
	flex-shrink: 0;
	background-color: var(--color-brand-primary);
}

/* Inner container */
.zededa-image-text__carousel-inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: var(--spacing-2xl);
	position: relative;
	min-width: 0;
}

/* --- Navigation Arrows --- */
.zededa-image-text__carousel-nav {
	position: absolute;
	top: var(--spacing-2xl);
	right: var(--spacing-2xl);
	display: flex;
	gap: var(--spacing-xs);
	z-index: 2;
}

.zededa-image-text__carousel-prev,
.zededa-image-text__carousel-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 47px;
	height: 47px;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	cursor: pointer;
	color: var(--color-brand-primary);
	transition: opacity 0.2s ease, color 0.2s ease;
}

.zededa-image-text__carousel-prev:disabled,
.zededa-image-text__carousel-next:disabled {
	color: var(--color-neutral-gray-500);
	opacity: 1;
	cursor: default;
}

.zededa-image-text__carousel-prev:not(:disabled):hover,
.zededa-image-text__carousel-next:not(:disabled):hover {
	opacity: 0.7;
}

.zededa-image-text__carousel-prev:focus-visible,
.zededa-image-text__carousel-next:focus-visible {
	outline: 2px solid var(--color-neutral-white);
	outline-offset: 2px;
}

/* --- Carousel Viewport & Panels --- */
/* Grid stacking: all panels occupy the same cell so the viewport
   height equals the tallest panel — no layout shift on transition. */
.zededa-image-text__carousel-viewport {
	display: grid;
}

.zededa-image-text__carousel-panel {
	grid-area: 1 / 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 300ms ease-out, visibility 0s 300ms;
	pointer-events: none;
}

.zededa-image-text__carousel-panel.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 300ms ease-out, visibility 0s 0s;
	pointer-events: auto;
}

/* --- Step Badge --- */
/* Figma: 161×70px outer box with 3px gray border containing STEP text + number square */
.zededa-image-text__carousel-step {
	display: inline-flex;
	align-items: center;
	gap: 0;
	border: 3px solid var(--color-border-light);
	height: 70px;
	padding: 0 var(--spacing-md);
	margin-bottom: var(--spacing-lg);
}

.zededa-image-text__carousel-step-label {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--spacing-sm) 0 0;
	border: none;
	color: var(--color-brand-sunrise);
	/* Figma: IBM Plex Sans Bold, 28.456px */
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(22px, calc(0.56vw + 20px), 28px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
}

.zededa-image-text__carousel-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 41px;
	height: 41px;
	background-color: var(--color-navigation-cta-background);
	color: var(--color-container-blue);
	/* Figma: IBM Plex Sans Bold, 30.411px */
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(24px, calc(0.56vw + 22px), 30px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1;
}

/* --- Carousel Title --- */
.zededa-image-text__carousel-title {
	color: var(--color-neutral-white);
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(22px, calc(0.75vw + 19.28px), 30px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 var(--spacing-lg) 0;
}

/* --- Carousel Body --- */
.zededa-image-text__carousel-body {
	color: var(--color-neutral-white);
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.37vw + 14.67px), 20px);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
	letter-spacing: -0.005em;
}

.zededa-image-text__carousel-body p {
	margin: 0 0 var(--spacing-md) 0;
}

.zededa-image-text__carousel-body p:last-child {
	margin-bottom: 0;
}

/* Bullet lists inside carousel body */
.zededa-image-text__carousel-body ul {
	margin: var(--spacing-sm) 0;
	padding-left: var(--spacing-lg);
}

.zededa-image-text__carousel-body li {
	margin-bottom: var(--spacing-xs);
}

.zededa-image-text__carousel-body li:last-child {
	margin-bottom: 0;
}

/* --- Progress Bars --- */
.zededa-image-text__carousel-progress {
	display: flex;
	gap: var(--spacing-xs);
	margin-top: var(--spacing-xl);
}

.zededa-image-text__carousel-bar {
	flex: 1;
	height: 21px;
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 3px solid var(--color-border-light);
	border-radius: 0 !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.zededa-image-text__carousel-bar.is-active {
	background-color: var(--color-navigation-cta-background);
	border-color: transparent;
}

.zededa-image-text__carousel-bar:not(.is-active):hover {
	background-color: var(--color-brand-primary);
	border-color: transparent;
}

.zededa-image-text__carousel-bar:focus-visible {
	outline: 2px solid var(--color-neutral-white);
	outline-offset: 2px;
}

/* --- Carousel: Elementor Kit Overrides --- */
[class*="elementor-kit-"] .zededa-image-text__carousel-title {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(22px, calc(0.75vw + 19.28px), 30px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.1;
}

[class*="elementor-kit-"] .zededa-image-text__carousel-body {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(16px, calc(0.37vw + 14.67px), 20px);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
}

[class*="elementor-kit-"] .zededa-image-text__carousel-step-label {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(22px, calc(0.56vw + 20px), 28px);
	font-weight: var(--typography-font-weight-bold);
}

/* Override Elementor Kit global button styles on carousel controls */
[class*="elementor-kit-"] .zededa-image-text__carousel-prev,
[class*="elementor-kit-"] .zededa-image-text__carousel-next {
	border-radius: 0;
	background: none;
	border: none;
	padding: 0;
}

[class*="elementor-kit-"] .zededa-image-text__carousel-bar {
	border-radius: 0;
}

/* --- Carousel: Responsive Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
	.zededa-image-text__carousel-inner {
		padding: var(--spacing-xl);
	}

	.zededa-image-text__carousel-nav {
		top: var(--spacing-xl);
		right: var(--spacing-xl);
	}
}

/* --- Carousel: Responsive Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
	.zededa-image-text--carousel {
		grid-template-columns: 1fr;
	}

	.zededa-image-text__carousel-inner {
		padding: var(--spacing-lg);
	}

	.zededa-image-text__carousel-nav {
		top: var(--spacing-lg);
		right: var(--spacing-lg);
	}

	.zededa-image-text__carousel-step-number {
		width: 34px;
		height: 34px;
	}
}

/* --- Carousel: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
	.zededa-image-text__carousel-panel {
		transition-duration: 0.01ms !important;
	}

	.zededa-image-text__carousel-bar {
		transition-duration: 0.01ms !important;
	}

	.zededa-image-text__carousel-prev,
	.zededa-image-text__carousel-next {
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   15. Tab Showcase Media Type (Figma comp 2201-1567)
   Overrides --single-media centering so nav and image both fill the media
   column width when embedded in the image+text widget layout.
   ========================================================================== */

/* Full-width nav: block instead of inline-flex */
.zededa-tab-showcase--image-text .zededa-tab-showcase__nav {
	display: block;
	width: 100%;
}

/* Remove --single-media centering */
.zededa-tab-showcase--image-text {
	text-align: left;
	width: 100%;
}

/* Media wrapper fills full column width, flush against nav (no gap) */
.zededa-tab-showcase--image-text .zededa-tab-showcase__media-wrapper {
	display: block;
	width: 100%;
	padding-block-start: 0;
	margin-inline: 0;
}

/* Image / video fill full width */
.zededa-tab-showcase--image-text .zededa-tab-showcase__media-image,
.zededa-tab-showcase--image-text .zededa-tab-showcase__media-video {
	width: 100%;
	height: auto;
	display: block;
	max-width: 100%;
}

/* Tabs: equal-width division so the track indicator (which uses
   100% / tab-count) aligns correctly under each tab. */
.zededa-tab-showcase--image-text .zededa-tab-showcase__tab {
	flex: 1 1 0%;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: clamp(10px, 1.4vw, 16px);
}

/* Transparent tab bar so widget inherits the container background color.
   Removes the default neutral-200 gray background that doesn't suit a light/warm container. */
.zededa-tab-showcase--image-text .zededa-tab-showcase__tabs {
	background-color: transparent;
}

/* Elementor Kit override for tabs in image-text context.
   Kit sets button color: white globally — must restore tab showcase colors. */
[class*="elementor-kit-"] .zededa-image-text .zededa-tab-showcase__tab {
	background-color: transparent;
	border-radius: 0;
	color: var(--color-text-secondary, #6b6b6b);
}

[class*="elementor-kit-"] .zededa-image-text .zededa-tab-showcase__tab--active {
	color: var(--color-text-primary, #373935);
}

/* Cream container: dark-blue nav bar with light typography */
.zededa-bg-cream .zededa-tab-showcase--image-text .zededa-tab-showcase__tabs,
.zededa-bg-cream-pattern .zededa-tab-showcase--image-text .zededa-tab-showcase__tabs {
	background-color: var(--color-container-blue, #133844);
}

[class*="elementor-kit-"] .zededa-bg-cream .zededa-image-text .zededa-tab-showcase__tab,
[class*="elementor-kit-"] .zededa-bg-cream-pattern .zededa-image-text .zededa-tab-showcase__tab {
	color: rgba(255, 255, 255, 0.6);
}

[class*="elementor-kit-"] .zededa-bg-cream .zededa-image-text .zededa-tab-showcase__tab:hover,
[class*="elementor-kit-"] .zededa-bg-cream-pattern .zededa-image-text .zededa-tab-showcase__tab:hover {
	color: var(--color-neutral-white, #ffffff);
}

[class*="elementor-kit-"] .zededa-bg-cream .zededa-image-text .zededa-tab-showcase__tab--active,
[class*="elementor-kit-"] .zededa-bg-cream-pattern .zededa-image-text .zededa-tab-showcase__tab--active {
	color: var(--color-neutral-white, #ffffff);
}

.zededa-bg-cream .zededa-tab-showcase--image-text .zededa-tab-showcase__track,
.zededa-bg-cream-pattern .zededa-tab-showcase--image-text .zededa-tab-showcase__track {
	background-color: rgba(255, 255, 255, 0.2);
}

/* Media container: block-level in image-text so tooltip positioning is relative
   to the full-width media, not an inline-block shrink-wrap. */
.zededa-tab-showcase--image-text .zededa-tab-showcase__media-container {
	display: block;
	width: 100%;
}

/* Tooltip: 50% scale of standalone (670×256 → 335×128, card 360→180, padding/border halved) */
.zededa-tab-showcase--image-text .zededa-tab-showcase__tooltip {
	width: 335px;
	height: 128px;
}

.zededa-tab-showcase--image-text .zededa-tab-showcase__tooltip-card {
	width: 180px;
	border-left-width: 4px;
	padding: var(--spacing-sm, 12px);
}

.zededa-tab-showcase--image-text .zededa-tab-showcase__tooltip--mirrored .zededa-tab-showcase__tooltip-card,
.zededa-tab-showcase--image-text .zededa-tab-showcase__tooltip--rotated .zededa-tab-showcase__tooltip-card {
	border-left-width: 0;
	border-right-width: 4px;
}

/* Tooltip description: smaller text than standalone (19px / medium weight).
   19px sits between --typography-font-size-lg (18px) and --xl (20px) — no exact token. */
.zededa-tab-showcase--image-text .zededa-tab-showcase__tooltip-description {
	font-size: 19px;
	font-weight: var(--typography-font-weight-medium, 500);
	line-height: 1.3;
}

/* ==========================================================================
   16. Platform Graphic (Figma comp 2524:2052)
   Interactive hover zones over a background SVG/PNG with tooltips.
   Each tooltip has a diamond dot, connector line, and dark-blue card
   with an orange left accent bar.
   ========================================================================== */

/* --- Container: override flex centering from .zededa-image-text__media --- */
.zededa-image-text__platform-graphic {
	position: relative;
	display: block;
}

/* --- Background image --- */
.zededa-platform-graphic__bg {
	width: 100%;
	height: auto;
	display: block;
}

/* --- Zone button (transparent overlay) --- */
.zededa-platform-graphic__zone {
	position: absolute;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: 0;
	z-index: 2;
	transition: background-color 0.2s ease;
}

.zededa-platform-graphic__zone:hover,
.zededa-platform-graphic__zone:focus-visible {
	background-color: rgba(255, 255, 255, 0.08);
}

.zededa-platform-graphic__zone:focus-visible {
	outline: 2px solid var(--color-neutral-white);
	outline-offset: 2px;
}

/* Editor-only: highlight the zone being edited so the user can see its bounds */
.zededa-platform-graphic__zone--editor-active {
	outline: 2px dashed var(--color-brand-primary, #ff5000);
	outline-offset: 2px;
	background-color: rgba(255, 80, 0, 0.08);
}

/* Screen-reader-only label */
.zededa-platform-graphic__zone-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Tooltip wrapper (positioned absolutely within the graphic container) --- */
.zededa-platform-graphic__tooltip {
	position: absolute;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0s 0.2s;
	pointer-events: none;
}

.zededa-platform-graphic__tooltip.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease, visibility 0s 0s;
	pointer-events: auto;
}

/* --- Diamond dot: orange outer, dark-blue middle, orange center --- */
.zededa-platform-graphic__tooltip-diamond {
	position: absolute;
	width: 22px;
	height: 22px;
	min-width: 22px;
	min-height: 22px;
	background-color: var(--color-container-blue);
	border: 4px solid var(--color-brand-primary);
	transform: rotate(45deg);
	z-index: 2;
}

.zededa-platform-graphic__tooltip-diamond::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 6px;
	height: 6px;
	background-color: var(--color-brand-primary);
	transform: translate(-50%, -50%);
}

/* --- Connector line (SVG diagonal from diamond to card) — behind diamond --- */
.zededa-platform-graphic__tooltip-line {
	position: absolute;
	display: block;
	overflow: visible;
	z-index: 1;
}

/* Connector line color variants (SVG stroke on child <line>) */
.zededa-platform-graphic__tooltip-line--gold line {
	stroke: var(--color-brand-sunrise);
}

.zededa-platform-graphic__tooltip-line--aqua line {
	stroke: var(--color-navigation-cta-background);
}

.zededa-platform-graphic__tooltip-line--magenta line {
	stroke: var(--color-brand-blush);
}

/* --- Tooltip card (dark blue box with orange left accent) --- */
.zededa-platform-graphic__tooltip-card {
	position: absolute;
	display: flex;
	background-color: var(--color-container-blue);
	border: 2px solid #B6B6B6;
	/* Width set dynamically by JS to fill available viewport space */
}

.zededa-platform-graphic__tooltip-accent {
	width: 8px;
	min-width: 8px;
	background-color: var(--color-brand-primary);
	flex-shrink: 0;
}

.zededa-platform-graphic__tooltip-content {
	padding: var(--spacing-md) var(--spacing-lg);
}

/* --- Tooltip typography --- */
.zededa-platform-graphic__tooltip-title {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(16px, calc(0.19vw + 15.28px), 18px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.3;
	color: var(--color-neutral-white);
	margin: 0 0 var(--spacing-xs) 0;
}

.zededa-platform-graphic__tooltip-body {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(13px, calc(0.19vw + 12.28px), 15px);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
	color: var(--color-neutral-white);
}

.zededa-platform-graphic__tooltip-body p {
	margin: 0 0 var(--spacing-xs) 0;
}

.zededa-platform-graphic__tooltip-body p:last-child {
	margin-bottom: 0;
}

/* --- Platform Graphic: Elementor Kit Overrides --- */
[class*="elementor-kit-"] .zededa-platform-graphic__tooltip-title {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(16px, calc(0.19vw + 15.28px), 18px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.3;
}

[class*="elementor-kit-"] .zededa-platform-graphic__tooltip-body {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(13px, calc(0.19vw + 12.28px), 15px);
	font-weight: var(--typography-font-weight-medium);
	line-height: 1.45;
}

[class*="elementor-kit-"] .zededa-platform-graphic__zone {
	background: none;
	border: none;
	border-radius: 0;
}

/* --- Platform Graphic: Responsive Tablet (max-width: 1024px) --- */
@media (max-width: 1024px) {
	.zededa-platform-graphic__tooltip-content {
		padding: var(--spacing-sm) var(--spacing-md);
	}
}

/* --- Platform Graphic: Responsive Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
	.zededa-platform-graphic__tooltip-diamond {
		width: 16px;
		height: 16px;
		min-width: 16px;
		min-height: 16px;
		border-width: 3px;
	}

	.zededa-platform-graphic__tooltip-diamond::after {
		width: 4px;
		height: 4px;
	}
}

/* --- Platform Graphic: Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
	.zededa-platform-graphic__zone {
		transition-duration: 0.01ms !important;
	}

	.zededa-platform-graphic__tooltip {
		transition-duration: 0.01ms !important;
	}
}

/* Mobile: allow horizontal scroll if tab labels overflow */
@media (max-width: 768px) {
	.zededa-tab-showcase--image-text .zededa-tab-showcase__nav {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}