/*
 * enw-pages.css — the two catalogue pages the design system never grew a
 * component for: the search results page (books.php) and the PDF topic page
 * (pdfs.php).
 *
 * Loaded LAST, and only by those two pages ($ebnExtraCss in each file). Both
 * pages still carry legacy markup — .book-grid, .book-card, .country-combo-strip,
 * .tabs-nav — and the legacy sheets are loaded first, so the rules here are the
 * final word on these classes *on these pages only*. Nothing in this file is
 * allowed to invent a colour: every value is a palette token, which is what makes
 * the nine themes work here too.
 *
 * What was actually wrong, measured at 1440×900 on the live page:
 *
 *   .book-card-btn        margin-top: 12px     — so cards ended wherever their
 *                                                title happened to end and the
 *                                                grid had a ragged bottom edge.
 *   .book-card-title      no line clamp        — a long title added a third line
 *                                                and pushed the card taller still.
 *   .tabs-nav             overflow-x: auto     — on a phone the row scrolled and
 *                                                clipped a tab mid-word, which is
 *                                                what "shabby" looked like.
 *   .country-combo-strip  wrap, gap 8          — 6 chips of unequal width wrapped
 *                                                2-up with a ragged second column.
 *   .empty-state          unbounded            — the "no books found" box ran the
 *                                                full 1400px width.
 *
 * All of it is CSS. The page markup, its queries and its URLs are unchanged.
 */

/* ══ Part 1 — the search results page (books.php) ══════════════════════════ */

/* The hero's own search field, whose button ran off the right edge on a phone:
   the legacy rule let the input keep its intrinsic width. Same fix the phone
   search needed — the field has to be allowed to shrink. */
.books-hero .hero-search-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--enw-sp-2, 0.5rem);
  max-width: 640px;
  margin-inline: auto;
}
.books-hero .hero-search-form input {
  flex: 1 1 12rem;
  min-inline-size: 0;
}
.books-hero .hero-search-form button {
  flex: 0 1 auto;
}

/* Breadcrumb: the same trail the book page prints, in the same voice. */
.breadcrumb-wrap {
  background: var(--enw-surface, #fff);
  border-block-end: 1px solid var(--enw-border, #e3e8ef);
}
.breadcrumb-wrap .breadcrumb-inner {
  max-width: var(--enw-page, 1400px);
  margin-inline: auto;
  padding: 10px 24px;
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: var(--enw-fs-sm, 0.875rem);
  color: var(--enw-text-muted, #6b7787);
}
.breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--enw-text, #10131a);
  text-decoration: underline;
}

/* Results strip: title, count, save control. Three things that wrap in the
   order they matter instead of fighting for one line. */
.results-strip {
  background: var(--enw-surface-2, var(--enw-surface, #fff));
  border-block-end: 1px solid var(--enw-border, #e3e8ef);
}
.results-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--enw-sp-2, 0.5rem) var(--enw-sp-4, 1rem);
  max-width: var(--enw-page, 1400px);
  margin-inline: auto;
  padding: 12px 24px;
}
.results-strip .results-title {
  min-inline-size: 0;
  font-family: var(--enw-font-display, inherit);
  font-size: var(--enw-fs-lg, 1.125rem);
  font-weight: 700;
  line-height: var(--enw-lh-tight, 1.25);
}
.count-badge {
  flex: none;
  padding: 0.25rem 0.7rem;
  border-radius: var(--enw-r-pill, 999px);
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-ink, #1f52c4);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 700;
  white-space: nowrap;
}
/* The save-list widget ships its own inline styles; this only stops it
   squashing on a phone. */
.save-list-widget {
  flex: 0 1 auto;
}

.main-container {
  max-width: var(--enw-page, 1400px);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Country filter.
   Desktop: a label and a wrapped row of chips, all on one baseline.
   Phone: the same row, one line, scrolled sideways — a row that is obviously
   scrollable reads as deliberate; two ragged columns read as broken. */
.country-combo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block: var(--enw-sp-4, 1rem) var(--enw-sp-3, 0.75rem);
}
.country-combo-label {
  flex: none;
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.country-chip {
  flex: none;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-pill, 999px);
  background: var(--enw-surface, #fff);
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.country-chip:hover {
  border-color: var(--enw-ink, #2f6fed);
  color: var(--enw-ink, #1f52c4);
}
.country-chip.active {
  background: var(--enw-primary, #2f6fed);
  border-color: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
}

@media (max-width: 640px) {
  .country-combo-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: 0.35rem;
    /* Room to scroll the first and last chip clear of the edge. */
    margin-inline: -24px;
    padding-inline: 24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .country-combo-strip::-webkit-scrollbar {
    display: none;
  }
  .country-combo-label {
    inline-size: 100%;
    margin-inline: 24px 0;
  }
}

/* Tabs (Books / Authors / Publishers / Categories).
   They used to scroll and clip. On a phone they now wrap onto a second line —
   four short labels fit 2×2 and nothing is cut in half. */
.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-block: var(--enw-sp-4, 1rem);
  border-block-end: 1px solid var(--enw-border, #e3e8ef);
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.75rem;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-block-end: 2px solid transparent;
  background: none;
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-sm, 0.875rem);
  font-weight: 600;
  cursor: pointer;
}
.tab-btn[aria-selected='true'],
.tab-btn.active {
  border-block-end-color: var(--enw-primary, #2f6fed);
  color: var(--enw-ink, #1f52c4);
}
.tab-badge {
  padding: 0.05rem 0.45rem;
  border-radius: var(--enw-r-pill, 999px);
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-ink, #1f52c4);
  font-size: var(--enw-fs-2xs, 0.6875rem);
  font-weight: 700;
}

/* "Page 2 of 19" — context for the controls without repeating the count that
   the results strip already prints. */
.filter-count {
  margin-inline-start: auto;
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs, 0.75rem);
  font-weight: 600;
  white-space: nowrap;
}

/* A market with no price used to leave the slot blank. "See price" is the
   honest label, in the muted voice of the metadata above it. */
.book-card-price.is-missing {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-sm, 0.875rem);
  font-weight: 600;
}

/* Sort row */
#sort-bar .filter-bar,
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block: var(--enw-sp-3, 0.75rem);
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-sm, 0.875rem);
  font-weight: 600;
}
.filter-select {
  inline-size: auto;
  min-block-size: 2.75rem;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-sm, 8px);
  background: var(--enw-surface, #fff);
  color: var(--enw-text, #10131a);
  font: inherit;
}

/* The grid. Fewer, larger columns on a wide screen than the legacy 7×180px,
   and two on a phone. */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  align-items: stretch;
}

/* The card. This is the whole ragged-bottom fix: the body is a column, the
   price and the button live in its foot, and the foot is pushed down. */
.book-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  overflow: hidden;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 12px);
  background: var(--enw-surface, #fff);
}
.book-card-img {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--enw-bg, #f4f6fa);
}
.book-card-img img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}
.book-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.75rem 0.85rem;
}
.book-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: var(--enw-fs-sm, 0.875rem);
  font-weight: 600;
  line-height: var(--enw-lh-snug, 1.375);
}
.book-card-meta-links {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-inline-size: 0;
}
.book-card-meta-link {
  display: block;
  overflow: hidden;
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-2xs, 0.6875rem);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-card-meta-link:hover {
  color: var(--enw-ink, #1f52c4);
  text-decoration: underline;
}
.book-card-price {
  margin-block-start: auto;
  color: var(--enw-text, #10131a);
  font-size: var(--enw-fs-md, 1rem);
  font-weight: 700;
}
/*
 * No price in this market is a fact worth printing, not a gap to leave.
 *
 * The empty line keeps its place in the layout — and, crucially, keeps the auto
 * margin below that pushes the footer down. It is the *element* that carries the
 * footer's `margin-block-start: auto`, so removing it (which is what the page used
 * to do) removed the alignment with it: those cards' buttons floated just under
 * the text while their neighbours' sat on the floor, and a row of them read as
 * ragged. Its box is zero-height, so nothing is drawn.
 */
.book-card-price:empty {
  display: block;
  block-size: 0;
  margin-block-start: auto;
  overflow: hidden;
}
.book-card-btn {
  display: block;
  /* One line of a fixed height, so every button in a row is the same size and its
     label sits in the same place whatever the text says. 44px is the smallest
     target that is comfortable on a phone; it used to be 36px. */
  block-size: 2.75rem;
  padding: 0.75rem;
  overflow: hidden;
  border-radius: var(--enw-r-sm, 8px);
  background: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
  font-size: var(--enw-fs-sm, 0.875rem);
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.book-card-btn:hover {
  filter: brightness(1.08);
}

/* The Authors / Publishers / Categories tabs. */
.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
  gap: 0.75rem;
  margin-block: var(--enw-sp-4, 1rem);
}
.entity-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 12px);
  background: var(--enw-surface, #fff);
  color: inherit;
  text-decoration: none;
}
.entity-card:hover {
  border-color: var(--enw-ink, #2f6fed);
}
.entity-info {
  min-inline-size: 0;
  flex: 1 1 auto;
}
.entity-name {
  overflow: hidden;
  font-size: var(--enw-fs-sm, 0.875rem);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.entity-count {
  color: var(--enw-text-muted, #6b7787);
  font-size: var(--enw-fs-xs, 0.75rem);
}

/* Empty states, bounded like the design system's own. Both of these used to run
   the full width of a 1400px page. */
.empty-state,
.books-page .empty-state {
  max-inline-size: 34rem;
  margin: var(--enw-sp-8, 2rem) auto;
  padding: var(--enw-sp-8, 2rem) var(--enw-sp-5, 1.25rem);
  border: 1px dashed var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-md, 12px);
  color: var(--enw-text-muted, #6b7787);
  text-align: center;
}

/* Pagination: centred, wrapped, and big enough to tap. */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-block: var(--enw-sp-8, 2rem);
}
.page-btn {
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: var(--enw-r-sm, 8px);
  background: var(--enw-surface, #fff);
  color: var(--enw-text, #10131a);
  font-size: var(--enw-fs-sm, 0.875rem);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.page-btn.active {
  background: var(--enw-primary, #2f6fed);
  border-color: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
}
.page-btn.dots {
  border-color: transparent;
  background: none;
}

@media (max-width: 640px) {
  .main-container {
    padding-inline: 16px;
  }
  .results-strip-inner,
  .breadcrumb-wrap .breadcrumb-inner {
    padding-inline: 16px;
  }
  .results-strip .results-title {
    flex: 1 1 100%;
    font-size: var(--enw-fs-md, 1rem);
  }
  .book-grid {
    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
    gap: 0.75rem;
  }
  .book-card-body {
    padding: 0.6rem 0.6rem 0.7rem;
  }
  .book-card-title {
    -webkit-line-clamp: 2;
  }
  .entity-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .tab-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ══ Part 2 — the PDF topic page (pdfs.php) ════════════════════════════════ */

/* A topic card: a letter medallion, the topic, and what it is. It is an
   .enw-card so it inherits the surface, border and radius; all this adds is the
   row layout inside it. */
.enw-pdf-topic {
  display: flex;
  align-items: center;
  gap: var(--enw-sp-3, 0.75rem);
  color: inherit;
  text-decoration: none;
}
.enw-pdf-topic:hover {
  border-color: var(--enw-ink, #2f6fed);
}
.enw-pdf-topic__ico {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--enw-r-sm, 8px);
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-ink, #1f52c4);
  font-weight: 800;
}
.enw-pdf-topic__body {
  display: grid;
  gap: 0.2rem;
  min-inline-size: 0;
}
.enw-pdf-topic__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--enw-fs-sm, 0.875rem);
  font-weight: 700;
  line-height: var(--enw-lh-snug, 1.375);
}
/* The badge is a label, not a block: it hugs its text. */
.enw-pdf-topic .enw-badge {
  justify-self: start;
}

/* The cross-sell card: copy on the left, the form on the right, stacked when
   there is no room for both. */
.enw-cross {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: var(--enw-sp-5, 1.25rem);
  align-items: center;
}
.enw-cross__form {
  display: flex;
  gap: var(--enw-sp-2, 0.5rem);
  align-items: flex-end;
}
.enw-cross__form .enw-field {
  flex: 1 1 auto;
  min-inline-size: 0;
}
.enw-cross__form .enw-btn {
  flex: none;
}

@media (max-width: 720px) {
  .enw-cross {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 460px) {
  .enw-cross__form {
    flex-direction: column;
    align-items: stretch;
  }
  .enw-cross__form .enw-btn {
    inline-size: 100%;
  }
}

/* ══ Part 3 — the search page's hero ══════════════════════════════════════

   `.books-hero` had NO rules at all in any sheet: the markup was written for a
   dark band that no longer exists (its own pills are white-on-translucent —
   i.e. built for a dark background), so on a white page the badge, the title,
   the subtitle and every quick pill were white or near-white on white. What
   follows is the missing half of that component, in the site's light header
   language: a hairline under the band, one muted lead, one primary action.
   ═════════════════════════════════════════════════════════════════════════ */

.books-hero {
  background: var(--enw-surface, #fff);
  border-block-end: 1px solid var(--enw-border, #e3e8ef);
}

.books-hero-inner {
  max-width: var(--enw-page, 1400px);
  margin-inline: auto;
  padding: clamp(28px, 3.2vw, 46px) 24px clamp(28px, 3.2vw, 42px);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-ink, #1f52c4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.badge-dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
}

.books-hero h1 {
  margin: 16px 0 0;
  color: var(--enw-text, #10131a);
  max-inline-size: 24ch;
}

.books-hero h1 .accent {
  color: var(--enw-primary, #2f6fed);
}

.books-hero-sub {
  margin: 12px 0 0;
  max-inline-size: 66ch;
  color: var(--enw-text-muted, #64748b);
  font-size: 15.5px;
  line-height: 1.6;
}

.books-hero .hero-search-form {
  margin: 24px 0 0;
  max-inline-size: 620px;
  flex-wrap: nowrap;
}

.books-hero .hero-search-form input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: 13px 16px;
  border: 1px solid var(--enw-border, #d8dee8);
  border-radius: 12px;
  background: var(--enw-surface, #fff);
  color: var(--enw-text, #10131a);
  font: inherit;
  font-size: 15px;
}

.books-hero .hero-search-form input::placeholder {
  color: var(--enw-text-muted, #94a3b8);
}

.books-hero .hero-search-form button {
  flex: none;
  padding: 13px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.books-hero .hero-search-form button:hover {
  background: var(--enw-ink, #1f52c4);
}

.hero-hint {
  margin: 14px 0 0;
  color: var(--enw-text-muted, #64748b);
  font-family: var(--enw-font-mono, ui-monospace, monospace);
  font-size: 12.5px;
}

.quick-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 16px;
}

.quick-pill {
  padding: 7px 14px;
  border: 1px solid var(--enw-border, #e3e8ef);
  border-radius: 999px;
  background: var(--enw-surface, #fff);
  color: var(--enw-text-muted, #475569);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
}

.quick-pill:hover {
  border-color: var(--enw-primary, #2f6fed);
  color: var(--enw-ink, #1f52c4);
}

@media (max-width: 560px) {
  .books-hero .hero-search-form {
    flex-wrap: wrap;
  }

  .books-hero .hero-search-form button {
    flex: 1 1 100%;
  }
}

/* ══ Part 4 — the PDFs page hero ══════════════════════════════════════════

   Same story as `.books-hero` above: the markup is here, the component is not.
   `.pdf-hero` had no background, no title colour and no field layout in any
   sheet the page loads — the dark-band rules that used to draw it are gone — so
   the badge, the headline and the field were sitting on the page background at
   paragraph size. Restated in the light header language, matching the search
   page so the two catalogue pages look like siblings.
   ═════════════════════════════════════════════════════════════════════════ */

.pdf-hero {
  display: block;
  padding: clamp(28px, 3.2vw, 46px) 24px clamp(28px, 3.2vw, 42px);
  background: var(--enw-surface, #fff);
  border-block-end: 1px solid var(--enw-border, #e3e8ef);
  text-align: start;
}

.pdf-hero > * {
  max-inline-size: var(--enw-page, 1400px);
  margin-inline: auto;
}

.pdf-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--enw-primary-tint, #eaf1ff);
  color: var(--enw-ink, #1f52c4);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}

.pdf-hero h1 {
  margin: 16px auto 0;
  max-inline-size: 24ch;
  color: var(--enw-text, #10131a);
  letter-spacing: -.02em;
}

.pdf-hero h1 span {
  color: var(--enw-primary, #2f6fed);
}

.pdf-hero p {
  margin: 12px auto 0;
  max-inline-size: 66ch;
  color: var(--enw-text-muted, #64748b);
  font-size: 15.5px;
  line-height: 1.6;
}

.pdf-search-form {
  display: flex;
  max-inline-size: 620px;
  margin: 22px auto 0;
  border: 1px solid var(--enw-border, #d8dee8);
  border-radius: 12px;
  background: var(--enw-surface, #fff);
  overflow: hidden;
  box-shadow: none;
}

.pdf-search-form input {
  flex: 1 1 auto;
  min-inline-size: 0;
  padding: 13px 16px;
  border: 0;
  background: transparent;
  color: var(--enw-text, #10131a);
  font: inherit;
  font-size: 15px;
}

.pdf-search-form button {
  flex: none;
  padding: 13px 22px;
  border: 0;
  background: var(--enw-primary, #2f6fed);
  color: var(--enw-on-primary, #fff);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.pdf-hero-hint {
  margin: 14px auto 0;
  color: var(--enw-text-muted, #64748b);
  font-family: var(--enw-font-mono, ui-monospace, monospace);
  font-size: 12.5px;
}

@media (max-width: 560px) {
  .pdf-search-form {
    flex-wrap: wrap;
  }

  .pdf-search-form button {
    flex: 1 1 100%;
  }
}

/* Left-aligned like the search page: the badge, the headline, the lead and the
   field all start on the same edge, instead of a left badge above a centred
   title. */
.pdf-hero h1,
.pdf-hero p,
.pdf-hero-hint,
.pdf-search-form {
  margin-inline: 0;
}