/* ==========================================================
   Hyperion – Social
   ========================================================== */

.hsoc {
	--hs-a: var( --e-global-color-primary, #6796ec );
	--hs-a2: var( --e-global-color-accent, #abc1de );
	--hs-cols: 2;
	--hs-gap: 26px;
	--hs-card-h: 620px;
	--hs-card-bg: rgba( 255, 255, 255, 0.05 );
	--hs-card-bd: rgba( 255, 255, 255, 0.13 );
	--hs-card-blur: 14px;
	--hs-card-r: 22px;
	--hs-btn-r: 999px;
	--hs-emb-bg: rgba( 255, 255, 255, 0.02 );
	--hs-emb-pad: 12px;
	--hs-emb-gap: 14px;
	--hs-max: 560px;
	--hs-align: center;
	--hs-rail: var( --e-global-color-primary, #6796ec );
	--hs-rail-o: 0.4;
	--hs-brand: var( --hs-a );

	position: relative;
	overflow: hidden;
	padding: 70px 28px 80px;
	background-color: #0b0e12;
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 24px;
	isolation: isolate;
}

.hsoc__inner {
	position: relative;
	z-index: 2;
	max-width: 1380px;
	margin: 0 auto;
}

/* ---------- Φόντο ---------- */

.hsoc__blob {
	display: none;
}

.hsoc--blobs .hsoc__blob {
	display: block;
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	pointer-events: none;
	filter: blur( 90px );
	opacity: 0.2;
}

.hsoc__blob--1 {
	top: 6%;
	left: 6%;
	width: 320px;
	height: 320px;
	background: var( --hs-a );
	animation: hs-blob 14s ease-in-out infinite;
}

.hsoc__blob--2 {
	bottom: 6%;
	right: 6%;
	width: 360px;
	height: 360px;
	background: var( --hs-a2 );
	animation: hs-blob 17s ease-in-out infinite reverse;
}

.hsoc__blob--3 {
	top: 45%;
	left: 50%;
	width: 240px;
	height: 240px;
	background: var( --hs-a );
	opacity: 0.1;
	transform: translate( -50%, -50% );
	animation: hs-blob-c 20s ease-in-out infinite;
}

@keyframes hs-blob {
	0%, 100% { transform: translate( 0, 0 ) scale( 1 ); }
	50%      { transform: translate( 40px, -30px ) scale( 1.12 ); }
}

@keyframes hs-blob-c {
	0%, 100% { transform: translate( -50%, -50% ) scale( 1 ); }
	50%      { transform: translate( -50%, -50% ) scale( 1.25 ); }
}

.hsoc__mesh {
	display: none;
}

.hsoc--grid .hsoc__mesh {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient( var( --hs-a ) 1px, transparent 1px ),
		linear-gradient( 90deg, var( --hs-a ) 1px, transparent 1px );
	background-size: 44px 44px;
	opacity: 0.04;
	mask-image: radial-gradient( 120% 90% at 50% 30%, #000 25%, transparent 80% );
	-webkit-mask-image: radial-gradient( 120% 90% at 50% 30%, #000 25%, transparent 80% );
}

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

.hsoc__head {
	text-align: center;
	margin-bottom: 44px;
}

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

.hsoc__title {
	margin: 0;
	font-size: clamp( 26px, 4vw, 46px );
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: #ffffff;
}

.hsoc--tgrad .hsoc__title {
	background: linear-gradient( 100deg, #ffffff 20%, var( --hs-a ) 65%, var( --hs-a2 ) 100% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hsoc__sub {
	margin: 14px auto 0;
	max-width: 62ch;
	font-size: clamp( 14.5px, 1.3vw, 16.5px );
	line-height: 1.7;
	color: rgba( 255, 255, 255, 0.72 );
}

.hsoc__note {
	margin: 34px 0 0;
	text-align: center;
	font-size: 14px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.5 );
}

/* ==========================================================
   Σκηνή & πλέγμα καρτών
   ========================================================== */

/*
 * Flex με τα πλαϊνά ως κανονικά items: έτσι η στοίχιση δουλεύει
 * φυσικά και τα rails δεν χρειάζεται να υπολογίζουν θέσεις.
 */
.hsoc__stage {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: var( --hs-align );
	gap: 26px;
}

.hsoc__grid {
	display: grid;
	grid-template-columns: repeat( var( --hs-cols ), minmax( 0, 1fr ) );
	gap: var( --hs-gap );
	align-items: stretch;
	width: 100%;
	max-width: var( --hs-max );
}

/* ==========================================================
   Πλαϊνά ρομποτικά στοιχεία
   Γεμίζουν τον κενό χώρο όταν το πλέγμα δεν πιάνει όλο το
   πλάτος. Είναι καθαρά διακοσμητικά.
   ========================================================== */

.hsoc__rail {
	display: none;
}

.hsoc--rails .hsoc__rail {
	position: relative;
	flex: 0 0 46px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 260px;
	pointer-events: none;
	color: var( --hs-rail );
	opacity: var( --hs-rail-o );
}

/* ---------- Κάθετη γραμμή ---------- */

.hsoc__rail-line {
	position: absolute;
	top: 8%;
	bottom: 8%;
	width: 1px;
	background: linear-gradient( 180deg, transparent, currentColor 18%, currentColor 82%, transparent );
	opacity: 0.5;
}

/* Κουκκίδα που τρέχει πάνω στη γραμμή. */

.hsoc__rail-dot {
	display: none;
}

.hsoc--rail-scan .hsoc__rail-dot,
.hsoc--rail-both .hsoc__rail-dot {
	display: block;
	position: absolute;
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
	animation: hs-rail-run 5.5s cubic-bezier( 0.5, 0, 0.5, 1 ) infinite;
}

.hsoc__rail--r .hsoc__rail-dot {
	animation-delay: 2.75s;
}

@keyframes hs-rail-run {
	0%   { top: 8%; opacity: 0; }
	12%  { opacity: 1; }
	88%  { opacity: 1; }
	100% { top: 92%; opacity: 0; }
}

/* ---------- Κυκλώματα ---------- */

.hsoc__rail-circuit {
	display: none;
}

.hsoc--rail-circuit .hsoc__rail-circuit,
.hsoc--rail-both .hsoc__rail-circuit {
	display: block;
	position: absolute;
	top: 14%;
	bottom: 14%;
	left: 0;
	right: 0;
	background-image:
		/* οριζόντια κλαδιά */
		linear-gradient( 90deg, currentColor 0 14px, transparent 14px ),
		linear-gradient( 90deg, transparent 0 32px, currentColor 32px 46px, transparent 46px ),
		/* κόμβοι */
		radial-gradient( circle 3px at 14px 0, currentColor 98%, transparent ),
		radial-gradient( circle 3px at 32px 0, currentColor 98%, transparent );
	background-repeat: no-repeat, no-repeat, repeat-y, repeat-y;
	background-size:
		46px 1px,
		46px 1px,
		46px 96px,
		46px 148px;
	background-position:
		0 22%,
		0 68%,
		0 12px,
		0 74px;
	opacity: 0.55;
}

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

.hsoc__rail-hud {
	position: absolute;
	left: 50%;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border-color: currentColor;
}

.hsoc__rail-hud--t {
	top: 4%;
	border-top: 2px solid;
	border-left: 2px solid;
	border-right: 2px solid;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	animation: hs-rail-blink 3.2s ease-in-out infinite;
}

.hsoc__rail-hud--b {
	bottom: 4%;
	border-bottom: 2px solid;
	border-left: 2px solid;
	border-right: 2px solid;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	animation: hs-rail-blink 3.2s ease-in-out 1.6s infinite;
}

@keyframes hs-rail-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.25; }
}

/* ---------- Κάθετο κείμενο ---------- */

.hsoc__rail-txt {
	position: relative;
	z-index: 2;
	padding: 14px 0;
	background: var( --hs-card-bg );
	writing-mode: vertical-rl;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 4px;
	text-transform: uppercase;
	white-space: nowrap;
	animation: hs-rail-fade 6s ease-in-out infinite;
}

.hsoc__rail--l .hsoc__rail-txt {
	transform: rotate( 180deg );
}

@keyframes hs-rail-fade {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

.hsoc__col {
	min-width: 0;
}

.hsoc__col--full {
	grid-column: 1 / -1;
}

/* ---------- Κάρτα ---------- */

.hsoc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: var( --hs-card-h );
	overflow: hidden;
	background-color: var( --hs-card-bg );
	backdrop-filter: blur( var( --hs-card-blur ) );
	-webkit-backdrop-filter: blur( var( --hs-card-blur ) );
	border: 1px solid var( --hs-card-bd );
	border-radius: var( --hs-card-r );
	box-shadow: 0 12px 40px -20px rgba( 0, 0, 0, 0.65 );
	transition:
		transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 ),
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

/* Οι κάρτες πλήρους πλάτους δεν χρειάζονται τόσο ύψος. */
.hsoc__col--full .hsoc__card {
	height: auto;
	min-height: 300px;
}

.hsoc__card:hover {
	border-color: var( --hs-a );
	box-shadow:
		0 26px 56px -26px rgba( 0, 0, 0, 0.8 ),
		0 0 34px -18px var( --hs-a );
}

.hsoc--lift .hsoc__card:hover {
	transform: translateY( -8px );
}

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

.hsoc__hud {
	display: none;
}

.hsoc--hud .hsoc__hud {
	display: block;
	position: absolute;
	width: 16px;
	height: 16px;
	z-index: 5;
	pointer-events: none;
	border-color: var( --hs-a );
	opacity: 0;
	transform: scale( 0.7 );
	transition: opacity 0.35s ease, transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hsoc__hud--tl { top: 10px; left: 10px;  border-top: 2px solid; border-left: 2px solid; }
.hsoc__hud--br { bottom: 10px; right: 10px; border-bottom: 2px solid; border-right: 2px solid; }

.hsoc--hud .hsoc__card:hover .hsoc__hud {
	opacity: 0.85;
	transform: scale( 1 );
}

/* Διαγώνια λάμψη */

.hsoc__shine {
	display: none;
}

.hsoc--shine .hsoc__shine {
	display: block;
	position: absolute;
	top: 0;
	left: -75%;
	width: 42%;
	height: 100%;
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent 0%,
		rgba( 255, 255, 255, 0.12 ) 45%,
		var( --hs-a2 ) 50%,
		rgba( 255, 255, 255, 0.12 ) 55%,
		transparent 100%
	);
	opacity: 0.4;
	transform: skewX( -18deg );
	transition: left 0.85s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.hsoc--shine .hsoc__card:hover .hsoc__shine {
	left: 145%;
}

/* ---------- Κεφαλίδα κάρτας ---------- */

.hsoc__hd {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	flex-shrink: 0;
	padding: 20px;
	background: linear-gradient( 135deg, rgba( 255, 255, 255, 0.06 ), rgba( 255, 255, 255, 0.02 ) );
	border-bottom: 1px solid var( --hs-card-bd );
	color: #ffffff;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.5px;
}

/* Με τα χρώματα της πλατφόρμας η κεφαλίδα γίνεται επώνυμη. */
.hsoc--brand .hsoc__hd {
	background: linear-gradient( 135deg, color-mix( in srgb, var( --hs-brand ) 30%, transparent ), rgba( 255, 255, 255, 0.02 ) );
}

.hsoc--brand .hsoc__hd svg,
.hsoc--brand .hsoc__hd i {
	color: var( --hs-brand );
}

.hsoc__hd svg {
	width: 19px;
	height: 19px;
	fill: currentColor;
}

.hsoc__hd i {
	font-size: 18px;
	color: var( --hs-a2 );
}

/* ---------- Σώμα ---------- */

.hsoc__body {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	background: rgba( 255, 255, 255, 0.02 );
	scrollbar-width: thin;
	scrollbar-color: var( --hs-a ) transparent;
}

.hsoc__body::-webkit-scrollbar { width: 7px; }
.hsoc__body::-webkit-scrollbar-track { background: rgba( 255, 255, 255, 0.03 ); }
.hsoc__body::-webkit-scrollbar-thumb { background: var( --hs-a ); border-radius: 10px; }

/* ---------- Πλέγμα εικόνων ---------- */

.hsoc__shots {
	display: grid;
	grid-template-columns: repeat( var( --hs-sc, 2 ), 1fr );
	gap: 6px;
	padding: 10px;
}

.hsoc .hsoc__shot {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 10px;
	text-decoration: none;
	background: rgba( 0, 0, 0, 0.3 );
}

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

.hsoc__shot:hover img {
	transform: scale( 1.08 );
	filter: brightness( 0.55 );
}

.hsoc__shot-ico {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	color: #ffffff;
	opacity: 0;
	transform: scale( 0.7 );
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier( 0.22, 1, 0.36, 1 );
}

.hsoc__shot:hover .hsoc__shot-ico {
	opacity: 1;
	transform: scale( 1 );
}

.hsoc__shot-ico svg { width: 26px; height: 26px; fill: currentColor; }
.hsoc__shot-ico i { font-size: 26px; }

/* ---------- Embed ---------- */

.hsoc__embed {
	display: flex;
	flex-direction: column;
	gap: var( --hs-emb-gap );
	padding: var( --hs-emb-pad );
	background: var( --hs-emb-bg );
}

/*
 * Τα embeds έρχονται με δικά τους πλάτη, σκιές και margins που
 * σπάνε τη στήλη. Τα ισοπεδώνουμε ώστε να γεμίζουν την κάρτα.
 */
.hsoc__embed blockquote,
.hsoc__embed iframe,
.hsoc__embed .fb-page,
.hsoc__embed .instagram-media,
.hsoc__embed .tiktok-embed {
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	box-shadow: none !important;
	border-radius: 14px !important;
	overflow: hidden !important;
}

/* Το Instagram αντικαθιστά το blockquote με iframe που έχει δικό
   του λευκό φόντο. Το στρογγυλεύουμε ώστε να δείχνει σκόπιμο. */
.hsoc__embed .instagram-media-rendered {
	border: 0 !important;
}

.hsoc__embed .fb-page,
.hsoc__embed .fb-page span,
.hsoc__embed .fb-page iframe {
	width: 100% !important;
}

/* Πριν φορτώσει το script, το blockquote είναι σκελετός με λευκό
   φόντο. Το κρατάμε διακριτικό ώστε να μη χτυπάει. */
.hsoc__embed blockquote.instagram-media:not( .instagram-media-rendered ) {
	background: rgba( 255, 255, 255, 0.06 ) !important;
	opacity: 0.5;
}

/* ---------- Κενή κατάσταση ---------- */

.hsoc__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 100%;
	min-height: 200px;
	padding: 30px;
	text-align: center;
}

.hsoc__empty-ico {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 1px solid var( --hs-card-bd );
	background: rgba( 255, 255, 255, 0.04 );
	color: var( --hs-a );
}

.hsoc__empty-ico svg { width: 30px; height: 30px; fill: currentColor; }
.hsoc__empty-ico i { font-size: 30px; }

.hsoc__empty-txt {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: rgba( 255, 255, 255, 0.65 );
}

/* ---------- Υποσέλιδο κάρτας ---------- */

.hsoc__foot {
	flex-shrink: 0;
	padding: 16px;
	border-top: 1px solid var( --hs-card-bd );
	background: rgba( 255, 255, 255, 0.03 );
}

.hsoc .hsoc__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 13px 18px;
	border-radius: var( --hs-btn-r );
	background-image: linear-gradient( 135deg, var( --hs-a ), var( --hs-a2 ) );
	box-shadow: 0 8px 22px -12px var( --hs-a );
	color: #ffffff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-decoration: none;
	box-sizing: border-box;
	transition: transform 0.25s ease, box-shadow 0.25s ease, gap 0.25s ease;
}

.hsoc .hsoc__btn:hover {
	gap: 15px;
	transform: translateY( -2px );
	box-shadow: 0 14px 30px -12px var( --hs-a );
}

.hsoc__btn svg { width: 16px; height: 16px; fill: currentColor; }
.hsoc__btn i { font-size: 15px; }

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

.hsoc.is-anim .hsoc__rv {
	opacity: 0;
	transform: translateY( 24px );
}

.hsoc.is-anim .hsoc__rv.is-in {
	opacity: 1;
	transform: translateY( 0 );
	transition:
		opacity 0.6s ease calc( var( --hs-i, 0 ) * 0.09s ),
		transform 0.7s cubic-bezier( 0.22, 1, 0.36, 1 ) calc( var( --hs-i, 0 ) * 0.09s );
}

.elementor-editor-active .hsoc.is-anim .hsoc__rv {
	opacity: 1;
	transform: none;
}

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

@media ( max-width: 767px ) {
	.hsoc {
		padding: 48px 16px 56px;
		border-radius: 18px;
	}

	.hsoc__head {
		margin-bottom: 30px;
	}

	.hsoc__grid {
		grid-template-columns: 1fr;
	}

	.hsoc__col--full {
		grid-column: auto;
	}

	.hsoc__card {
		border-radius: 18px;
	}

	.hsoc__hd {
		padding: 16px;
		font-size: 14px;
	}

	.hsoc--blobs .hsoc__blob {
		opacity: 0.13;
	}

	/* Σε στενή οθόνη δεν υπάρχει κενός χώρος στα πλάγια. */
	.hsoc--rails .hsoc__rail {
		display: none;
	}

	.hsoc__grid {
		max-width: none;
	}
}

/* Και σε μεσαίες οθόνες, αν το πλέγμα πιάνει σχεδόν όλο το πλάτος. */
@media ( max-width: 1100px ) {
	.hsoc--rails .hsoc__rail {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.hsoc__blob,
	.hsoc__rail-dot,
	.hsoc__rail-hud,
	.hsoc__rail-txt {
		animation: none !important;
	}

	.hsoc.is-anim .hsoc__rv {
		opacity: 1;
		transform: none;
	}
}