/* =============================================================================
   Playa Power – Hero Video Section Widget
   File: assets/css/hero-widget.css
   ============================================================================= */

/* ── Base ─────────────────────────────────────────────────────────────────── */
.cew-hero {
	position   : relative;
	width      : 100%;
	display    : flex;
	align-items: center;
	overflow   : hidden;

	/* CSS custom properties – overridden per-instance via inline style */
	--cew-accent  : #F0163E;
	--cew-overlay : rgba(5, 0, 0, 0.62);
}

/* ── Video wrap ───────────────────────────────────────────────────────────── */
.cew-hero__video-wrap {
	position           : absolute;
	inset              : 0;
	z-index            : 0;
	background-size    : cover;
	background-position: center;
	background-repeat  : no-repeat;
}

.cew-hero__video-wrap video {
	width             : 100%;
	height            : 100%;
	object-fit        : cover;
	object-position   : center;
	display           : block;
}

/* Dark overlay on top of video */
.cew-hero__overlay {
	position  : absolute;
	inset     : 0;
	background: var(--cew-overlay);
	z-index   : 1;
}

/* Radial vignette – darkens edges, keeps subject lit */
.cew-hero__video-wrap::after {
	content       : '';
	position      : absolute;
	inset         : 0;
	background    : radial-gradient(ellipse at 65% 50%, transparent 25%, rgba(0, 0, 0, 0.5) 100%);
	z-index       : 2;
	pointer-events: none;
}

/* ── Social sidebar ───────────────────────────────────────────────────────── */
.cew-hero__social {
	position      : absolute;
	right          : 0;
	bottom        : 0%;
	z-index       : 10;
	display       : flex;
	flex-direction: column;
	align-items   : center;
	gap           : 14px;
	padding       : 0px 14px;
}

.cew-hero__social-label {
	writing-mode    : vertical-rl;
	text-orientation: mixed;
	transform       : rotate(360deg);
	font-size       : 20px;
	letter-spacing  : 0.18em;
	color           : rgba(255, 255, 255, 0.5);
	margin-bottom   : 6px;
}

.cew-hero__social-line {
	width     : 1px;
	height    : 80px;
	opacity: 0.5;
background: #FFF;
}

.cew-hero__social a {
	color      : rgba(255, 255, 255, 0.5);
	transition : color 0.22s ease, transform 0.22s ease;
	display    : flex;
	line-height: 1;
}

.cew-hero__social a:hover {
	color    : #fff;
	transform: scale(1.2);
}

.cew-hero__social svg {
	width : 16px;
	height: 16px;
}

/* Social icon – uploaded image */
.cew-hero__social-icon-img {
	object-fit: contain;
	display   : block;
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.cew-hero__social a:hover .cew-hero__social-icon-img {
	opacity  : 1;
	transform: scale(1.2);
}

/* ── Main content block ───────────────────────────────────────────────────── */
.cew-hero__content {
	position  : relative;
	z-index   : 10;
	padding   : 180px 0px 150px;
	max-width : 1140px;
	width     : 100%;
	margin    : 0 auto;
	/* animation : cewHeroFade .6s ease-in-out ; */
}

/* @keyframes cewHeroFade {
	from { transform: translateY(26px); }
	to   {transform: translateY(0);    }
} */

/* ── Registration badge wrapper ───────────────────────────────────────────── */
.cew-hero__badge-wrapper {
	width          : max-content;
	border-radius  : 26px;
	border         : 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(5px);
	padding        : 4px;
	background     : rgba(256, 256, 256, 0.2);
	margin-bottom  : 8px;
}

/* ── Registration badge ───────────────────────────────────────────────────── */
.cew-hero__badge {
	display        : inline-flex;
	align-items    : center;
	gap            : 8px;
	padding        : 7px 16px;
	border-radius  : 40px;
	margin-bottom  : 0;
	backdrop-filter: blur(6px);
	background     : linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.80) 100%);
	/* animation      : cewHeroFade 0.9s 0.05s ease both; */
	color: #121212;
	font-family: 'Config';
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
}

/* Pulsing red dot before badge text */
.cew-hero__badge::before {
	content      : '';
	display      : inline-block;
	width        : 7px;
	height       : 7px;
	border-radius: 50%;
	background   : var(--cew-accent);
	/* animation    : cewPulse 1.6s ease-in-out infinite; */
}

@keyframes cewPulse {
	0%,  100% { box-shadow: 0 0 0 0   rgba(232, 25, 44, 0.5); }
	50%        { box-shadow: 0 0 0 6px rgba(232, 25, 44, 0);   }
}

/* ── Headline ─────────────────────────────────────────────────────────────── */
.cew-hero__headline {
	margin     : 0 0 12px;
	line-height: 1;
}

.cew-hero__headline-white {
	display       : block;
	color         : #EFEFEF;
	font-size     : 52px;
	font-style    : normal;
	font-weight   : 700;
	line-height   : normal;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	/* animation     : cewHeroFade 0.9s 0.10s ease both; */
	
	 font-family: 'Industry';
}

.cew-hero__headline-accent {
	display       : block;
	color         : #F0163E;
	font-size     : 52px;
	font-style    : italic;
	font-weight   : 800;
	line-height   : normal;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-bottom : 8px;
	/* animation     : cewHeroFade 0.9s 0.18s ease both; */
	
	font-family: 'Industry';
}

/* ── Accent divider ───────────────────────────────────────────────────────── */
.cew-hero__divider {
	width        : 40px;
	height       : 3px;
	background   : var(--cew-accent);
	border-radius: 2px;
	margin       : 18px 0;
	/* animation    : cewHeroFade 0.9s 0.24s ease both; */
}

/* ── Sub-headline ─────────────────────────────────────────────────────────── */
.cew-hero__sub {
	color        : #EFEFEF;
	font-size    : 16px;
	font-style   : normal;
	font-weight  : 500;
	line-height  : 24px;
	white-space  : pre-line;
	margin-bottom: 24px;
	/* animation    : cewHeroFade 0.9s 0.30s ease both; */
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.cew-hero__buttons {
	display  : flex;
	flex-wrap: wrap;
	gap      : 10px;
	/* animation: cewHeroFade 0.9s 0.44s ease both; */
}

.cew-hero__btn {
    min-width: 160px;
	display        : inline-flex;
	align-items    : center;
    justify-content: center;
	padding        : 12px;
	color: #FFF;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px; 
	text-decoration: none;
	border         : 1px solid transparent;
	border-radius  : 8px;
	cursor         : pointer;
	transition     : background 0.22s ease,
	                 color      0.22s ease,
	                 transform  0.22s ease,
	                 box-shadow 0.22s ease;
	font-family: 'Config';
	text-transform: uppercase;
}

/* Primary – solid accent fill */
.cew-hero__btn--primary {
	background  : var(--cew-accent);
	color       : #ffffff;
	border-color: var(--cew-accent);
}

.cew-hero__btn--primary:hover {
	background: transparent;
	color     : var(--cew-accent);
}

/* Secondary – ghost / outline */
.cew-hero__btn--secondary {
	background  : transparent;
	color       : #ffffff;
	border-color: rgba(255, 255, 255, 1);
}

.cew-hero__btn--secondary:hover {
	background  : rgba(255, 255, 255, 1);
	border-color: #ffffff;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
	.cew-hero__content {
		padding: 40px;
	}
}

@media (max-width: 480px) {
	.cew-hero__buttons {
		flex-direction: column;
		width: 235px;
	}

	.cew-hero__btn {
		justify-content: center;
	}
	.cew-hero__sub {
	white-space  : normal
	}
	.cew-hero__social {
		padding: 0 10px;
	}
}