/**
 * === Section 03 About Tabs — Card-on-Canvas Wrapper + Tab Pill Cluster ===
 *
 * Mô tả: Section 03 dùng card-on-canvas với tab pill cluster shared component.
 *        Override .tab-pill-cluster trong context card để đảm bảo styling nhất quán.
 *
 * Flow:
 *   1. .section-03-about — wrapper scoping class
 *   2. Tab pill cluster styling (shared — tab-pill-cluster.css inline)
 *   3. Tab panel transitions khi switch
 *   4. Responsive adjustments
 */

.section-03-about {
	position: relative;
}

/* Tab Pill Cluster — shared styles (scoped ở đây nếu không tách file riêng) */
.tab-pill-cluster {
	display: inline-flex;
	gap: 0;
	padding: 6px 8px;
	background: var(--color-brand-soft);
	border-radius: var(--radius-full);
	margin-bottom: 40px;
}

.tab-pill {
	padding: 10px 22px;
	border-radius: var(--radius-full);
	background: transparent;
	border: 0;
	color: var(--color-ink-default);
	font: var(--weight-medium) var(--text-nav) / var(--lh-snug) var(--font-primary);
	cursor: pointer;
	transition: all var(--motion-base);
	white-space: nowrap;
}

.tab-pill.is-active,
.tab-pill[aria-selected="true"] {
	background: var(--color-brand-primary);
	color: var(--color-surface);
}

.tab-pill:hover:not(.is-active):not([aria-selected="true"]) {
	background: rgba(27, 77, 62, 0.08);
}

.tab-pill:focus-visible {
	outline: 2px solid var(--color-brand-secondary);
	outline-offset: 2px;
}

/* Tab panels: hidden attribute handles display, fade on reveal */
.section-tabs__panel {
	animation: panel-fade-in var(--motion-base) var(--ease-standard);
}

@keyframes panel-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 767px) {
	.tab-pill-cluster {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		border-radius: var(--radius-2xl);
	}

	.tab-pill {
		padding: 8px 16px;
		font-size: var(--text-micro);
	}
}