/*
 * Glowence Video Card.
 *
 * Size presets set custom properties per breakpoint; the Style tab controls
 * write the same properties on the widget, so they always win over a preset.
 */

/* Cards keep their size in a row; Elementor lets widgets shrink to zero otherwise. */
.e-con > .elementor-widget-glowence-video-card,
.e-con-inner > .elementor-widget-glowence-video-card {
	flex-shrink: 0;
}

.glowence-video-card {
	--glw-reel-w: 216px;
	--glw-reel-h: 300px;
	--glw-reel-radius: 20px;
	--glw-reel-border: 4px;
	--glw-reel-border-color: var(--e-global-color-glw_warm_white, #fffcfb);
	--glw-reel-bg: var(--e-global-color-glw_soft_gray, #f1eeec);
	--glw-reel-lift: 8px;
	--glw-reel-shadow: 0 20px 40px -16px color-mix(in srgb, var(--e-global-color-accent, #0f0b08) 22%, transparent);
	--glw-reel-tag-color: var(--e-global-color-accent, #0f0b08);
	--glw-reel-tag-bg: var(--e-global-color-glw_warm_white, #fffcfb);
	--glw-reel-tag-offset: 16px;
	--glw-reel-toggle-color: var(--e-global-color-accent, #0f0b08);
	--glw-reel-toggle-bg: color-mix(in srgb, var(--e-global-color-glw_warm_white, #fffcfb) 88%, transparent);
	--glw-reel-toggle-size: 32px;

	position: relative;
	width: var(--glw-reel-w);
	height: var(--glw-reel-h);
	overflow: hidden;
	border: var(--glw-reel-border) solid var(--glw-reel-border-color);
	border-radius: var(--glw-reel-radius);
	background-color: var(--glw-reel-bg);
	box-shadow: var(--glw-reel-shadow);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.glowence-video-card:hover {
	transform: translateY(calc(var(--glw-reel-lift) * -1));
}

.glowence-video-card:where(.is-size-lg) {
	--glw-reel-w: 264px;
	--glw-reel-h: 328px;
	--glw-reel-radius: 24px;
	--glw-reel-lift: 10px;
	--glw-reel-shadow: 0 24px 48px -16px color-mix(in srgb, var(--e-global-color-accent, #0f0b08) 24%, transparent);
}

.glowence-video-card:where(.is-size-xl) {
	--glw-reel-w: 288px;
	--glw-reel-h: 368px;
	--glw-reel-radius: 28px;
	--glw-reel-border: 5px;
	--glw-reel-lift: 12px;
	--glw-reel-shadow: 0 32px 60px -20px color-mix(in srgb, var(--e-global-color-accent, #0f0b08) 28%, transparent);
}

.glowence-video-card__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	object-fit: cover;
}

.glowence-video-card__tag {
	position: absolute;
	bottom: var(--glw-reel-tag-offset);
	left: var(--glw-reel-tag-offset);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	max-width: calc(100% - var(--glw-reel-tag-offset) * 2);
	padding: 6px 16px;
	border-radius: 8px;
	background-color: var(--glw-reel-tag-bg);
	color: var(--glw-reel-tag-color);
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Doubled class beats Site Settings button styles (.elementor-kit-N button). */
.glowence-video-card__toggle.glowence-video-card__toggle {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--glw-reel-toggle-size);
	height: var(--glw-reel-toggle-size);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--glw-reel-toggle-bg);
	color: var(--glw-reel-toggle-color);
	cursor: pointer;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.glowence-video-card__toggle.glowence-video-card__toggle:hover,
.glowence-video-card__toggle.glowence-video-card__toggle:focus {
	background: var(--glw-reel-toggle-bg);
	color: var(--glw-reel-toggle-color);
}

.glowence-video-card__toggle:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #af6200);
	outline-offset: 2px;
}

.glowence-video-card__icon {
	width: 50%;
	height: 50%;
}

.glowence-video-card__icon--play,
.glowence-video-card.is-playing .glowence-video-card__icon--pause {
	display: block;
}

.glowence-video-card__icon--pause,
.glowence-video-card.is-playing .glowence-video-card__icon--play {
	display: none;
}

/* While a clip plays, the button waits for hover or focus on devices that can hover. */
@media (hover: hover) {
	.glowence-video-card.is-playing:not(.is-toggle-visible) .glowence-video-card__toggle {
		opacity: 0;
	}

	.glowence-video-card.is-playing:hover .glowence-video-card__toggle,
	.glowence-video-card.is-playing .glowence-video-card__toggle:focus-visible {
		opacity: 1;
	}
}

/*
 * Optional row helper: give the Container that holds the cards the CSS class
 * glw-reel-row and it turns into a swipeable strip on phones.
 */
@media (max-width: 767px) {
	.elementor .e-con.glw-reel-row {
		overflow-x: auto;
		overflow-y: hidden;
		padding-top: 12px;
		padding-bottom: 8px;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
	}

	.glw-reel-row > .elementor-widget-glowence-video-card {
		scroll-snap-align: center;
	}
}

@media (max-width: 991px) {
	.glowence-video-card {
		--glw-reel-w: 108px;
		--glw-reel-h: 188px;
	}

	.glowence-video-card:where(.is-size-lg) {
		--glw-reel-w: 120px;
		--glw-reel-h: 212px;
		--glw-reel-radius: 20px;
	}

	.glowence-video-card:where(.is-size-xl) {
		--glw-reel-w: 136px;
		--glw-reel-h: 240px;
	}
}

@media (max-width: 767px) {
	.glowence-video-card {
		--glw-reel-w: 128px;
		--glw-reel-h: 224px;
		--glw-reel-radius: 16px;
	}

	.glowence-video-card:where(.is-size-lg) {
		--glw-reel-w: 136px;
		--glw-reel-h: 240px;
		--glw-reel-radius: 16px;
	}

	.glowence-video-card:where(.is-size-xl) {
		--glw-reel-w: 152px;
		--glw-reel-h: 272px;
		--glw-reel-radius: 28px;
	}
}

@media (max-width: 479px) {
	.glowence-video-card {
		--glw-reel-w: 160px;
		--glw-reel-h: 208px;
		--glw-reel-radius: 20px;
	}

	.glowence-video-card:where(.is-size-lg) {
		--glw-reel-w: 160px;
		--glw-reel-h: 224px;
		--glw-reel-radius: 12px;
	}

	.glowence-video-card:where(.is-size-xl) {
		--glw-reel-w: 160px;
		--glw-reel-h: 248px;
		--glw-reel-radius: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.glowence-video-card,
	.glowence-video-card__toggle {
		transition: none;
	}
}