/* ============================================================
   SELECTED BOOKS SECTION — books.css
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800&family=Inter:wght@400;500;600;700&display=swap");

#books {
	padding: 25px 32px 120px;
	background: var(--hero-bg);
	color: var(--hero-navy);
}

.books-container {
	width: min(100%, 920px);
	margin: 0 auto;
}

.books-header {
	text-align: center;
	max-width: 620px;
	margin: 0 auto 52px;
}

.books-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	margin-bottom: 10px;
}

.books-title {
	font-family: "Big Shoulders Display", sans-serif;
	font-size: clamp(40px, 5vw, 62px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.01em;
	margin: 0 0 12px;
	color: var(--hero-navy);
}

.books-subtitle {
	font-family: "Inter", sans-serif;
	font-size: clamp(14px, 1.1vw, 16px);
	line-height: 1.65;
	color: color-mix(in srgb, var(--hero-navy) 68%, #ffffff 32%);
}

.books-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(240px, 1fr));
	gap: clamp(22px, 3.2vw, 36px) clamp(24px, 3.4vw, 34px);
}

.books-item {
	min-width: 0;
}

.book-stage {
	display: block;
	text-decoration: none;
	perspective: 1800px;
	perspective-origin: 50% 50%;
}

.book-card {
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 3;
	transform-style: preserve-3d;
	border-radius: 8px;
	transition:
		transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
	box-shadow:
		0 0.7px 0.7px -0.6px rgba(0, 0, 0, 0.04),
		0 1.8px 1.8px -1.2px rgba(0, 0, 0, 0.05),
		0 3.6px 3.6px -1.8px rgba(0, 0, 0, 0.06),
		0 6.8px 6.8px -2.5px rgba(0, 0, 0, 0.08),
		0 13.6px 13.6px -3.1px rgba(0, 0, 0, 0.1),
		0 30px 30px -3.75px rgba(0, 22, 102, 0.14);
}

.book-card::before {
	content: "";
	position: absolute;
	left: 8px;
	top: 2%;
	width: 8px;
	height: 96%;
	border-radius: 4px;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.68) 0%,
		rgba(0, 22, 102, 0.08) 42%,
		rgba(255, 255, 255, 0.44) 100%
	);
	z-index: 6;
	transform: translateZ(8px);
	pointer-events: none;
}

.book-paper {
	position: absolute;
	inset: 0;
	border-radius: 8px;
	background: linear-gradient(239deg, #ffffff 0%, #e0e0e0 100%);
	border: 1px solid color-mix(in srgb, var(--hero-navy) 9%, transparent);
	transform: translateZ(-10px);
	display: grid;
	place-content: center;
	justify-items: center;
	padding: 24px;
	text-align: center;
}

.book-paper__title {
	font-family: "Inter", sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: color-mix(in srgb, var(--hero-navy) 92%, #000000 8%);
	margin: 0 0 8px;
}

.book-paper__meta {
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.35;
	color: color-mix(in srgb, var(--hero-navy) 30%, #ffffff 70%);
	margin: 0;
}

.book-cover {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 8px;
	transform-origin: left center;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	border: 1px solid color-mix(in srgb, var(--hero-navy) 11%, transparent);
	box-shadow: 0 16px 28px -24px rgba(0, 22, 102, 0.45);
	transition:
		transform 1400ms cubic-bezier(0.2, 0.7, 0.2, 1),
		box-shadow 1400ms cubic-bezier(0.2, 0.7, 0.2, 1);
	z-index: 7;
}

.book-cover::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 12px;
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.65) 0%,
		rgba(255, 255, 255, 0.16) 54%,
		rgba(0, 22, 102, 0.08) 100%
	);
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	z-index: 2;
}

.book-cover--cream {
	background: #e9e4ce;
}

.book-cover--blue {
	background: #c8dde4;
}

.book-cover--lavender {
	background: #dfdaeb;
}

.book-cover--peach {
	background: #ecd8cf;
}

.book-cover__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: saturate(0.95) contrast(1.02);
}

.book-cover__lights {
	position: absolute;
	inset: 0;
	border-radius: 8px;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.24) 0%,
		rgba(255, 255, 255, 0.42) 24%,
		rgba(0, 0, 0, 0.2) 40%,
		rgba(255, 255, 255, 0.34) 49%,
		rgba(255, 255, 255, 0) 100%
	);
	opacity: 0.2;
	pointer-events: none;
	mix-blend-mode: screen;
	z-index: 1;
}

.books-caption {
	margin-top: 12px;
	font-family: "Inter", sans-serif;
	font-size: 20px;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: color-mix(in srgb, var(--hero-navy) 88%, #ffffff 12%);
}

.book-stage:hover .book-card,
.book-stage:focus-visible .book-card {
	transform: none;
	box-shadow:
		0 0.7px 0.7px -0.6px rgba(0, 0, 0, 0.04),
		0 1.8px 1.8px -1.2px rgba(0, 0, 0, 0.05),
		0 3.6px 3.6px -1.8px rgba(0, 0, 0, 0.06),
		0 6.8px 6.8px -2.5px rgba(0, 0, 0, 0.08),
		0 13.6px 13.6px -3.1px rgba(0, 0, 0, 0.12),
		0 38px 38px -4px rgba(0, 22, 102, 0.18);
}

.book-stage:hover .book-cover,
.book-stage:focus-visible .book-cover {
	transform: rotateY(-152deg);
	box-shadow: 16px 24px 34px -24px rgba(0, 22, 102, 0.42);
}

.book-stage:focus-visible {
	outline: none;
}

.book-stage:focus-visible .book-cover {
	outline: 2px solid color-mix(in srgb, var(--hero-accent) 65%, #ffffff 35%);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.book-card,
	.book-cover {
		transition: none;
	}

	.book-stage:hover .book-card,
	.book-stage:hover .book-cover,
	.book-stage:focus-visible .book-card,
	.book-stage:focus-visible .book-cover {
		transform: none;
	}
}

@media (max-width: 980px) {
	#books {
		padding: 64px 24px 92px;
	}

	.books-grid {
		grid-template-columns: 1fr;
	}

	.books-caption {
		font-size: 20px;
	}
}

@media (max-width: 640px) {
	#books {
		padding: 52px 18px 76px;
	}

	.books-header {
		margin-bottom: 36px;
	}

	.book-cover {
		inset: 0;
	}

	.books-caption {
		font-size: 20px;
	}
}