/**
 * Elcogen Product Hero Widget Styles
 *
 * Based on Figma design specifications:
 * - Desktop: node-id=38896-44076
 * - Mobile: node-id=40901-35092
 *
 * Design Tokens from Figma:
 * - Container width: 88.5rem (desktop)
 * - Spacing baseline: 0.25rem, 0.5rem, 0.75rem, 1rem, 1.5rem, 3rem
 * - Colors: light-blue-100 (#e6f9ff), light-blue-200 (#ccf3ff), neutral-300 (#dbd8df)
 * - Typography: Afacad font family, sizes 1rem-1.3125rem
 * - Border radius: 0.5rem, 22.5rem (buttons)
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* =============================
   Container & Layout
   ============================= */

.elcogen-product-hero {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: var(--spacing-baseline-48, 3rem);
	padding-bottom: var(--spacing-baseline-24, 1.5rem);
}

.elcogen-product-hero__container {
	width: 100%;
	max-width: 88.5rem;
	margin: 0 auto;
	padding: 0 var(--spacing-baseline-24, 1.5rem);
}

.elcogen-product-hero__main-content {
	display: flex;
	gap: 1.5rem;
	align-items: flex-start;
	padding-bottom: 1.5rem;
}

/* =============================
   Left Section (Image Gallery)
   ============================= */

.elcogen-product-hero__left-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 43.5rem;
	flex-shrink: 0;
}

.elcogen-product-hero__main-image-container {
	width: 100%;
	height: 32.625rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.elcogen-product-hero__main-image {
	max-height: 100%;
	object-fit: contain;
	transition: var(--transition-opacity);
}

/* Video Embed */
.elcogen-product-hero__video-embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.elcogen-product-hero__video-embed iframe {
	width: 100%;
	height: 100%;
}

/* Navigation Arrows - HIDDEN FOR NOW */
/* To re-enable: Remove display: none and uncomment this.addNavigationArrows() in JS */
.elcogen-product-hero__nav-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 3rem;
	height: 3rem;
	background-color: rgba(255, 255, 255, 0.9);
	border: none;
	border-radius: 50%;
	display: none; /* HIDDEN - change to 'flex' to re-enable */
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: var(--transition-all);
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
}

.elcogen-product-hero__nav-arrow:hover {
	background-color: var(--color-white);
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
	transform: translateY(-50%) scale(1.1);
}

.elcogen-product-hero__nav-arrow--prev {
	left: 1rem;
}

.elcogen-product-hero__nav-arrow--next {
	right: 1rem;
}

.elcogen-product-hero__nav-arrow svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-dark-neutral);
}

/* Image Gallery Thumbnails */
.elcogen-product-hero__gallery {
	display: flex;
	gap: 1rem;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
    padding-block: .5rem;
    padding-inline: .25rem;
	justify-content: center;
}

.elcogen-product-hero__gallery-item {
	width: 7.5rem;
	height: 7.5rem;
	border: 2px solid var(--colors-neutral-neutral-300, #dbd8df);
	border-radius: var(--radius-02, 0.5rem);
	overflow: hidden;
	position: relative;
	flex-shrink: 0;
	cursor: pointer;
	transition: var(--transition-all);
}

.elcogen-product-hero__gallery-item:hover {
	transform: scale(1.05);
	border-color: var(--color-dark-neutral);
}

.elcogen-product-hero__gallery-item--active {
	border-color: var(--color-dark-neutral);
	border-width: 3px;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
}

.elcogen-product-hero__gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 1 / 1;
}

/* Video Thumbnail */
.elcogen-product-hero__gallery-item--video {
	position: relative;
}

.elcogen-product-hero__gallery-item--video .elcogen-product-hero__gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Play Button Overlay */
.elcogen-product-hero__play-button {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 3rem;
	height: 3rem;
	background-color: rgba(255, 255, 255, 0.95);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
	transition: var(--transition-all);
	pointer-events: none;
	z-index: 1;
}

.elcogen-product-hero__play-button svg {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-dark-neutral);
	margin-left: 0.125rem; /* Optical centering for play icon */
}

.elcogen-product-hero__gallery-item--video:hover .elcogen-product-hero__play-button {
	background-color: var(--color-dark-neutral);
	transform: translate(-50%, -50%) scale(1.15);
}

.elcogen-product-hero__gallery-item--video:hover .elcogen-product-hero__play-button svg {
	color: var(--color-white);
}

/* =============================
   Right Section (Product Details)
   ============================= */

.elcogen-product-hero__right-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
}

/* Product Logo */
.elcogen-product-hero__logo-container {
	padding: var(--spacing-baseline-24, 1.5rem) 0;
	width: 16.25rem;
}

.elcogen-product-hero__logo {
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

/* Description Section */
.elcogen-product-hero__description-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem 0;
	width: 100%;
}

.elcogen-product-hero__description {
	font-family: var(--font-family-body), sans-serif;
	font-size: var(--typography-semantic-sizes-body-small-font-size, 1rem);
	line-height: var(--typography-semantic-sizes-body-small-line-height, 1.5rem);
	font-weight: 400;
	color: var(--colors-text-secondary, #403f47);
	margin: 0;
}

/* CTA Buttons */
.elcogen-product-hero__cta-buttons {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	flex-wrap: wrap;
}

.elcogen-product-hero__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 0.5rem 1.1875rem 0.5rem 0.75rem;
	background-color: var(--buttons-theme-primary-background-default, #1e1c25);
	color: var(--buttons-theme-primary-text-default, #ffffff);
	border: 2px solid var(--buttons-theme-primary-border-default, #1e1c25);
	border-radius: 22.5rem;
	font-family: var(--font-family-body), sans-serif;
	font-size: var(--typography-semantic-sizes-body-medium-font-size, 1.125rem);
	line-height: var(--typography-semantic-sizes-body-medium-line-height, 1.75rem);
	font-weight: 700;
	text-decoration: none;
	transition: var(--transition-all);
	cursor: pointer;
	white-space: nowrap;
}

.elcogen-product-hero__cta-button:hover {
	background-color: transparent;
	color: var(--color-dark-neutral);
	transform: translateY(-0.125rem);
}

.elcogen-product-hero__button-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-right: -0.4375rem;
}

.elcogen-product-hero__button-icon svg,
.elcogen-product-hero__button-icon i {
	width: 1.5rem;
	height: 1.5rem;
	transition: var(--transition-all);
	color: currentColor !important;
	fill: currentColor !important;
}

/* Change icon color on button hover */
.elcogen-product-hero__cta-button:hover .elcogen-product-hero__button-icon svg,
.elcogen-product-hero__cta-button:hover .elcogen-product-hero__button-icon i {
	color: var(--color-dark-neutral) !important;
	fill: var(--color-dark-neutral) !important;
}

/* SVG path elements need explicit color inheritance */
.elcogen-product-hero__button-icon svg path {
	fill: currentColor !important;
	stroke: currentColor !important;
}

.elcogen-product-hero__cta-button:hover .elcogen-product-hero__button-icon svg path {
	fill: var(--color-dark-neutral) !important;
	stroke: var(--color-dark-neutral) !important;
}

.elcogen-product-hero__button-text {
	padding: 0 0.625rem;
	margin-right: -0.4375rem;
}

/* Lead Text Section */
.elcogen-product-hero__lead-section {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-baseline-12, 0.75rem) 0;
	width: 100%;
}

.elcogen-product-hero__lead {
	flex: 1;
	font-family: var(--font-family-body), sans-serif;
	font-size: var(--typography-semantic-sizes-body-large-font-size, 1.3125rem);
	line-height: var(--typography-semantic-sizes-body-large-line-height, 2.4375rem);
	font-weight: 700;
	color: var(--colors-neutral-neutral-1000, #131317);
	margin: 0;
}

/* Download Section */
.elcogen-product-hero__download-section {
	display: flex;
	flex-direction: column;
	padding: var(--spacing-baseline-04, 0.25rem) 0;
	width: 100%;
}

.elcogen-product-hero__download {
	background-color: var(--colors-light-blue-light-blue-100, #e6f9ff);
	border-radius: var(--radius-02, 0.5rem);
	padding: 1rem;
	display: flex;
	gap: 0.5rem;
	align-items: center;
	width: 100%;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.elcogen-product-hero__download:hover {
	background-color: var(--colors-light-blue-light-blue-200, #ccf3ff);
}

.elcogen-product-hero__download-icon {
	width: 4rem;
	height: 4rem;
	background-color: var(--colors-light-blue-light-blue-200, #ccf3ff);
	border-radius: 22.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--colors-neutral-neutral-700, #403f47);
}

.elcogen-product-hero__download-icon svg {
	width: 2rem;
	height: 2rem;
}

.elcogen-product-hero__download-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.elcogen-product-hero__download-text {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-baseline-08, 0.5rem);
	align-items: baseline;
	flex-wrap: wrap;
}

.elcogen-product-hero__download-title {
	font-family: var(--font-family-body), sans-serif;
	font-size: var(--typography-semantic-sizes-body-small-font-size, 1rem);
	line-height: var(--typography-semantic-sizes-body-small-line-height, 1.5rem);
	font-weight: 700;
	color: var(--colors-neutral-neutral-1000, #131317);
}

.elcogen-product-hero__download-info {
	font-family: var(--font-family-body), sans-serif;
	font-size: var(--typography-semantic-sizes-body-small-font-size, 1rem);
	line-height: var(--typography-semantic-sizes-body-small-line-height, 1.5rem);
	font-weight: 400;
	color: var(--colors-text-tertiary, #686878);
}

.elcogen-product-hero__download-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-family: var(--font-family-body), sans-serif;
	font-size: var(--typography-semantic-sizes-links-small-font-size, 1rem);
	line-height: var(--typography-semantic-sizes-links-small-line-height, 1.5rem);
	font-weight: 400;
	color: var(--colors-link-default, #0c28c4);
	text-decoration: underline;
	text-decoration-skip-ink: none;
	transition: var(--transition-color);
	word-break: break-word;
}

.elcogen-product-hero__download-link:hover {
	color: #0820a0;
}

.elcogen-product-hero__download-link svg {
	width: 1rem;
	height: 1rem;
}

/* Body Text Section */
.elcogen-product-hero__body-section {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--spacing-baseline-16, 1rem) 0;
	width: 100%;
}

.elcogen-product-hero__body {
	flex: 1;
	font-family: var(--font-family-body), sans-serif;
	font-size: var(--typography-semantic-sizes-body-large-font-size, 1.3125rem);
	line-height: var(--typography-semantic-sizes-body-large-line-height, 2.4375rem);
	font-weight: 400;
	color: var(--colors-neutral-neutral-1000, #131317);
}

.elcogen-product-hero__body li {
}

.elcogen-product-hero__body p {
	margin: 0;
}

/* =============================
   Responsive Styles
   ============================= */

/* Tablet */
@media (max-width: 64rem) {
	.elcogen-product-hero__left-section {
		width: 50%;
	}

	.elcogen-product-hero__main-image-container {
		height: 25rem;
	}

	.elcogen-product-hero__gallery-item {
		width: 6.25rem;
		height: 6.25rem;
	}
}

/* Mobile */
@media (max-width: 48rem) {
	.elcogen-product-hero {
		padding-top: var(--spacing-baseline-24, 1.5rem);
	}

	.elcogen-product-hero__container {
		padding: 0 0.75rem;
	}

	.elcogen-product-hero__main-content {
		flex-direction: column;
		gap: 1.5rem;
	}

	.elcogen-product-hero__left-section {
		width: 100%;
	}

	.elcogen-product-hero__right-section {
		width: 100%;
	}

	.elcogen-product-hero__logo-container {
		width: 100%;
		padding: 4rem 0 0.75rem 0;
	}

	.elcogen-product-hero__logo {
		max-width: 16.25rem;
	}

	.elcogen-product-hero__description-section {
		gap: 1rem;
		padding: 0.75rem 0;
	}

	.elcogen-product-hero__cta-buttons {
		justify-content: center;
	}

	.elcogen-product-hero__cta-button {
		padding: 0.25rem 1rem;
		font-size: var(--typography-semantic-sizes-body-small-font-size, 1rem);
		line-height: var(--typography-semantic-sizes-body-small-line-height, 1.5rem);
	}

	.elcogen-product-hero__lead {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.elcogen-product-hero__body {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.elcogen-product-hero__video-label {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.elcogen-product-hero__download-text {
		flex-direction: column;
		gap: 0;
	}
}

/* Small Mobile */
@media (max-width: 30rem) {
	.elcogen-product-hero__main-image-container {
		height: 18.75rem;
	}

	.elcogen-product-hero__gallery {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.elcogen-product-hero__gallery::-webkit-scrollbar {
		display: none;
	}

	.elcogen-product-hero__gallery-item {
		width: 6.25rem;
		height: 6.25rem;
	}

	.elcogen-product-hero__cta-buttons {
		flex-direction: column;
		width: 100%;
	}

	.elcogen-product-hero__cta-button {
		width: 100%;
	}
}