/* ============================================
   PAGE: Giới Thiệu (About Us)
   Breakpoints: Mobile (default), Tablet (576px), Desktop (1200px)
   ============================================ */

/* ========== SECTION: Hero About ========== */

/* Hero variant for About page - uses same structure as index hero-section */
.hero-section--about .hero-section__bg {
	background-image: url("/assets/images/hero_bg.png");
}

/* ========== SECTION: About Intro ========== */

.about-intro {
	background-color: var(--color-light);
	padding: var(--sp-6) 0;
}

.about-intro__subtitle {
	font-family: var(--font-family-heading);
	font-size: var(--fs-300);
	font-weight: var(--fw-medium);
	line-height: 1.3;
	color: var(--brand-secondary);
	letter-spacing: 0.5px;
}

.about-intro__title {
	font-family: var(--font-family-heading);
	font-size: var(--fs-500);
	font-weight: var(--fw-bold);
	line-height: 1.22;
	color: var(--brand-primary);
}

.about-intro__description {
	font-family: var(--font-family-heading);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-medium);
	line-height: 1.57;
	color: var(--gray-900);
}

.about-intro__description p {
	margin-bottom: var(--sp-3);
}

.about-intro__description p:last-child {
	margin-bottom: 0;
}

.about-intro__image-wrapper {
	position: relative;
	width: 100%;
	border-radius: 0;
	overflow: hidden;
	box-shadow: none;
	margin-top: var(--sp-4);
}

.about-intro__image {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0;
}

/* ========== SECTION: Team ========== */

.team-section {
	background-color: var(--gray-50);
	padding: var(--sp-6) 0;
}

.team-section__header {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.team-section__title {
	font-family: var(--font-family-heading);
	font-size: var(--fs-700);
	font-weight: var(--fw-bold);
	line-height: 1.22;
	color: var(--brand-primary);
	margin-bottom: var(--sp-3);
}

.team-section__description {
	font-family: var(--font-family-heading);
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-regular);
	line-height: 1.5;
	color: var(--gray-900);
	max-width: 800px;
}

/* ================================================
   TABLET (min-width: 576px) - matches Bootstrap 'sm'
   ================================================ */
@media (min-width: 576px) {
	.about-intro {
		padding: var(--sp-8) 0;
	}

	.about-intro__subtitle {
		font-size: var(--fs-350);
	}

	.about-intro__title {
		font-size: var(--fs-600);
	}

	.about-intro__description {
		font-size: var(--fs-body);
	}

	.about-intro__image-wrapper {
		border-radius: var(--radius-30);
		box-shadow: var(--shadow-1);
		margin-top: 0;
	}

	.about-intro__image {
		border-radius: var(--radius-30);
	}

	.team-section {
		padding: var(--sp-8) 0;
	}

	.team-section__title {
		font-size: var(--fs-700);
	}

	.team-section__description {
		font-size: var(--fs-body);
	}
}

/* ================================================
   DESKTOP (min-width: 1200px)
   ================================================ */
@media (min-width: 1200px) {
	.about-intro__title {
		font-size: var(--fs-700);
	}
}