/**
 * Ali Publications Elements — shared base.
 * Design tokens + reusable components (book cover, eyebrow, arrow link,
 * book shadow, entrance animation) used by every widget from the Book Grid on.
 * Every widget root carries the class .ap-scope so these tokens resolve, and
 * Elementor controls override them by setting the same custom properties inline.
 */

.ap-scope {
	--ap-ink: #111111;
	--ap-paper: #ffffff;
	--ap-paper-warm: #fafaf7;
	--ap-red: #de1c1c;
	--ap-muted: #6b6b6b;
	--ap-border: #e7e7e4;
	--ap-font-display: "Fraunces";
	--ap-font-body: "Inter";
}

.ap-scope *,
.ap-scope *::before,
.ap-scope *::after {
	box-sizing: border-box;
}

/* ---------------- Layout container ---------------- */
.ap-container {
	width: 100%;
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 640px) {
	.ap-container { padding-inline: 2rem; }
}

@media (min-width: 1024px) {
	.ap-container { padding-inline: 3rem; }
}

/* ---------------- Eyebrow ---------------- */
.ap-scope .ap-eyebrow {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 0.6875rem !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	color: var(--ap-muted) !important;
	line-height: 1.4 !important;
}

/* ---------------- Arrow link ---------------- */
.ap-scope .ap-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	color: var(--ap-red) !important;
	text-decoration: none !important;
}

.ap-arrow-link__label {
	position: relative;
}

.ap-arrow-link__label::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-arrow-link:hover .ap-arrow-link__label::after {
	transform: scaleX(1);
	transform-origin: left;
}

.ap-arrow-link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.ap-arrow-link:hover svg {
	transform: translateX(4px);
}

/* ---------------- Book shadow (hover lift) ---------------- */
.ap-book-shadow {
	box-shadow:
		0 18px 40px -18px rgba(17, 17, 17, 0.45),
		0 2px 6px -2px rgba(17, 17, 17, 0.2);
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ap-book-shadow:hover {
	transform: translateY(-6px);
	box-shadow:
		0 28px 56px -20px rgba(17, 17, 17, 0.55),
		0 4px 10px -4px rgba(17, 17, 17, 0.25);
}

/* ---------------- Typographic book cover ---------------- */
.ap-cover {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 2 / 3;
	width: 100%;
	overflow: hidden;
	padding: 1.25rem;
}

.ap-cover--ink { background: var(--ap-ink); color: var(--ap-paper); }
.ap-cover--red { background: var(--ap-red); color: var(--ap-paper); }
.ap-cover--warm { background: var(--ap-paper-warm); color: var(--ap-ink); border: 1px solid var(--ap-border); }
.ap-cover--paper { background: var(--ap-paper); color: var(--ap-ink); border: 1px solid var(--ap-border); }

.ap-cover--image { padding: 0; }
.ap-cover--image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.ap-cover--image:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
	.ap-cover--image:hover img { transform: none; }
}

.ap-cover__spine {
	pointer-events: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 6px;
	background: linear-gradient(to right, rgba(17, 17, 17, 0.25), transparent);
}

.ap-cover__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.ap-cover .ap-cover__label {
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 9px !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	opacity: 0.7;
}

.ap-cover__rule { height: 1px; width: 1.5rem; background: var(--ap-red); }
.ap-cover--red .ap-cover__rule { background: var(--ap-paper); }

.ap-cover .ap-cover__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--ap-font-display), Georgia, serif !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.015em !important;
	font-size: 1.25rem !important;
	color: inherit !important;
}

.ap-cover .ap-cover__subtitle {
	margin: 0.5rem 0 0 !important;
	padding: 0 !important;
	font-family: var(--ap-font-display), Georgia, serif !important;
	font-style: italic !important;
	font-size: 11px !important;
	line-height: 1.35 !important;
	opacity: 0.75;
}

.ap-cover__bottom {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.ap-cover .ap-cover__author {
	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.02em !important;
}

.ap-cover__dot { height: 0.375rem; width: 0.375rem; border-radius: 9999px; background: var(--ap-red); }
.ap-cover--red .ap-cover__dot { background: var(--ap-paper); }

/* Small cover variant (compact issue cards, author mini-covers) */
.ap-cover.ap-cover--sm { padding: 1rem; }
.ap-cover.ap-cover--sm .ap-cover__title { font-size: 1rem !important; }
.ap-cover.ap-cover--sm .ap-cover__label { font-size: 9px !important; }
.ap-cover.ap-cover--sm .ap-cover__author { font-size: 9px !important; }

/* Large cover variant (hero-scale cover) */
.ap-cover.ap-cover--lg { padding: 2rem; }
.ap-cover.ap-cover--lg .ap-cover__label { font-size: 10px !important; }
.ap-cover.ap-cover--lg .ap-cover__title { font-size: 1.875rem !important; }

@media (min-width: 768px) {
	.ap-cover { padding: 1.5rem; }
	.ap-cover .ap-cover__title { font-size: 1.5rem !important; }
	.ap-cover .ap-cover__subtitle { font-size: 0.75rem !important; }
	.ap-cover.ap-cover--sm { padding: 1rem; }
	.ap-cover.ap-cover--sm .ap-cover__title { font-size: 1rem !important; }
	.ap-cover.ap-cover--lg { padding: 2.5rem; }
	.ap-cover.ap-cover--lg .ap-cover__title { font-size: 2.25rem !important; }
}

@media (min-width: 1024px) {
	.ap-cover.ap-cover--lg .ap-cover__title { font-size: 2.75rem !important; }
}

/* Real cover IMAGES already carry their own shadow/reflection, so drop the
   widget's card shadow and hover lift when an image cover is used. Placeholder
   (typographic) covers keep their shadow. */
.ap-book-shadow:has(.ap-cover--image) { box-shadow: none; }
.ap-book-shadow:has(.ap-cover--image):hover { box-shadow: none; transform: none; }

/* ---------------- Entrance animation ---------------- */
@keyframes ap-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

.ap-fade-up { animation: ap-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ap-fade-up--delay { animation-delay: 150ms; }

@media (prefers-reduced-motion: reduce) {
	.ap-fade-up { animation: none; }
}

/* ---------------- Email capture form ---------------- */
.ap-email {
	display: flex;
	width: 100%;
	max-width: 28rem;
}

.ap-email--center { margin-inline: auto; justify-content: center; }

.ap-email .ap-email__input {
	height: 3rem;
	min-width: 0;
	flex: 1;
	border: 1px solid var(--ap-border);
	background: transparent;
	padding: 0 1rem;
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 0.875rem !important;
	color: var(--ap-ink) !important;
	outline: none;
	transition: border-color 0.25s ease;
}

.ap-email .ap-email__input::placeholder { color: var(--ap-muted); }
.ap-email .ap-email__input:focus { border-color: var(--ap-red); }

.ap-email .ap-email__btn {
	height: 3rem;
	flex-shrink: 0;
	background: var(--ap-red);
	color: var(--ap-paper) !important;
	border: 0;
	padding: 0 1.25rem;
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif !important;
	font-size: 0.875rem !important;
	font-weight: 500 !important;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.ap-email .ap-email__btn:hover { background: var(--ap-ink); }

/* Inverted (on ink backgrounds) */
.ap-email--inverted .ap-email__input {
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--ap-paper) !important;
}
.ap-email--inverted .ap-email__input::placeholder { color: rgba(255, 255, 255, 0.5); }

/* ---------------- Sale price ---------------- */
.ap-price-was {
	color: var(--ap-muted);
	text-decoration: line-through;
	margin-right: 0.4em;
	font-weight: 400;
	opacity: 0.85;
}
.ap-price-now {
	text-decoration: none;
	color: inherit;
	font-weight: 500;
}

/* ---------------- Out of stock ---------------- */
.ap-book-shadow { position: relative; }

.ap-stock-badge {
	display: inline-block;
	font-family: var(--ap-font-body), ui-sans-serif, system-ui, sans-serif;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-paper);
	background: var(--ap-ink);
	padding: 0.3em 0.6em;
	line-height: 1;
}

.ap-stock-badge--cover {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 3;
	background: var(--ap-red);
}

/* Dim the cover of an out-of-stock book. */
.ap-grid__card--out .ap-cover,
.ap-spage__card--out .ap-cover,
.ap-series__item--out .ap-cover {
	opacity: 0.5;
	filter: saturate(0.7);
}

/* "Out of stock" text where a price would be. */
.ap-grid__price-out,
.ap-spage__price--out,
.ap-hero__meta-price--out {
	color: var(--ap-red) !important;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.8125rem !important;
}