/*
 * ApexIQ Press page styles.
 * Loaded via the pageStyleFile front-matter key on src/apexiq-press.njk.
 *
 * Created 2026-08-13 with the CSP style-src hardening. It holds two things:
 * the book-jacket zoom modal rules that used to sit in an inline <style> block
 * on the page, and the book-card layout that used to be 75 inline style="..."
 * attributes. Every rule reproduces its inline original at identical computed
 * values; the conversion was gated on a pixel diff of the rendered page.
 */

/* --------------------------------------------------------------------------
   Book jacket zoom modal (moved verbatim from the page's inline <style>)
   -------------------------------------------------------------------------- */
.book-card-unit{
  transition:transform 200ms ease;
}
.book-card-unit:hover{
  transform:translateY(-3px);
}
#jacket-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  background:rgba(15,20,30,0.88);
  display:none;
  align-items:center;
  justify-content:center;
  padding:2rem;
  cursor:zoom-out;
}
#jacket-modal.is-open{
  display:flex;
}
#jacket-modal img{
  max-width:min(400px,90vw);
  max-height:90vh;
  width:auto;
  height:auto;
  border-radius:var(--radius-md);
  box-shadow:0 24px 64px rgba(0,0,0,0.5);
  cursor:default;
}
#jacket-modal-close{
  position:fixed;
  top:1.25rem;
  right:1.25rem;
  width:2.5rem;
  height:2.5rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.1);
  color:#fff;
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 160ms ease;
}
#jacket-modal-close:hover{
  background:rgba(255,255,255,0.22);
}

/* --------------------------------------------------------------------------
   Book card: catalogue grid
   -------------------------------------------------------------------------- */
.book-grid{
  gap:var(--space-8);
  align-items:start;
}
.book-card-unit__stack{
  display:flex;
  flex-direction:column;
  gap:0;
}

/* --------------------------------------------------------------------------
   Book card: summary (the always-visible <summary> row)

   The disclosure and the buy panel below it are two halves of one visual card,
   so the disclosure loses its bottom border and bottom radii and the buy panel
   loses its top border and top radii; together they read as a single unit.
   -------------------------------------------------------------------------- */
.book-disclosure{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-bottom:none;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow:var(--shadow-sm);
}
/* Scoped for the same reason as .book-body below: the shared stylesheet's
   `.disclosure-card summary` (0,1,1) beats a bare `.book-summary` (0,1,0), and
   its ≤760px media query drops the padding to var(--space-6). The inline style
   this replaces held var(--space-8) at every width, so this must too. It shows
   up only below 760px — the desktop geometry diff passes either way. */
.disclosure-card > .book-summary{
  padding:var(--space-8);
}
.book-summary__inner{
  display:flex;
  gap:var(--space-5);
  align-items:flex-start;
  min-width:0;
  flex:1;
  margin-right:var(--space-4);
}
.book-summary__text{
  min-width:0;
}
.book-zoom{
  background:none;
  border:0;
  padding:0;
  cursor:zoom-in;
  flex-shrink:0;
}
.book-jacket{
  width:100px;
  height:auto;
  display:block;
  border:1px solid rgba(0,71,171,0.12);
  border-radius:var(--radius-md);
  box-shadow:2px 4px 16px rgba(0,0,0,0.12);
}
.book-tags{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  flex-wrap:wrap;
  margin-bottom:var(--space-3);
}

/* --------------------------------------------------------------------------
   Book card: expanded body
   -------------------------------------------------------------------------- */
/* Scoped to beat `.disclosure-card > div { padding: 0 var(--space-8) var(--space-8) }`
   in the shared stylesheet, which is (0,1,1) and would otherwise win over a bare
   `.book-body` (0,1,0). The inline style this replaces beat it on inline
   precedence. The book card supplies its own padding on the inner blocks, so the
   disclosure's default padding must not apply here — including inside the
   stylesheet's mobile media query, which this also outranks on specificity. */
.disclosure-card > .book-body{
  padding:0;
}
.book-body__main{
  padding:var(--space-6) var(--space-8);
}
.book-block__body{
  color:var(--color-text);
  margin:0;
}

/* --------------------------------------------------------------------------
   Book card: publication facts and ISBNs
   -------------------------------------------------------------------------- */
.book-body__facts{
  padding:var(--space-5) var(--space-8);
  border-top:1px solid rgba(0,71,171,0.08);
}
.book-facts-row{
  display:flex;
  gap:var(--space-8);
  margin-bottom:var(--space-4);
}
.book-fact__label{
  margin-bottom:2px;
}
.book-fact__value{
  font-size:var(--text-sm);
  font-weight:500;
  color:var(--color-text);
  margin:0;
}
.book-isbn-panel{
  background:var(--color-surface);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  padding:var(--space-3) var(--space-4);
}
.book-isbn-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--space-4);
}
.book-isbn-value{
  font-size:var(--text-xs);
  font-family:monospace;
  color:var(--color-text);
}
.book-isbn-divider{
  height:1px;
  background:var(--color-border);
  margin:var(--space-2) 0;
}

/* --------------------------------------------------------------------------
   Book card: buy panel (the lower half of the card, see .book-disclosure)
   -------------------------------------------------------------------------- */
.book-buy{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-top:none;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:var(--space-4) var(--space-8) var(--space-8);
}