/**
 * AP Book Grid — scoped styles.
 * Reproduces the Ali Publications (Lovable) "Our Books" section.
 * Depends on ap-base.css for tokens, the eyebrow, the arrow link,
 * the book shadow and the typographic cover.
 * Breakpoints 640 / 768 / 1024 match the source (Tailwind sm/md/lg).
 */

.ap-grid {
	background: var(--ap-paper);
	padding: 4rem 0;
}

/* ---------------- Section heading ---------------- */
.ap-grid__head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-bottom: 2.5rem;
}

.ap-grid__head-main {
	max-width: 42rem;
}

.ap-grid .ap-grid__title {
	margin: 0.75rem 0 0 !important;
	padding: 0 !important;
	font-family: var(--ap-font-display), Georgia, serif !important;
	font-weight: 400 !important;
	letter-spacing: -0.015em !important;
	line-height: 1.1 !important;
	font-size: 1.875rem !important;
	color: var(--ap-ink) !important;
}

.ap-grid .ap-grid__desc {
	margin: 1rem 0 0 !important;
	padding: 0 !important;
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 1rem !important;
	line-height: 1.625 !important;
	color: var(--ap-muted) !important;
}

.ap-grid__action { flex-shrink: 0; }

/* ---------------- Grid ---------------- */
.ap-grid__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.5rem;
	row-gap: 3rem;
}

/* ---------------- Card ---------------- */
.ap-grid__card {
	display: flex;
	flex-direction: column;
}

.ap-grid__card-link {
	position: relative;
	display: block;
}

.ap-grid__badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	background: var(--ap-paper);
	padding: 0.25rem 0.5rem;
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 10px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--ap-ink) !important;
	box-shadow: 0 1px 3px rgba(17, 17, 17, 0.12);
}

.ap-grid__badge svg { width: 11px; height: 11px; flex-shrink: 0; }

.ap-grid__card-body {
	margin-top: 1.25rem;
	display: flex;
	flex: 1;
	flex-direction: column;
}

.ap-grid .ap-grid__card-title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--ap-font-display), Georgia, serif !important;
	font-weight: 400 !important;
	font-size: 1.125rem !important;
	line-height: 1.375 !important;
}

.ap-grid .ap-grid__card-title a {
	color: var(--ap-ink) !important;
	text-decoration: none !important;
	transition: color 0.25s ease;
}

.ap-grid__card:hover .ap-grid__card-title a { color: var(--ap-red) !important; }

.ap-grid .ap-grid__card-author {
	margin: 0.25rem 0 0 !important;
	padding: 0 !important;
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 0.875rem !important;
	color: var(--ap-muted) !important;
}

.ap-grid__card-foot {
	margin-top: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ap-grid .ap-grid__price {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 0.875rem !important;
}

.ap-grid__price-main { font-weight: 500 !important; color: var(--ap-red) !important; }
.ap-grid__price-pdf { margin-left: 0.5rem; font-size: 0.75rem !important; color: var(--ap-muted) !important; }

.ap-grid .ap-grid__view {
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--ap-red) !important;
	text-decoration: none !important;
	position: relative;
}

.ap-grid .ap-grid__view::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	height: 1px;
	width: 100%;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.ap-grid .ap-grid__view:hover::after { transform: scaleX(1); transform-origin: left; }

.ap-grid .ap-grid__empty {
	margin: 0 !important;
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 0.875rem !important;
	color: var(--ap-muted) !important;
}

/* ---------------- Responsive ---------------- */
@media (min-width: 768px) {
	.ap-grid { padding: 6rem 0; }
	.ap-grid__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		margin-bottom: 3.5rem;
	}
	.ap-grid .ap-grid__title { font-size: 2.25rem !important; }
	.ap-grid__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.ap-grid .ap-grid__title { font-size: 3rem !important; }
	.ap-grid__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		column-gap: 2rem;
	}
}