/*
 * Home "About Us" (template-parts/home-about.php) and "Labs & Facilities"
 * (template-parts/home-labs.php). Plain CSS for the same reason as home.css:
 * the theme ships without node_modules, so utilities missing from the compiled
 * main.css would not render.
 */

/* ===== About Us ===== */

.home-about {
	padding: 5rem 0;
	overflow: hidden;
}

@media (min-width: 768px) {
	.home-about {
		padding: 6rem 0;
	}
}

.home-about__grid {
	display: grid;
	align-items: center;
	gap: 3.5rem;
}

@media (min-width: 1024px) {
	.home-about__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 5rem;
	}
}

/*
 * Collage: the main photo sits in from the top-left, leaving a strip for the
 * dot pattern to show; the smaller photo overlaps its bottom-right corner and
 * the rating card floats over its right edge.
 */
.home-about__media {
	position: relative;
	padding: 1.5rem 10% 3.5rem 1.5rem;
}

.home-about__dots {
	position: absolute;
	top: 0;
	left: 0;
	width: 8rem;
	height: 8rem;
	background-image: radial-gradient(#A5B4FC 2px, transparent 2.5px);
	background-size: 16px 16px;
	opacity: 0.8;
}

.home-about__blob {
	position: absolute;
	right: 0;
	bottom: 10%;
	width: 60%;
	aspect-ratio: 1;
	border-radius: 9999px;
	background: radial-gradient(circle, rgb(6 182 212 / 0.2), transparent 68%);
}

.home-about__main {
	position: relative;
	z-index: 1;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 5 / 4;
	border-radius: 1.5rem;
	background: #E2E8F0;
	box-shadow: 0 30px 60px -30px rgb(15 23 42 / 0.5);
}

.home-about__main img,
.home-about__small img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-about__placeholder {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	color: #94A3B8;
	font-size: 4rem;
}

.home-about__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.7rem;
	width: 100%;
	border: 0;
	background: linear-gradient(to top, rgb(15 23 42 / 0.55), rgb(15 23 42 / 0.05) 60%);
	color: #FFFFFF;
	cursor: pointer;
}

.home-about__play-icon {
	display: flex;
	width: 4.25rem;
	height: 4.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: #FFFFFF;
	box-shadow: 0 14px 30px -10px rgb(15 23 42 / 0.6);
	color: #4F46E5;
	transition: transform .3s ease;
}

.home-about__play-icon .material-symbols-outlined {
	transform: translateX(2px);
	font-size: 2.4rem;
	font-variation-settings: 'FILL' 1;
}

.home-about__play:hover .home-about__play-icon,
.home-about__play:focus-visible .home-about__play-icon {
	transform: scale(1.1);
}

.home-about__play-text {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
}

.home-about__small {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	width: 42%;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border: 6px solid #FFFFFF;
	border-radius: 1.25rem;
	background: #E2E8F0;
	box-shadow: 0 24px 48px -20px rgb(15 23 42 / 0.55);
}

.home-about__rating {
	position: absolute;
	top: 3rem;
	right: 2%;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0.95rem 0.6rem 0.6rem;
	border-radius: 1rem;
	background: #FFFFFF;
	box-shadow: 0 18px 40px -16px rgb(15 23 42 / 0.45);
	animation: home-about-float 6s ease-in-out infinite;
}

.home-about__rating-g {
	display: flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: #F1F5F9;
}

.home-about__rating-g svg {
	display: block;
	width: 1.2rem;
	height: 1.2rem;
}

.home-about__rating strong {
	display: block;
	color: #0F172A;
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.1;
}

.home-about__rating-stars {
	display: flex;
	color: #FBBC05;
}

.home-about__rating-stars .material-icons {
	font-size: 0.85rem;
}

/* Flipped (the About page intro): photos on the right from lg up, and the
   collage mirrored so the small photo and rating card overlap toward the text.
   Below lg the photos stay on top, as on the home page. */
.home-about--flip .home-about__media {
	padding: 1.5rem 1.5rem 3.5rem 10%;
}

.home-about--flip .home-about__dots {
	right: 0;
	left: auto;
}

.home-about--flip .home-about__blob,
.home-about--flip .home-about__small {
	right: auto;
	left: 0;
}

.home-about--flip .home-about__rating {
	right: auto;
	left: 2%;
}

@media (min-width: 1024px) {
	.home-about--flip .home-about__media {
		order: 2;
	}
}

@keyframes home-about-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}

.home-about__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	color: #0891B2;
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.25em;
	text-transform: uppercase;
}

.home-about__tag::before {
	content: '';
	width: 2rem;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #4F46E5, #06B6D4);
}

.home-about__title {
	margin: 0.9rem 0 0;
	color: #0F172A;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.15;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.home-about__title {
		font-size: 2.5rem;
	}
}

.home-about__desc {
	margin: 1.1rem 0 0;
	color: #64748B;
	font-size: 1rem;
	line-height: 1.75;
}

.home-about__points {
	display: grid;
	gap: 0.8rem 1.5rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.home-about__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.home-about__points li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: #334155;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.5;
}

.home-about__points .material-symbols-outlined {
	display: flex;
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: rgb(79 70 229 / 0.1);
	color: #4F46E5;
	font-size: 1rem;
	font-weight: 700;
}

/* Figures: value over label (the label comes first in the markup, for dl order). */
.home-about__stats {
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	margin: 2rem 0 0;
	padding: 1.25rem 0;
	border-top: 1px solid #E2E8F0;
	border-bottom: 1px solid #E2E8F0;
}

.home-about__stats > div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: 0.25rem;
	padding: 0 1rem;
	border-left: 1px solid #E2E8F0;
}

.home-about__stats > div:first-child {
	padding-left: 0;
	border-left: 0;
}

.home-about__stats dd {
	margin: 0;
	background: linear-gradient(90deg, #4F46E5, #06B6D4);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.1;
}

@media (min-width: 768px) {
	.home-about__stats dd {
		font-size: 2.1rem;
	}
}

.home-about__stats dt {
	color: #64748B;
	font-size: 0.78rem;
	font-weight: 600;
}

.home-about__btn {
	margin-top: 2rem;
}

/* ===== Labs & Facilities ===== */

.home-labs {
	padding: 5rem 0;
}

@media (min-width: 768px) {
	.home-labs {
		padding: 6rem 0;
	}
}

.home-labs__head {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

@media (min-width: 1024px) {
	.home-labs__head {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: end;
		gap: 4rem;
		margin-bottom: 3rem;
	}
}

.home-labs__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0.95rem;
	border: 1px solid rgb(8 145 178 / 0.25);
	border-radius: 9999px;
	background: rgb(6 182 212 / 0.08);
	color: #0891B2;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.home-labs__tag-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: #06B6D4;
	animation: home-labs-ping 2s ease-out infinite;
}

@keyframes home-labs-ping {
	0% {
		box-shadow: 0 0 0 0 rgb(34 211 238 / 0.6);
	}

	100% {
		box-shadow: 0 0 0 8px rgb(34 211 238 / 0);
	}
}

.home-labs__title {
	margin: 1rem 0 0;
	color: #0F172A;
	font-size: 1.9rem;
	font-weight: 800;
	line-height: 1.12;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.home-labs__title {
		font-size: 2.6rem;
	}
}

/* Just the campus-visit button; from lg up it sits at the right end of the
   heading row, level with the bottom of the title. */
@media (min-width: 1024px) {
	.home-labs__intro {
		justify-self: end;
	}
}

.home-labs__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.4rem;
	border-radius: 0.625rem;
	background: linear-gradient(135deg, #4F46E5, #06B6D4);
	box-shadow: 0 14px 28px -14px rgb(79 70 229 / 0.6);
	color: #FFFFFF;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease;
}

.home-labs__btn:hover,
.home-labs__btn:focus-visible {
	box-shadow: 0 18px 32px -14px rgb(79 70 229 / 0.7);
	transform: translateY(-2px);
}

.home-labs__btn .material-symbols-outlined {
	color: #FFFFFF;
	font-size: 1.2rem;
}

/*
 * Bento: two columns on a phone and tablet, four from lg up. The first photo
 * is always two by two; a lone last photo in a row spans the gap it would
 * leave, and with three photos the two small ones run the full height.
 */
.home-labs__bento {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 9.5rem;
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.home-labs__bento {
		grid-auto-rows: 13rem;
		gap: 1rem;
	}
}

@media (min-width: 1024px) {
	.home-labs__bento {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 14rem;
		gap: 1.25rem;
	}

	.home-labs__tile:nth-child(2):nth-last-child(2),
	.home-labs__tile:nth-child(3):last-child {
		grid-row: span 2;
	}
}

.home-labs__tile:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.home-labs__tile:nth-child(4):last-child {
	grid-column: span 2;
}

.home-labs__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: 1.25rem;
	background: #E2E8F0;
	box-shadow: 0 20px 40px -26px rgb(15 23 42 / 0.5);
	isolation: isolate;
}

.home-labs__tile img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}

.home-labs__tile:hover img {
	transform: scale(1.07);
}

/*
 * Large photo views: the photos stack in the tile and cross-fade, and a row
 * of thumbnails along its foot picks one; the picked thumbnail gets a white
 * frame and full colour.
 */
.home-labs__view {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .5s ease;
}

.home-labs__view.is-active {
	opacity: 1;
}

.home-labs__views {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	display: grid;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 0.4rem;
}

@media (min-width: 640px) {
	.home-labs__views {
		right: 1rem;
		bottom: 1rem;
		left: 1rem;
		gap: 0.6rem;
	}
}

.home-labs__view-btn {
	display: block;
	min-width: 0;
	padding: 0.25rem;
	border: 1px solid rgb(255 255 255 / 0.25);
	border-radius: 0.8rem;
	background: rgb(15 23 42 / 0.45);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

@media (min-width: 640px) {
	.home-labs__view-btn {
		padding: 0.35rem;
	}
}

.home-labs__view-btn:hover {
	background: rgb(15 23 42 / 0.7);
	transform: translateY(-2px);
}

.home-labs__view-btn:focus-visible {
	outline: 2px solid #22D3EE;
	outline-offset: 2px;
}

.home-labs__view-btn.is-active {
	border-color: #FFFFFF;
	background: #FFFFFF;
	box-shadow: 0 12px 24px -12px rgb(15 23 42 / 0.6);
}

.home-labs__view-thumb {
	position: relative;
	display: block;
	height: 2.75rem;
	overflow: hidden;
	border-radius: 0.55rem;
	background: #334155;
}

@media (min-width: 640px) {
	.home-labs__view-thumb {
		height: 3.75rem;
	}
}

/* The tile's photo rules (cover, zoom on hover) reach the thumbnails too; here
   the ones not picked are only dimmed a little. */
.home-labs__view-thumb img {
	opacity: 0.7;
	transition: opacity .25s ease;
}

.home-labs__view-btn:hover .home-labs__view-thumb img,
.home-labs__view-btn.is-active .home-labs__view-thumb img {
	opacity: 1;
}

.home-labs__tile:hover .home-labs__view-thumb img {
	transform: none;
}

.home-labs__features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 0;
	padding: 1.25rem;
	border: 1px solid #E2E8F0;
	border-radius: 1.25rem;
	background: #FFFFFF;
	box-shadow: 0 18px 40px -30px rgb(15 23 42 / 0.4);
	list-style: none;
}

@media (min-width: 640px) {
	.home-labs__features {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.home-labs__features {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		padding: 1.5rem;
	}
}

.home-labs__features li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	color: #334155;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.3;
}

.home-labs__feature-icon {
	display: flex;
	width: 2.6rem;
	height: 2.6rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 0.8rem;
	background: linear-gradient(135deg, #4F46E5, #06B6D4);
	box-shadow: 0 10px 22px -10px rgb(6 182 212 / 0.7);
	color: #FFFFFF;
}

.home-labs__feature-icon .material-symbols-outlined {
	font-size: 1.35rem;
}

@media (prefers-reduced-motion: reduce) {
	.home-about__rating,
	.home-labs__tag-dot {
		animation: none;
	}

	.home-about__play-icon,
	.home-labs__tile img,
	.home-labs__btn,
	.home-labs__view,
	.home-labs__view-btn {
		transition: none;
	}

	.home-labs__tile:hover img {
		transform: none;
	}
}