/**
 * Multicolumn Image + Text Widget
 *
 * A horizontal multicolumn navigation bar that switches between content groups.
 * Each content panel reuses the `zededa-image-text` layout CSS; this file styles
 * only the nav bar and the panel show/hide behavior.
 *
 * Figma: nav 3308:3337, variant 3694:2582, content group 3694:2585.
 *
 * Design tokens only — no hardcoded colors/spacing. Kit overrides use the
 * [class*="elementor-kit-"] attribute selector (kit post id is environment-specific).
 *
 * @package Zededa
 */

/* ---------------------------------------------------------------------------
 * Nav bar
 * ------------------------------------------------------------------------- */

.zededa-multicolumn-image-text__nav {
	display: grid;
	grid-template-columns: repeat(var(--mcit-cols, 4), minmax(0, 1fr));
	background-color: var(--color-navigation-background); /* solid #133844 */
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
}

.zededa-multicolumn-image-text__col {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-md);
	padding: var(--spacing-md);
	text-align: center;
	cursor: pointer;
	/* Inactive columns render their number + label dimmed (opacity per comp). */
	color: var(--color-neutral-white);
	opacity: 0.7;
	transition: opacity 0.2s ease;
}

.zededa-multicolumn-image-text__number {
	font-weight: var(--typography-font-weight-semibold);
	font-size: var(--typography-font-size-4xl); /* 36px */
	line-height: 1.45;
	letter-spacing: -0.18px;
	color: inherit; /* inactive: dimmed white; active overridden to aqua below */
}

.zededa-multicolumn-image-text__label {
	width: 100%;
	font-size: var(--typography-font-size-xl); /* 20px */
	font-weight: var(--typography-font-weight-semibold);
	line-height: 1.45;
	letter-spacing: -0.1px;
	color: inherit;
	text-align: center;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Active column: full opacity, number turns aqua. Weight is unchanged (both
   states are SemiBold) — only opacity + number color differ, per the comp. */
.zededa-multicolumn-image-text__col.is-active {
	opacity: 1;
}

.zededa-multicolumn-image-text__col.is-active .zededa-multicolumn-image-text__number {
	color: var(--color-navigation-cta-background); /* aqua #6edad5 */
}

/* Per-column bottom accent bar. Always reserved (4px tall) so switching causes
   no layout shift; transparent until the column is active, then orange. */
.zededa-multicolumn-image-text__underline {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	height: var(--border-width-thick); /* 4px accent bar */
	background: transparent;
	transition: background-color 0.2s ease;
}

.zededa-multicolumn-image-text__col.is-active .zededa-multicolumn-image-text__underline {
	background: var(--color-brand-primary); /* orange #ff5000 */
}

/* Focus visibility for keyboard users. */
.zededa-multicolumn-image-text__col:focus-visible {
	outline: var(--border-width-base) solid var(--color-navigation-cta-background);
	outline-offset: calc(-1 * var(--border-width-base));
}

/* ---------------------------------------------------------------------------
 * Panels
 * ------------------------------------------------------------------------- */

.zededa-multicolumn-image-text__panels {
	margin-block-start: var(--spacing-3xl);
}

/* Hidden panels reserve no space (the [hidden] attribute also removes them from
   the a11y tree). Only the active panel is shown. */
.zededa-multicolumn-image-text__panel[hidden] {
	display: none;
}

/* Per-panel Image Max Width. The repeater control emits --zit-media-max-width
   as an inline custom property on the panel (px or %); unset panels fall back to
   `none`. Mirrors the two cases the Image + Text widget's Max Width control
   targets: the natural-size image, and the cover-mode media container. Scoped to
   the panel so it never affects the single Image + Text widget. */
.zededa-multicolumn-image-text__panel.zededa-image-text--image:not(.zededa-image-text--image-cover) .zededa-image-text__media img {
	max-width: var(--zit-media-max-width, none);
	height: auto;
}

.zededa-multicolumn-image-text__panel.zededa-image-text--image-cover .zededa-image-text__media {
	max-width: var(--zit-media-max-width, none);
}

.zededa-multicolumn-image-text__video {
	display: block;
	width: 100%;
	height: auto;
}

/* Visually-hidden live region for screen-reader announcements. */
.zededa-multicolumn-image-text__live-region {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
 * Kit overrides — reset Elementor's default <button> styling on nav columns.
 * Must use the attribute selector (kit post id changes between environments).
 * ------------------------------------------------------------------------- */

[class*="elementor-kit-"] .zededa-multicolumn-image-text__col {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * Responsive — works for any column count.
 * ------------------------------------------------------------------------- */

/* Tablet: wrap to 2-up. */
@media (max-width: 1024px) {
	.zededa-multicolumn-image-text__nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Mobile: horizontal scroll-snap strip so columns don't crush. */
@media (max-width: 767px) {
	.zededa-multicolumn-image-text__nav {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.zededa-multicolumn-image-text__col {
		flex: 0 0 60%;
		scroll-snap-align: start;
	}

	.zededa-multicolumn-image-text__panels {
		margin-block-start: var(--spacing-2xl);
	}
}

/* ---------------------------------------------------------------------------
 * Body lists — plain bulleted lists, NOT feature-card blocks.
 *
 * The shared Image + Text CSS styles WYSIWYG <ul>/<li> in the body as
 * block-list "cards" (dark semi-transparent bg + orange left border; see
 * image-text-widget.css section 7). The Multicolumn variant wants ordinary
 * lists, so this resets that styling back to a standard bulleted list.
 *
 * Scoped to `.zededa-multicolumn-image-text` so ONLY this widget is affected —
 * the standalone Image + Text widget keeps its card-style lists. This file
 * loads after image-text-widget.css (see get_style_depends()), and the extra
 * wrapper class raises specificity above the shared rules.
 * ------------------------------------------------------------------------- */

.zededa-multicolumn-image-text .zededa-image-text__body--paragraph ul {
	list-style: disc;
	padding-left: var(--spacing-lg);
	display: block;
	gap: 0;
	margin: var(--spacing-md) 0;
}

.zededa-multicolumn-image-text .zededa-image-text__body--paragraph li {
	background-color: transparent;
	border-left: 0;
	padding: 0;
	margin: 0 0 var(--spacing-xs);
}

/* ---------------------------------------------------------------------------
 * Body copy — single base size, no fluid scaling.
 *
 * The shared Image + Text CSS sizes body text and list items with a fluid
 * clamp() (paragraphs 16→18px, list items 16→20px). The Multicolumn variant
 * uses the theme's base body size (--typography-font-size-base = 16px) at every
 * viewport instead. Scoped to this widget only; the second selector is
 * kit-prefixed to outrank the shared `[class*="elementor-kit-"] … li` rule it
 * replaces.
 * ------------------------------------------------------------------------- */

.zededa-multicolumn-image-text .zededa-image-text__body,
[class*="elementor-kit-"] .zededa-multicolumn-image-text .zededa-image-text__body--paragraph li {
	font-size: var(--typography-font-size-base);
}