/* =====================================================
   ORG CHART — structurePage
   ===================================================== */

.org-wrap { padding: 40px 0 60px; }

/* ── shared reveal animation ── */
.org-node {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}
.org-node.visible { opacity: 1; transform: translateY(0); }

/* ── Level 1: Director ── */
.org-l1 { display: flex; justify-content: center; }
.org-l1-card {
	background: linear-gradient(135deg, #218bc3 0%, #3e9aa1 55%, #76ad59 100%);
	color: #fff;
	border-radius: 20px;
	padding: 28px 48px;
	text-align: center;
	box-shadow: 0 8px 32px rgba(33,139,195,0.3);
	min-width: 320px; max-width: 480px; width: 100%;
}
.org-l1-icon {
	width: 56px; height: 56px;
	background: rgba(255,255,255,0.18);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.5rem;
	margin: 0 auto 14px;
}
.org-l1-title { font-size: 1.25rem; font-weight: 700; }

/* ── simple vertical connector ── */
.org-vline {
	width: 3px; height: 48px;
	background: linear-gradient(180deg, #218bc3, #3e9aa1);
	margin: 0 auto;
	border-radius: 2px;
}

/* ── Level 2: Head ── */
.org-l2 { display: flex; justify-content: center; }
.org-l2-card {
	border: 2px solid #e2e8f0;
	border-top: 4px solid #3e9aa1;
	border-radius: 14px;
	padding: 20px 36px;
	text-align: center;
	min-width: 280px; max-width: 420px; width: 100%;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}
.org-l2-title { font-size: 1.05rem; font-weight: 700; color: #1e293b; }

/* ── Level 3 row ── */
.org-l3-row {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	justify-content: center;
	/* space above for the T-connector drawn by card::before/::after */
	padding-top: 34px;
	position: relative;
}

/*
 * T-connector drawn with card pseudo-elements:
 *   ::before  → horizontal half (from card center to the gap/edge)
 *   ::after   → vertical drop (from horizontal bar down to card top)
 *
 * overflow:hidden is NOT on .org-l3-card so these can go outside the box.
 */

/* horizontal half-bar — sits 34px above card top (= row top) to meet the L2 vline */
.org-l3-row > .org-l3-card::before {
	content: '';
	position: absolute;
	top: -34px;
	height: 3px;
	border-radius: 2px;
}
/* left card: line goes from its center to the right (toward the gap) */
.org-l3-row > .org-l3-card:first-child::before {
	left: 50%; right: -14px;  /* -14px = half of 28px gap */
	background: linear-gradient(90deg, #218bc3, #3e9aa1);
}
/* right card: line goes from gap to its center */
.org-l3-row > .org-l3-card:last-child::before {
	left: -14px; right: 50%;
	background: linear-gradient(90deg, #3e9aa1, #76ad59);
}

/* vertical drop from horizontal bar (row top) down to card top */
.org-l3-row > .org-l3-card::after {
	content: '';
	position: absolute;
	top: -34px;         /* start at the horizontal bar */
	left: 50%; transform: translateX(-50%);
	width: 3px;
	height: 34px;       /* reaches card top */
	border-radius: 2px;
}
.org-l3-row > .org-l3-card:first-child::after  { background: linear-gradient(180deg,#218bc3,#3e9aa1); }
.org-l3-row > .org-l3-card:last-child::after   { background: linear-gradient(180deg,#3e9aa1,#76ad59); }

/* ── Level 3 card ── */
.org-l3-card {
	flex: 1;
	max-width: 440px;
	border-radius: 16px;
	/* NO overflow:hidden — needed so ::before/::after can go outside */
	position: relative;
	box-shadow: 0 4px 24px rgba(0,0,0,0.08);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.org-l3-card:hover {
	box-shadow: 0 8px 32px rgba(33,139,195,0.18);
	transform: translateY(-3px);
}
.org-l3-header {
	padding: 18px 22px;
	font-size: 1rem; font-weight: 700;
	color: #fff;
	display: flex; align-items: center; gap: 10px;
	border-radius: 16px 16px 0 0;  /* top radius (no overflow:hidden) */
}
.org-l3-header .ico {
	width: 36px; height: 36px;
	background: rgba(255,255,255,0.2);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 1rem; flex-shrink: 0;
}
.org-l3-card.office    .org-l3-header { background: linear-gradient(135deg,#218bc3,#3e9aa1); }
.org-l3-card.education .org-l3-header { background: linear-gradient(135deg,#3e9aa1,#76ad59); }

.org-l3-body {
	background: #fff;
	padding: 16px 20px;
	border: 1px solid #e2e8f0;
	border-top: none;
	border-radius: 0 0 16px 16px;  /* bottom radius */
}

.org-unit-list { list-style: none; padding: 0; margin: 0; }
.org-unit-list li {
	display: flex; align-items: flex-start; gap: 9px;
	padding: 8px 0;
	border-bottom: 1px dashed #f1f5f9;
	font-size: 0.88rem; color: #475569; line-height: 1.5;
}
.org-unit-list li:last-child { border-bottom: none; }
.org-unit-list li .bullet {
	width: 22px; height: 22px; flex-shrink: 0;
	border-radius: 50%;
	background: #f0f9ff; border: 1.5px solid #bae6fd;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.65rem; color: #0284c7; font-weight: 700;
	margin-top: 1px;
}
.org-l3-card.education .org-unit-list li .bullet {
	background: #f0fdf4; border-color: #bbf7d0; color: #16a34a;
}

/* animation delays */
.org-l3-card.office    { transition-delay: 0.1s; }
.org-l3-card.education { transition-delay: 0.25s; }

/* ══════════════ MOBILE ══════════════ */
@media (max-width: 768px) {
	.org-l3-row {
		flex-direction: column;
		padding-top: 0;
	}
	/* hide connector lines on mobile */
	.org-l3-row > .org-l3-card::before,
	.org-l3-row > .org-l3-card::after { display: none; }

	.org-l3-card { max-width: 100%; margin-bottom: 16px; }
	.org-l1-card { min-width: 0; padding: 22px 24px; }
}