/**
 * @file        book-detail.css
 * @description The five bands of the book detail page, including the compact
 *              practitioner band that makes R05's ordering survive 375px
 *
 * @author      Thomas Dobler - SYNTHETIXMIND LTD
 * @email       tom@synthetixmind.com
 * @company     SYNTHETIXMIND LTD, Paphos, Cyprus
 * @url         https://synthetixmind.com
 *
 * @uid         a2f60d38-7195-4e4b-b8c0-3d97e1a4f52c
 * @version     0.0.1.2
 * @created     2026-09-11
 * @updated     2026-09-14
 *
 * @copyright   (c) 2026 by SYNTHETIXMIND LTD
 * @license     Proprietary — All rights reserved
 */

/* --- Band 1: Hero (FR12, M06) -------------------------------------------- */

.hero__grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

/* WHY the cover is capped at 200px on mobile: the hero's height is the single
 * biggest contributor to how far the primary retailer button sits down the
 * page. A full-width cover on a 375px viewport pushes the buy band past the
 * one-scroll budget on its own. */
.hero__cover {
  max-width: 200px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.hero__title {
  margin-bottom: var(--space-2);
}

.hero__subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.hero__author {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.hero__tagline {
  font-size: var(--text-lg);
  max-width: var(--measure);
}

.hero__why {
  max-width: var(--measure);
}

@media (min-width: 768px) {
  .hero__grid {
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: var(--space-6);
    align-items: start;
  }

  .hero__cover { max-width: 100%; }
}

/* --- Band 2: Practitioner (FR13, R05) ------------------------------------
 *
 * This band sits between the hero and the buy buttons. That ordering is the
 * product thesis, and it is also the project's biggest UX risk (PRD Journey 2:
 * a book buyer must not perceive obstruction).
 *
 * Below --bp-md the band collapses to ONE LINE plus an inline link, ~88–96px,
 * so it costs under one thumb-swipe. The full card appears only where vertical
 * space is not scarce. Ordering is preserved at every viewport; only the
 * treatment changes.
 *
 * ACCEPTANCE TEST: at 375×667 the primary retailer button must be reachable
 * within one scroll. Verified by projectfiles/tests/e2e/book-detail-375.spec.ts.
 */

.practitioner {
  /* Tight block padding is the whole mechanism — do not replace with --space-8. */
  padding-block: var(--space-4);
}

.practitioner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.practitioner__statement {
  margin: 0;
  font-size: var(--text-base);
}

/* Framed as "this book came out of this practice", never "Book a call now" —
 * the first extends the visitor's catalogue mental model, the second violates
 * it. The copy lives in the translation catalogue; this rule is why. */
.practitioner__link {
  color: var(--text-on-dark);
  font-weight: 600;
}

/* At --bp-md and above there is vertical room for the full card treatment. */
@media (min-width: 768px) {
  .practitioner {
    padding-block: var(--space-6);
  }

  .practitioner__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-5);
  }

  .practitioner__statement {
    font-size: var(--text-lg);
    max-width: var(--measure);
  }
}

/* --- Band 3: Buy (FR14–FR17) ---------------------------------------------
 * The buy affordance must be visible in its expected form — recognisable
 * buttons with retailer names — so the catalogue model is confirmed rather
 * than frustrated. */

.buy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.buy__item { margin: 0; }

/* FR16: the primary platform is emphasised over secondaries. The emphasis is
 * carried by fill + weight, not by colour alone (NFR21). */
.buy__button--primary {
  font-size: var(--text-lg);
}

.buy__format {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  display: block;
  margin-top: var(--space-1);
}

/* FR15: remaining platforms behind a toggle. <details> is used rather than a
 * scripted disclosure so the control works with JavaScript disabled (NFR28).
 * FR14 is satisfied because the PRIMARY button is never inside this element. */
.buy__more {
  margin-top: var(--space-4);
}

.buy__more > summary {
  cursor: pointer;
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  color: var(--text-link);
  font-weight: 600;
}

.buy__more[open] > summary {
  margin-bottom: var(--space-3);
}

/* --- Band 4: Detail (FR19) ----------------------------------------------- */

.detail__description {
  max-width: var(--measure);
}

.detail__meta {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm);
}

.detail__meta > div {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.detail__meta dt {
  font-weight: 600;
  margin: 0;
}

.detail__meta dd {
  margin: 0;
  color: var(--text-secondary);
}

/* .chip-list and .chip MOVED to components/site-chrome.css on 2026-09-14.
 * They were used by the header, the footer, the article page, the webinar page
 * and components/chips.html.twig, none of which load THIS file - so only the
 * book page ever had chips. Site-wide markup needs a site-wide sheet. */

/* --- Band 5: Recirculation (FR18, FR20) ---------------------------------- */

.recirc__placeholder {
  max-width: var(--measure);
  color: var(--text-secondary);
}