/* AH Book Shelf: each free book as a 3D book (its real cover, a spine) beside its words.
   The spine sits on the right in Arabic and on the left in English, as the covers are drawn. */

.ah-bs { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 28px; }
.ah-bs .ah-bs__item {
	position: relative;
	display: grid;
	grid-template-columns: 210px minmax(0, 1fr);
	gap: 28px;
	align-items: center;
	padding: 28px;
	border: 1px solid var(--ah-card-line);
	border-radius: var(--ah-r-card);
	background: var(--ah-card, #fff);
	box-shadow: var(--ah-shadow);
	transition: transform .5s var(--ah-ease), box-shadow .5s var(--ah-ease), border-color .3s;
}
.ah-bs .ah-bs__item:hover { transform: translateY(-4px); border-color: var(--ah-tint-line); box-shadow: var(--ah-shadow-hi); }

/* the stage and the book */
.ah-bs .ah-bs__stage {
	position: relative;
	display: grid;
	place-items: center;
	padding: 26px 0 30px;
	border-radius: var(--ah-r-lg);
	background:
		radial-gradient(70% 60% at 50% 30%, rgba(232, 201, 136, .22), transparent 70%),
		linear-gradient(rgba(15, 27, 60, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 27, 60, .05) 1px, transparent 1px),
		var(--ah-sand);
	background-size: auto, 18px 18px, 18px 18px, auto;
	perspective: 1100px;
	text-decoration: none;
}
.ah-bs .ah-bs__book {
	--d: 16px;
	position: relative;
	display: block;
	width: 140px;
	aspect-ratio: 2 / 3;
	transform-style: preserve-3d;
	transform: rotateY(22deg) rotateX(4deg);
	transition: transform .8s var(--ah-spring);
}
[dir="rtl"] .ah-bs .ah-bs__book { transform: rotateY(-22deg) rotateX(4deg); }
.ah-bs .ah-bs__item:hover .ah-bs__book,
.ah-bs .ah-bs__item:focus-within .ah-bs__book { transform: rotateY(8deg) rotateX(2deg) translateY(-6px); }
[dir="rtl"] .ah-bs .ah-bs__item:hover .ah-bs__book,
[dir="rtl"] .ah-bs .ah-bs__item:focus-within .ah-bs__book { transform: rotateY(-8deg) rotateX(2deg) translateY(-6px); }
.ah-bs .ah-bs__face { position: absolute; inset: 0; overflow: hidden; border-radius: 2px 5px 5px 2px; background: var(--ah-navy); box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset; }
[dir="rtl"] .ah-bs .ah-bs__face { border-radius: 5px 2px 2px 5px; }
/* the crease along the binding */
.ah-bs .ah-bs__face::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 14px; background: linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .12) 40%, transparent); pointer-events: none; }
[dir="rtl"] .ah-bs .ah-bs__face::after { background: linear-gradient(-90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .12) 40%, transparent); }
.ah-bs .ah-bs__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ah-bs .ah-bs__blank { display: grid; place-items: center; height: 100%; padding: 12px; font-family: var(--ah-f-display); font-size: .9rem; font-weight: 700; line-height: 1.5; color: var(--ah-gold-hi); text-align: center; }
.ah-bs .ah-bs__spine { position: absolute; inset-block: 0; left: 0; width: var(--d); background: linear-gradient(90deg, #0A1430, #1A2952 55%, #0A1430); transform-origin: left center; transform: rotateY(90deg); }
[dir="rtl"] .ah-bs .ah-bs__spine { left: auto; right: 0; transform-origin: right center; transform: rotateY(-90deg); }
.ah-bs .ah-bs__pages { position: absolute; inset: 3px 0 3px auto; width: var(--d); background: repeating-linear-gradient(90deg, #F4F1E8 0 1px, #E2DCCB 1px 2px); transform-origin: right center; transform: rotateY(90deg); }
[dir="rtl"] .ah-bs .ah-bs__pages { inset: 3px auto 3px 0; transform-origin: left center; transform: rotateY(-90deg); }
.ah-bs .ah-bs__shadow { position: absolute; inset-inline: 22%; bottom: 14px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(15, 27, 60, .32), transparent); filter: blur(2px); transition: transform .8s var(--ah-spring), opacity .8s; }
.ah-bs .ah-bs__item:hover .ah-bs__shadow { transform: scaleX(.85); opacity: .7; }
.ah-bs .ah-bs__badge { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; padding: 3px 11px; border-radius: 999px; background: var(--ah-navy); font-size: .74rem; font-weight: 700; line-height: 1.6; color: var(--ah-gold-hi); }

/* the words */
.ah-bs .ah-bs__body { display: grid; gap: 10px; justify-items: start; min-width: 0; }
.ah-bs .ah-bs__label { font-size: .78rem; font-weight: 700; color: var(--ah-ink-gold); }
.ah-bs .ah-bs__title { margin: 0; font-family: var(--ah-f-display); font-size: 1.32rem; font-weight: 700; line-height: 1.45; color: var(--ah-navy); }
.ah-bs .ah-bs__title a { color: inherit; text-decoration: none; }
.ah-bs .ah-bs__sub { display: block; margin-top: 2px; font-size: .82em; font-weight: 600; color: var(--ah-ink-gold); }
.ah-bs .ah-bs__title a:hover { text-decoration: underline; text-decoration-color: var(--ah-gold); text-underline-offset: 6px; }
.ah-bs .ah-bs__text { display: -webkit-box; margin: 0; overflow: hidden; font-size: .95rem; line-height: 1.85; color: var(--ah-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.ah-bs .ah-bs__for { margin: 0; font-size: .88rem; line-height: 1.7; color: var(--ah-ink); }
.ah-bs .ah-bs__for b { color: var(--ah-navy); }
.ah-bs .ah-bs__size { margin: 0; padding: 3px 10px; border-radius: 999px; background: var(--ah-tint); font-size: .78rem; font-weight: 600; line-height: 1.7; color: var(--ah-soft); }
.ah-bs .ah-bs__btn.ah-btn { margin-top: 4px; }

@media (max-width: 1200px) {
	.ah-bs .ah-bs__item { grid-template-columns: 170px minmax(0, 1fr); gap: 22px; padding: 22px; }
	.ah-bs .ah-bs__book { width: 116px; }
}
@media (max-width: 1024px) {
	.ah-bs { grid-template-columns: minmax(0, 1fr); }
	.ah-bs .ah-bs__item { grid-template-columns: 200px minmax(0, 1fr); }
	.ah-bs .ah-bs__book { width: 132px; }
}
@media (max-width: 767px) {
	.ah-bs { gap: 20px; }
	.ah-bs .ah-bs__item { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 16px 16px 20px; }
	.ah-bs .ah-bs__stage { padding: 24px 0 30px; }
	.ah-bs .ah-bs__book { width: 136px; }
	.ah-bs .ah-bs__btn.ah-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	.ah-bs .ah-bs__item,
	.ah-bs .ah-bs__book,
	.ah-bs .ah-bs__shadow { transition: none; }
	.ah-bs .ah-bs__item:hover { transform: none; }
}