/**
 * Catalogue, book card, product page.
 * Logical properties only — no physical left/right in flow layout.
 */

/* ---- Grid --------------------------------------------------------------- */

.jd-grid--books {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jd-space-10);
}

@media (max-width: 1080px) { .jd-grid--books { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .jd-grid--books { grid-template-columns: 1fr; } }

/* ---- Book card ---------------------------------------------------------- */

.jd-book {
	display: flex;
	flex-direction: column;
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	overflow: hidden;
	transition: border-color var(--jd-transition);
}

.jd-book:hover { border-color: var(--jd-hairline-strong); }

/* Covers stand on a shelf: a paper panel closed by a hairline. */
.jd-book__coverlink {
	display: grid;
	place-items: center;
	padding: var(--jd-space-12) var(--jd-space-10);
	background-color: var(--jd-paper);
	border-block-end: var(--jd-border);
	min-block-size: 220px;
}

.jd-book__cover {
	max-block-size: 180px;
	inline-size: auto;
	object-fit: contain;
}

/* Roughly two-thirds of the catalogue has no cover image, so this is the common
   case rather than an edge case. A navy plate carrying the title reads as a
   deliberate binding; a broken-image icon would dominate the shop page. */
.jd-book__cover--fallback {
	display: grid;
	place-items: center;
	inline-size: 128px;
	block-size: 180px;
	padding: var(--jd-space-8);
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	font-size: var(--jd-fs-2xs);
	line-height: 1.45;
	text-align: center;
}

.jd-book__body {
	display: flex;
	flex-direction: column;
	gap: var(--jd-space-5);
	padding: var(--jd-space-10);
	flex: 1 1 auto;
}

.jd-book__title {
	font-family: var(--jd-font-latin);
	font-size: var(--jd-fs-base);
	font-weight: 500;
	line-height: 1.4;
	color: var(--jd-ink);
}

.jd-book__title a { color: inherit; }

.jd-book__biblio {
	padding-block-start: var(--jd-space-5);
	border-block-start: var(--jd-border);
}

.jd-book__sep { margin-inline: var(--jd-space-3); }

.jd-book__pricerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jd-space-5);
	flex-wrap: wrap;
}

.jd-book__pricerow .price,
.jd-book__pricerow .woocommerce-Price-amount {
	font-family: var(--jd-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--jd-fs-lg);
	font-weight: 500;
	color: var(--jd-navy);
}

.jd-book__terms {
	font-size: var(--jd-fs-2xs);
	color: var(--jd-text-muted);
	margin-block-start: calc(var(--jd-space-3) * -1);
}

.jd-book__add { margin-block-start: auto; }

/* ---- Tags --------------------------------------------------------------- */

.jd-tag {
	display: inline-flex;
	align-items: center;
	font-size: var(--jd-fs-2xs);
	font-weight: 500;
	padding: var(--jd-space-1) var(--jd-space-5);
	border-radius: var(--jd-radius-tag);
	border: 1px solid currentColor;
	white-space: nowrap;
}

/* Emerald is reserved for digital/instant identity and used nowhere else. */
.jd-tag--digital { color: var(--jd-emerald); }
.jd-tag--print   { color: var(--jd-text-secondary); }

.jd-chip {
	display: inline-flex;
	align-items: center;
	font-size: var(--jd-fs-2xs);
	padding: var(--jd-space-3) var(--jd-space-6);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	color: var(--jd-text-secondary);
}

.jd-chip:hover {
	border-color: var(--jd-hairline-strong);
	color: var(--jd-navy);
	text-decoration: none;
}

/* ---- Catalogue layout --------------------------------------------------- */

.jd-catalog { padding-block: var(--jd-space-16); }

.jd-catalog__head { margin-block-end: var(--jd-space-12); }
.jd-catalog__title { font-size: var(--jd-fs-display); }

.jd-catalog__layout {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: var(--jd-space-16);
	align-items: start;
}

@media (max-width: 1080px) {
	.jd-catalog__layout { grid-template-columns: 1fr; }
}

.jd-catalog__toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jd-space-8);
	padding-block-end: var(--jd-space-8);
	margin-block-end: var(--jd-space-10);
	border-block-end: var(--jd-border);
	flex-wrap: wrap;
}

.jd-catalog__count { font-size: var(--jd-fs-sm); color: var(--jd-text-secondary); }

/* ---- Filters ------------------------------------------------------------ */

.jd-filters {
	position: sticky;
	inset-block-start: 88px;
	background-color: var(--jd-surface);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	padding: var(--jd-space-10);
}

.jd-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-block-end: var(--jd-space-8);
	border-block-end: var(--jd-border);
}

.jd-filters__title { font-size: var(--jd-fs-base); }
.jd-filters__clear { font-size: var(--jd-fs-2xs); color: var(--jd-text-secondary); }

.jd-filters__group {
	border: 0;
	margin: 0;
	padding: var(--jd-space-9) 0 0;
}

.jd-filters__legend { display: block; margin-block-end: var(--jd-space-6); padding: 0; }

.jd-filters__select {
	inline-size: 100%;
	min-block-size: 44px;
	padding-inline: var(--jd-space-6);
	background-color: var(--jd-paper);
	border: var(--jd-border);
	border-radius: var(--jd-radius-btn);
}

.jd-pills { display: flex; gap: var(--jd-space-3); }
.jd-pills--wrap { flex-wrap: wrap; }

/* The input stays in the DOM for keyboard and screen-reader use; only its box is
   visually hidden. display:none would remove it from the tab order entirely. */
.jd-pill input {
	position: absolute;
	opacity: 0;
	inline-size: 1px;
	block-size: 1px;
}

.jd-pill {
	flex: 1 1 auto;
	text-align: center;
	cursor: pointer;
}

.jd-pill span {
	display: block;
	min-block-size: 36px;
	line-height: 36px;
	font-size: var(--jd-fs-2xs);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	transition: background-color var(--jd-transition), color var(--jd-transition);
}

.jd-pill.is-active span,
.jd-pill input:checked + span {
	background-color: var(--jd-navy);
	border-color: var(--jd-navy);
	color: var(--jd-on-navy);
}

.jd-pill input:focus-visible + span {
	outline: 2px solid var(--jd-navy);
	outline-offset: 2px;
}

.jd-checklist { display: grid; gap: var(--jd-space-2); }

.jd-checklist__row {
	display: flex;
	align-items: center;
	gap: var(--jd-space-5);
	min-block-size: 36px;
	font-size: var(--jd-fs-sm);
	cursor: pointer;
}

.jd-checklist__name { flex: 1 1 auto; }
.jd-checklist__count { font-size: var(--jd-fs-2xs); color: var(--jd-text-muted); }

/* ---- Empty state -------------------------------------------------------- */

.jd-empty {
	padding: var(--jd-space-24) var(--jd-space-12);
	text-align: center;
	border: 1px dashed var(--jd-hairline);
	border-radius: var(--jd-radius-card);
}

.jd-empty__title { font-size: var(--jd-fs-title); margin-block-end: var(--jd-space-6); }
.jd-empty__body { color: var(--jd-text-secondary); margin-block-end: var(--jd-space-10); }

/* ---- Product page ------------------------------------------------------- */

.jd-product__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--jd-space-24);
	padding-block: var(--jd-space-16);
	align-items: start;
}

@media (max-width: 1080px) {
	.jd-product__top { grid-template-columns: 1fr; gap: var(--jd-space-12); }
}

.jd-product__gallery {
	background-color: var(--jd-paper);
	border: var(--jd-border);
	border-radius: var(--jd-radius-card);
	padding: var(--jd-space-16);
}

.jd-product__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--jd-space-6);
	font-size: var(--jd-fs-2xs);
	color: var(--jd-text-secondary);
	margin-block-end: var(--jd-space-6);
}

.jd-product__title {
	font-family: var(--jd-font-latin);
	font-size: var(--jd-fs-display);
	font-weight: 500;
	line-height: 1.3;
	margin-block-end: var(--jd-space-6);
}

.jd-product__unis { margin-block: var(--jd-space-10); }

.jd-product__unilist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jd-space-3);
	margin-block-start: var(--jd-space-5);
}

.jd-product__terms,
.jd-product__delivery {
	font-size: var(--jd-fs-2xs);
	color: var(--jd-text-muted);
	margin-block-start: var(--jd-space-6);
}

.jd-product__detail { padding-block-end: var(--jd-space-16); }
.jd-product__section { padding-block: var(--jd-space-14); border-block-start: var(--jd-border); }

.jd-prose { line-height: var(--jd-lh-body); max-inline-size: 68ch; }

.jd-datacard { display: grid; gap: 0; }

.jd-datacard__row {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	gap: var(--jd-space-8);
	padding-block: var(--jd-space-6);
	border-block-end: var(--jd-border);
}

@media (max-width: 768px) {
	.jd-datacard__row { grid-template-columns: 1fr; gap: var(--jd-space-2); }
}

.jd-datacard__key { font-size: var(--jd-fs-2xs); color: var(--jd-text-muted); }
.jd-datacard__val { margin: 0; }

/* ---- Section scaffolding ------------------------------------------------ */

.jd-section { padding-block: var(--jd-space-24); }

.jd-section__head {
	display: flex;
	align-items: baseline;
	gap: var(--jd-space-8);
	flex-wrap: wrap;
	margin-block-end: var(--jd-space-12);
}

.jd-section__kicker { flex-basis: 100%; }
.jd-section__title { font-size: var(--jd-fs-title); }
.jd-section__more { margin-inline-start: auto; font-size: var(--jd-fs-sm); }

/* ---- Hero --------------------------------------------------------------- */

.jd-hero {
	background-color: var(--jd-navy);
	color: var(--jd-on-navy);
	background-image: url("../img/pattern-navy.svg");
	background-repeat: repeat;
	background-size: 240px;
}

.jd-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: var(--jd-space-24);
	padding-block: var(--jd-space-24);
	align-items: center;
}

@media (max-width: 1080px) {
	.jd-hero__inner { grid-template-columns: 1fr; gap: var(--jd-space-16); }
}

.jd-hero__kicker { color: rgb(255 255 255 / .65); }

.jd-hero__title {
	font-size: var(--jd-fs-hero);
	line-height: var(--jd-lh-hero);
	color: var(--jd-on-navy);
	margin-block: var(--jd-space-6);
}

.jd-hero__sub {
	color: rgb(255 255 255 / .8);
	max-inline-size: 52ch;
	margin-block-end: var(--jd-space-12);
}

.jd-hero .jd-search {
	background-color: rgb(255 255 255 / .08);
	border-color: rgb(255 255 255 / .25);
	max-inline-size: none;
}

.jd-hero .jd-search__field { color: var(--jd-on-navy); }
.jd-hero .jd-search__field::placeholder { color: rgb(255 255 255 / .55); }
.jd-hero .jd-search__submit { color: rgb(255 255 255 / .8); }

.jd-hero__quick {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jd-space-3);
	margin-block-start: var(--jd-space-10);
}

.jd-hero__quicklink {
	font-size: var(--jd-fs-2xs);
	color: rgb(255 255 255 / .78);
	padding: var(--jd-space-3) var(--jd-space-6);
	border: 1px solid rgb(255 255 255 / .22);
	border-radius: var(--jd-radius-tag);
}

.jd-hero__quicklink:hover {
	color: var(--jd-on-navy);
	border-color: rgb(255 255 255 / .5);
	text-decoration: none;
}

.jd-hero__slide {
	background-color: rgb(255 255 255 / .06);
	border: 1px solid rgb(255 255 255 / .16);
	border-radius: var(--jd-radius-card);
	padding: var(--jd-space-12);
	text-align: center;
}

.jd-hero__cover { margin-inline: auto; max-block-size: 320px; inline-size: auto; }

.jd-hero__slidemeta { display: block; margin-block-start: var(--jd-space-10); }
.jd-hero__slidetitle { display: block; color: var(--jd-on-navy); font-size: var(--jd-fs-sm); }

.jd-hero__slideprice {
	display: block;
	margin-block-start: var(--jd-space-4);
	font-family: var(--jd-font-mono);
	color: var(--jd-on-navy);
}

.jd-hero__dots {
	display: flex;
	justify-content: center;
	gap: var(--jd-space-3);
	margin-block-start: var(--jd-space-8);
}

.jd-hero__dot {
	inline-size: 8px;
	block-size: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: rgb(255 255 255 / .3);
	cursor: pointer;
}

/* The one place gold sits on navy, so it uses the contrast tint. */
.jd-hero__dot[aria-selected="true"] { background-color: var(--jd-brass-on-navy); }

/* ---- Universities marquee ---------------------------------------------- */

.jd-unis__viewport { display: flex; overflow: hidden; }

.jd-unis__track {
	display: flex;
	flex: 0 0 auto;
	gap: var(--jd-space-12);
	padding-inline-end: var(--jd-space-12);
	animation: jd-marquee var(--jd-marquee-chips) linear infinite;
}

.jd-rtl .jd-unis__track { animation-name: jd-marquee-rtl; }

.jd-unis__viewport:hover .jd-unis__track,
.jd-unis__viewport:focus-within .jd-unis__track { animation-play-state: paused; }

.jd-unis__link {
	display: flex;
	align-items: center;
	gap: var(--jd-space-5);
	white-space: nowrap;
	padding: var(--jd-space-6) var(--jd-space-10);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	background-color: var(--jd-surface);
	font-size: var(--jd-fs-2xs);
	color: var(--jd-text-secondary);
}

.jd-unis__link:hover { border-color: var(--jd-hairline-strong); color: var(--jd-navy); text-decoration: none; }
.jd-unis__logo { max-block-size: 24px; inline-size: auto; }

/* ---- Steps -------------------------------------------------------------- */

.jd-steps__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jd-space-16);
}

@media (max-width: 768px) { .jd-steps__list { grid-template-columns: 1fr; } }  /* gridSteps is mob-only */

.jd-steps__item { padding-block-start: var(--jd-space-8); border-block-start: var(--jd-border); }

.jd-steps__num {
	display: block;
	font-family: var(--jd-font-display);
	font-size: var(--jd-fs-title);
	color: var(--jd-brass);
	margin-block-end: var(--jd-space-4);
}

.jd-steps__title { font-size: var(--jd-fs-base); margin-block-end: var(--jd-space-4); }
.jd-steps__body { font-size: var(--jd-fs-sm); color: var(--jd-text-secondary); }

/* ---- Quote -------------------------------------------------------------- */

.jd-quote__figure { max-inline-size: 60ch; margin-block-start: var(--jd-space-10); }

.jd-quote__text {
	font-family: var(--jd-font-display);
	font-size: var(--jd-fs-title);
	line-height: 1.75;
	color: var(--jd-navy);
	margin: 0;
}

.jd-quote__author {
	margin-block-start: var(--jd-space-8);
	font-size: var(--jd-fs-2xs);
	color: var(--jd-text-muted);
}

/* ---- Publishers --------------------------------------------------------- */

.jd-pubs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jd-space-10);
	align-items: center;
}

.jd-pubs__item {
	flex: 0 0 auto;
	padding: var(--jd-space-6) var(--jd-space-10);
	border: var(--jd-border);
	border-radius: var(--jd-radius-tag);
	background-color: var(--jd-surface);
}

.jd-pubs__logo { max-block-size: 34px; inline-size: auto; }