/**
 * Interactive Columns widget styles.
 * Namespace: .gke-interactive-columns
 * All selectors are scoped under this namespace to avoid leaking into
 * the rest of the site, and use logical properties for RTL support.
 */

.gke-interactive-columns {
	--gke-columns: 4;
	--gke-duration: 450ms;
	--gke-easing: ease;
	--gke-overlay-color: #0B1F17;
	--gke-overlay-opacity: 0.55;
	--gke-overlay-hover-color: #0B1F17;
	--gke-overlay-hover-opacity: 0.85;
	--gke-separator-width: 1px;
	--gke-separator-color: #ffffff;
	--gke-separator-opacity: 0.35;

	position: relative;
	width: 100%;
	min-height: 320px;
	overflow: hidden;
	isolation: isolate;
}

.gke-ic-background {
	position: absolute;
	inset: 0;
	background-color: #1a1a1a;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	transition: background-image var(--gke-duration) var(--gke-easing);
	z-index: 0;
}

.gke-ic-columns {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--gke-columns), 1fr);
	width: 100%;
	height: 100%;
}

.gke-column {
	position: relative;
	display: block;
	min-height: 100%;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	border-inline-start: var(--gke-separator-width) solid
		color-mix(in srgb, var(--gke-separator-color) calc(var(--gke-separator-opacity) * 100%), transparent);
}

.gke-column:first-child {
	border-inline-start: 0;
}

.gke-column:focus {
	outline: none;
}

.gke-column:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -4px;
}

/* Overlay: default collapsed state (~25% height), expands on activation. */
.gke-overlay {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	top: auto;
	height: 25%;
	display: flex;
	align-items: stretch;
	background-color: color-mix(in srgb, var(--gke-overlay-color) calc(var(--gke-overlay-opacity) * 100%), transparent);
	transition: height var(--gke-duration) var(--gke-easing), background-color var(--gke-duration) var(--gke-easing);
	overflow: hidden;
}

.gke-overlay-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	width: 100%;
	padding: 20px 16px;
	box-sizing: border-box;
}

.gke-title-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.gke-arrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 22px;
	line-height: 1;
	margin-block-end: 10px;
	transition: transform var(--gke-duration) var(--gke-easing);
}

.gke-arrow-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.gke-title {
	display: inline-block;
	font-weight: 600;
	line-height: 1.3;
}

.gke-description {
	margin-block-start: 10px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height var(--gke-duration) var(--gke-easing), opacity var(--gke-duration) var(--gke-easing);
}

.gke-description p {
	margin: 0 0 0.5em;
}

.gke-description p:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * Active / hover state (desktop pointer devices + JS-driven
 * activation for touch & keyboard).
 * ------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
	.gke-column:hover .gke-overlay,
	.gke-column.gke-is-active .gke-overlay,
	.gke-column:focus-visible .gke-overlay {
		height: 100%;
		background-color: color-mix(in srgb, var(--gke-overlay-hover-color) calc(var(--gke-overlay-hover-opacity) * 100%), transparent);
	}

	.gke-column:hover .gke-description,
	.gke-column.gke-is-active .gke-description,
	.gke-column:focus-visible .gke-description {
		max-height: 300px;
		opacity: 1;
	}
}

/* Touch / activation-driven state (mirrors the hover state, applied via JS class). */
.gke-column.gke-is-active .gke-overlay {
	height: 100%;
	background-color: color-mix(in srgb, var(--gke-overlay-hover-color) calc(var(--gke-overlay-hover-opacity) * 100%), transparent);
}

.gke-column.gke-is-active .gke-description {
	max-height: 300px;
	opacity: 1;
}

/* Arrow animation variants, selected via widget Style controls.
   Class lives on the wrapper (.gke-arrow-anim-*); state lives on the column. */
.gke-arrow-anim-bounce .gke-column.gke-is-active .gke-arrow-icon,
.gke-arrow-anim-bounce .gke-column:hover .gke-arrow-icon,
.gke-arrow-anim-bounce .gke-column:focus-visible .gke-arrow-icon {
	animation: gke-bounce var(--gke-duration) var(--gke-easing) infinite alternate;
}

.gke-arrow-anim-slide .gke-column.gke-is-active .gke-arrow-icon,
.gke-arrow-anim-slide .gke-column:hover .gke-arrow-icon,
.gke-arrow-anim-slide .gke-column:focus-visible .gke-arrow-icon {
	transform: translateY(-6px);
}

.gke-arrow-anim-rotate .gke-column.gke-is-active .gke-arrow-icon,
.gke-arrow-anim-rotate .gke-column:hover .gke-arrow-icon,
.gke-arrow-anim-rotate .gke-column:focus-visible .gke-arrow-icon {
	transform: rotate(90deg);
}

.gke-arrow-anim-none .gke-arrow-icon {
	transition: none;
}

@keyframes gke-bounce {
	from {
		transform: translateY(-4px);
	}
	to {
		transform: translateY(0);
	}
}

/* ---------------------------------------------------------------
 * Tablet.
 * ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.gke-overlay-inner {
		padding: 16px 12px;
	}

	.gke-title {
		font-size: clamp(14px, 2vw, 18px);
	}

	.gke-description {
		font-size: clamp(12px, 1.6vw, 14px);
	}
}

/* ---------------------------------------------------------------
 * Mobile: stack columns vertically, no hover dependency.
 * ------------------------------------------------------------- */
@media (max-width: 767px) {
	.gke-interactive-columns {
		height: auto !important;
		min-height: 0;
	}

	.gke-ic-columns {
		grid-template-columns: 1fr;
	}

	.gke-column {
		min-height: 110px;
		border-inline-start: 0;
		border-block-start: var(--gke-separator-width) solid
			color-mix(in srgb, var(--gke-separator-color) calc(var(--gke-separator-opacity) * 100%), transparent);
	}

	.gke-column:first-child {
		border-block-start: 0;
	}

	.gke-overlay {
		position: relative;
		height: auto;
		min-height: 110px;
	}

	.gke-column.gke-is-active .gke-overlay {
		background-color: color-mix(in srgb, var(--gke-overlay-hover-color) calc(var(--gke-overlay-hover-opacity) * 100%), transparent);
	}

	.gke-overlay-inner {
		justify-content: center;
	}

	.gke-description {
		max-height: 0;
	}

	.gke-column.gke-is-active .gke-description {
		max-height: 500px;
	}
}

/* ---------------------------------------------------------------
 * Reduced motion: disable transitions/animations entirely.
 * ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gke-ic-background,
	.gke-overlay,
	.gke-description,
	.gke-arrow-icon {
		transition: none !important;
		animation: none !important;
	}
}