/* ============================================================
   CASTRIX PRESS — theme.css
   ------------------------------------------------------------
   Layout helpers and class names that only exist in the WP
   theme (the Next.js app uses route-specific layouts instead).
   Loads after site.css so it can lean on tokens + base classes.
   ============================================================ */

/* Section container — used by every page-level <section>. */
.cp-section {
  padding-block: var(--s-8);
}
.cp-section__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Generic responsive card grid. Variants below tune min cell width. */
.cp-grid {
  display: grid;
  gap: var(--s-5);
}
.cp-grid--books {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.cp-grid--authors {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cp-grid--series {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Book card — used in catalogue, author detail, series detail, home grid. */
/* An explicit display on a class (e.g. .cp-book-card below) overrides the UA
   [hidden]{display:none}, so JS-hidden elements would stay visible. Restore it.
   The catalogue filter relies on toggling the hidden attribute. */
[hidden] {
  display: none !important;
}

.cp-book-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease);
}
.cp-book-card:hover {
  transform: translateY(-2px);
  opacity: 1;
}
.cp-book-card__cover {
  background: var(--paper-2);
  border-radius: var(--r-2);
  overflow: hidden;
  aspect-ratio: 1 / 1.6;
  box-shadow: var(--shadow-cover);
}
.cp-book-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cp-book-card__meta h3 {
  font-size: var(--t-h3);
  margin: 0;
}
.cp-book-card__meta .metadata {
  display: block;
  margin-top: var(--s-1);
}

/* Author cards (roster + spotlight portrait). */
.cp-author-card {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--paper-2);
  border-radius: var(--r-4);
  text-decoration: none;
  color: inherit;
  border: var(--bw-1) solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.cp-author-card:hover {
  border-color: var(--accent);
  opacity: 1;
}
.cp-author-card__portrait {
  flex: 0 0 96px;
  width: 96px;
  height: 96px;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cp-author-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cp-author-card__meta h3 {
  margin: 0;
  font-size: var(--t-h3);
}

.cp-author-hero {
  padding-block: var(--s-9);
  background: var(--paper-2);
}
.cp-author-hero__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-7);
  align-items: center;
}
.cp-author-hero__portrait {
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  overflow: hidden;
}
.cp-author-hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 720px) {
  .cp-author-hero__inner {
    grid-template-columns: 1fr;
  }
}

/* Series. */
.cp-series-hero {
  padding-block: var(--s-9);
}
.cp-series-hero__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.cp-series-card {
  display: block;
  padding: var(--s-5);
  background: var(--paper-2);
  border-radius: var(--r-3);
  text-decoration: none;
  color: inherit;
}
.cp-series-card h3 {
  margin: 0 0 var(--s-2);
}

/* Series index rows: name links to the series, author links to the author.
   Both are plain (no underline / link colour); the name keeps its hover. */
.cp-series-row__name-link {
  text-decoration: none;
  color: inherit;
}
.cp-series-row__name-link:hover .cp-series-row__name {
  color: var(--magenta);
}
.cp-series-row__author a {
  color: inherit;
  text-decoration: none;
}
.cp-series-row__author a:hover {
  text-decoration: underline;
}

/* Also-by (author back-matter reading list). */
.cp-also-by {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
}
.cp-also-by__series {
  font-family: var(--font-titles);
  font-weight: 400;
  font-size: var(--t-h3);
  letter-spacing: 0.005em;
  color: var(--accent, var(--oxblood));
  margin: 0 0 var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule-soft);
}
.cp-also-by__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.cp-also-by__book {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cp-also-by__title {
  font-family: var(--font-titles);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.cp-also-by__title:hover {
  color: var(--magenta);
}
.cp-also-by__year {
  font-size: 14px;
  color: var(--ink-3);
}

/* Latest section on home. */
.cp-latest__heading {
  font-size: var(--t-display-sm);
  margin: var(--s-3) 0 var(--s-6);
  letter-spacing: var(--tracking-display);
}

/* ============================================================
   FSE HEADER RE-SKIN
   ------------------------------------------------------------
   parts/header.html uses native wp:site-logo + wp:navigation
   inside cp-header* groups. The ported cp-header CSS in
   site.css targets the *old* hand-written markup (bare anchors,
   <nav class="cp-header__nav">). These overrides bridge the
   gap: restore the flex row layout despite WP's is-layout-flow
   class, target the native logo/nav inner markup, and re-skin
   the mobile responsive drawer to match the cp- aesthetic.
   ============================================================ */

/* WP group layout defaults to flow; force flex for the header inner row. */
.cp-header__inner.is-layout-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Site logo: the .cp-wordmark className lands on the figure/div wrapper; the
   real link sits inside as .custom-logo-link. Pass the layout through. */
.cp-wordmark.wp-block-site-logo {
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
}
.cp-wordmark .custom-logo-link {
  display: flex;
  align-items: center;
}
.cp-wordmark .custom-logo {
  display: block;
  height: auto;
}

/* Native nav: kill the block container’s default flex justification — our
   .cp-header__inner already arranges columns — and inherit nav typography. */
.cp-header__nav.wp-block-navigation {
  flex: 1;
  justify-content: center;
}
.cp-header__nav .wp-block-navigation__container {
  gap: 28px;
}
/* The block emits <a class="wp-block-navigation-item__content"> instead of a
   bare <a>; map the original cp-header__nav anchor styling onto it. */
.cp-header__nav .wp-block-navigation-item__content {
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.cp-header__nav .wp-block-navigation-item__content:hover { opacity: 0.65; }
.cp-header__nav .current-menu-item .wp-block-navigation-item__content {
  border-bottom-color: var(--oxblood);
}

/* Right CTA: WP wraps the link in a <p class="wp-block-paragraph"> with default
   margin. Drop it so it sits inline with the rest of the header row. */
.cp-header__right .wp-block-paragraph,
.cp-header__right p {
  margin: 0;
  font-family: var(--font-script);
  font-size: var(--t-h3);
  line-height: 1;
}
.cp-header__right a {
  font-weight: 700;
  text-decoration: none;
  color: var(--pink);
  white-space: nowrap;
}

/* --- Mobile (<600px): re-skin WP's responsive drawer to the cp aesthetic.
   WP already handles the show/hide; we just restyle the burger + modal. */
.cp-header__nav .wp-block-navigation__responsive-container-open {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--oxblood);
}
.cp-header__nav .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--paper);
  border-left: 2px solid var(--oxblood);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
  padding: var(--s-6);
}
.cp-header__nav .wp-block-navigation__responsive-container-close {
  color: var(--ink-3);
}
.cp-header__nav .is-menu-open .wp-block-navigation__container {
  flex-direction: column;
  gap: var(--s-4);
  align-items: flex-start;
}
.cp-header__nav .is-menu-open .wp-block-navigation-item__content {
  font-size: var(--t-h3);
  border-bottom: none;
  padding-bottom: 0;
}

/* Featured-book hero cover. The ported site.css frames the 280px cover column
   but doesn't size the <img>; constrain it to the column with the 2:3 frame +
   cover shadow so it sits like the other book covers. */
.cp-feature__cover {
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: var(--shadow-cover);
  display: block;
}
.cp-feature__cover img {
  width: 100%;
  height: auto;
  display: block;
}

/* Catalogue archive. */
.cp-catalogue {
  padding-block: var(--s-9);
}

/* Prose for generic pages. */
.cp-prose {
  max-width: 64ch;
}
.cp-prose p {
  margin-block: var(--s-4);
}

/* ---------- Page title spacing ----------
   The ported display titles set very tight line-heights (.cp-book__title = 1,
   .display-sm = --lh-tight) and minimal bottom margin, which crowds multi-line
   titles and the element below. Loosen the inter-line spacing and give a more
   comfortable gap beneath. */
.cp-book__title,
.display-sm {
  line-height: var(--lh-snug);
  margin-bottom: var(--s-5);
}

/* ---------- Book carousel block ----------
   Shared Press block; Castrix styles the unstyled press-book-carousel__*
   classes. The cover holds a 2:3 frame and the image fills it with
   object-fit so portrait covers don't distort. */
.press-book-carousel {
  margin-block: var(--s-6);
}
.press-book-carousel__eyebrow {
  display: block;
  margin-bottom: var(--s-2);
}
.press-book-carousel__heading {
  font-size: var(--t-h2);
  margin: 0 0 var(--s-4);
}
.press-book-carousel__track {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-3);
  -webkit-overflow-scrolling: touch;
}
.press-book-carousel__card {
  flex: 0 0 200px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: transform var(--dur) var(--ease);
}
.press-book-carousel__card:hover {
  transform: translateY(-2px);
  opacity: 1;
}
.press-book-carousel__cover {
  aspect-ratio: 1 / 1.6;
  background: var(--paper-2);
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: var(--shadow-cover);
  display: flex;
  align-items: center;
  justify-content: center;
}
.press-book-carousel__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.press-book-carousel__no-cover {
  font-size: var(--t-small);
  color: var(--ink-4);
}
.press-book-carousel__title {
  font-family: var(--font-titles);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: var(--lh-snug);
}
.press-book-carousel__tagline {
  font-size: var(--t-small);
  color: var(--ink-3);
  line-height: var(--lh-snug);
}
.press-book-carousel--empty {
  padding: var(--s-4);
  color: var(--ink-4);
}

/* ---------- Bonus CTA block ----------
   The shared Press bonus-cta block emits unstyled press-bonus-cta__* classes;
   Castrix dresses it in the publisher palette (blush card, oxblood rule, pink
   button). The --no-cover modifier (used on a book's own page) drops the
   cover column. */
.press-bonus-cta {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5);
  margin-block: var(--s-6);
  background: var(--paper-2);
  border: var(--bw-1) solid var(--rule-soft);
  border-radius: var(--r-3);
}
.press-bonus-cta__cover {
  flex: 0 0 96px;
  border-radius: var(--r-2);
  overflow: hidden;
  box-shadow: var(--shadow-cover);
}
.press-bonus-cta__cover img {
  width: 100%;
  height: auto;
  display: block;
}
.press-bonus-cta__body {
  flex: 1;
}
.press-bonus-cta__headline {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.press-bonus-cta__sub {
  color: var(--ink-2);
  line-height: var(--lh-body);
  margin: 0 0 var(--s-4);
  max-width: 52ch;
}
.press-bonus-cta__button {
  display: inline-block;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  background: var(--pink);
  color: var(--on-pink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-cta-pink);
  transition: opacity var(--dur) var(--ease);
}
.press-bonus-cta__button:hover {
  opacity: 0.85;
}
.press-bonus-cta--empty {
  padding: var(--s-4);
  color: var(--ink-4);
}

/* Book-detail cover image. The ported site.css sizes the 320px cover *column*
   but not the <img> inside it (the Next.js app constrained the image in its
   own component). Constrain the raw WP thumbnail to the column width so it
   doesn't render at full size. */
.cp-book__cover img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-2);
  box-shadow: var(--shadow-cover);
}

/* Inline accent link. */
.cp-link {
  color: var(--magenta);
  text-decoration: none;
  font-weight: 600;
}
.cp-link:hover {
  opacity: 0.7;
}

/* ============================================================
   FSE SINGLE-BOOK OVERRIDES
   ------------------------------------------------------------
   The single-book FSE template wraps sections in wp:group blocks
   which get WP's .is-layout-flow class. That class is more
   specific than the raw .cp-book__* rules in site.css, so the
   two-column grid never applies. Restore it here with matching
   specificity.
   ============================================================ */

.wp-block-group.cp-book__inner.is-layout-flow {
  display: grid;
  grid-template-columns: 320px 1fr;
  column-gap: var(--s-8);
  row-gap: 0;
  align-items: start;
}

.wp-block-group.cp-book__cover.is-layout-flow {
  grid-column: 1;
  grid-row: 1 / span 10;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  position: sticky;
  top: 96px;
}

.wp-block-group.cp-book__title-block.is-layout-flow,
.wp-block-group.cp-book__blurb.is-layout-flow {
  grid-column: 2;
}

/* Retailer buttons — ported from @loud-ink-press/ui RetailerButtons.
   44×44 logo tiles grouped by section (Ebook / Audiobook / Paperback), with
   an Amazon store picker that expands under its button. */
.rb-root {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rb-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rb-section__label {
  font-size: var(--t-eyebrow, 11px);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow, 0.18em);
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
}
.rb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rb-btn {
  display: block;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}
.rb-btn:hover {
  opacity: 0.75;
  transform: translateY(-1px);
}
.rb-btn__icon {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
}
.rb-btn--active {
  opacity: 0.75;
}
.rb-picker-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 200ms ease;
}
.rb-picker-wrap--open {
  grid-template-rows: 1fr;
}
.rb-amazon-picker__list {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rb-amazon-picker__item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rb-amazon-picker__item:not(:last-child)::after {
  content: "·";
  color: var(--ink-3);
}
.rb-amazon-picker__item-link {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.rb-amazon-picker__item-link:hover {
  background: var(--paper-2);
}

@media (max-width: 900px) {
  .wp-block-group.cp-book__inner.is-layout-flow {
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
  }
  .wp-block-group.cp-book__cover.is-layout-flow {
    position: static;
    width: 100%;
  }
}