/**
 * Video Article Template Styles
 *
 * Full-page template styling for single video posts.
 * Reuses hero overlay + container patterns from the Zededa widget design system.
 * Modeled on case-study-article.css (no author cards, tags, share, related).
 *
 * Sections:
 *   1. Elementor Kit Specificity Overrides
 *   2. Hero Header (teal + geometric SVG + overlay)
 *   3. Body Content (cream-pattern background)
 *   4. Elementor Content Overrides
 *   5. Article Typography
 *   6. Accessibility
 *   7. Responsive: Tablet (max-width: 1024px)
 *   8. Responsive: Mobile (max-width: 768px)
 *   9. Responsive: Small Mobile (max-width: 375px)
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Elementor Kit Specificity Overrides
   [class*="elementor-kit-"] sets global h1-h6, a, body typography that cascade
   into the video template. These rules match or exceed kit specificity.
   ========================================================================== */

[class*="elementor-kit-"] .zededa-vid-hero {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(1rem, calc(0.19vw + 0.955rem), 1.125rem);
	line-height: 1.45;
	color: var(--color-neutral-white);
}

[class*="elementor-kit-"] .zededa-vid-hero h1,
[class*="elementor-kit-"] .zededa-vid-hero-heading {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(1.5rem, calc(2.25vw + 0.97rem), 3rem);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-neutral-white);
}

[class*="elementor-kit-"] .zededa-vid-hero a {
	color: var(--color-neutral-white);
	text-decoration: none;
}

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

[class*="elementor-kit-"] .zededa-vid-body h2 {
	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-vid-body h3 {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(18px, calc(0.56vw + 16px), 24px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

[class*="elementor-kit-"] .zededa-vid-body h4 {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(16px, calc(0.38vw + 14.64px), 20px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.2;
	letter-spacing: -0.02em;
}

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

/* ==========================================================================
   2. Hero Header
   Teal background (#245868) with geometric SVG, translucent overlay,
   and white text content on the left.
   ========================================================================== */

.zededa-vid-hero {
	position: relative;
	width: 100%;
	min-height: 500px;
	display: flex;
	align-items: center;
	background-color: #245868;
	overflow: hidden;
	color: var(--color-neutral-white);
}

/* Orange bottom border — matches navigation bar */
.zededa-vid-hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background-color: var(--color-brand-primary);
	z-index: 3;
	pointer-events: none;
}

/* SVG grid graphic — fills full height, extends from right edge */
.zededa-vid-hero-graphic {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: auto;
	z-index: 0;
	pointer-events: none;
}

/* Translucent overlay — left 50% */
.zededa-vid-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background-color: rgba(19, 56, 68, 0.65);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	z-index: 1;
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(1px)) {
	.zededa-vid-hero-overlay {
		background-color: rgba(19, 56, 68, 0.85);
	}
}

/* Container: centered, max-width 1440px */
.zededa-vid-hero-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--spacing-4xl) var(--spacing-xl);
}

/* Content: left column, max 50% width */
.zededa-vid-hero-content {
	max-width: 50%;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-lg);
	padding-left: var(--spacing-4xl);
	padding-right: var(--spacing-4xl);
}

/* Eyebrow: "VIDEO" label */
.zededa-vid-hero-eyebrow {
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: clamp(0.875rem, calc(0.56vw + 0.74rem), 1.25rem);
	font-weight: var(--typography-font-weight-bold);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: var(--typography-line-height-normal);
	color: var(--color-brand-sunrise);
	margin: 0;
}

/* Heading: post title */
.zededa-vid-hero-heading {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(1.5rem, calc(2.25vw + 0.97rem), 3rem);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--color-neutral-white);
	margin: 0;
}

/* Accent divider bar */
.zededa-vid-hero-divider {
	width: var(--border-divider-width);
	height: var(--border-divider-height);
	background-color: var(--color-brand-primary);
	border: none;
}

/* ==========================================================================
   3. Body Content (cream-pattern background)
   Replicates container-styles.css cream-pattern for standalone PHP use.
   ========================================================================== */

.zededa-vid-body {
	background-color: var(--color-container-cream);
	position: relative;
	overflow: hidden;
	padding-top: var(--container-padding-block);
	padding-bottom: var(--container-padding-block);
	padding-left: max(
		var(--container-padding-inline-min),
		calc((100% - var(--container-content-max-width)) / 2)
	);
	padding-right: max(
		var(--container-padding-inline-min),
		calc((100% - var(--container-content-max-width)) / 2)
	);
	box-sizing: border-box;
}

/* Geometric Z-pattern background */
.zededa-vid-body::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1829 / 1177;
	max-height: 100%;
	background-image: url('../../images/footer-z-pattern.png');
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	pointer-events: none;
	z-index: 0;
}

/* Content sits above the pattern */
.zededa-vid-body > * {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   4. Elementor Content Overrides
   Hide Elementor's original hero (header image + eyebrow/title section),
   remove background images, and apply Zededa typography to
   Elementor-rendered widgets within the video body.
   ========================================================================== */

/* Hide Elementor's original hero: first top-level section (header image)
   and the following container (eyebrow + title). Our PHP hero replaces these. */
.zededa-vid-body .elementor > .elementor-top-section:first-child {
	display: none !important;
}

.zededa-vid-body .elementor > .elementor-top-section:first-child + .e-con.e-parent {
	display: none !important;
}

/* Hide Elementor background images on inner sections/containers */
.zededa-vid-body .elementor-section,
.zededa-vid-body .e-con {
	background-image: none !important;
	background-color: transparent !important;
}

/* Ensure Elementor inner containers don't add unwanted padding/margin */
.zededa-vid-body .elementor-section-wrap,
.zededa-vid-body .elementor-section .elementor-container,
.zededa-vid-body .e-con > .e-con-inner {
	max-width: 100%;
}

/* Apply Zededa typography to Elementor text widgets */
.zededa-vid-body .elementor-widget-text-editor {
	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.65;
	letter-spacing: -0.005em;
	color: var(--color-text-primary);
}

/* Apply Zededa heading typography to Elementor heading widgets */
.zededa-vid-body .elementor-widget-heading .elementor-heading-title {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-weight: var(--typography-font-weight-bold);
	color: var(--color-text-primary);
}

/* ==========================================================================
   5. Article Typography
   IBM Plex Sans Medium body, Plus Jakarta Sans Bold headings.
   ========================================================================== */

.zededa-vid-content {
	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.65;
	letter-spacing: -0.005em;
	color: var(--color-text-primary);
}

.zededa-vid-content p {
	margin: 0 0 var(--spacing-lg) 0;
}

.zededa-vid-content p:last-child {
	margin-bottom: 0;
}

/* Headings within article content */
.zededa-vid-content h2 {
	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;
	color: var(--color-text-primary);
	margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.zededa-vid-content h3 {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(18px, calc(0.56vw + 16px), 24px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.zededa-vid-content h4 {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(16px, calc(0.38vw + 14.64px), 20px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	margin: var(--spacing-xl) 0 var(--spacing-md) 0;
}

.zededa-vid-content h5,
.zededa-vid-content h6 {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(14px, calc(0.19vw + 13.28px), 16px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.3;
	color: var(--color-text-primary);
	margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

/* Links */
.zededa-vid-content a {
	color: var(--color-brand-primary);
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

.zededa-vid-content a:hover {
	opacity: 0.8;
}

/* Images */
.zededa-vid-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: var(--spacing-xl) auto;
}

/* Lists */
.zededa-vid-content ul,
.zededa-vid-content ol {
	margin: 0 0 var(--spacing-lg) 0;
	padding-left: var(--spacing-lg);
}

.zededa-vid-content ul {
	list-style: none;
}

.zededa-vid-content ul li {
	position: relative;
	padding-left: var(--spacing-md);
	margin-bottom: var(--spacing-sm);
	line-height: 1.65;
	color: var(--color-text-primary);
}

.zededa-vid-content ul li::before {
	content: '\2022';
	color: var(--color-brand-primary);
	font-weight: var(--typography-font-weight-bold);
	display: inline-block;
	width: 1em;
	margin-left: -1em;
}

.zededa-vid-content ol li {
	margin-bottom: var(--spacing-sm);
	line-height: 1.65;
	color: var(--color-text-primary);
}

/* Blockquotes */
.zededa-vid-content blockquote {
	border-left: 4px solid var(--color-brand-primary);
	padding-left: var(--spacing-lg);
	margin: var(--spacing-xl) 0;
	font-style: italic;
	color: var(--color-text-secondary);
}

/* Tables */
.zededa-vid-content table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--spacing-xl) 0;
}

.zededa-vid-content th,
.zededa-vid-content td {
	padding: var(--spacing-sm) var(--spacing-md);
	border: 1px solid rgba(19, 56, 68, 0.2);
	text-align: left;
}

.zededa-vid-content th {
	font-weight: var(--typography-font-weight-bold);
	background-color: rgba(19, 56, 68, 0.05);
}

/* Pre / Code */
.zededa-vid-content pre {
	background-color: rgba(19, 56, 68, 0.05);
	padding: var(--spacing-md);
	overflow-x: auto;
	margin: var(--spacing-lg) 0;
	border-radius: 4px;
}

.zededa-vid-content code {
	font-size: 0.9em;
}

/* ==========================================================================
   6. Accessibility
   ========================================================================== */

.zededa-vid-hero a:focus,
.zededa-vid-hero button:focus {
	outline: 2px solid var(--color-neutral-white);
	outline-offset: 2px;
}

.zededa-vid-body a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

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

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

@media (max-width: 1024px) {
	.zededa-vid-hero {
		min-height: 420px;
	}

	.zededa-vid-hero-overlay {
		width: 55%;
	}

	.zededa-vid-hero-content {
		max-width: 55%;
		padding-left: var(--spacing-xl);
		padding-right: var(--spacing-xl);
	}

	.zededa-vid-hero-container {
		padding: var(--spacing-2xl) var(--spacing-lg);
	}
}

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

@media (max-width: 768px) {
	.zededa-vid-hero {
		min-height: 400px;
		align-items: flex-end;
	}

	.zededa-vid-hero-overlay {
		width: 100%;
	}

	.zededa-vid-hero-content {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

	.zededa-vid-hero-container {
		padding: var(--spacing-xl) var(--spacing-md);
	}

	.zededa-vid-hero-graphic {
		opacity: 0.3;
	}
}

/* ==========================================================================
   9. Video Player
   GDPR-compliant YouTube embed via [acf_video] shortcode.
   ========================================================================== */

.zededa-vid-player {
	margin-bottom: var(--spacing-2xl);
}

.zededa-vid-player .video-box {
	position: relative;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 10px;
	overflow: hidden;
}

.zededa-vid-player .overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.75);
	color: var(--color-neutral-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--spacing-sm) var(--spacing-md);
	font-size: 14px;
	/* Reset inline styles from shortcode */
	margin-top: 0 !important;
	text-align: left !important;
	opacity: 1 !important;
}

.zededa-vid-player .playBtn {
	background: #f00;
	color: var(--color-neutral-white);
	border: none;
	padding: var(--spacing-sm) var(--spacing-md);
	border-radius: 5px;
	font-weight: var(--typography-font-weight-bold);
	font-size: 14px;
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.zededa-vid-player .playBtn:hover {
	background: #cc0000;
}

.zededa-vid-player iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* ==========================================================================
   10. Related Videos ("More Videos" section)
   3-column card grid with thumbnail + title.
   ========================================================================== */

.zededa-vid-related {
	margin-top: var(--spacing-4xl);
	padding-top: var(--spacing-4xl);
	border-top: 1px solid rgba(19, 56, 68, 0.15);
	position: relative;
	z-index: 1;
}

[class*="elementor-kit-"] .zededa-vid-related-heading {
	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;
	color: var(--color-text-primary);
	margin: 0 0 var(--spacing-2xl) 0;
}

.zededa-vid-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--spacing-2xl);
}

.zededa-vid-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--color-neutral-white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.zededa-vid-card:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.zededa-vid-card-thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: rgba(19, 56, 68, 0.05);
}

.zededa-vid-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	margin: 0;
}

[class*="elementor-kit-"] .zededa-vid-card-title {
	font-family: 'Plus Jakarta Sans', var(--typography-font-family-heading);
	font-size: clamp(14px, calc(0.38vw + 13px), 18px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--color-text-primary);
	padding: var(--spacing-md);
	margin: 0;
}

.zededa-vid-related-cta {
	text-align: center;
	margin-top: var(--spacing-2xl);
}

.zededa-vid-related-btn {
	display: inline-block;
	font-family: 'IBM Plex Sans', var(--typography-font-family-base);
	font-size: 16px;
	font-weight: var(--typography-font-weight-bold);
	color: var(--color-brand-primary);
	text-decoration: none;
	padding: var(--spacing-sm) var(--spacing-lg);
	border: 2px solid var(--color-brand-primary);
	border-radius: 4px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.zededa-vid-related-btn:hover {
	background-color: var(--color-brand-primary);
	color: var(--color-neutral-white);
}

.zededa-vid-related-btn .cta-arrow {
	display: inline-block;
	transition: transform 0.2s ease;
}

.zededa-vid-related-btn:hover .cta-arrow {
	transform: translateX(3px);
}

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

@media (max-width: 375px) {
	.zededa-vid-hero-container {
		padding: var(--spacing-lg) var(--spacing-sm);
	}
}

/* ==========================================================================
   12. Responsive: Related Videos
   ========================================================================== */

@media (max-width: 1024px) {
	.zededa-vid-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.zededa-vid-related-grid {
		grid-template-columns: 1fr;
	}

	.zededa-vid-player .overlay {
		flex-direction: column;
		text-align: center;
		gap: var(--spacing-xs);
		font-size: 12px;
		line-height: 1.3;
	}
}