/**
 * === section-tabs.css — Shared tab navigation cho 4 section wrappers ===
 *
 * Mô tả: Style dùng chung cho tất cả section có tabs:
 *        About (03), Services (04), Team (07), News (08), Knowledge Hub (09).
 *        Mobile-first: tablist scroll ngang, desktop: tabs hàng ngang cố định.
 *
 * Flow:
 *   1. .section-tabs — container bao ngoài tablist + panels
 *   2. .section-tabs__nav — tablist scroll ngang trên mobile
 *   3. .section-tabs__tab — button style với active state
 *   4. .section-tabs__panel — panel ẩn/hiện theo aria-hidden
 */

/* ─── Container ─── */
.section-tabs {
	margin-top: var(--space-6);
}

/* ─── Tablist ─── */
.section-tabs__nav {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	border-bottom: 2px solid var(--color-border);
	margin-bottom: var(--space-6);
	padding-bottom: 0;
}

.section-tabs__nav::-webkit-scrollbar {
	display: none;
}

/* ─── Tab button ─── */
.section-tabs__tab {
	flex-shrink: 0;
	font-family: var(--font-body);
	font-size: var(--text-body);
	font-weight: var(--weight-medium);
	line-height: var(--lh-snug);
	color: var(--color-ink-500);
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	padding: var(--space-3) var(--space-5);
	margin-bottom: -2px;
	cursor: pointer;
	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	white-space: nowrap;
}

.section-tabs__tab:hover {
	color: var(--color-primary-800);
	background: var(--color-primary-100);
}

.section-tabs__tab:focus-visible {
	outline: 2px solid var(--color-focus);
	outline-offset: 2px;
}

.section-tabs__tab--active,
.section-tabs__tab[aria-selected="true"] {
	color: var(--color-primary-800);
	font-weight: var(--weight-semibold);
	border-bottom-color: var(--color-primary-600);
}

/* ─── Panel ─── */
.section-tabs__panel {
	animation: tabPanelFadeIn 0.25s ease forwards;
}

.section-tabs__panel[hidden] {
	display: none;
}

@keyframes tabPanelFadeIn {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ─── Patient Journey divider ─── */
.patient-journey__divider {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: var(--space-8) 0;
}

/* ─── Contact Hub blocks ─── */
.contact-hub__faq,
.contact-hub__form-map,
.contact-hub__social {
	margin-bottom: var(--space-8);
}

.contact-hub__social {
	margin-bottom: 0;
}

/* ─── Knowledge Hub — 4 tabs scroll trên mobile ─── */
.section-tabs--knowledge .section-tabs__nav {
	gap: var(--space-1);
}

.section-tabs--knowledge .section-tabs__tab {
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-small);
}

@media (min-width: 768px) {
	.section-tabs--knowledge .section-tabs__tab {
		font-size: var(--text-body);
		padding: var(--space-3) var(--space-5);
	}
}

/* ─── Desktop: tab nav không scroll ─── */
@media (min-width: 1024px) {
	.section-tabs__nav {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}