/*
 * book-single.css — Book single page styles (acs-book-head element).
 *
 * Exact Figma values applied (كتاب.png desktop frame).
 * Iterative items flagged with comments:
 *   - cover overhang margin-block-end: tune on staging so cover bottom ≈ 40px below mint band.
 *   - post-content wrapper: uses .acs-postcontent__body (confirmed from post-content.php).
 *   - vertical accent on .acs-section__title::after: verify flip from horizontal to vertical on staging.
 *
 * Dependencies: acs-home (design tokens), acs-single (breadcrumb, shared singles).
 */

/* ── Inner wrapper ──────────────────────────────────────────────────────────── */
.acs-book__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* ── Root wrapper ───────────────────────────────────────────────────────────── */
.acs-book-head {
	background: #fff;
}

/* ── Breadcrumb sits on white above the hero band ──────────────────────────────
   Site rule: 32px below the top menu, 32px above the mint hero band. */
.acs-book-head .acs-breadcrumb {
	margin-block: 32px 32px;
}

/* ── Mint hero band ──────────────────────────────────────────────────────────── */
.acs-book-head__hero {
	background: #E5EFED;
	padding: 56px 60px;
	position: relative;
	overflow: visible;
}

/*
 * Hero inner wrapper: override the generic .acs-book__inner padding so
 * the 60px hero padding (applied to __hero itself) handles horizontal rhythm.
 */
.acs-book-head__hero .acs-book__inner {
	padding-inline: 0;
}

/* ── Layout row: cover (right) → text (middle) → share (left) ───────────────── */
/*
 * RTL: first DOM child = visually RIGHT.
 * Order: .acs-book-head__cover | .acs-book-head__text | .acs-book__share
 */
.acs-book-head__layout {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 24px;
}

/* ── Cover frame ─────────────────────────────────────────────────────────────── */
.acs-book-head__cover {
	flex: 0 0 503px;
	width: 503px;
	height: 404px;
	box-sizing: border-box;
	background: rgba(156, 153, 154, 0.08);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	/* overhang: tune so cover bottom ≈ 40px below the mint band — verify on staging */
	margin-block-end: -96px;
}

/* ── Cover image ─────────────────────────────────────────────────────────────── */
.acs-book-head__cover-img {
	width: 210px;
	height: 280px;
	object-fit: cover;
	border-radius: 3.5px;
	box-shadow:
		0px 7.01px 8.76px -5.25px rgba(0, 0, 0, 0.1),
		0px 17.52px 21.89px -4.38px rgba(0, 0, 0, 0.1);
}

/* ── Text block (title + meta + buttons) ─────────────────────────────────────── */
.acs-book-head__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

/* ── H1 title ────────────────────────────────────────────────────────────────── */
.acs-book-head__title {
	font-family: 'Readex Pro', sans-serif;
	font-weight: 500;
	font-size: 32px;
	line-height: 150%;
	color: #000;
	padding-block: 16px;
	margin: 0;
}

/* ── Meta grid ───────────────────────────────────────────────────────────────── */
.acs-book__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 64px;
	row-gap: 24px;
	margin-block-start: 24px;
	margin-block-end: 0;
	padding: 0;
}

.acs-book__meta-cell {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.acs-book__meta-label {
	font-family: 'Readex Pro', sans-serif;
	font-weight: 500;
	font-size: 16px;
	color: #9C999A;
	white-space: nowrap;
}

/* Base value weight: 14/300; date cell is also 14/300 (inferred minor — flag on staging if Figma differs) */
.acs-book__meta-value {
	font-family: 'Readex Pro', sans-serif;
	font-weight: 300;
	font-size: 14px;
	color: #9C999A;
	margin: 0;
}

/* Authors: 12/400 per Figma */
.acs-book__meta-authors {
	font-weight: 400; /* inferred */
	font-size: 12px;
}

.acs-book__meta-authors a,
.acs-book__meta-authors .acs-bookcard__author {
	color: #068788;
	text-decoration: none;
}

.acs-book__meta-authors a:hover,
.acs-book__meta-authors .acs-bookcard__author:hover {
	text-decoration: underline;
}

.acs-book__meta-authors .acs-bookcard__sep {
	color: #9C999A;
	padding-inline: 4px;
}

/* ── Action buttons ──────────────────────────────────────────────────────────── */
.acs-book-head__buttons {
	display: flex;
	gap: 16px;
	margin-block-start: 64px;
}

.acs-book-head__btn {
	width: 151px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border-radius: 4px;
	font-family: 'Readex Pro', sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

/* تصفح الكتاب = teal */
.acs-book-head__btn--browse {
	background: #068788;
}

.acs-book-head__btn--browse:hover {
	opacity: 0.88;
}

/* شراء الكتاب = yellow */
.acs-book-head__btn--buy {
	background: #CB9B2A;
}

.acs-book-head__btn--buy:hover {
	opacity: 0.88;
}

/* ── Share rail (last DOM child = LEFT in RTL) ───────────────────────────────── */
.acs-book__share {
	align-self: center;
	padding-inline-start: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex-shrink: 0;
}

/* If acs_workshop_share_links renders a row internally, force column */
.acs-book__share > * {
	flex-direction: column; /* inferred — verify share links output on staging */
}

/* ── Book description (acs-post-content element) ─────────────────────────────── */
/* post-content.php root = .acs-postcontent; body = .acs-postcontent__body */
/* verify post-content wrapper class on staging — confirmed from post-content.php */
body.single-book .acs-postcontent {
	padding: 24px;
}

body.single-book .acs-postcontent__body,
body.single-book .acs-postcontent__body .acs-postcontent__scale {
	font-family: 'Readex Pro', sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 150%;
	color: #231F20;
}

/* ── «اقرأ أيضاً» related books section ─────────────────────────────────────── */
/*
 * Scoped under .acs-book-related so we do NOT restyle acs_section_heading()
 * (.acs-section__head / .acs-section__title) elsewhere on the site.
 * margin-block-start: 32px represents gap after description — combine to ~64px
 * if the design shows two 32px spacers; 32px is the safe baseline. /* inferred */
 */
.acs-book-related {
	background: #fff;
	padding-inline: 60px;
	padding-block-end: 32px;
	margin-block-start: 32px; /* inferred — tune on staging */
}

.acs-book-related .acs-book__inner {
	padding-inline: 24px;
}

/* 24px from section heading to the grid */
.acs-book-related .acs-section__head {
	padding-block-start: 22px;
	margin-block-end: 24px;
}

/* «اقرأ أيضاً» uses the SITE-STANDARD section-heading accent — the horizontal
   52×4 line below the title (8px gap) from acs_section_heading() / acs-single.
   No override here, so it matches every other heading on the site. */

/* ── Responsive — graceful mobile stack (≤ 900px) ───────────────────────────── */
@media (max-width: 900px) {
	.acs-book-head__hero {
		padding: 32px 24px;
	}

	.acs-book-head__layout {
		flex-direction: column;
		align-items: stretch;
	}

	/* Drop the overhang on mobile — no design for it */
	.acs-book-head__cover {
		flex: none;
		width: 100%;
		height: auto;
		min-height: 220px;
		margin-block-end: 0;
	}

	.acs-book-head__cover-img {
		width: 160px;
		height: 213px;
	}

	.acs-book__meta {
		grid-template-columns: 1fr;
	}

	/* Share rail becomes horizontal on mobile */
	.acs-book__share {
		flex-direction: row;
		align-self: flex-start;
		padding-inline-start: 0;
	}

	.acs-book__share > * {
		flex-direction: row; /* inferred */
	}

	.acs-book-related {
		padding-inline: 24px;
	}
}

@media (max-width: 600px) {
	.acs-book__inner {
		padding-inline: 16px;
	}

	.acs-book-head__cover-img {
		width: 130px;
		height: 173px;
	}

	.acs-book-head__buttons {
		flex-direction: column;
		margin-block-start: 32px;
	}

	.acs-book-head__btn {
		width: 100%;
	}

	.acs-book-related {
		padding-inline: 16px;
		padding-block-end: 20px;
	}

	.acs-book-related .acs-section__head {
		margin-block-end: 16px;
	}
}