/* ==========================================================
   EEOS Team Showcase – Elementor widget styles
   Most values are CSS variables so the Elementor panel can
   override them without fighting specificity.
   ========================================================== */

.eeos-team {
	--eeos-tilt: 3deg;
	--eeos-col-gap: 40px;
	--eeos-card-gap: 56px;
	--eeos-card-pad: 14px;
	--eeos-overlap: 38px;
	--eeos-lead-overlap: 70px;
	--eeos-icon-box: 52px;
	--eeos-icon-size: 22px;
	--eeos-soc-box: 32px;
	--eeos-soc-size: 14px;
	--eeos-stack-cols: 2;
	--eeos-stack-gap: 28px;

	position: relative;
	overflow: hidden;
	padding: 80px 20px;
	background-color: #f6f9fd;
	color: #0f1f3d;
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
.eeos-team *,
.eeos-team *::before,
.eeos-team *::after { box-sizing: border-box; }
.eeos-team img { display: block; max-width: 100%; }
.eeos-team h1, .eeos-team h2, .eeos-team h3, .eeos-team h4,
.eeos-team h5, .eeos-team h6, .eeos-team p { margin: 0; padding: 0; }

/* ---------- decoration ---------- */
.eeos-team__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.eeos-blob { position: absolute; border-radius: 50%; }
.eeos-blob--main {
	width: 520px; height: 520px; left: 50%; top: 40px; transform: translateX(-50%);
	background: #8fe3f7; opacity: .45; filter: blur(10px);
	border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
}
.eeos-blob--left   { width: 340px; height: 340px; left: -80px;  top: 40%;   background: #e3effb; opacity: .8; }
.eeos-blob--right  { width: 300px; height: 300px; right: -60px; top: 10%;   background: #fdebd9; opacity: .7; }
.eeos-blob--bottom { width: 260px; height: 260px; right: -40px; bottom: 0;  background: #fde1ea; opacity: .7; }

.eeos-dots {
	position: absolute; width: 90px; height: 70px; color: #9fd3f2; opacity: .8;
	background-image: radial-gradient(currentColor 2px, transparent 2.5px);
	background-size: 16px 16px;
}
.eeos-dots--l1 { left: 1%;  top: 26%; }
.eeos-dots--l2 { left: 1%;  bottom: 14%; }
.eeos-dots--r  { right: 1%; top: 46%; }

.eeos-doodle { position: absolute; width: 36px; height: 36px; z-index: 3; pointer-events: none; }
.eeos-doodle path { fill: none; stroke: var(--eeos-accent, #2f8fe0); stroke-width: 3; stroke-linecap: round; }

/* ---------- layout ---------- */
.eeos-team__wrap {
	position: relative; z-index: 1;
	max-width: 1200px; margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.45fr 1fr;
	column-gap: var(--eeos-col-gap);
	align-items: center;
}
.eeos-team__col { display: flex; flex-direction: column; gap: var(--eeos-card-gap); position: relative; z-index: 2; }
.eeos-team__col--left  { grid-column: 1; grid-row: 1; }
.eeos-lead             { grid-column: 2; grid-row: 1; }
.eeos-team__col--right { grid-column: 3; grid-row: 1; }

.eeos-team--solo .eeos-team__wrap { grid-template-columns: 1fr; }
.eeos-team--solo .eeos-lead { grid-column: 1; max-width: 620px; width: 100%; margin: 0 auto; }

/* ---------- side cards ---------- */
.eeos-card {
	position: relative;
	background: var(--eeos-card-bg, #cfe8fb);
	border-radius: 22px;
	padding: var(--eeos-card-pad) var(--eeos-card-pad) 0;
	box-shadow: 0 18px 40px rgba(15, 35, 80, .12);
	transition: transform .35s ease;
}
.eeos-team__col--left  .eeos-card                  { transform: rotate(calc(var(--eeos-tilt) * -1)); }
.eeos-team__col--left  .eeos-card:nth-child(even)  { transform: rotate(calc(var(--eeos-tilt) * -1.3)) translateX(-16px); }
.eeos-team__col--right .eeos-card                  { transform: rotate(var(--eeos-tilt)); }
.eeos-team__col--right .eeos-card:nth-child(even)  { transform: rotate(calc(var(--eeos-tilt) * 1.3)) translateX(16px); }
.eeos-team.eeos-team--hover .eeos-team__col .eeos-card:hover { transform: rotate(0deg) translateY(-6px); }

.eeos-card__photo { border-radius: 16px 16px 0 0; overflow: hidden; height: 260px; }
.eeos-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.eeos-card__label {
	position: relative;
	margin: calc(var(--eeos-overlap) * -1) calc(var(--eeos-card-pad) * -1) 0;
	background: #fff;
	border-radius: 18px;
	padding: 18px 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	box-shadow: 0 10px 28px rgba(15, 35, 80, .12);
}
.eeos-card--no-photo { padding-top: 0; }
.eeos-card--no-photo .eeos-card__label { margin-top: 0; }

.eeos-card__text { flex: 1 1 auto; min-width: 0; }
.eeos-card__name { font-size: 19px; font-weight: 700; line-height: 1.2; color: #0f1f3d; }
.eeos-card__name a { color: inherit; text-decoration: none; }
.eeos-card__role { font-size: 14px; line-height: 1.4; color: #5b6b85; margin-top: 4px; }

.eeos-card__icon {
	flex: 0 0 var(--eeos-icon-box);
	width: var(--eeos-icon-box); height: var(--eeos-icon-box);
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--eeos-icon-bg, #dcefff);
	color: var(--eeos-accent, #2f8fe0);
	font-size: var(--eeos-icon-size);
	line-height: 1;
}
.eeos-card__icon svg { width: var(--eeos-icon-size); height: var(--eeos-icon-size); fill: currentColor; }

/* ---------- featured member ---------- */
.eeos-lead { position: relative; z-index: 1; }
.eeos-lead__photo {
	position: relative;
	border-radius: 28px 28px 0 0;
	overflow: hidden;
	height: 520px;
	background: var(--eeos-card-bg, #9fdcf5);
}
.eeos-lead__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.eeos-lead__panel {
	position: relative;
	margin-top: calc(var(--eeos-lead-overlap) * -1);
	background-color: #0f2350;
	color: #fff;
	border-radius: 22px;
	padding: 34px 44px 38px;
	box-shadow: 0 26px 60px rgba(11, 26, 63, .35);
}
.eeos-lead--no-photo .eeos-lead__panel { margin-top: 0; }

.eeos-lead__name { font-size: 34px; font-weight: 700; line-height: 1.15; color: #fff; }
.eeos-lead__name a { color: inherit; text-decoration: none; }
.eeos-lead__role { font-size: 19px; font-weight: 500; color: #4fd1f5; margin-top: 4px; }
.eeos-lead__rule { display: block; width: 64px; height: 3px; border-radius: 3px; background: #4fd1f5; margin: 18px 0 20px; }
.eeos-lead__bio  { font-size: 16px; line-height: 1.65; color: #d6def0; max-width: 52ch; }

.eeos-arrow { position: absolute; left: -58px; top: 44%; width: 60px; height: 70px; z-index: 3; color: #1ea7c9; }
.eeos-arrow path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- social icons ---------- */
.eeos-social { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eeos-social li { margin: 0; padding: 0; }
.eeos-social a {
	width: var(--eeos-soc-box); height: var(--eeos-soc-box);
	display: grid; place-items: center;
	border-radius: 50%;
	color: #5b6b85;
	background: #eef3f9;
	text-decoration: none;
	transition: color .2s ease, background-color .2s ease;
}
.eeos-social a:hover { color: #fff; background: #0f2350; }
.eeos-social a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.eeos-social svg { width: var(--eeos-soc-size); height: var(--eeos-soc-size); }

.eeos-lead .eeos-social { margin-top: 22px; }
.eeos-lead .eeos-social a { color: #fff; background: rgba(255, 255, 255, .1); }
.eeos-lead .eeos-social a:hover { color: #0f2350; background: #4fd1f5; }

.eeos-team__empty { padding: 30px; text-align: center; border: 2px dashed #c9d6e6; border-radius: 12px; color: #5b6b85; }

/* ---------- tablet (Elementor default breakpoint) ---------- */
@media (max-width: 1024px) {
	.eeos-team__wrap {
		grid-template-columns: repeat(var(--eeos-stack-cols), minmax(0, 1fr));
		gap: var(--eeos-stack-gap);
	}
	/* Flatten both columns so every card sorts by its order number */
	.eeos-team__col { display: contents; }
	.eeos-lead {
		grid-column: 1 / -1; grid-row: auto; order: 0;
		max-width: 640px; width: 100%; margin: 0 auto 12px;
	}
	.eeos-team__col .eeos-card,
	.eeos-team__col .eeos-card:nth-child(even) { transform: none; }
	.eeos-arrow, .eeos-lead .eeos-doodle { display: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
	.eeos-team { padding: 56px 16px; }
	.eeos-card__label { padding: 12px; flex-direction: column; align-items: flex-start; }
	.eeos-card__name { font-size: 15px; }
	.eeos-card__role { font-size: 12px; }
	.eeos-card__icon {
		position: absolute; top: calc(var(--eeos-icon-box) * -0.5); right: 10px;
		--eeos-icon-box: 38px; --eeos-icon-size: 17px;
	}
	.eeos-card__photo { height: 180px; }
	.eeos-lead__photo { height: 380px; }
	.eeos-lead__panel { padding: 26px 24px 28px; }
	.eeos-lead__name { font-size: 26px; }
	.eeos-lead__role { font-size: 16px; }
	.eeos-lead__bio  { font-size: 15px; }
	.eeos-doodle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.eeos-card, .eeos-social a { transition: none; }
}