/* ==========================================================
   Hyperion – Team widget
   ========================================================== */

.hteam {
	--ht-cols: 4;
	--ht-gap: 22px;
	--ht-ratio: 3 / 4;
	--ht-bg: #141920;
	--ht-bd: rgba( 255, 255, 255, 0.08 );
	--ht-r: 14px;
	--ht-accent: var( --e-global-color-primary, #6796ec );
	--ht-accent2: var( --e-global-color-accent, #abc1de );
	--ht-f-active: var( --e-global-color-accent, #abc1de );

	--ht-nav-bg: rgba( 8, 11, 15, 0.7 );
	--ht-nav-bd: rgba( 255, 255, 255, 0.14 );
	--ht-nav-ico: #ffffff;
	--ht-nav-s: 42px;
	--ht-dot: var( --e-global-color-primary, #6796ec );
}

/* ==========================================================
   Επικεφαλίδα
   ========================================================== */

.hteam__head {
	margin-bottom: 34px;
}

.hteam__eyebrow {
	display: inline-block;
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var( --ht-accent );
}

.hteam__title {
	margin: 0;
	font-size: clamp( 24px, 3.4vw, 38px );
	line-height: 1.2;
	color: #ffffff;
}

.hteam__sub {
	margin: 12px auto 0;
	max-width: 60ch;
	font-size: 14.5px;
	line-height: 1.65;
	color: #9aa6b2;
}

.hteam__head[ style*='left' ] .hteam__sub {
	margin-left: 0;
}

/* ==========================================================
   Φίλτρα
   ========================================================== */

.hteam__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.hteam__filter {
	position: relative;
	overflow: hidden;
	padding: 8px 18px;
	border: 1px solid rgba( 255, 255, 255, 0.15 );
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #c3ccd6;
	cursor: pointer;
	user-select: none;
	transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.hteam__filter::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var( --ht-f-active );
	opacity: 0.14;
	transform: scaleX( 0 );
	transition: transform 0.35s cubic-bezier( 0.65, 0, 0.35, 1 );
}

.hteam__filter:hover::before,
.hteam__filter.is-active::before {
	transform: scaleX( 1 );
}

.hteam__filter:hover,
.hteam__filter.is-active {
	color: var( --ht-f-active );
	border-color: var( --ht-f-active );
	box-shadow: 0 0 16px -5px var( --ht-f-active );
}

/* ==========================================================
   Πλέγμα & κάρτα
   ========================================================== */

.hteam__grid {
	display: grid;
	grid-template-columns: repeat( var( --ht-cols ), 1fr );
	gap: var( --ht-gap );
	perspective: 1400px;
}

.hteam__card {
	position: relative;
	min-width: 0;
	transform-style: preserve-3d;
	transition: transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hteam__card.is-hidden {
	display: none;
}

.hteam__media {
	position: relative;
	aspect-ratio: var( --ht-ratio );
	border-radius: var( --ht-r );
	border: 1px solid var( --ht-bd );
	background: var( --ht-bg );
	overflow: hidden;
	transition: border-color 0.35s ease, box-shadow 0.35s ease;
}

.hteam__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ), filter 0.45s ease;
}

.hteam--gray .hteam__media img {
	filter: grayscale( 1 ) contrast( 1.06 );
}

.hteam__card:hover .hteam__media img {
	transform: scale( 1.07 );
}

.hteam--gray .hteam__card:hover .hteam__media img {
	filter: grayscale( 0 );
}

.hteam__card:hover .hteam__media {
	border-color: var( --ht-accent );
	box-shadow: 0 18px 40px -18px rgba( 0, 0, 0, 0.7 ), 0 0 22px -12px var( --ht-accent );
}

/* Πέπλο για αναγνωσιμότητα του κειμένου */

.hteam__veil {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient( 180deg, transparent 30%, rgba( 6, 9, 13, 0.92 ) 100% );
}

/* Scanline */

.hteam__scan {
	display: none;
}

.hteam--scan .hteam__scan {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	top: -45%;
	height: 45%;
	pointer-events: none;
	background: linear-gradient( 180deg, transparent, var( --ht-accent ) 50%, transparent );
	opacity: 0;
	mix-blend-mode: screen;
}

.hteam--scan .hteam__card:hover .hteam__scan {
	opacity: 0.3;
	animation: ht-scan 1.7s cubic-bezier( 0.5, 0, 0.5, 1 ) infinite;
}

@keyframes ht-scan {
	0%   { top: -45%; }
	100% { top: 100%; }
}

/* Άγκιστρα HUD */

.hteam__hud {
	display: none;
}

.hteam--hud .hteam__hud {
	display: block;
	position: absolute;
	width: 16px;
	height: 16px;
	z-index: 3;
	pointer-events: none;
	border-color: var( --ht-accent );
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hteam__hud--tl { top: 10px; left: 10px;  border-top: 2px solid; border-left: 2px solid;  transform: translate( 5px, 5px ); }
.hteam__hud--tr { top: 10px; right: 10px; border-top: 2px solid; border-right: 2px solid; transform: translate( -5px, 5px ); }
.hteam__hud--bl { bottom: 10px; left: 10px;  border-bottom: 2px solid; border-left: 2px solid;  transform: translate( 5px, -5px ); }
.hteam__hud--br { bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; transform: translate( -5px, -5px ); }

.hteam--hud .hteam__card:hover .hteam__hud {
	opacity: 0.9;
	transform: translate( 0, 0 );
}

/* Αρίθμηση */

.hteam__num {
	display: none;
}

.hteam--num .hteam__num {
	display: block;
	position: absolute;
	top: 12px;
	left: 14px;
	z-index: 3;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	color: var( --ht-accent );
	text-shadow: 0 0 10px rgba( 0, 0, 0, 0.7 );
	opacity: 0.85;
}

/* ==========================================================
   Πληροφορίες
   ========================================================== */

.hteam__info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
	padding: 18px;
}

.hteam__name {
	position: relative;
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.25;
	color: #ffffff;
}

.hteam__role {
	margin: 5px 0 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var( --ht-accent2 );
}

.hteam__bio {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.75 );
}

.hteam__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.hteam__tag {
	padding: 3px 9px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	color: rgba( 255, 255, 255, 0.8 );
}

.hteam__links {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.hteam .hteam__link {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	color: #ffffff;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.hteam .hteam__link:hover {
	background-color: var( --ht-accent );
	border-color: var( --ht-accent );
	transform: translateY( -2px );
}

.hteam .hteam__link svg {
	width: 13px;
	height: 13px;
	fill: currentColor;
}

/* Glitch στο όνομα */

.hteam--glitch .hteam__card:hover .hteam__name {
	animation: ht-glitch 0.34s steps( 2, end ) 1;
}

@keyframes ht-glitch {
	0%   { text-shadow: none; transform: translateX( 0 ); }
	25%  { text-shadow: -2px 0 var( --ht-accent2 ), 2px 0 var( --ht-accent ); transform: translateX( 2px ); }
	50%  { text-shadow: 2px 0 var( --ht-accent2 ), -2px 0 var( --ht-accent ); transform: translateX( -2px ); }
	75%  { text-shadow: -1px 0 var( --ht-accent ); transform: translateX( 1px ); }
	100% { text-shadow: none; transform: translateX( 0 ); }
}

/* ==========================================================
   Layout: REVEAL — το επιπλέον κείμενο ανεβαίνει στο hover
   ========================================================== */

.hteam--reveal .hteam__extra {
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY( 10px );
	transition:
		max-height 0.45s cubic-bezier( 0.22, 1, 0.36, 1 ),
		opacity 0.35s ease,
		transform 0.45s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hteam--reveal .hteam__card:hover .hteam__extra {
	max-height: 240px;
	opacity: 1;
	transform: translateY( 0 );
}

/* ==========================================================
   Layout: FLIP — η κάρτα γυρίζει
   ========================================================== */

.hteam--flip .hteam__media {
	transition: transform 0.6s cubic-bezier( 0.22, 1, 0.36, 1 ), border-color 0.35s ease;
	transform-style: preserve-3d;
}

.hteam--flip .hteam__card:hover .hteam__media {
	transform: rotateY( 180deg );
}

.hteam--flip .hteam__media img,
.hteam--flip .hteam__veil,
.hteam--flip .hteam__num,
.hteam--flip .hteam__scan {
	backface-visibility: hidden;
}

.hteam--flip .hteam__info {
	top: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 22px;
	background: var( --ht-bg );
	transform: rotateY( 180deg );
	backface-visibility: hidden;
}

.hteam--flip .hteam__hud {
	backface-visibility: hidden;
}

/* Στο flip το πίσω μέρος φαίνεται μόνο γυρισμένο, οπότε το κείμενο
   δεν χρειάζεται να κρύβεται. */
.hteam--flip .hteam__extra {
	max-height: none;
	opacity: 1;
	transform: none;
	overflow: visible;
}

/* ==========================================================
   Layout: CARD — φωτογραφία πάνω, κείμενο από κάτω
   ========================================================== */

.hteam--card .hteam__media {
	display: flex;
	flex-direction: column;
	aspect-ratio: auto;
}

.hteam--card .hteam__media img {
	aspect-ratio: var( --ht-ratio );
	flex: 0 0 auto;
}

.hteam--card .hteam__veil {
	display: none;
}

.hteam--card .hteam__info {
	position: static;
	padding: 16px 18px 20px;
}

.hteam--card .hteam__extra {
	max-height: none;
	opacity: 1;
	transform: none;
	overflow: visible;
}

/* ==========================================================
   Layout: STRIP — μικρές στρογγυλές, σε σειρά
   ========================================================== */

.hteam--strip .hteam__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var( --ht-gap );
	perspective: none;
}

.hteam--strip .hteam__card {
	width: 108px;
	text-align: center;
}

.hteam--strip .hteam__media {
	aspect-ratio: 1;
	border-radius: 50%;
}

.hteam--strip .hteam__veil,
.hteam--strip .hteam__hud,
.hteam--strip .hteam__num {
	display: none;
}

.hteam--strip .hteam__info {
	position: static;
	padding: 10px 0 0;
}

.hteam--strip .hteam__name {
	font-size: 13px;
}

.hteam--strip .hteam__role {
	font-size: 10px;
	letter-spacing: 0.8px;
}

.hteam--strip .hteam__extra {
	display: none;
}


/* ==========================================================
   Carousel
   ========================================================== */

.hteam__viewport {
	position: relative;
}

.hteam--carousel .hteam__viewport {
	/* Ο χώρος αφήνει τις σκιές και το ανασήκωμα να φανούν. */
	padding: 6px;
	margin: -6px;
	overflow: hidden;
	/* pan-y: κρατάμε το κάθετο scroll της σελίδας και παίρνουμε
	   μόνο το οριζόντιο σύρσιμο. */
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
	cursor: grab;
}

.hteam--carousel .hteam__viewport:active {
	cursor: grabbing;
}

.hteam--carousel .hteam__media img {
	-webkit-user-drag: none;
}

.hteam--carousel .hteam__grid {
	display: flex;
	grid-template-columns: none;
	transition: transform 0.55s cubic-bezier( 0.22, 1, 0.36, 1 );
	will-change: transform;
}

.hteam--carousel .hteam__card {
	flex: 0 0 calc( 100% / var( --ht-cols ) );
	min-width: 0;
	padding: 0 calc( var( --ht-gap ) / 2 );
	box-sizing: border-box;
}

/* Οι κρυμμένες από φίλτρο δεν πρέπει να δεσμεύουν πλάτος. */
.hteam--carousel .hteam__card.is-hidden {
	display: none;
}

/* Το strip είναι ήδη οριζόντιο· σε carousel κρατά σταθερό πλάτος. */
.hteam--carousel.hteam--strip .hteam__grid {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
}

.hteam--carousel.hteam--strip .hteam__card {
	width: auto;
}

/* ---------- Βελάκια ---------- */

.hteam .hteam__nav {
	position: absolute;
	top: 50%;
	z-index: 6;
	width: var( --ht-nav-s );
	height: var( --ht-nav-s );
	margin: calc( var( --ht-nav-s ) / -2 ) 0 0;
	padding: 0;
	background-color: var( --ht-nav-bg );
	background-image: none;
	border: 1px solid var( --ht-nav-bd );
	border-radius: 50%;
	box-shadow: none;
	backdrop-filter: blur( 8px );
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.hteam .hteam__nav::after {
	content: none;
}

.hteam .hteam__nav::before {
	content: '';
	position: absolute;
	inset: 28%;
	background-color: var( --ht-nav-ico );
	-webkit-mask: var( --hr-ico-arrow-right ) center / contain no-repeat;
	mask: var( --hr-ico-arrow-right ) center / contain no-repeat;
}

.hteam .hteam__nav--prev { left: 8px; }
.hteam .hteam__nav--next { right: 8px; }

.hteam .hteam__nav--prev::before { transform: rotate( 180deg ); }

.hteam .hteam__nav:hover {
	background-color: var( --ht-accent );
	border-color: var( --ht-accent );
	transform: scale( 1.08 );
}

.hteam .hteam__nav[ disabled ] {
	opacity: 0.25;
	pointer-events: none;
}

/* ---------- Κουκκίδες ---------- */

.hteam__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: 22px;
}

.hteam__dots:empty {
	display: none;
}

.hteam .hteam__dot {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	background-color: rgba( 255, 255, 255, 0.22 );
	background-image: none;
	border: 0;
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: width 0.35s cubic-bezier( 0.22, 1, 0.36, 1 ), background-color 0.3s ease;
}

.hteam .hteam__dot::before,
.hteam .hteam__dot::after {
	content: none;
}

.hteam .hteam__dot:hover {
	background-color: rgba( 255, 255, 255, 0.5 );
}

.hteam .hteam__dot.is-active {
	width: 26px;
	background-color: var( --ht-dot );
	box-shadow: 0 0 12px -2px var( --ht-dot );
}

/* Στο carousel η κλιμακωτή είσοδος χαλάει τη θέση των καρτών. */
.hteam--carousel.is-anim .hteam__card {
	opacity: 1;
	transform: none;
}

/* ==========================================================
   Είσοδος με scroll
   ========================================================== */

/* Το `--reveal` είναι ΚΑΙ όνομα layout, οπότε η είσοδος δένεται στο
   `.is-anim` που βάζει το JS μόνο όταν το εφέ είναι όντως ενεργό. */
.hteam.is-anim .hteam__card {
	opacity: 0;
	transform: translateY( 24px );
}

.hteam.is-anim .hteam__card.is-in {
	opacity: 1;
	transform: translateY( 0 );
	transition:
		opacity 0.6s ease calc( var( --ht-i, 0 ) * 0.07s ),
		transform 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) calc( var( --ht-i, 0 ) * 0.07s );
}

.elementor-editor-active .hteam.is-anim .hteam__card {
	opacity: 1;
	transform: none;
}

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

@media ( max-width: 640px ) {
	.hteam__head { margin-bottom: 24px; }

	.hteam .hteam__nav {
		--ht-nav-s: 34px;
	}

	.hteam .hteam__nav--prev { left: 2px; }
	.hteam .hteam__nav--next { right: 2px; }

	.hteam__dots { margin-top: 16px; }
	.hteam__info { padding: 14px; }
	.hteam__name { font-size: 14.5px; }
	.hteam__bio  { font-size: 12px; }

	/* Χωρίς hover δεν φαίνεται ποτέ το επιπλέον κείμενο. */
	.hteam--reveal .hteam__extra {
		max-height: none;
		opacity: 1;
		transform: none;
		overflow: visible;
	}
}

@media ( hover: none ) {
	.hteam--flip .hteam__card:hover .hteam__media {
		transform: none;
	}

	/* Σε αφή το flip δεν λειτουργεί — το κείμενο μπαίνει από κάτω. */
	.hteam--flip .hteam__info {
		position: static;
		transform: none;
		background: var( --ht-bg );
	}

	.hteam--flip .hteam__media {
		display: flex;
		flex-direction: column;
		aspect-ratio: auto;
	}

	.hteam--flip .hteam__media img {
		aspect-ratio: var( --ht-ratio );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hteam__scan { animation: none !important; }

	.hteam.is-anim .hteam__card {
		opacity: 1;
		transform: none;
	}

	.hteam--glitch .hteam__card:hover .hteam__name {
		animation: none;
	}
}