/* ============================================
   PAGE: Student Life Detail (Chi tiết Đời sống sinh viên)
   Student life detail article page
   ============================================ */

/* ============================================
   HERO SECTION
   ============================================ */
.student-life-detail-hero {
	width: 100%;
	overflow: hidden;
}

.student-life-detail-hero__image {
	width: 100%;
	height: auto;
	display: block;
}

/* ============================================
   PAGE HEADER SECTION
   ============================================ */
.student-life-detail-header {
	padding-top: 6rem;
	background-color: var(--color-light);
	text-align: center;
}

.student-life-detail-header__title {
	font-family: var(--font-family-heading);
	font-size: var(--section-title);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading-tight);
	color: var(--brand-primary);
	text-transform: uppercase;
	margin: 0 auto var(--sp-3);
	max-width: 80rem;
}

.student-life-detail-header__intro {
	font-family: var(--font-primary);
	font-size: var(--section-description);
	font-weight: 400;
	line-height: 1.43; /* 20/14 */
	color: var(--gray-800);
	max-width: 79.4rem;
	margin: 0 auto;
}

/* ============================================
   ARTICLE BODY SECTION (wrapper)
   ============================================ */
.student-life-detail-body {
	padding-top: 2.8rem;
	padding-bottom: 6rem;
	background-color: var(--color-light);
}

/* Featured Image */
.student-life-detail-featured__image {
	width: 100%;
	height: 50.8rem;
	object-fit: cover;
	border-radius: 2rem;
	display: block;
	margin: 0 auto;
}

/* Main Content */
.student-life-detail-content {
	padding-top: 4rem;
}

.student-life-detail-content__text {
	max-width: 120rem;
	font-family: var(--font-primary);
	font-size: var(--section-description);
	font-weight: 400;
	line-height: 1.57; /* 22/14 */
	color: var(--gray-800);
}

.student-life-detail-content__text p {
	margin-bottom: var(--sp-4);
}

.student-life-detail-content__text p:last-child {
	margin-bottom: 0;
}

/* Image Gallery */
.student-life-detail-gallery {
	padding-top: 3rem;
}

.gallery-card {
	width: 100%;
	height: 24rem;
	border-radius: 2rem;
	overflow: hidden;
	transition: transform var(--transition-base);
}

.gallery-card:hover {
	transform: translateY(-0.4rem);
}

.gallery-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Additional Content */
.student-life-detail-additional {
	padding-top: 2.6rem;
}

.student-life-detail-additional__text {
	max-width: 120rem;
	font-family: var(--font-primary);
	font-size: var(--section-description);
	font-weight: 400;
	line-height: 1.57; /* 22/14 */
	color: var(--gray-800);
}

.student-life-detail-additional__text p {
	margin-bottom: 0;
}

/* ================================================
   TABLET (max-width: 1199px)
   ================================================ */
@media (max-width: 1199px) {
	.student-life-detail-header__title {
		font-size: var(--section-title-tablet);
	}

	.student-life-detail-featured__image {
		height: 40rem;
		border-radius: var(--radius-16);
	}

	.gallery-card {
		height: 20rem;
		border-radius: var(--radius-16);
	}

	.student-life-detail-header__intro {
		font-size: var(--section-description-tablet);
	}

	.student-life-detail-content__text {
		font-size: var(--section-description-tablet);
	}

	.student-life-detail-additional__text {
		font-size: var(--section-description-tablet);
	}
}

/* ================================================
   MOBILE (max-width: 575px)
   ================================================ */
@media (max-width: 575px) {
	/* Header Section - Mobile */
	.student-life-detail-header {
		padding-top: var(--sp-5);
	}

	.student-life-detail-header__title {
		font-size: var(--section-title-mobile);
		text-align: left;
		margin-bottom: var(--sp-2);
	}

	.student-life-detail-header__intro {
		display: none;
	}

	/* Article Body - Mobile */
	.student-life-detail-body {
		padding-top: var(--sp-4);
		padding-bottom: var(--sp-6);
	}

	/* Featured Image - Mobile */
	.student-life-detail-featured__image {
		height: 20rem;
		border-radius: var(--radius-10);
	}

	/* Content Section - Mobile */
	.student-life-detail-content {
		padding-top: var(--sp-4);
	}

	.student-life-detail-content__text {
		font-size: var(--section-description-mobile);
		line-height: 1.5;
	}

	.student-life-detail-content__text p {
		margin-bottom: var(--sp-3);
	}

	/* Gallery Section - Mobile */
	.student-life-detail-gallery {
		padding-top: var(--sp-4);
	}

	.gallery-card {
		height: 18rem;
		border-radius: var(--radius-10);
	}

	.gallery-card:hover {
		transform: none;
	}

	/* Additional Content - Mobile */
	.student-life-detail-additional {
		padding-top: var(--sp-4);
	}

	.student-life-detail-additional__text {
		font-size: var(--section-description-mobile);
		line-height: 1.5;
	}
}