/*
 * 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;
}

/* Breadcrumb + hero content wrapper: 1440 cap with 60px side gutters. The mint
   band behind is full-width; these 60px gutters (mint shows through) sit between
   the 1440 wrapper edge and the white panel. The related section keeps the base
   1200/24 above — this scoped rule only touches the two wrappers in acs-book-head. */
.acs-book-head .acs-book__inner {
	max-width: 1440px;
	padding-inline: 60px;
}

/* ── Root wrapper ───────────────────────────────────────────────────────────── */
.acs-book-head {
	background: #F7F7F7;   /* page grey; the breadcrumb sits on it and the mint-framed white card pops */
}

/* ── 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 (BACK layer) — shows as a frame around the white panel ──────
   Figma Frame 11: a mint band behind a white content card. The mint is the full-
   width section background; its padding (top/bottom) + the capped inner (sides)
   make the mint frame around the white panel. */
.acs-book-head__hero {
	background: #E5EFED;         /* rgba(229,239,237,1) — FULL-WIDTH mint band, behind the HERO ROW ONLY */
	padding-block: 60px 0;       /* 60px mint above the card; NO bottom → mint ends where the hero row ends */
	position: relative;
	overflow: visible;
}

/* ── White content card (FRONT layer) — holds title + meta + buttons + share + cover */
.acs-book-head__panel {
	background: #fff;
	border-radius: 8px;
	padding: 16px 24px;   /* 16px top/bottom, 24px sides (client) */
	position: relative;
}
/* When the description follows, the hero panel keeps a FLAT bottom (0 padding) so
   the mint ends exactly at the hero row and the body block joins seamlessly. */
.acs-book-head__panel--open {
	border-radius: 8px 8px 0 0;
	padding-block-end: 0;
}

/* ── Body block — white, BELOW the mint band; continues the card (rounded bottom)
   and sits on the page grey (NO mint behind it). Aligns with the hero panel: same
   1440/60 inner + same 24px side padding. ────────────────────────────────────── */
.acs-book-head__bodypanel {
	background: #fff;
	border-radius: 0 0 8px 8px;
	padding: 0 24px 16px;   /* 0 top (joins the hero panel), 24px sides, 16px bottom */
}

/* ── 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;
}

/* Text + share grouped. On desktop this is just a transparent flex row (text ‖
   share-far-left); on mobile it becomes the white content card below the cover. */
.acs-book-head__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 24px;
}

/* ── Cover frame ─────────────────────────────────────────────────────────────── */
.acs-book-head__cover {
	flex: 0 0 450px;
	width: 450px;
	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;
	/* No overhang now that the body sits below the hero row inside the same panel. */
	margin-block-end: 0;
}

/* ── Cover image ─────────────────────────────────────────────────────────────── */
.acs-book-head__cover-img {
	width: 210px;
	height: 280px;
	object-fit: fill;
	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 745px;
	max-width: 745px;
	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 — 151×38, radius 4, Readex 14/500, 30px apart (Figma) ─────── */
.acs-book-head__buttons {
	display: flex;
	gap: 30px;
	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;
	line-height: 150%;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	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: flex-start;
	margin-inline-start: auto;   /* push the rail to the far LEFT of the row (RTL) — no side padding */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* The branded/coloured share buttons (acs_share_buttons_html → .acs-postcontent__share,
   coloured by single.css) stacked VERTICALLY — same icons as ACS: محتوى المنشور. */
.acs-book__share .acs-postcontent__share {
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

/* ── Book body (description) — rendered INSIDE the hero panel, below the row ──── */
.acs-book-head__body {
	padding-block: 24px;   /* 24px above + below the text; the panel adds 16px → 40px to the card bottom */
	font-family: 'Readex Pro', sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 150%;
	color: #231F20;
}
.acs-book-head__body-scale > :first-child { margin-top: 0; }
.acs-book-head__body-scale > :last-child { margin-bottom: 0; }
/* «المزيد» is phone-only — hidden by default; the ≤600 block shows it while clamped. */
.acs-book-head__more { display: none; }

/* ── 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: tablet stack (≤ 900px) ─────────────────────────────────────── */
@media (max-width: 900px) {
	.acs-book-head__hero {
		padding-block: 32px 0;   /* keep 0 bottom so the mint still ends with the hero row */
	}
	.acs-book-head .acs-book__inner {
		padding-inline: 24px;
	}

	/* Stack: cover on top, then the text + share group (also stacked). */
	.acs-book-head__layout { flex-direction: column; align-items: stretch; gap: 24px; }
	.acs-book-head__main   { flex-direction: column; gap: 24px; }

	.acs-book-head__cover {
		flex: none;
		align-self: center;
		width: 100%;
		max-width: 326px;
		height: auto;
		min-height: 220px;
		margin-block-end: 0;
	}
	.acs-book-head__cover-img { width: 210px; height: 280px; }

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

	/* Share becomes a horizontal row */
	.acs-book__share { flex-direction: row; align-self: flex-start; margin-inline-start: 0; }
	.acs-book__share .acs-postcontent__share { flex-direction: row; }

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

/* ── Responsive: phone (≤ 600px) — Figma «Mob_ صفحة الكتاب» spec ─────────────── */
@media (max-width: 600px) {
	.acs-book__inner,
	.acs-book-head .acs-book__inner { padding-inline: 16px; }

	/* Breadcrumb: styled site-wide now (see homepage.css mobile breadcrumb block). */

	/* MINT confined to the COVER: the band goes transparent and a full-bleed mint
	   strip (258px tall) is painted behind the cover only; everything below is on a
	   white content card. */
	.acs-book-head__hero {
		background: transparent;
		padding-block: 40px 0;   /* 40px from the breadcrumb down to the mint */
		position: relative;
	}
	.acs-book-head__hero::before {
		content: '';
		position: absolute;
		z-index: 0;
		top: 40px; left: 0; right: 0;
		height: 258px;
		background: #E5EFED;
	}
	.acs-book-head__hero > * { position: relative; z-index: 1; }

	/* Panel is now a passthrough (the white card is .acs-book-head__main below). */
	.acs-book-head__panel,
	.acs-book-head__panel--open {
		background: transparent;
		border-radius: 0;
		padding: 0;
	}

	/* Layout: cover (on the mint) → white content card. */
	.acs-book-head__layout { flex-direction: column; align-items: stretch; gap: 24px; }

	/* Cover frame 326×404, centred; its 8%-grey frame lets the mint show through. */
	.acs-book-head__cover {
		order: 0;
		flex: none;
		align-self: center;
		width: 326px;
		max-width: 100%;
		height: 404px;
		min-height: 0;
		margin-block-end: 0;
	}
	.acs-book-head__cover-img { width: 210px; height: 280px; }

	/* White content card: 16px inside, 24px between blocks. Dissolve the text
	   wrapper so title / share / data / buttons can be re-ordered. */
	.acs-book-head__main {
		order: 1;
		align-self: stretch;
		flex-direction: column;
		gap: 24px;
		background: #fff;
		border-radius: 12px;
		padding: 16px;
	}
	/* main + body read as ONE white card: main keeps a FLAT bottom when a body
	   follows, and the body block rounds only its bottom (like the desktop join). */
	.acs-book-head__panel--open .acs-book-head__main {
		border-radius: 12px 12px 0 0;
		padding-block-end: 0;
	}
	.acs-book-head__text { display: contents; }

	/* Order: title → share → data → buttons (24px apart via the card gap). */
	.acs-book-head__title   { order: 0; padding-block: 0; font-size: 24px; }
	.acs-book__share        { order: 1; align-self: stretch; margin: 0; flex-direction: row; justify-content: center; }
	.acs-book__meta         { order: 2; grid-template-columns: 1fr; row-gap: 24px; margin: 0; }
	.acs-book-head__buttons { order: 3; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; gap: 30px; margin: 0; }

	.acs-book__share .acs-postcontent__share { flex-direction: row; justify-content: center; }

	.acs-book-head__btn { flex: 0 0 151px; width: 151px; height: 38px; }

	/* Body block joins the content card seamlessly (rounded bottom only, no gap). */
	.acs-book-head__bodypanel {
		border-radius: 0 0 12px 12px;
		padding: 0 16px 16px;
		margin-block-start: 0;
	}
	.acs-book-head__body { padding-block: 16px 0; }   /* 16px between the buttons and the body text */

	/* Phone-only «المزيد» clamp (single.js initReadMore drops is-clamped on tap). */
	.acs-book-head__body.is-clamped .acs-book-head__body-scale {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: var(--acs-more-lines, 8);
		line-clamp: var(--acs-more-lines, 8);
		overflow: hidden;
		position: relative;
	}
	/* Figma fade over the last clamped lines, blending into #F7F7F7. */
	.acs-book-head__body.is-clamped .acs-book-head__body-scale::after {
		content: '';
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 72px;
		background: linear-gradient(180deg, rgba(247, 247, 247, 0) 0%, #F7F7F7 100%);
		pointer-events: none;
	}
	.acs-book-head__body.is-clamped .acs-book-head__more {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 44px;
		margin-block-start: 16px;
		padding-inline: 16px;
		border: 0;
		border-radius: 4px;
		background: #068788;
		color: #fff;
		font-family: 'Readex Pro', sans-serif;
		font-weight: 500;
		font-size: 16px;
		cursor: pointer;
	}

	/* ── «اقرأ أيضاً»: white inner card + peek carousel ──────────────────────── */
	.acs-book-related { padding: 24px 16px; }
	.acs-book-related .acs-book__inner {
		background: #fff;
		border-radius: 12px;
		padding: 24px;
	}
	.acs-book-related .acs-section__head { margin-block-end: 24px; padding-block-start: 0; }

	/* Grid → horizontal peek carousel. The track BLEEDS out of the inner card's
	   24px padding (margin-inline:-24 + padding:0 24) so its scroll width is the
	   full card width, not the padded 310px — that leaves a clear ~36px slice of
	   the next card visible so the user knows it slides. Same idea as the pubs/news
	   hero carousels, which sit at the full mobile width. */
	.acs-book-related .acs-booksgrid {
		display: flex;
		flex-wrap: nowrap;
		grid-template-columns: none;
		gap: 16px;
		max-width: none;
		margin-inline: -24px;
		padding: 0 24px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 24px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.acs-book-related .acs-booksgrid::-webkit-scrollbar { display: none; }
	.acs-book-related .acs-bookcard {
		flex: 0 0 282px;
		width: 282px;
		box-sizing: border-box;
		scroll-snap-align: start;
	}
	.acs-book-related .acs-bookcard__media { height: 278px; }
	.acs-book-related .acs-bookcard__img { width: 144px; height: 192px; }
	.acs-book-related .acs-bookcard__title { font-size: 16px; padding-block: 16px 0; }
	.acs-book-related .acs-bookcard__date { font-size: 16px; }
}