/*
 * Catalog page (page-catalog.php, template-parts/catalogs/*): heading, filter chips + search,
 * the A4 "brochure" cover grid, "Load more" and the PDF preview dialog. Behaviour:
 * assets/js/catalogs.js (.is-loading on the grid, .is-in on new cards, dialog open/close).
 */

/* ---------- Hero ---------- */
.sl-catalogs-hero {
	border-bottom: 1px solid var(--sl-gray-200);
	background:
		radial-gradient(60rem 20rem at 85% -10%, color-mix(in srgb, var(--sl-accent) 8%, transparent), transparent 70%),
		var(--sl-gray-50);
}
.sl-catalogs-hero__inner { padding-block: 3.5rem 3rem; }
@media (min-width: 640px) {
	.sl-catalogs-hero__inner { padding-block: 5rem 4rem; }
}
.sl-catalogs-hero__title {
	max-width: 48rem;
	margin: .75rem 0 1.25rem;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1.875rem;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -.025em;
}
@media (min-width: 640px) {
	.sl-catalogs-hero__title { font-size: 2.25rem; line-height: 2.5rem; }
}
@media (min-width: 1024px) {
	.sl-catalogs-hero__title { font-size: 3rem; line-height: 1; }
}
.sl-catalogs-hero__text {
	max-width: 40rem;
	color: var(--sl-gray-600);
	font-size: .875rem;
	line-height: 1.625;
}
@media (min-width: 640px) {
	.sl-catalogs-hero__text { font-size: 1.125rem; line-height: 1.75rem; }
}

/* ---------- Filter bar ---------- */
.sl-catalogs { padding-block: 2rem 5rem; }
.sl-catalogs__bar {
	position: sticky;
	top: var(--sl-header-h, 80px);
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	margin-inline: -1rem;
	padding: .75rem 1rem;
	background: rgb(255 255 255 / .9);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--sl-gray-100);
}
@media (min-width: 1024px) {
	.sl-catalogs__bar { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; }
}
.sl-catalogs__chips {
	display: flex;
	gap: .5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
}
.sl-catalogs__chip {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: .5rem;
	padding: .5rem .875rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-pill);
	background: var(--sl-white);
	color: var(--sl-gray-700);
	font-size: .8125rem;
	line-height: 1.25rem;
	font-weight: 500;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: color var(--sl-duration) var(--sl-ease-std), background-color var(--sl-duration) var(--sl-ease-std), border-color var(--sl-duration) var(--sl-ease-std);
}
.sl-catalogs__chip:hover { border-color: var(--sl-black); color: var(--sl-black); }
.sl-catalogs__chip.is-active {
	border-color: var(--sl-black);
	background: var(--sl-black);
	color: var(--sl-white);
}
.sl-catalogs__chip-count {
	min-width: 1.25rem;
	padding: 0 .375rem;
	border-radius: var(--sl-r-pill);
	background: var(--sl-gray-100);
	color: var(--sl-gray-600);
	font-family: var(--sl-font-mono);
	font-size: 10px;
	line-height: 1.125rem;
	text-align: center;
}
.sl-catalogs__chip.is-active .sl-catalogs__chip-count { background: rgb(255 255 255 / .18); color: var(--sl-white); }
.sl-catalogs__search {
	position: relative;
	flex: 0 0 auto;
	width: 100%;
}
@media (min-width: 1024px) {
	.sl-catalogs__search { width: 18rem; }
}
.sl-catalogs__search-icon {
	position: absolute;
	top: 50%;
	left: .875rem;
	color: var(--sl-gray-400);
	transform: translateY(-50%);
	pointer-events: none;
}
.sl-catalogs__search input {
	width: 100%;
	padding: .5625rem 1rem .5625rem 2.5rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-pill);
	background: var(--sl-off-white);
	font-size: .875rem;
	line-height: 1.25rem;
	transition: border-color var(--sl-duration) var(--sl-ease-std), background-color var(--sl-duration) var(--sl-ease-std);
}
.sl-catalogs__search input:focus {
	border-color: var(--sl-black);
	background: var(--sl-white);
	outline: none;
	box-shadow: 0 0 0 1px var(--sl-black);
}
.sl-catalogs__status {
	margin: 1.5rem 0 1rem;
	color: var(--sl-gray-500);
	font-family: var(--sl-font-mono);
	font-size: .75rem;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* ---------- Grid ---------- */
.sl-catalogs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1rem;
	transition: opacity 200ms var(--sl-ease-std);
}
@media (min-width: 768px) {
	.sl-catalogs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
}
@media (min-width: 1280px) {
	.sl-catalogs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem 2rem; }
}
.sl-catalogs__grid.is-loading:not([data-sl-loader]) { opacity: .35; pointer-events: none; }
.sl-catalogs__empty {
	padding-block: 4rem;
	color: var(--sl-gray-500);
	text-align: center;
}
.sl-catalogs__more {
	display: flex;
	justify-content: center;
	margin-top: 3rem;
}
.sl-catalogs__more .sl-btn.is-loading { opacity: .6; pointer-events: none; }

/* ---------- Card: the "brochure" ----------
   Framed like the project / product cards: white panel with a hairline border, the brochure on
   an inset light stage, the actions in a footer row under a hairline; hover lifts the card. */
.sl-catalog-card {
	display: flex;
	flex-direction: column;
	padding: .5rem;
	border: 1px solid var(--sl-gray-200);
	border-radius: var(--sl-r-card);
	background: var(--sl-white);
	transition: transform var(--sl-duration) var(--sl-ease-std), box-shadow var(--sl-duration) var(--sl-ease-std), border-color var(--sl-duration) var(--sl-ease-std);
}
@media (hover: hover) {
	.sl-catalog-card:hover {
		border-color: var(--sl-gray-300);
		box-shadow: var(--sl-shadow-md);
		transform: translateY(-3px);
	}
}
/* New cards (from AJAX) rise in one after another; --i is set per card. */
.sl-catalog-card.is-in { animation: sl-catalog-in 480ms var(--sl-ease-apple) backwards; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes sl-catalog-in {
	from { opacity: 0; transform: translateY(18px) scale(.97); }
	to { opacity: 1; transform: none; }
}
.sl-catalog-card__cover {
	display: block;
	width: 100%;
	/* The stage: room right/bottom for the stacked-pages edge and the tilt. */
	padding: 1.25rem 1.75rem 1.75rem 1.25rem;
	border: 0;
	border-radius: calc(var(--sl-r-card) - .25rem);
	background: var(--sl-gray-50);
	cursor: pointer;
	perspective: 1200px;
}
.sl-catalog-card__book {
	position: relative;
	display: block;
	aspect-ratio: 210 / 297;
	overflow: hidden;
	border-radius: 3px var(--sl-r-img) var(--sl-r-img) 3px;
	background: var(--sl-gray-100);
	box-shadow:
		0 1px 2px color-mix(in srgb, var(--sl-black) 8%, transparent),
		0 12px 24px -12px color-mix(in srgb, var(--sl-black) 35%, transparent),
		4px 4px 0 -1px var(--sl-white),
		4px 4px 0 0 var(--sl-gray-200),
		8px 8px 0 -1px var(--sl-white),
		8px 8px 0 0 var(--sl-gray-200);
	transform-origin: left center;
	transition: transform 450ms var(--sl-ease-apple), box-shadow 450ms var(--sl-ease-apple);
}
/* Spine: a soft fold along the left edge. */
.sl-catalog-card__book::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	z-index: 2;
	width: 14px;
	background: linear-gradient(90deg, rgb(0 0 0 / .18), rgb(0 0 0 / .04) 45%, rgb(255 255 255 / .12) 60%, transparent);
	pointer-events: none;
}
.sl-catalog-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sl-catalog-card__shine {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / .35) 48%, transparent 60%);
	opacity: 0;
	transform: translateX(-60%);
	transition: transform 700ms var(--sl-ease-apple), opacity 300ms ease;
	pointer-events: none;
}
.sl-catalog-card__hover {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .4375rem .875rem;
	border-radius: var(--sl-r-pill);
	background: color-mix(in srgb, var(--sl-black) 85%, transparent);
	color: var(--sl-white);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: 0;
	transform: translate(-50%, 8px);
	transition: opacity 250ms ease, transform 350ms var(--sl-ease-apple);
}
@media (hover: hover) {
	.sl-catalog-card__cover:hover .sl-catalog-card__book {
		transform: rotateY(-14deg) rotateX(2deg) translateY(-6px);
		box-shadow:
			0 2px 4px color-mix(in srgb, var(--sl-black) 8%, transparent),
			18px 28px 40px -18px color-mix(in srgb, var(--sl-black) 45%, transparent),
			4px 4px 0 -1px var(--sl-white),
			4px 4px 0 0 var(--sl-gray-200),
			8px 8px 0 -1px var(--sl-white),
			8px 8px 0 0 var(--sl-gray-200);
	}
	.sl-catalog-card__cover:hover .sl-catalog-card__shine { opacity: 1; transform: translateX(60%); }
	.sl-catalog-card__cover:hover .sl-catalog-card__hover { opacity: 1; transform: translate(-50%, 0); }
}
.sl-catalog-card__cover:focus-visible { outline: none; }
.sl-catalog-card__cover:focus-visible .sl-catalog-card__book { box-shadow: 0 0 0 3px var(--sl-white), 0 0 0 5px var(--sl-black); }

/* Drawn cover (no image and no PDF preview): brand, title and year on a dark sheet. */
.sl-catalog-card__drawn {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.125rem 1.25rem 1.5rem;
	background:
		radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--sl-accent) 45%, transparent), transparent 60%),
		linear-gradient(160deg, #1a1d23, var(--sl-black) 60%);
	color: var(--sl-white);
	text-align: left;
}
.sl-catalog-card__drawn-brand {
	color: var(--sl-amber-400);
	font-family: var(--sl-font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}
.sl-catalog-card__drawn-title {
	margin-top: auto;
	font-family: var(--sl-font-display);
	font-size: clamp(1rem, 2.2vw, 1.5rem);
	line-height: 1.15;
	font-weight: 700;
	overflow-wrap: anywhere;
}
.sl-catalog-card__drawn-year {
	margin-top: .75rem;
	padding-top: .75rem;
	border-top: 1px solid rgb(255 255 255 / .2);
	color: rgb(255 255 255 / .7);
	font-family: var(--sl-font-mono);
	font-size: .75rem;
}

/* Card text. */
.sl-catalog-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .375rem;
	padding: 1rem .5rem 0;
}
.sl-catalog-card__cats {
	color: var(--sl-amber-600);
	font-family: var(--sl-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sl-catalog-card__title {
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1rem;
	line-height: 1.375rem;
	font-weight: 700;
}
.sl-catalog-card__text {
	display: -webkit-box;
	overflow: hidden;
	color: var(--sl-gray-600);
	font-size: .8125rem;
	line-height: 1.25rem;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.sl-catalog-card__meta {
	color: var(--sl-gray-500);
	font-family: var(--sl-font-mono);
	font-size: 11px;
}
.sl-catalog-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	/* Footer row: pushed to the bottom, full card width under a hairline. */
	margin: auto -1rem 0;
	padding: .75rem 1rem .25rem;
	border-top: 1px solid var(--sl-gray-100);
}
.sl-catalog-card__meta { margin-bottom: 1rem; }
.sl-catalog-card__actions .sl-btn { flex: 1 1 auto; }

/* ---------- PDF preview dialog ---------- */
.sl-pdf-modal {
	width: min(1040px, calc(100vw - 2rem));
	height: min(92vh, 1200px);
	max-width: none;
	max-height: none;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--sl-r-popup);
	background: var(--sl-white);
	box-shadow: 0 30px 80px rgb(0 0 0 / .4);
}
.sl-pdf-modal[open] { display: flex; flex-direction: column; animation: sl-pdf-in 300ms var(--sl-ease-apple); }
.sl-pdf-modal::backdrop { background: color-mix(in srgb, var(--sl-black) 60%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes sl-pdf-in {
	from { opacity: 0; transform: translateY(16px) scale(.98); }
	to { opacity: 1; transform: none; }
}
.sl-pdf-modal__head {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .75rem .75rem .75rem 1.25rem;
	border-bottom: 1px solid var(--sl-gray-200);
}
.sl-pdf-modal__title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var(--sl-black);
	font-family: var(--sl-font-display);
	font-size: 1rem;
	font-weight: 700;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sl-pdf-modal__frame {
	flex: 1 1 auto;
	width: 100%;
	border: 0;
	background: var(--sl-gray-100);
}

@media (prefers-reduced-motion: reduce) {
	.sl-catalog-card.is-in,
	.sl-pdf-modal[open] { animation: none; }
	.sl-catalog-card__book,
	.sl-catalog-card__shine,
	.sl-catalog-card__hover { transition: none; }
	.sl-catalog-card__cover:hover .sl-catalog-card__book { transform: none; }
	.sl-catalog-card { transition: none; }
	.sl-catalog-card:hover { transform: none; }
}

/* ---------- Customizer → Catalogs (body classes from inc/projects.php) ---------- */
@media (min-width: 1280px) {
	.sl-catcols-3 .sl-catalogs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sl-catcols-5 .sl-catalogs__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3rem 1.5rem; }
}
.sl-nocattilt .sl-catalog-card__cover:hover .sl-catalog-card__book { transform: none; }