/*
 * Ketabbin 1.1 — cinematic composition refinements.
 * Loaded after the base and component layers so existing feature pages keep
 * their styling while the global header and home composition match the
 * approved visual direction.
 */

:root {
	--shell: min(1480px, calc(100% - 56px));
	--header-height: 78px;
}

.kb-main {
	padding-top: var(--header-height);
}

.kb-header {
	height: var(--header-height);
	background: color-mix(in srgb, var(--paper) 94%, transparent);
	box-shadow: 0 12px 42px rgba(1, 12, 22, .08);
}

.admin-bar .kb-header {
	top: 32px;
}

.kb-header__inner {
	direction: ltr;
	display: grid;
	grid-template-columns: minmax(260px, 1fr) 126px minmax(500px, 1.35fr);
	gap: 28px;
}

.kb-header__nav-side {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	direction: rtl;
	display: flex;
	align-items: center;
	gap: 24px;
	min-width: 0;
}

.kb-search-link {
	flex: 0 0 auto;
	border-color: transparent;
}

.kb-search-link:hover {
	border-color: var(--line-strong);
	color: var(--amber);
}

.kb-nav {
	justify-self: auto;
	min-width: 0;
}

.kb-nav ul {
	direction: rtl;
	gap: clamp(16px, 1.65vw, 30px);
}

.kb-nav a {
	font-size: 11px;
	letter-spacing: -.15px;
}

.kb-nav .current-menu-item > a::after {
	bottom: -29px;
}

.kb-brand {
	position: static;
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	transform: none;
	width: 126px;
	display: grid;
	place-items: center;
}

.kb-brand .custom-logo-link,
.kb-default-logo {
	display: grid;
	place-items: center;
	line-height: 0;
}

.kb-brand .custom-logo,
.kb-default-logo img {
	display: block;
	width: auto;
	max-width: 122px;
	height: 58px;
	object-fit: contain;
}

.kb-default-logo {
	position: relative;
}

.kb-default-logo img:last-child {
	position: absolute;
	inset: 0;
	margin: auto;
}

.kb-default-logo__light {
	display: none !important;
}

html[data-theme="light"] .kb-default-logo__dark {
	display: none !important;
}

html[data-theme="light"] .kb-default-logo__light {
	display: block !important;
}

.kb-header__actions {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	direction: rtl;
	gap: 12px;
}

.kb-account-link {
	padding-inline: 7px;
	white-space: nowrap;
}

.kb-theme-switch {
	border-color: transparent;
}

.kb-theme-switch:hover {
	border-color: var(--line);
}

/* Hero: physical left is always the book and physical right is always copy. */
.kb-hero {
	direction: ltr;
	min-height: 520px;
	display: grid;
	grid-template-columns: minmax(0, 1.72fr) minmax(340px, .68fr);
	background: var(--surface);
	border-color: var(--line);
	isolation: isolate;
}

.kb-hero__copy {
	grid-column: 2;
	grid-row: 1;
	direction: rtl;
	position: relative;
	z-index: 3;
	padding: 62px 58px 58px 72px;
	background:
		linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--surface) 78%, transparent) 20%, var(--surface) 42%),
		var(--surface);
}

.kb-hero__copy::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 1px;
	background: linear-gradient(transparent, var(--line-strong), transparent);
}

.kb-hero h1 {
	font-size: clamp(50px, 4.35vw, 74px);
	line-height: 1.28;
	letter-spacing: -3.5px;
	margin: 22px 0 16px;
}

.kb-hero__copy p {
	max-width: 390px;
	font-size: 13px;
	line-height: 2;
}

.kb-hero__copy .kb-button {
	min-width: 180px;
	margin-top: 21px;
	align-self: flex-start;
}

.kb-hero__book {
	grid-column: 1;
	grid-row: 1;
	direction: rtl;
	position: relative;
	min-height: 520px;
	background-color: #020d18;
	background-image: url("../images/ketabbin-hero-book.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	overflow: hidden;
	perspective: 1600px;
}

.kb-hero__book::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(2, 13, 24, .06), transparent 54%, rgba(2, 13, 24, .24)),
		linear-gradient(0deg, rgba(2, 13, 24, .13), transparent 35%);
	pointer-events: none;
}

html[data-theme="light"] .kb-hero__book {
	background-color: #e7e9e8;
	background-image: url("../images/ketabbin-hero-book-light.webp");
}

html[data-theme="light"] .kb-hero__book::before {
	background: linear-gradient(90deg, rgba(231, 233, 232, .02), transparent 60%, rgba(231, 233, 232, .32));
}

/* A lightweight interactive page layer sits over the photographed book. */
.kb-book-pages {
	position: absolute;
	z-index: 2;
	left: 47.3%;
	bottom: 20.5%;
	width: 28%;
	height: 46%;
	transform-style: preserve-3d;
	perspective: 1150px;
	pointer-events: none;
}

.kb-book-pages span {
	position: absolute;
	inset: 0;
	transform-origin: 2% 100%;
	transform: rotateY(calc(var(--page) * 1deg));
	clip-path: polygon(1% 100%, 9% 7%, 94% 15%, 100% 94%, 93% 100%);
	background:
		repeating-linear-gradient(180deg, transparent 0 12px, rgba(50, 42, 32, .11) 13px 14px),
		linear-gradient(105deg, #d8c8aa 0, #f3ead7 18%, #e7d8bd 82%, #c4ad87 100%);
	border: 1px solid rgba(126, 101, 63, .34);
	box-shadow: -10px 10px 25px rgba(0, 0, 0, .18);
	opacity: .24;
	backface-visibility: visible;
	transition: transform .16s cubic-bezier(.2, .75, .25, 1), opacity .2s;
}

html[data-theme="light"] .kb-book-pages span {
	opacity: .19;
}

.kb-hero__book:hover .kb-book-pages span {
	opacity: .36;
}

.kb-book-pages span:nth-child(2) { opacity: .27; }
.kb-book-pages span:nth-child(3) { opacity: .30; }
.kb-book-pages span:nth-child(4) { opacity: .33; }
.kb-book-pages span:nth-child(5) { opacity: .36; }
.kb-book-pages span:nth-child(6) { opacity: .39; }

.kb-hero__hint {
	position: absolute;
	z-index: 3;
	right: 24px;
	bottom: 26px;
	display: flex;
	align-items: center;
	gap: 11px;
	direction: ltr;
	color: rgba(241, 234, 220, .65);
	font-size: 9px;
	pointer-events: none;
}

.kb-hero__hint i {
	width: 48px;
	height: 1px;
	background: var(--amber);
}

html[data-theme="light"] .kb-hero__hint {
	color: rgba(7, 27, 44, .66);
}

.kb-index-mark {
	z-index: 5;
	top: 76px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	line-height: 1;
}

.kb-index-mark i {
	height: 122px;
	margin: 0;
}

.kb-index-mark--start {
	right: 18px;
}

.kb-index-mark--end {
	right: auto;
	left: 18px;
}

/* Match the approved lower fold: products left, conversation center, events right. */
.kb-home-grid {
	direction: ltr;
	grid-template-columns: minmax(0, 1.55fr) minmax(250px, .58fr) minmax(330px, .9fr);
	background: var(--paper);
}

.kb-home-grid > div {
	direction: rtl;
	border-left: 0;
	border-right: 1px solid var(--line);
	padding: 30px;
}

.kb-home-grid > div:first-child {
	border-right: 0;
}

.kb-product-row {
	gap: 14px;
}

.kb-product-card h3 {
	font-size: 12px;
}

.kb-section-head {
	margin-bottom: 20px;
}

@media (max-width: 1280px) {
	.kb-header__inner {
		grid-template-columns: minmax(210px, .75fr) 112px minmax(440px, 1.4fr);
		gap: 18px;
	}

	.kb-nav ul {
		gap: 15px;
	}

	.kb-theme-switch button {
		width: 27px;
	}

	.kb-hero__copy {
		padding-inline: 42px;
	}

	.kb-home-grid {
		grid-template-columns: minmax(0, 1.45fr) minmax(230px, .62fr) minmax(300px, .9fr);
	}
}

@media (max-width: 1100px) {
	:root {
		--shell: min(100% - 28px, 1080px);
		--header-height: 68px;
	}

	.kb-header__inner {
		grid-template-columns: 1fr 108px 1fr;
	}

	.kb-menu-toggle {
		display: grid;
	}

	.kb-header__nav-side {
		grid-column: 3;
		gap: 7px;
	}

	.kb-nav {
		position: fixed;
		top: calc(var(--header-height) + 12px);
		right: 14px;
		left: 14px;
		display: none;
		padding: 22px;
		background: var(--surface);
		border: 1px solid var(--line-strong);
		box-shadow: var(--shadow);
	}

	.admin-bar .kb-nav {
		top: calc(var(--header-height) + 44px);
	}

	.kb-nav.is-open {
		display: block;
	}

	.kb-nav ul {
		display: block;
	}

	.kb-nav li {
		border-bottom: 1px solid var(--line);
	}

	.kb-nav a {
		display: block;
		padding: 11px;
		font-size: 13px;
	}

	.kb-nav .current-menu-item > a::after {
		display: none;
	}

	.kb-account-link span {
		display: none;
	}

	.kb-hero {
		grid-template-columns: minmax(0, 1.45fr) minmax(310px, .72fr);
	}

	.kb-home-grid {
		grid-template-columns: 1fr 1fr;
	}

	.kb-home-products {
		grid-column: 1 / -1;
	}

	.kb-home-grid > div {
		border-top: 1px solid var(--line);
	}
}

@media (max-width: 782px) {
	.admin-bar .kb-header {
		top: 46px;
	}

	.admin-bar .kb-nav {
		top: calc(var(--header-height) + 58px);
	}
}

@media (max-width: 900px) {
	.kb-header {
		height: var(--header-height);
	}

	.kb-main {
		padding-top: var(--header-height);
	}

	.kb-brand .custom-logo,
	.kb-default-logo img {
		height: 50px;
		max-width: 106px;
	}

	.kb-hero {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(390px, 58vh);
	}

	.kb-hero__copy {
		grid-column: 1;
		grid-row: 1;
		padding: 46px 36px;
	}

	.kb-hero__book {
		grid-column: 1;
		grid-row: 2;
		min-height: 390px;
		background-position: 35% center;
	}

	.kb-hero__copy::before,
	.kb-index-mark {
		display: none;
	}

	.kb-book-pages {
		left: 47%;
	}

	.kb-home-grid {
		grid-template-columns: 1fr;
	}

	.kb-home-products {
		grid-column: auto;
	}

	.kb-home-grid > div {
		border-right: 0;
	}
}

@media (max-width: 620px) {
	:root {
		--shell: calc(100% - 20px);
	}

	.kb-header__inner {
		grid-template-columns: 1fr 94px 1fr;
		gap: 6px;
	}

	.kb-header__actions .kb-theme-switch,
	.kb-header__actions .kb-account-link {
		display: none;
	}

	.kb-search-link {
		display: grid !important;
	}

	.kb-hero h1 {
		font-size: 45px;
		letter-spacing: -2px;
	}

	.kb-hero__book {
		min-height: 330px;
		background-position: 36% center;
	}

	.kb-hero__hint {
		right: 14px;
		bottom: 16px;
	}

	.kb-hero__hint span {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kb-book-pages {
		display: none;
	}
}