:root{
	--primary: #4A934A;
	--primary-container: #4A934A;
	--bg-cap: #fcf6f6;
	--secondary: #825335;
	--secondary-container: #825335;
	--surface: #F2F7F2;
}


/* ==========================================================================
	About Page
========================================================================== */
:root {		  
	/* About - 品牌主色系與輔助色 */
	--color-primary-container: #0d7a75;
	--color-primary-light: #e6f4f3;
	--color-secondary-light: #e8f7ec;
	--color-tertiary-light: #fff3e6;

	/* 中性色與背景 */
	--color-error: #ba1a1a;
	--color-error-container: #ffdad6;
	--color-surface-container-high: #dee8ff;
	--color-on-surface-variant: #3e4948;

	/* 陰影 */
	--transition: all 0.25s ease-in-out;
}

/* =============================
	1. Base Reset & Typography
================================ */
html, body {
	font-family: var(--font-family);
	color: var(--on-surfaces);
}

/* Typography Scale */
.display-hero { font-size: 48px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em;color: var(--primary); }
.headline-xl { font-size: 26px; line-height: 36px; font-weight: 700; letter-spacing: -0.015em; }
.headline-lg { font-size: 22px; line-height: 32px; font-weight: 600; }


.body-md { font-size: 1rem; line-height: 26px;color: var(--color-on-surface-variant); display: flex; flex-direction: column; gap: var(--space-md-sm); text-align: justify;}
.body-md span{ font-weight: 700; color: var(--color-error); }
.body-sm { font-size: 0.875rem; line-height: 22px;color: var(--color-on-surface-variant);text-align: justify; }
.label-md { font-size: 0.9rem; line-height: 20px; font-weight: 600; }

@media (min-width: 768px) {
	.headline-xl { font-size: 36px; line-height: 48px; }
	.headline-lg { font-size: 28px; line-height: 38px; }
}

/* =============================
2. Shared Section Components
================================ */
.section-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: var(--radius-full);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	margin-bottom: 0.75rem;
	width: fit-content;
}
.section-badge--primary {
	background-color: var(--on-white);
	color: var(--primary);
	border: 1px solid rgba(0, 95, 91, 0.2);
}
.section-badge--secondary {
	background-color: var(--color-secondary-light);
	color: var(--primary);
}
.section-badge--tertiary {
	background-color: var(--color-tertiary-light);
	color: var(--secondary);
}
.section-header-center {
	text-align: center;
	margin-bottom: 2.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.section-header-center h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 10px;
	letter-spacing: -0.01em;
}
.section-header-center p {
	font-size: .95rem;
	color: var(--outline);
	max-width: 600px;
}
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-full);
	font-size: .85rem;
	font-weight: 500;
	background-color: rgba(0, 95, 91, 0.1);
	color: var(--primary);
	width: fit-content;
}
.chip .material-symbols-outlined {
	font-size: 1rem;
}


/* =============================
3. SECTION 1: HERO
================================ */
.hero-section {
	position: relative;
	overflow: hidden;
	padding: 3rem 0 4rem;
}

.hero-glow-1 {
	position: absolute;
	top: -120px;
	right: -80px;
	width: 480px;
	height: 480px;
	border-radius: 50%;
	background-color: rgba(153, 242, 235, 0.25);
	filter: blur(80px);
	pointer-events: none;
}

.hero-layout {
	position: relative;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
}
@media (min-width: 992px) {
	.hero-layout {
		flex-direction: row;
		gap: 2rem;
	}
}

.hero-left {
	width: 100%;
}
.hero-left .section-badge--primary span:last-child{
	background: rgba(255,255,255,255);
	padding: 1px 6px;
	border-radius: 999px;
}
@media (min-width: 992px) {
	.hero-left {
		width: 55%;
	}
}

.hero-title {
	font-size: 2rem;
	line-height: 1.25;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 1.25rem 0;
}

@media (min-width: 640px) {
	.hero-title {
		font-size: 40px;
	}
}

@media (min-width: 1200px) {
	.hero-title {
		font-size: 46px;
	}
}

.hero-title-gradient {
	background: linear-gradient(90deg, var(--primary) 0%, var(--color-primary-container) 50%, var(--primary) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-desc {
	font-size: 0.9rem;
	color: var(--outline);
	margin-bottom: 1.75rem;
	text-align: justify;
}
.hero-desc p {
	margin-bottom: 0.75rem;
}
.hero-desc strong {
	color: var(--primary);
}
.hero-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.pillar-card {
	background: rgba(255, 255, 255, 0.95);
	border-radius: var(--radius-sm);
	padding: 0.9rem;
	border: 1px solid var(--outline-variant);
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	transition: var(--transition);
}
.pillar-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.pillar-card__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	font-weight: 700;
	font-size: .9rem;
	color: var(--secondary);
}
.pillar-card p {
	font-size: 0.8rem;
	color: var(--outline);
	line-height: 1.4;
	margin-bottom: 0;
	text-align: justify;
}
.hero-right {
	width: 100%;
}

@media (min-width: 992px) {
	.pillar-card__header {
		justify-content: start;
	}
	.hero-right {
		width: 45%;
	}
}

.hero-image-card {
	position: relative;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	background: var(--on-white);
	box-shadow: var(--shadow-xl);
}

.hero-image-wrapper {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	color: var(--secondary);
}

.hero-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.hero-image-card:hover .hero-image-wrapper img {
	transform: scale(1.03);
}

.hero-image-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.7) 100%);
}

.hero-image-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(6px);
	padding: 6px 14px;
	border-radius: var(--radius-full);
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--primary);
	box-shadow: var(--shadow-md);
}
.hero-image-badge .material-symbols-outlined{
	font-size: .9rem;
}

.hero-image-caption {
	position: absolute;
	bottom: 12px;
	left: 16px;
	right: 16px;
	color: var(--on-white);
	font-size: 13px;
	font-weight: 500;
}

/* =============================
4. SECTION 2: WHY INTEGRATED CARE
================================ */
.section-why {
	padding: 4rem 0;
	border-top: 1px solid var(--outline-variant);
	border-bottom: 1px solid var(--outline-variant);
	position: relative;
}

.why-layout {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

@media (min-width: 992px) {
	.why-layout {
		flex-direction: row;
		align-items: stretch;
	}
}

.hero-glow-2 {
	position: absolute;
	top: 30%;
	left: -120px;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background-color: rgba(146, 249, 161, 0.2);
	filter: blur(80px);
	pointer-events: none;
}

/* Split Columns */
.split-layout {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
@media (min-width: 1024px) {
	.split-layout {
		flex-direction: row;
		align-items: center;
	}			
}
.split-left-7 { flex: 0 0 57%;display: flex; flex-direction: column; gap: var(--space-md-sm);padding: .8rem; }
.split-right-5 { flex: 0 0 41%;display: flex; flex-direction: column; gap: var(--space-md-sm); }

.split-right-5 .card {
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	transition: box-shadow 0.2s, transform 0.2s;
	margin-top: 0;
	border: 1px solid var(--outline-variant);
	padding: var(--space-md-sm);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--space-md-sm);
}
.split-right-5 .card .card_chart_icon{
	position: absolute;
	right: -24px;
	bottom: -24px;
	color: rgba(0, 95, 91, 0.05);
	pointer-events: none;
}
.split-right-5 .card .card_chart_icon .material-symbols-outlined{
	font-size: 160px;
	color: rgba(0, 95, 91, 0.05);
}
.split-right-5 .card:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.split-right-5 .card .card_chart_title{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.split-right-5 .card .card_chart_title .label-md{
	color: var(--color-on-surface-variant);
}
.split-right-5 .card .card_chart_title .chip{
	background-color: var(--color-error-container); color: var(--color-error);
}
.split-right-5 .card .card_chart_num{
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
}
.split-right-5 .card .card_chart_num .headline-lg{
	color: var(--primary);
	font-weight: 700;
}
.split-right-5 .card .card_chart_num .body-sm{
	margin-left: var(--space-xs);
}
.split-right-5 .card .card_chart_progress{
	width: 100%; height: 10px;
	border-radius: var(--radius-full);
	background-color: var(--color-surface-container-high);
	overflow: hidden;
}
.split-right-5 .card .card_chart_progress > div{
	width: 12.8%;
	height: 100%;
	border-radius: var(--radius-full);
	background-color: var(--primary);
}
.care-pillars{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-md-sm);
	list-style: none;
	padding: 0;
	margin: 0;
}
.care-pillars .card{
	padding: var(--space-md-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-base);
}
.care-pillars .card .label-md{
	display: flex;
	align-items: center;
	gap: var(--space-base);
	color: var(--secondary);
}
.care-pillars .card .material-symbols-outlined{
	font-size: 1.2rem;
	color: var(--secondary);
}

.care-pillars > .card:nth-child(1) .label-md,
.care-pillars > .card:nth-child(1) .material-symbols-outlined {
	color: var(--primary);
}

.care-pillars > .card:nth-child(4) .label-md,
.care-pillars > .card:nth-child(4) .material-symbols-outlined {
	color: var(--color-primary-container);
}


/* =============================
5. SECTION 3: PATIENT CLUB
================================ */
.section-club {
	padding: 4rem 0;
	border-bottom: 1px solid var(--outline-variant);
}
.section-club .section-header-center .material-symbols-outlined{
	font-size: 0.9rem;
}

.bento-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 992px) {
	.bento-grid {
		grid-template-columns: repeat(12, 1fr);
	}
}

.bento-main-card {
	background: var(--on-white);
	border-radius: var(--radius-2xl);
	border: 1px solid var(--outline-variant);
	box-shadow: var(--shadow-md);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: box-shadow 0.3s;
}
.bento-main-card:hover {
	box-shadow: var(--shadow-lg);
}
.bento-main-header > div:first-child {
	display:flex;			
	flex-wrap: wrap;
	align-items:center;
	color: var(--outline);
	font-size: 1rem;
	justify-content: center;
}
.bento-main-card h3 {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 1.5rem 0 1rem 0;
}

.bento-main-card p {
	font-size: 1rem;
	color: var(--outline);
	margin-bottom: 0.75rem;
	text-align: justify;
}

.bento-join-bar {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--outline-variant);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: end;
	gap: 1rem;
}
@media (min-width: 992px) {
	.bento-main-card {
		grid-column: span 8;
	}
	.bento-main-header > div:first-child {
		justify-content:space-between;
	}
	.bento-join-bar {
		justify-content: space-between;
	}
}

.bento-join-text {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bento-join-text .font-weight-bold + div {
	font-size: 0.75rem;
	color: var(--outline);
}

.bento-icon-box {
	width: 46px;
	height: 46px;
	border-radius: var(--radius-sm);
	background-color: var(--color-secondary-light);
	color: var(--secondary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.bento-icon-box .material-symbols-outlined{
	font-size: 1.45rem;
}

.btn-join-club {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	border-radius: var(--radius-sm);
	background-color: var(--secondary);
	color: var(--on-white);
	font-size: 1rem;
	font-weight: 600;
	transition: var(--transition);
}

.btn-join-club:hover {
	background-color: var(--primary);
	color: var(--on-white);
}
.btn-join-club .material-symbols-outlined{
	color:var(--on-white);
	font-size: 0.9rem;
}

.bento-photo-card {
	position: relative;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	min-height: 260px;
	box-shadow: var(--shadow-md);
	border: 1px solid var(--outline-variant);
}
@media (min-width: 992px) {
	.bento-photo-card {
		grid-column: span 4;
	}
}

.bento-photo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.bento-photo-card:hover img {
	transform: scale(1.03);
}

/* =============================
6. SECTION 4: TIMELINE
================================ */
.section-timeline {
	padding: 4rem 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, .1) 0%);
}
.section-timeline .section-header-center .material-symbols-outlined{
	font-size: 0.9rem;
}

.timeline-wrapper {
	position: relative;
	max-width: 1000px;
	margin: 0 auto;
}

.timeline-wrapper .material-symbols-outlined{
	color: var(--on-white);
	font-size: 1rem;
}

.timeline-spine {
	position: absolute;
	left: 50%;
	top: 16px;
	bottom: 16px;
	width: 2px;
	background: linear-gradient(180deg, rgba(0,95,91,0.3) 0%, rgba(0,110,45,0.3) 50%, #f59e0b 100%);
	transform: translateX(-50%);
}

.timeline-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	position: relative;
	margin-bottom: 2rem;
}

@media (min-width: 992px) {
	.timeline-row {
		flex-direction: row;
		margin-bottom: 3rem;
	}
}

.timeline-col {
	width: 100%;
}

@media (min-width: 992px) {
	.timeline-col { width: 45%; }
	.timeline-col--left { text-align: right; }
	.timeline-col--right { text-align: left; }
}

@media (max-width: 991px) {
	.timeline-node {
		order: -1;
	}
	.timeline-col:empty {
		display: none;
	}
}

.timeline-node {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--on-white);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--on-white);
	box-shadow: var(--shadow-md);
	z-index: 10;
	flex-shrink: 0;
}
.timeline-node .material-symbols-outlined{
	font-size: 1rem;
}

.timeline-node--secondary { background: var(--secondary); }
.timeline-node--tertiary { background: var(--secondary); }
.timeline-node--gold {
	background: linear-gradient(90deg, #f59e0b, #d97706);
	width: 42px;
	height: 42px;
}

.timeline-box {
	padding: 1.25rem;
	border-radius: var(--radius-sm);
	background: var(--on-white);
	border: 1px solid var(--outline-variant);
	box-shadow: var(--shadow-md);
	transition: var(--transition);
}

.timeline-box:hover {
	box-shadow: var(--shadow-lg);
}
.timeline-box--spotlight {
	background: #fffdfa;
	border: 2px solid #fcd34d;
}
.timeline-box--spotlight > div:first-child {
	display:flex;
	gap:6px;
	margin-bottom:6px;
}

.timeline-box--spotlight > div:first-child > .section-badge:first-child {
	background:var(--color-secondary);
	color:var(--on-white);
}
.timeline-box--spotlight > div:first-child > .section-badge:nth-child(2) {
	background:#fef3c7;
	color:#92400e;
}
.timeline-box--spotlight ul{
	font-size:0.8rem;
	color:var(--outline);
	margin-top:8px;
	display:flex;
	flex-direction:column;
	gap:4px;
	margin-bottom: 0;
}
.timeline-box--spotlight ul li{
	display: flex;
	align-items: center;
	gap: 6px;
}
.timeline-box--spotlight ul li .material-symbols-outlined{
	color:var(--primary);
	font-size: 0.9rem;
}
.timeline-box--spotlight > ul > li:nth-child(3) .material-symbols-outlined {
	color:var(--color-secondary);
}
.timeline-box h3 {
	font-size: .95rem;
	font-weight: 700;
	margin: 4px 0;
}

.timeline-box p {
	font-size: 0.8rem;
	color: var(--outline);
	margin-bottom: 0;
}

/* =============================
7. SECTION 5: CTA
================================ */
.transparency-banner {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.65) 100%), url(/media/diabetes_center/diabetes_about/bottom.webp) !important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left;
	color: var(--on-white);
	padding: 3.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-xl);
}

@media (min-width: 992px) {
	.transparency-banner {
		flex-direction: row;
		align-items: center;
		background-position: center;
	}
}
@media (min-width: 1600px) {
	.transparency-banner {
		padding: 6rem 7rem;
	}
}
.transparency-banner__content {
	position: relative;
	z-index: 10;
}
@media (min-width: 992px) {
	.transparency-banner__content {
		width: 40%;
		text-align: justify;
	}
}
.transparency-banner__content .section-badge{
	background: rgba(255,255,255,0.15);
	color: var(--primary);
	border:none;
	font-size: 1rem;
	padding: 10px 0;
}
.transparency-banner__content .section-badge .material-symbols-outlined{
	font-size: 1rem;
}
.transparency-banner__content h2 {
	font-size: 1.55rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
	color: var(--secondary);
}
.transparency-banner__content p {
	font-size: 0.9rem;
	color: var(--outline);
	line-height: 1.7;
}
.cta_content span{
	color:var(--primary);
	font-size: .8rem;
	font-weight:700;
	letter-spacing:0.1em;
	text-transform:uppercase;
}
.cta_content h3{
	color: var(--secondary);
	font-size: 1.6rem;
	font-weight: 700;
	margin: .5rem 0;
}
.btn_box{
	display: flex;
	gap: 1rem;
	width: 65%;
}
.btn_box a{
	width: 100%;
	text-align: center;
	white-space: nowrap;
	font-size: 1.125rem;
}
/* @media (min-width: 992px){
	.btn_box a{
		width: 50%;
	}
} */
.btn_box > a:nth-child(2) {
	background-color: var(--color-secondary) !important;
}



/* ==========================================================================
	Service Page
========================================================================== */
/* Service Section - 1 */
#services .hero-title{
	font-size: 1.65rem;
}
@media (min-width: 992px) {
	#services .hero-title{
		font-size: 3rem;
	}
}
#services .hero-title-highlight{
	color: var(--primary);
	font-weight: 800;
	position: relative;
	display: inline-block;
	margin-top: 0.25rem;
}
#services .hero-title-bg{
	position: absolute;
	bottom: 0.25rem;
	left: 0;
	width: 100%;
	height: 6px;
	background-color: rgba(13 122 117 / 25%);
	border-radius: 9999px;
}
#services .hero-desc{
	max-width: 48rem;
	margin: 0 auto 2.5rem auto;
}
#services .hero-desc p {
	font-size: 1.125rem;
	color: var(--on-surface-variant);
	line-height: 1.625;
}

/* Service Section - 2 */
.sec-header{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 48rem;
	margin:  0 auto 2rem;
}
.sec-subtitle{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--primary);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}
.sec-subtitle-line{
	display: inline-block;
	width: 1.5rem;
	height: 2px;
	background-color: var(--primary);
}
.sec-title{
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--on-surface);
	margin-bottom: 0.75rem;
	letter-spacing: -0.025em;
}
.sec-desc{
	font-size: 1.125rem;
	color: var(--on-surface-variant);
}
.infographic{
	width: 100%;
	margin: 0 auto;
	margin-bottom: 4rem;
}
@media (min-width: 992px) {
	.infographic{
		width: 80%;
	}
}

/* Enrollment Card */
.enrollment-card {
	max-width: 64rem; margin: 0 auto; background-color: var(--on-white);
	border-radius: var(--radius-xl); border: 1px solid rgba(214,223,222,0.6);
	box-shadow: var(--shadow-sm); overflow: hidden; position: relative;
}
.enrollment-header {
	background-color: #f1f6f5; border-bottom: 1px solid rgba(214,223,222,0.5);
	padding: 1rem 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.enrollment-header-left { display: flex; align-items: center; gap: 0.75rem; }
.enrollment-icon {
	width: 2.25rem; height: 2.25rem; border-radius: var(--radius-sm);
	background-color: var(--primary); color: var(--on-white);
	display: flex; align-items: center; justify-content: center;
	font-size: 0.875rem; font-weight: 700; flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.enrollment-icon .material-symbols-outlined {
	font-size: 1.1rem;
	color: var(--on-white);
}
.enrollment-badge-row { display: flex; align-items: center; gap: 0.625rem; }
.enrollment-badge-text-en { font-size: 0.9rem; font-weight: 700; color: var(--color-primary); letter-spacing: 0.05em; text-transform: uppercase; }
.enrollment-badge-pill {
	font-size: 0.8rem; padding: 0 0.5rem; border-radius: var(--radius-sm);
	background-color: white; color: var(--primary); border: 1px solid rgba(13,122,117,0.2); font-weight: 500;
}
.enrollment-header-title { font-size: 1.43rem; font-weight: 700; color: var(--color-on-surface-variant); letter-spacing: -0.025em; margin-top: 0.3rem; }
.enrollment-header-right {
	display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; color: var(--color-on-surface-variant);
}
.enrollment-header-right .material-symbols-outlined {
	color:var(--primary); font-size: 1rem;
}				

.enrollment-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 640px) { .enrollment-body { padding: 2rem; } }

.callout-box {
	display: flex; align-items: flex-start; gap: 1rem; padding: 1rem;
	border-radius: var(--radius-md); background-color: #f8faf9;
	border-top: 1px solid rgba(214,223,222,0.4); border-right: 1px solid rgba(214,223,222,0.4); border-bottom: 1px solid rgba(214,223,222,0.4);
	border-left: 4px solid var(--primary);
}
.callout-icon { color: var(--primary); font-size: 22px; margin-top: 0.125rem; flex-shrink: 0; }
.callout-text { font-size: 1rem; color: var(--color-on-surface-variant); line-height: 1.625;margin-bottom: 0; }
.callout-text strong { color: var(--primary); font-weight: 600; }

.department-section {
	display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: center;
	padding-top: 0.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(214,223,222,0.4);
}
@media (min-width: 1024px) {
	.department-section { grid-template-columns: repeat(12, 1fr); }
}

.department-grid { display: flex; flex-direction: column; gap: 0.625rem; }
@media (min-width: 1024px) { .department-grid { grid-column: span 7 / span 7; } }

.department-title {
	display: flex; align-items: center; gap: 0.375rem; font-size: 1.4rem; font-weight: 700; color: var(--color-on-surface-variant); letter-spacing: 0.025em;flex-wrap: wrap;
}
.department-title-bar { width: 0.375rem; height: 1.5rem; background-color: var(--primary); border-radius: 0.125rem; }
.department-title-sub { color: var(--color-on-surface-variant); font-weight: 400; font-size: 0.9rem; }

.department-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
@media (min-width: 640px) { .department-cards { grid-template-columns: repeat(4, 1fr); } }
.dept-card {
	padding: 0.625rem; border-radius: var(--radius-sm); border: 1px solid rgba(214,223,222,0.5);
	background-color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
	transition: border-color 0.25s;
}
.dept-card:hover { border-color: rgba(13,122,117,0.4); }
.dept-card-title { font-size: 1rem; font-weight: 700; color: var(--color-on-surface-variant); }
.dept-card-sub { font-size: 0.75rem; color: var(--primary); margin-top: 0.125rem; font-weight: 500; }

.department-actions { display: flex; flex-direction: column; gap: 0.625rem;justify-content: center; }
@media (min-width: 1024px) {
.department-actions { grid-column: span 5 / span 5; flex-direction: column; padding-left: 1rem; border-left: 1px solid rgba(214,223,222,0.4); }
}
.department-actions .material-symbols-outlined{
	color: var(--on-white);
	font-size: 1rem;
}
.btn-primary:hover { background-color: var(--color-primary) !important; }

.workflow-title {
	font-size: 1.4rem; font-weight: 700; color: var(--color-on-surface-variant);
	letter-spacing: 0.025em; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.375rem;
}
.workflow-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) { .workflow-grid { grid-template-columns: repeat(3, 1fr); } }

.workflow-step {
	padding: 0.875rem; border-radius: var(--radius-lg); border: 1px solid rgba(214,223,222,0.5);
	background-color: #f8faf9; display: flex; align-items: flex-start; gap: 0.75rem; position: relative;
	transition: border-color 0.25s;
}
.workflow-step:hover { border-color: rgba(13,122,117,0.4); }
.workflow-step-badge {
	font-size: 1rem; font-weight: 800; color: var(--primary);
	background-color: var(--color-primary-light); padding: 0.125rem 0.5rem; border-radius: var(--radius-sm); flex-shrink: 0;
}
.workflow-step-content { display: flex; flex-direction: column; }
.workflow-step-title { font-size: 1rem; font-weight: 700; color: var(--color-on-surface-variant); }
.workflow-step-desc { font-size: 0.85rem; color: var(--color-on-surface-variant); margin-top: 0.125rem; line-height: 1.375; }

/* Core Programs Section */
.programs-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .programs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .programs-grid { grid-template-columns: repeat(3, 1fr); } }

.program-card {
background-color: white; border-radius: var(--radius-2xl); padding: 1.75rem;
border: 1px solid rgba(214,223,222,0.5); box-shadow: var(--shadow-sm);
display: flex; flex-direction: column; justify-content: space-between;
transition: all 0.3s;
}
.program-card:hover { box-shadow: var(--shadow-xl); border-color: rgba(13,122,117,0.4); }

.program-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.program-icon-box {
width: 3.25rem; height: 3.25rem; padding: 0.75rem; border-radius: var(--radius-md);
background-color: var(--color-primary-light); color: var(--color-primary);
display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, color 0.3s;
}
.program-card:hover .program-icon-box { background-color: var(--primary);}
.program-card:hover .program-icon-box .material-symbols-outlined { color: var(--on-white);}
.program-number { font-size: 2.25rem; font-weight: 800; color: rgba(13,122,117,0.2); letter-spacing: -0.05em; }

.program-title {
font-size: 1.25rem; font-weight: 700; color: var(--color-on-surface-variant); margin-bottom: 0.75rem; transition: color 0.3s;
}
.program-card:hover .program-title { color: var(--color-primary); }
.program-desc { font-size: 0.9rem; color: var(--color-on-surface-variant); line-height: 1.625; margin-bottom: 1rem;text-align: justify; }
.program-card .list-item-li{ color: var(--color-on-surface-variant); }

.check-items { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.5rem; }
.check-badge {
padding: 0rem 0.5rem; border-radius: var(--radius-xs); background-color: var(--color-secondary-light);
color: var(--primary); font-weight: 500; font-size: 0.85rem; display: flex; align-items: center; gap: 0.25rem;
border: 1px solid rgba(13,122,117,0.1);
}
.check-badge .material-symbols-outlined{
	font-size: 1rem;
}
.program-footer {
padding-top: 1.25rem; margin-top: 1.5rem; border-top: 1px solid rgba(214,223,222,0.4);
display: flex; align-items: center; gap: 0.5rem; color: var(--primary); font-weight: 600; font-size: 0.9rem;
}
.program-footer .material-symbols-outlined{
	font-size: 1rem;
}

/* CASES Section */
#cases{
	padding: 4rem 0 6rem 0;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, .1) 0%);
	border-bottom: 0;
}
#cases .sec-desc{ max-width: 600px;}
#cases .bento-main-card{ grid-column: span 1; padding: 2rem; }
#cases .bento-main-header > div:first-child {
	display: flex; justify-content: flex-start; margin-bottom: 1rem;
}
#cases .bento-main-header > div:first-child > span { margin-bottom: 0; }
#cases .bento-main-header > div:first-child + h3 { font-size: 1.25rem; margin: 0 0 1rem 0;}



/* ==========================================================================
	Media Queries
========================================================================== */
@media (min-width: 768px) {
	/* .mission-grid { grid-template-columns: repeat(12, 1fr); }
	.mission-card { grid-column: span 4 / span 4; }
	.vision-card { grid-column: span 4 / span 4; }
	.compassion-wrapper { flex-direction: row; }
	.compassion-image-container, .compassion-text-container { width: 50%; } */
}